<! DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>打字游戏</title>
<style>
*{margin:0;
padding:0;
}
#div1{
width:100px;
height:30;
background-color:blue;
text-align:center;
position:absoulute;
z-index:1;
}
</style>
</head>
<body>
<div id="box">
<div id="div1">开始</div>
<div id="div2"></div>
</div>
<script>
var oBox=document.getElementById("box");
var oDiv1=document.getElementById("div1");
var winWidth=document.getElementElement.scrollWidth; //获取网页的宽度
var winHeight=document.getElementElement.scrollHeight;//获取网页的高度
oDiv1.onclick=function(){ //开始按钮的点击事件
game();//调用函数
}
function game(){
var all=setInterval(function(){
var oLetter=document.createElement("div");//创建一个新的div
oBox.appendChild(oLetter);//把新建的div赋值给box
oLetter.style.color=colorsl();//随机字母颜色
oLetter.style.fontSize = size1() + "px";//随机字体大小
oLetter.style.position = "absolute";//定位
oLetter.style.marginLeft = place1()+"px";//随机位置
oLetter.style.top = "-100px"//设置初始下来的位置
var random = String.fromCharCode(letter1());//随机字母
oLetter.innerHTML = random;
//下落运动定时器 每10ms落下6px
var arr = setInterval(function () {
oLetter.style.top = oLetter.offsetTop + 1 + "px";
//当偏移量超出页面时自焚
if (oLetter.offsetTop >winHeight) {
oLetter.remove();
}
},10)
},2000)
//添加键盘事件
document.onkeydown = function (ev) {
var ev = ev || window.event;
for (var i = 0; i < oBox.children.length; i++) {
//当键盘按下的字母=出现的oBox.children中字母相同时自焚
if (String.fromCharCode(ev.keyCode) == oBox.children[i].innerHTML) {
oBox.children[i].remove();
}
}
}
}
function place1(){//设置随机距离
retrun Math.floor(Math.random()*(winWidth-1+1)+1)
}
function colors1(){
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")"
}
function letter1(){//随机字母
return Math.floor(Math.random() * (90 - 65 + 1) + 65);
}
function size1(){//随机字母大小
return Math.floor(Math.random() * (90 - 50 + 1) + 50);
}
</script>
</body>
</html>