javascript实现简单打字游戏
更新时间：2019年10月29日 09:13:15 作者：_Dendy
这篇文章主要为大家详细介绍了javascript实现简单打字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了手机软键盘弹出时影响布局的解决方法的相关资料,大家开发移动端的软件时候，肯定会因为软键盘的弹窗影响布局，这里说下如何解决，需要的朋友可以参考下2016-12-12
IE6、IE7中获取Button元素的值的bug说明，大家在以后使用dom操作的朋友可以注意下。2011-08-08
这篇文章主要介绍了通过js实现压缩图片上传功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了基于JavaScript定位当前的地理位置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要给大家介绍了JS实现手写parseInt的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-09-09
这篇文章主要给大家介绍了关于如何通过非数字与字符的方式实现PHP WebShell的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。接下来通过本文给大家介绍Javascript的表单验证-初识正则表达式，对js表单验证正则表达式相关知识感兴趣的朋友一起学习吧2016-03-03
这篇文章主要介绍了js实现类似菜单风格的TAB选项卡效果代码,通过javascript鼠标事件及页面元素遍历实现tab切换的功能,非常简单实用,需要的朋友可以参考下2015-08-08
这篇文章主要给大家介绍了关于JavaScript实现页面中录音功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
在JavaScript中日期时间函数是一组用于操作和处理日期和时间的函数,这些函数可以用于获取当前日期和时间、格式化日期和时间、计算日期和时间的差异、转换日期和时间的格式等,这篇文章主要给大家介绍了关于Javascript日期时间函数的使用方法,需要的朋友可以参考下2024-02-02
最新评论