<!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;
}
</style>
</head>
<body>
<div class="main">
<div class="wordList">
</div>
<div class="menu">
<button class="startgame">游戏开始</button>
<h1>游戏结束剩余时间</h1>
<h1>当前得分：<span class="scroe"></span></h1>
</div>
</div>
<script type="text/javascript">
var game = {
gData:{
wordList:document.querySelector('.wordList'),
newList:[]
domList:[]
},
startGame:function(){
//开始前，程序需要执行的内容
var btn = document.querySelector('.startgame')
btn.onclick = function(){
btn.style.display = 'none'
game.gameing()
}
},
gameimg:function(){
//游戏中要执行的程序
var fn = function(){
var randomNum = parseInt(Math.random()*26)
var newDiv = document.createElement('div')
newDiv.innerHTML = word[randomNum]
newDiv.className = 'wordItem'
game.gData.newList.push(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 = word[randomNum]
setTimeout(function(){
var index = game.gData.newList.indexOf(newWord)
if(index!=-1){
wordList.removeChild(domList[index])
game.gData.newList.splice(index,1)
game.gData.domList.splice(index,1)
}
},10000)
}
var interId = setInterval(fn,2000)
setTimeout(function(){
clearInterval(interId)
game.endGame()
},10000)
},
//游戏结束的时候执行的函数
endGame:function(){
alert('游戏结束，你的得分是：')
}
}
</script>
</body>
</html>
