|
打字游戲：
開始狀態(tài)時(shí)，暫停按鈕禁用，開始按鈕可用，點(diǎn)擊一次開始按鈕后，開始按鈕禁用，暫停按鈕可用，
然后開始調(diào)用計(jì)時(shí)器不斷生成字母，每清除一次后加一分，每通過10個(gè)，速度會(huì)逐漸遞增，掉落5個(gè)后游戲結(jié)束。點(diǎn)擊重新開始刷新頁面。
<!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="開始游戲"/>
</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>
來源：https://www./content-4-412201.html
|
