打字游戏
Posted wzx9543
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了打字游戏相关的知识，希望对你有一定的参考价值。
打字游戏
在网页上实现从天而降的打字游戏。
首先理下思路：
1、要实现不断生成字符。 =====》那么首先需要定时器不断生成div，div里面的字符是随机生成的。再将这些div插入到页面中。
2、让这些生成的div随机掉落 =====》即是每个生成的div绝对定位，再让left值随机。
3、运动函数 =====》 让每个生成的div top值添加一个速度，不断下落。到一定值再让它销毁。
4、键盘事件 =====》 将按下键盘时生成code值转换成字符串，与div内的字符串匹配。如果匹配成功，则让这个div销毁。
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
div{font-size:60px;position: absolute;}
</style>
</head>
<body>
</body>
</html>
<script src="../../JSweb/pool.js"></script>
<script>
/*
第一步：定时器不断生成div div里面的字符要是随机生成的
第二步：字母随机掉落
第三部：运动函数
第四部：键盘事件
*/
//不断的生成div
setInterval(function(){
//创建div
var div = document.createElement("div");
//随机生成一个大写字符
var str = String.fromCharCode(numRandom(65,90))
//将随机的字符赋值给div
div.innerHTML = str;
//将div的left随机出现在页面的某个位置
div.style.left = numRandom(200,1000)+"px";
//插入到页面
document.body.appendChild(div);
//让div动起来
move(div);
},500)
function move(obj){
//随机速度
var speed = numRandom(2,5);
var timer = setInterval(function(){
//如果这个div的top大于500的时候就自己销毁掉
if(obj.offsetTop>=500){
obj.remove()
clearInterval(timer);
}else{
//如果没有到500的时候就去执行运动的代码
obj.style.top = obj.offsetTop+speed+"px";
}
},100)
}
document.onkeydown = function(e){
var e = e||event;
var code = e.keyCode || e.which;
//将用户按下的code转换成字符
var str = String.fromCharCode(code);
//获取页面上所有的div
var aDiv = document.getElementsByTagName("div");
//将字符和页面上所有的div里面的字符进行比较如果成功就删除掉自身
for(var i=0;i<aDiv.length;i++){
if(str == aDiv[i].innerHTML){
aDiv[i].remove();
break;
}
}
}
</script>
div的生成位置是随机的。
Div的top值不断动态增加，即是下落。
以上是关于打字游戏的主要内容，如果未能解决你的问题，请参考以下文章