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中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
js实现石头剪刀布游戏
Oct 11 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符合PSR编程规范的实例分享
2016/12/21 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python中的函数作用域
2018/05/07 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python实现Dijkstra算法
2018/10/17 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
详解python中递归函数
2019/04/16 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
如何利用python 读取配置文件
2021/01/06 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
工程售后服务承诺书
2014/05/21 职场文书
新闻报道策划方案
2014/06/11 职场文书
合同审查法律意见书
2015/06/04 职场文书
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android