<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } html,body{ height: 100%; overflow: hidden; } .main,.wordList{ width: 100%; height: 100%; overflow: hidden; } .wordItem{ width: 100px; height: 100px; text-align: center; line-height: 100px; border-radius: 50px; background:navajowhite; position: absolute; top: 20px; animation: wangxiadiao 10s linear forwards; } @keyframes wangxiadiao{ from{ /*transform: translate(0,0);*/ top: 20px; } to{ /*transform: translate(0,1500px);*/ top: 1500px; } } .startgame{ width: 300px; height: 150px; background: orangered; color: #fff; text-align: center; line-height: 150px; border-radius: 30px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -75px; font-size: 70px; } .gametime{ position: absolute; left: 50px; top: 50px; display: none; } </style> </head> <body> <div class="main"> <div class="wordList"> </div> <div class="menu"> <button class="startgame">游戏开始</button> <h1 class="gametime">游戏结束剩余时间: <span class="time">20</span></h1> <h1>当前得分：<span class="scroe">0</span></h1> </div> </div> <script type="text/javascript"> //间隔一定时间生成随机的字母 var game = { gData:{ word:['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'], wordList:document.querySelector('.wordList'), newList:[], domList:[], score:0 }, startGame:function(){ //开始前，程序需要执行的内容 var btn = document.querySelector('.startgame') btn.onclick = function(){ btn.style.display = 'none' game.gameing() } }, gameing:function(){ //游戏中要执行的程序 document.querySelector('.gametime').style.display = 'block' var fn = function(){ var randomNum = parseInt(Math.random()*26) var newDiv = document.createElement('div') newDiv.innerHTML = game.gData.word[randomNum] newDiv.className = 'wordItem' game.gData.newList.push(game.gData.word[randomNum]) game.gData.domList.push(newDiv) var x = Math.random()*(document.body.clientWidth-100) newDiv.style.left = x + 'px' game.gData.wordList.appendChild(newDiv) var newWord = game.gData.word[randomNum] setTimeout(function(){ var index = game.gData.newList.indexOf(newWord) if(index!=-1){ game.gData.wordList.removeChild(game.gData.domList[index]) game.gData.newList.splice(index,1) game.gData.domList.splice(index,1) } },1000) //绑定按键事件 var html = document.querySelector('html') html.onkeypress = function(e){ //e.key console.log(e.key) var index = game.gData.newList.indexOf(e.key) if(index == -1){ console.log('输入错误') }else{ //删除数组里面的某一项内容 game.gData.wordList.removeChild(game.gData.domList[index]) game.gData.newList.splice(index,1) game.gData.domList.splice(index,1) game.gData.score++ document.querySelector('.scroe').innerHTML = game.gData.score console.log(game.gData.newList) console.log(game.gData.domList) } } } //清除间隔函数 var interId = setInterval(fn,2000) var currentTime = 20 var timeId = setInterval(function(){ currentTime--; document.querySelector('.time').innerHTML = currentTime },1000) setTimeout(function(){ clearInterval(interId) clearInterval(timeId) game.endGame() },20000) }, //游戏结束的时候执行的函数 endGame:function(){ alert('游戏结束，你的得分是：'+game.gData.score) } } game.startGame() </script> </body> </html>