/**原理簡單，（簡單碰撞判斷，定時器運用）複製代碼直接運行便可，若是沒有聲音文件，則去除幾處調用遊戲聲效的代碼便可**/javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
overflow: hidden;
}
#bird{
width: 30px;
height: 30px;
font-size: 11px;
background-color: tomato;
position: absolute;
left: 500px;
top :50px;
}
</style>
</head>
<body>
<div id="bird">
Enter開始
</div>
<audio id="baMusic" >
<source src="video/score.mp3" ></source>
</audio>
<audio id="overMusic" >
<source src="video/gameover.mp3" ></source>
</audio>
<audio id="readyMusic" >
<source src="video/ready.mp3" muted autoplay></source>
</audio>
<script type="text/javascript">
window.onload = function(){
var bird = document.getElementById("bird");
var sc = document.getElementById("baMusic");
var over = document.getElementById("overMusic");
var ready = document.getElementById("readyMusic");
var startBtn = document.getElementById("startBtn");
var speed = 0;
var visiWidth = document.documentElement.clientWidth;
var visiHeight = document.documentElement.clientHeight;
var die = false; // 默認未死亡
var score = 0;
var birdTimer; //鳥自由落體定時器
var gaming = false; //默認遊戲未開始
/*鍵盤監聽按enter開始遊戲*/
document.onkeydown = function(event){
event = event||window.event;
if(gaming){
speed = speed - 20;
if(!die){
dump();
}
}else{
if(event.keyCode==13){
bird.innerHTML="正在遊戲";
gaming = true;
gameStart();
fly();
var rnadzTimer = setInterval(function(){
getRandomZz();
},1500); // 隔指定時間生成柱子.
}
}
};
function fly(){
clearInterval(birdTimer);
birdTimer = setInterval(function(){
var curTop = parseInt(bird.offsetTop);
if(curTop >= visiHeight-50 || curTop <= 0){
clearInterval(birdTimer);
die = true;
gameOver();
document.onkeydown = null;
return;
}
speed +=1;
bird.style.top = (curTop + speed) + "px";
},50);
}
function getRandomZz(){
var zzTimer ;
var kx = getRandom(250,600); //留多少空隙
var zzTop = document.createElement("div");
var zzBtm = document.createElement("div");
var randHeight = getRandom(50,300);
var randWidthTop = getRandom(50,150);
zzTop.moveData = visiWidth;
zzTop.style.height = randHeight+"px";
zzTop.style.width = randWidthTop+"px";
zzTop.style.backgroundColor = "green";
zzTop.style.position = "absolute";
zzTop.style.left = "100%";
// 設置底部柱子
zzBtm.moveData = visiWidth;
zzBtm.style.height = (visiHeight - randHeight -kx)+"px";
zzBtm.style.width = randWidthTop+"px";
zzBtm.style.backgroundColor = "green";
zzBtm.style.position = "absolute";
zzBtm.style.left = "100%";
zzBtm.style.top = (randHeight+kx)+"px";
document.body.appendChild(zzTop);
document.body.appendChild(zzBtm);
zzTimer = setInterval(function(){
if(die){
clearInterval(zzTimer);
return;
}
zzTop.moveData--;
zzTop.style.left = zzTop.moveData + "px";
zzBtm.style.left = zzTop.moveData + "px";
if(zzTop.moveData<=-150){
score++;
getScore();
clearInterval(zzTimer);
}
// 檢測碰撞
if(isKnock(bird,zzTop)||isKnock(bird,zzBtm)){
die = true;
clearInterval(zzTimer);
clearInterval(birdTimer);
gameOver();
alert("得分:" + score * 5);
}
},3);
}
function gameStart(){
ready.src="video/ready.mp3";
ready.play();
}
function getScore(){
sc.src="video/score.mp3";
sc.play();
}
function gameOver(){
over.src="video/gameover.mp3";
over.play();
}
function dump(){
over.src="video/jump.mp3";
over.play();
}
}
/**
*隨機返回一個n-m的整數
*/
function getRandom(n,m){
return parseInt(Math.random()*(m-n)) +n;
}
/*
* 碰撞檢測方法,若是碰撞則返回true
* obj1 第一個dom 對象
* obj2 第二個dom 對象
* */
function isKnock(obj1,obj2){
if(obj1.offsetLeft + obj1.offsetWidth > obj2.offsetLeft &&
obj2.offsetLeft + obj2.offsetWidth > obj1.offsetLeft &&
obj1.offsetTop + obj1.offsetHeight > obj2.offsetTop &&
obj2.offsetTop + obj2.offsetHeight > obj1.offsetTop){
return true;
}
return false;
}
</script>
</body>
</html>css