javascript实现简单打字游戏

站长资源 2024/11/26 佚名

2 0 1

本文实例为大家分享了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="/UploadFiles/2021-04-02/game.js">



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;
}


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,打字游戏

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“javascript实现简单打字游戏”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

javascript实现简单打字游戏

vue 强制组件重新渲染(重置)的两种方案

简单使用webpack打包文件的实现

评论“javascript实现简单打字游戏”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接