打字游戲：
開(kāi)始狀態(tài)時(shí)，暫停按鈕禁用，開(kāi)始按鈕可用，點(diǎn)擊一次開(kāi)始按鈕后，開(kāi)始按鈕禁用，暫停按鈕可用，
然后開(kāi)始調(diào)用計(jì)時(shí)器不斷生成字母，每清除一次后加一分，每通過(guò)10個(gè)，速度會(huì)逐漸遞增，掉落5個(gè)后游戲結(jié)束。點(diǎn)擊重新開(kāi)始刷新頁(yè)面。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #container{ position:absolute; top:0; left: 0; width:100%; height: 100%; background: url(img/bg.jpg) no-repeat; background-size: 100% 100%; } #counter{ position: absolute; width: 230px; height: 250px; right: 15px; bottom: 15px; background: url(img/score.png) no-repeat; background-size: 100% 100%; } button{ position: absolute; width: 100px; height: 100px; border:none; color: transparent; } #start,#restart,#pause,#continue{ position: absolute; display: block; width: 200px; height: 75px; bottom: 50px; left:30px; background: url(img/stop.png) no-repeat; background-size: 100% 100%; } #restart{ display: none; } #continue{ display: none; } #pause,#continue{ bottom: 50px;*/ left:250px; } #count{ display: block; width: 30px; height: 30px; position: absolute; top:32%; right:40%; font-size: 25px; background: url(img/score.png) no-repeat; } .start,.restart,.pause,.continue{ background-color: transparent; position: relative; bottom: -20px; left: 50px; border: none; color: #8B0000; font-size: 20px; } #gameover span{ position: absolute; width: 600px; height: 150px; margin: auto; top: 0; right: 0; bottom: 0; left: 0; font-size:150px; color: red; display: none; } </style> </head> <body> <div id="container"> <div id="start"> <input class="start" type="button" value="開(kāi)始游戲"/> </div> <div id="restart"> <input class="restart" type="button" value="重新游戲"/> </div> <div id="pause"> <input class="pause" type="button" value="暫停游戲"/> </div> <div id="continue"> <input class="continue" type="button" value="繼續(xù)游戲"/> </div> <div id="counter"> <span id="count"> 0 </span> </div> <div id="gameover"> <span class="gameover">你輸啦！</span> </div> </div> <script> var letterArrs = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; var btnArr = new Array(); var startInterval; var moveInterval; var speed = 0.5; var con = document.getElementById("container"); var c = document.getElementById("count"); var over = document.getElementsByClassName("gameover")[0]; var startdiv = document.getElementById("start"); var restartdiv = document.getElementById("restart"); var pausediv = document.getElementById("pause"); var continuediv = document.getElementById("continue"); var startBtn = document.getElementsByClassName("start")[0]; var restartBtn = document.getElementsByClassName("restart")[0]; var pauseBtn = document.getElementsByClassName("pause")[0]; var continueBtn = document.getElementsByClassName("continue")[0]; startBtn.addEventListener("click",start,false); restartBtn.addEventListener("click",restart,false); pauseBtn.addEventListener("click",pause,false); continueBtn.addEventListener("click",continue_,false); console.log(startdiv); var over_count = 0; var count = 0; pauseBtn.disabled = true; function start(){ startBtn.disabled = true; pauseBtn.disabled = false; startInterval = window.setInterval(create,1000); moveInterval = setInterval(move,10); } function restart(){ window.location.reload(); } function pause(){ window.clearInterval(startInterval); clearInterval(moveInterval); pausediv.style.display = 'none'; continuediv.style.display = 'block'; } function continue_(){ pausediv.style.display = 'block'; continuediv.style.display = 'none'; start(); } function create(){ var btn = document.createElement("button"); var index = parseInt(Math.random()*26); btn.innerHTML = letterArrs[index]; btn.style.background = 'url(img/' letterArrs[index] '.png)'; var distance = (Math.random()*1201 100) 'px'; btn.style.left = distance; btn.style.top = 0; con.appendChild(btn); btnArr.push(btn); } function move(){ for(var i=0;i<btnArr.length;i ){ var btn = btnArr[i]; btn.style.top = btn.offsetTop speed 'px'; if(btn.offsetTop>=600){ btnArr.shift(); con.removeChild(btn); over_count ; if(over_count>=5){ stopGame(); } } if(count>=10){ speed = parseInt(count/10); } } } window.onkeyup = function(e){ console.log(e.keyCode); for(var i=0;i<btnArr.length;i ){ var btn = btnArr[i]; if(e.keyCode==btn.innerHTML.charCodeAt()){ count ; con.removeChild(btn); btnArr.splice(i,1); c.innerText = count; break; } } } function stopGame(){ clearInterval(startInterval); clearInterval(moveInterval); startdiv.style.display = 'none'; restartdiv.style.display = 'block'; over.style.display = 'block'; pauseBtn.disabled = true; } </script> </body></html>聯(lián)系客服
