目錄
1.整體專案框架
2.css樣式
3. 游戲初始化
4.游戲結束提示
5.效果圖?
1.整體專案框架
2.css樣式
*{
padding: 0px;
margin: 0px;
}
#game{
width: 800px;
height: 600px;
background-image: url(img/bg.png);
position: relative;
overflow: hidden;/*溢位隱藏*/
}
#bird{
width: 34px;
height: 25px;
background: url(img/bird.png) -8px -10px no-repeat;
position: absolute;
top: 100px;
left: 100px;
}
#score{
color: red;
position: absolute;
top: 15px;
left: 25px;
z-index: 100;
}
#start{
position: absolute;
top: 190px;
left: 300px;
z-index: 150;
}
3. 游戲初始化：
1.獲取背景和小鳥的物件
2.初始化天空和小鳥的位置
3.移動背景圖片，將背景圖的橫坐標X連續減少5px,使它往左移動；
4.背景圖片移動的同時設定小鳥持續下落，鳥的縱坐標Y連續增加1px,
5.小鳥下落做碰撞判斷：
5.1判斷小鳥落到地上，gameover
5.2判斷小鳥飛出天際，gameover
6.鍵盤向上鍵UP控制小鳥向上飛，每次飛10px;
7.創建管道：
7.1創建管道物件
7.2初始化管道位置
7.3初始化上下管道的長度
7.4創建管道容器div，分別設定容器的屬性：寬度、高度、背景圖、絕對位置
7.5將管道節點添加到天空背景節點中
8.讓管道向左移動setInterval()
8.1設定管道初始位置
8.2設定管道的隨機高度
8.3創建管道容器div
8.4設定容器樣式
8.5添加容器到背景中
9.讓管道動起來
9.1管道的橫坐標依次減少
9.2管道超出螢屏再設定從頭開始進入
9.3累計分數：通過一根管道加一分
9.4判斷小鳥的碰撞
<div id="game">
<span id="score">
得分是：0
</span>
<div id="bird"></div>
</div>
<script type="text/javascript">
var count=0;
var score=document.getElementById("score");
var game=document.getElementById("game");
var birdEl=document.getElementById("bird");
//初始化天空的位置
var sky={
x:0
}
//初始化小鳥的位置
bird={
speedX: 5,
speedY: 0,
x:birdEl.offsetLeft,
y:birdEl.offsetTop
}
var running=true;//默認游戲開始
/*
* 水平移動背景
*/
setInterval(function(){
if (running) {
//播放音樂
//playSound("sound/趙傳 - 我是一只小小鳥.mp3");
//螢屏連續水平移動5像素
sky.x-=5;
game.style.backgroundPositionX=sky.x+"px";
//小鳥持續下降
bird.speedY+=1;
bird.y+=bird.speedY;
if(bird.y<0){
//小鳥飛出天際
running=false;
bird.y=0;
console.log(birdEl.offsetHeight);
gameover();
}
if(bird.y+birdEl.offsetHeight>600){
running=false;
bird.y=600-birdEl.offsetHeight;
gameover();
}
//固定在死亡的位置
birdEl.style.top = bird.y+"px";
}
},30);
/*
* 鍵盤操作小鳥向上飛
*/
document.onkeydown=function(){
var key=event.keyCode;
if(key==38){
bird.spee
dY =-10;
}
}
function createPipe(positionX){
//7.1創建管道物件
var pipe={};
//7.2初始化管道位置
pipe.x=positionX;
//7.3初始化上下管道的長度
pipe.uHeight=200+parseInt(Math.random()*100);
pipe.dHeight=600-pipe.uHeight-200;
pipe.uTop=pipe.uHeight+200;
//7.4創建管道容器div，分別設定容器的屬性：寬度、高度、背景圖、絕對位置
var uPipe=document.createElement("div");
uPipe.style.width="52px";
uPipe.style.height=pipe.uHeight+"px";
uPipe.style.background="url('img/down.png') no-repeat center bottom";
uPipe.style.position="absolute";
uPipe.style.top="0px";
uPipe.style.left=pipe.x+"px";
//7.5將管道節點添加到天空背景節點中
game.appendChild(uPipe);
var dPipe=document.createElement("div");
dPipe.style.width="52px";
dPipe.style.height=pipe.dHeight+"px";
dPipe.style.background="url(img/up.png) no-repeat center top";
dPipe.style.position="absolute";
dPipe.style.top=pipe.uTop+"px";
dPipe.style.left=pipe.x+"px";
game.appendChild(dPipe);
//9.讓管道動起來
setInterval(function(){
if(running){
pipe.x-=3;//移動位置
uPipe.style.left=pipe.x+"px";
dPipe.style.left=pipe.x+"px";
//管道超出螢屏再設定從頭開始進入
if (pipe.x<-52) {
pipe.x=800;
}
//累計分數：通過一根管道加分
if(bird.x>pipe.x+52){
count+=1;
score.innerHTML="<h3>得分："+count+"</h3>"
}
//判斷小鳥的碰撞
var uCrash=bird.x+34>pipe.x && bird.x<pipe.x+52 && bird.y<pipe.uHeight;
var dCrash=bird.x+34>pipe.x && bird.x<pipe.x+52 && bird.y>pipe.uHeight+180;
if(uCrash || dCrash){
running=false;
gameover();
}
}
},30);
}4.游戲結束提示
function gameover(){
var over=document.createElement("img");
over.src="img/gameover.png";
over.style.position="absolute";
over.style.top="190px";
over.style.left="330px";
over.style.zIndex="150";
game.appendChild(over);
}
createPipe(400);
createPipe(600);
createPipe(800);
createPipe(1000);
</script>5.效果圖
注：使用鍵盤上下鍵控制小鳥，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/402558.html
標籤：其他