js写的打字游戏，功能非常简洁，菜鸟可以看看，高手就别来了

65 阅读 0 评论 43 点赞

我是靠谱客的博主虚幻柜子，最近开发中收集的这篇文章主要介绍js写的打字游戏，功能非常简洁，菜鸟可以看看，高手就别来了，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

废话不多说，上代码


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>打字游戏</title>
<style>
.bool{
position:absolute;
height:40px;
width:40px;
line-height:40px;
background-color:red;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="divBg" style="position:absolute;left:40px;top:40px;">
</div>
</body>
<script type="text/javascript">
//　字母工厂，返回字母类对象，也就是div加了其他一些属性
function Bool(left,text,color){
// 创建字母类对象
var bool=new Object();
// 居左边距离：它的父对象
bool.left = 0;
// 距离顶部位置：它的父对象
bool.top = (divHeight-boolHeight);
// 要显示的字母
bool.text = text;
// 向容器中添加div
bgObj.append("<div class='bool' style='left:"+left+"px;top:"+(divHeight-boolHeight)+"px;text-align:center;'>" + text + "</div>");
// 添加的div对象
bool.obj =
$(".bool").eq($(".bool").length-1);
// 返回字母类对象
return bool;
}
// 所有字母
var bools=new Array();
// 时间对象
var winInterval;
// 运行时间次数
var count = 1;
// 边界高度
var divHeight=600;
// 边界宽度
var divWidth=400;
// 字母宽度
var boolWidth=40;
// 字母高度
var boolHeight=40;
// 移动的速度（px/s）
var speed=100;
// 总共字母数
var letterSum=0;
// 对了字母数
var rightLetterSum=0;
// 添加字母对象的容器
var bgObj = $(document.body);
// 游戏状态,0未开始 1开始 2暂停 3结束
var gameJyoutai = 0;
// 打字开始
function start(){
// 定时运行，100毫秒一次
winInterval=setInterval(function(){
// 定时运行的匿名函数
// 10次创建一个字母类对象
if(count%10==0){
// 随机创建字母对象并添加到所有字母队列
bools.push(new Bool(random(0,(divWidth-boolWidth)),String.fromCharCode(random(65,91)),"red"));
letterSum++;
}
// 迭代所有字母
for(var i=0;i<bools.length;i++){
// 向上位移
bools[i].top-=(speed/10);
bools[i].obj.css("top",bools[i].top+"px");
// 如果移动出界
if(bools[i].top<=0){
// 删除对象
bools[i].obj.remove();
window.clearInterval(bools[i].interval);
bools.splice(i,1);
i=i-1;
}
}
count++;
},100);
// 改变游戏状态
gameJyoutai	= 1;
}
// 暂停
function stop(){
window.clearInterval(winInterval);
// 改变游戏状态
gameJyoutai	= 2;
}
$(function(){
start();
});
// 产生随机数
function random(x,y) {
//x上限，y下限
return parseInt(Math.random() * (x - y + 1) + y);
}
// 注册键盘按下事件
$(document).keypress(function(e){
// 获取键盘的值
var text =String.fromCharCode(e.which);
// 暂停或者继续
if(e.which==13){
// 开始状态
if(gameJyoutai==1){
// 暂停
stop();
// 暂停状态
}else if(gameJyoutai==2){
// 继续
start();
}
}
// 暂停状态
if(gameJyoutai==2){
return ;
}
// 所有对的都删除
for(var i=0;i<bools.length;i++){
// 按下的字母存在
if(bools[i].text==text.toUpperCase()){
// 删除字母
bools[i].obj.remove();
window.clearInterval(bools[i].interval);
bools.splice(i,1);
i=i-1;
rightLetterSum++;
}
}
/*
// 只删除最上面的元素
if(bools.length!=0){
if(bools[0].text==text){
// 删除字母
bools[0].obj.remove();
window.clearInterval(bools[0].interval);
bools.splice(0,1);
}
}*/
});
</script>
</html>

用到的jquery自己下载就行。

转载于:https://www.cnblogs.com/lckblog/p/3402114.html