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 相关文章推荐
Javascript UrlDecode函数代码
Jan 09 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
node网页分段渲染详解
Sep 05 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
简单使用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
phpmyadmin的#1251问题
2006/11/25 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
新手入门常用代码集锦
2007/01/11 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
基于vue实现分页效果
2017/11/06 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
基于python 字符编码的理解
2017/09/02 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Python处理中文标点符号大集合
2018/05/14 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
家长会感言
2015/08/01 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
一文解答什么是MySQL的回表
2022/08/05 MySQL