javascript实现简单打字游戏


Posted in Javascript onOctober 29, 2019

本文实例为大家分享了javascript打字游戏的具体代码,供大家参考,具体内容如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>传智打字游戏</title>
<style type="text/css">
 .label{
 position:absolute;left: 0px;
 }
</style>
<script type="text/javascript" src="game.js"></script>
</head>
<body>
 <div id="msg"></div>
 <input id="startBtn" type="button" value="开始游戏" οnclick="startGame(this)"/>
 <input type="button" value="停止游戏" οnclick="stopGame()"/>
</body>
</html>
var CODE = "QWERTYUIOPASDFGHJKLZXCVBNM";
var codeArray = [];
var number = 0; 
 
//创建随机字母 
function createCode(){
 //0-25
 var index = parseInt(Math.random()*26);
 return CODE.charAt(index);
};
 
//创建显示label方法
function createLabel(code){
 /**
 * <label class="label">
 A
 </label>
 */
 var label = document.createElement("label");
 label.className = "label";
 label.style.top = "50px";
 label.innerHTML = code;
 label.code = code;
 
 var html = document.documentElement;
 
 //所有label标签的x坐标
 var labelX = parseInt(Math.random()*html.clientWidth);
 if(labelX>100){
 labelX-=20;
 }
 
 label.style.left = labelX+"px";
 
 return label;
}
 
window.onload = function(){
 document.getElementById("startBtn").disabled = false;
 
 
 //注册键盘事件
 document.documentElement.οnkeydοwn=function(event){
 var keyCode = event.keyCode; //获取按下的吗
 var code = String.fromCharCode(keyCode);//A-Z
 for ( var i = 0; i < codeArray.length; i++) {
 //label标签
 var label = codeArray[i];
 if(label.code==code){
  clearInterval(label.interval_id);
  label.parentNode.removeChild(label);
  codeArray.splice(i,1);
  number+=10;
  
  document.getElementById("msg").innerHTML = number+"分";
 break;
 }
 }
 };
};
 
//让label标签慢慢的从上向下移动
function runLabelTop(label){
 
 //获取页面的高度
 var height = Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight);
 
 label.interval_id = setInterval(function(){
 //50px
 var top = parseInt(label.style.top);
 top+=1;
 //判断label是否已经超过页面的高度
 if(top>height-30){
 removeLabel(label,false);
 }else{
 label.style.top = top+"px";
 }
 },10);
}
 
//flag = false用户没有按下该字母
function removeLabel(label,flag){
 clearInterval(label.interval_id);
 label.parentNode.removeChild(label);
 codeArray.shift();
 number-=20;
 document.getElementById("msg").innerHTML = number+"分";
}
 
var game_id = null;
 
//开始游戏
function startGame(startButton){
 
 startButton.disabled = true;
 
 game_id = setInterval(function(){
 //创建要显示的字符
 var code =createCode();
 //创建一个label显示字符
 var label = createLabel(code);
 
 //让label标签慢慢向下移动,修改标签的style.top属性
 runLabelTop(label);
 
 //把label标签节加入到页面中
 document.body.appendChild(label);
 codeArray.push(label);
 },1000);
}
 
//停止游戏
function stopGame(){
 clearInterval(game_id);
 for ( var i = 0; i < codeArray.length; i++) {
 clearInterval(codeArray[i].interval_id);
 codeArray[i].parentNode.removeChild(codeArray[i]);
 }
 codeArray = [];
 document.getElementById("startBtn").disabled = false;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
js控制div弹出层实现方法
May 11 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
深入理解node.js之path模块
May 03 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
layui实现三级导航菜单
Jul 26 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
简单使用webpack打包文件的实现
Oct 29 #Javascript
vue 解决异步数据更新问题
Oct 29 #Javascript
VUE实现强制渲染,强制更新
Oct 29 #Javascript
js实现贪吃蛇小游戏
Oct 29 #Javascript
浅谈vue异步数据影响页面渲染
Oct 29 #Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 #Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 #Javascript
You might like
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python 正则表达式操作指南
2009/05/04 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python使用zip将list转为json的方法
2018/12/31 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python pytest进阶之fixture详解
2019/06/27 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
工程业务员工作职责
2013/12/07 职场文书
2014政务公开实施方案
2014/02/19 职场文书
销售经理岗位职责
2014/03/16 职场文书
双语教学实施方案
2014/03/23 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python