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 相关文章推荐
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
悬浮数字的实现案例
Feb 19 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
jquery 常用操作方法
2010/01/28 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python读写Redis数据库操作示例
2014/03/18 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python3 kubernetes api的使用示例
2021/01/12 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
安全大检查实施方案
2014/02/22 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android