<!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>
浙公网安备 33010602011771号