前端像素鳥小游戲 點擊打開視頻講解更加詳細 一、案例效果 二、實現思路 創建游戲背景板和小鳥，並分別設置相對定位與絕對定位； 初始化背景圖的位置； 初始化小鳥的位置； 設置游戲狀態，游戲開始時背景和管道全部向左運動，游戲結束全部停止運動； 使小鳥飛行，其實就是背景圖在 X 軸方向的位置不斷減小，實現 ...
前端像素鳥小游戲
一、案例效果
二、實現思路
創建游戲背景板和小鳥，並分別設置相對定位與絕對定位；
初始化背景圖的位置；
初始化小鳥的位置；
設置游戲狀態，游戲開始時背景和管道全部向左運動，游戲結束全部停止運動；
使小鳥飛行，其實就是背景圖在 X 軸方向的位置不斷減小，實現小鳥向右飛行效果；
設置點擊事件，每點擊一次小鳥在Y軸的位置減小，實現向上飛的效果；
創建管道，X 方向上管道和下管道位置相同，Y 方向上上管道和下管道高度隨機，但中間要空出200px；
實現管道向左運動，與背景圖向左操作類似，也是在 X 軸方向的位置不斷減小；
管道向左運動移出游戲面板最左側時再回到原位重新執行，實現迴圈效果；
定義上下管道的臨界值，也就是上下管道自身區域；
小鳥位置與上下管道位置重合(相碰撞)時游戲結束；
多次調用管道創建函數，產生多組管道。
三、完整代碼+詳細註釋
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小游戲：像素鳥</title>
<style>
* {
margin: 0;
padding: 0;
}
#game {
width: 800px;
height: 600px;
background: url('./img/sky.png');
position: relative;
margin: auto;
overflow: hidden;
}
#bird {
width: 34px;
height: 25px;
background: url(./img/birds.png) -10px -8px no-repeat;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<!-- 游戲背景 -->
<div id="game">
<!-- 小鳥 -->
<div id="bird"></div>
</div>
</body>
<script>
//獲取游戲背景和小鳥
var game = document.getElementById('game');
var birdEle = document.getElementById('bird');
//初始化背景圖
var sky = {
x: 0 //背景圖初始位置為0
}
//初始化小鳥
var bird = {
speedX: 5, //小鳥在X軸的速度
SpeedY: 0, //小鳥在Y軸的速度
//小鳥坐標
x: birdEle.offsetLeft, //小鳥初始位置在絕對定位的位置
y: birdEle.offsetTop,
}
var runing = true; //游戲狀態
setInterval(function () {
if (runing) {
//小鳥飛行(其實是背景在動)
sky.x -= 5; //背景每次-5px，以實現向左運動的效果
game.style.backgroundPositionX = sky.x + 'px';
//小鳥上下運動
bird.SpeedY += 1; //每一次點擊小鳥向上10px後開始自增也就是再自動向下
bird.y += bird.SpeedY; //小鳥自動不斷向下運動
//判斷游戲狀態
if (bird.y < 0) { //超出游戲背景頂部時游戲結束
runing = false;
bird.y = 0;
}
if (bird.y + birdEle.offsetHeight > 600) { //超出游戲背景底部時游戲結束
runing = false;
bird.y = 600 - birdEle.offsetHeight;
}
birdEle.style.top = bird.y + 'px';
}
}, 30);
//點擊時小鳥向上運動
document.onclick = function () {
bird.SpeedY = -10; //點擊一次向上運動10px
}
//創建管道
function creatPipe(position) {
var pipe = {};
pipe.x = position;
pipe.upHeight = 200 + parseInt(Math.random() * 100); //上管道高度為200 - 300px
pipe.doHeight = 600 - pipe.upHeight - 200; //下管道高度
pipe.doTop = pipe.upHeight + 200; //上下兩管道之間200px
//創建上管道
var upPipe = document.createElement('div'); //新建div
upPipe.style.width = '52px';
upPipe.style.height = pipe.upHeight + 'px';
upPipe.style.background = 'url(./img/pipe2.png) no-repeat center bottom';
upPipe.style.position = 'absolute';
upPipe.style.top = '0px';
upPipe.style.left = pipe.x + 'px';
game.appendChild(upPipe); //將上管道追加到游戲頁面中
//創建下管道
var doPipe = document.createElement('div'); //新建div
doPipe.style.width = '52px';
doPipe.style.height = pipe.doHeight + 'px';
doPipe.style.background = 'url(./img/pipe1.png) no-repeat center top';
doPipe.style.position = 'absolute';
doPipe.style.top = pipe.doTop + 'px';
doPipe.style.left = pipe.x + 'px';
game.appendChild(doPipe); //將下管道追加到游戲頁面中
//管道進行運動
setInterval(function () {
if (runing) { //游戲處於運行狀態時管道再運動
pipe.x -= 2; //x方向不斷-2px，以實現管道向左運動的效果
upPipe.style.left = pipe.x + 'px';
doPipe.style.left = pipe.x + 'px';
if (pipe.x < -52) { //管道移出最左側時回到原位，實現不間斷效果
pipe.x = 800;
}
//上下管道臨界值
var uCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y < pipe.upHeight;
var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.upHeight + 200;
if (uCheck || dCheck) { //碰到上管道或下管道臨界值則游戲終止
runing = false;
}
}
}, 30)
}
creatPipe(400); //產生四組管道
creatPipe(600);
creatPipe(800);
creatPipe(1000);
</script>
</html>
