打字游戏

打字游戏

在网页上实现从天而降的打字游戏。

首先理下思路:

1、要实现不断生成字符。 =====》那么首先需要定时器不断生成divdiv里面的字符是随机生成的。再将这些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;

//divleft随机出现在页面的某个位置

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(){

//如果这个divtop大于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的生成位置是随机的。

 

 

Divtop值不断动态增加,即是下落。

posted on 2018-05-19 17:13  非洲难民喜丶  阅读(115)  评论(0编辑  收藏  举报