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 相关文章推荐
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
js实现右键菜单功能
Nov 28 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
原生JS实现拖拽效果
Dec 04 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下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
读jQuery之三(构建选择器)
2011/06/11 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
python可以用哪些数据库
2020/06/22 Python
Python如何输出百分比
2020/07/31 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
红色经典电影观后感
2015/06/18 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书