<! DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Typing Game</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; //Get the width of the web page
var winHeight=document.getElementElement.scrollHeight;//Get the height of the web page
oDiv1.onclick=function(){ //Start button click event
game();//Call the function
}
function game(){
var all=setInterval(function(){
var oLetter=document.createElement("div");//Create a new div
oBox.appendChild(oLetter);//Assign the newly created div to the box
oLetter.style.color=colorsl();//Random letter color
oLetter.style.fontSize = size1() + "px";//Random font size
oLetter.style.position = "absolute";//定位
oLetter.style.marginLeft = place1()+"px";//Random position
oLetter.style.top = "-100px"//Set the initial down position
var random = String.fromCharCode(letter1());//Random letters
oLetter.innerHTML = random;
//Drop motion timer drops 6px every 10ms
var arr = setInterval(function () {
oLetter.style.top = oLetter.offsetTop + 1 + "px";
// self-immolate when the offset exceeds the page
if (oLetter.offsetTop >winHeight) {
oLetter.remove ();
}
},10)
},2000)
//add keyboard event
document.onkeydown = function (ev) {
var house = house || window.event;
for (var i = 0; i < oBox.children.length; i++) {
//Self-immolation when the letter pressed by the keyboard = the same letter in the oBox.children that appears
if (String.fromCharCode(ev.keyCode) == oBox.children[i].innerHTML) {
oBox.children[i].remove();
}
}
}
}
function place1(){//Set random distance
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(){//Random letters
return Math.floor(Math.random() * (90 - 65 + 1) + 65);
}
function size1(){//Random letter size
return Math.floor(Math.random() * (90 - 50 + 1) + 50);
}
</script>
</body>
</html>