前言
上期，我們實(shí)現(xiàn)了 Bird, StickManager 模塊引润，這期我們將實(shí)現(xiàn) Input痒玩，碰撞檢測(cè)和完成整個(gè)游戲。
Input
安裝事件中心模塊：
npm install eventemitter3
在 Input.js 中添加代碼：
// 引入事件中心
import EventEmitter from 'eventemitter3';
// 繼承事件中心
export default class Input extends EventEmitter {
constructor() {
super();
// 點(diǎn)擊或者按空格時(shí)觸發(fā) `touch` 事件奴曙，交由外部處理
window.addEventListener('click', () => {
this.emit('touch');
});
window.addEventListener('touchstart', () => {
this.emit('touch');
});
window.addEventListener('keydown', (e) => {
if (e.which === 32) {
this.emit('touch');
}
});
}
}
在 GameManager 中引入 Input：
// ...
import Input from './Input';
// ...
export default class GameManager {
constructor() {
super();
this.background = new Background();
this.bird = new Bird();
this.input = new Input();
this.sticks = new StickManager();
// 接收到用戶(hù)操作時(shí)草讶，跳用 `Bird` 的 `moveUp` 方法
this.input.on('touch', () => {
this.bird.moveUp();
});
}
// ...
}
運(yùn)行下可以看到點(diǎn)擊后，Bird 向上飛了坤溃。
碰撞檢測(cè)
分兩部分：鳥(niǎo)和邊界的碰撞嘱丢，鳥(niǎo)和柱子的碰撞薪介。
邊界
在 Bird 類(lèi)內(nèi)實(shí)現(xiàn)方法 isOutOfScreen：
// ...
export default class Bird extends Movable {
// ...
isOutOfScreen() {
if (this.y - this.ry / 2 < 0) {
return true;
}
const { width, height } = canvas.getSize();
return this.y + this.ry / 2 >= height;
}
}
Bird + Stick
我們把 Bird 抽象成橢圓汁政，把 Stick 抽象成矩形缀旁。
上圖黑色表示碰撞檢測(cè)的圖形，我們可以簡(jiǎn)單地認(rèn)為橢圓的中心在紅框內(nèi)诵棵，則碰撞上了黑色的矩形祝旷。
在 Bird 類(lèi)內(nèi)部實(shí)現(xiàn)方法 isCollidedWithRect：
// ...
export default class Bird extends Movable {
// ...
isCollidedWithRect(x, y, width, position) {
/**
* rx
* │ │ │ │
* │ │ │ │
* │ │ │ │
* │ └──┘ │
* └────────┘ ry
* if ellipse center is in outer box, then collide
*/
// 跟上部分的柱子進(jìn)行判斷
if (position === 'up') {
const minX = x - width / 2 - this.rx / 2;
const maxX = x + width / 2 + this.rx / 2;
const maxY = y + this.ry / 2;
if (this.x > minX && this.x < maxX && this.y < maxY) {
return true;
}
}
// 跟下部分的柱子進(jìn)行判斷
if (position === 'down') {
const minX = x - width / 2 - this.rx / 2;
const maxX = x + width / 2 + this.rx / 2;
const minY = y - this.ry / 2;
if (this.x > minX && this.x < maxX && this.y > minY) {
return true;
}
}
return false;
}
}
在 Stick 中定義 isCollidedWidthBird：
// ...
export default class Stick extends Movable {
// ...
isCollidedWidthBird(check) {
return check(this.x, this.y - this.gap / 2, this.width.up, 'up') || check(this.x, this.y + this.gap / 2, this.width.down, 'down');
}
}
這里的參數(shù) ckeck 就是在 Bird 中定義的 isCollidedWithRect怀跛，所以我們?cè)谡{(diào)用 check 時(shí)需要傳入約定的 x，y忠蝗，width 和 position漓拾。
如果和上邊的柱子碰到了算是碰到了戒祠，如果和下面的柱子碰到了速种，也算是碰到了。所以中間使用或運(yùn)算符連接兩個(gè)檢測(cè)配阵。
最后我們?cè)?GameManager 里面添加 checkGameOver 游戲結(jié)束的判斷：
// 引入事件中心，將游戲結(jié)束的事件交由外部處理
import EventEmitter from 'eventemitter3';
// ...
export default class GameManager extends EventEmitter {
// ...
checkGameOver() {
// 循環(huán)所有的柱子救拉，判斷是否碰撞
const isCollided = this.sticks.getSticks().some((stick) => {
return stick.isCollidedWidthBird(this.bird.isCollidedWithRect.bind(this.bird));
});
// 判斷是否出界
const isOutOfScreen = this.bird.isOutOfScreen();
// 兩者只要滿(mǎn)足其一瘫拣，則游戲結(jié)束
return isCollided || isOutOfScreen;
}
}
修改 loop 函數(shù)：
// ...
export default class GameManager extends EventEmitter {
// ...
loop() {
this.paint();
if (this.checkGameOver()) {
this.emit('game-over');
return this;
}
requestAnimationFrame(() => {
this.loop();
});
return this;
}
}
修改 index.js 添加游戲結(jié)束的判斷：
import './index.pcss';
import GameManager from './GameManager';
let gm = new GameManager();
const processError = () => {
const button = document.createElement('button');
button.innerHTML = 'Restart';
document.body.appendChild(button);
button.addEventListener('click', () => {
document.body.removeChild(button);
gm = new GameManager();
gm.on('game-over', processError);
gm.start();
});
};
gm.on('game-over', processError);
gm.start();
游戲結(jié)束后會(huì)在頁(yè)面上添加一個(gè)按鈕，點(diǎn)擊按鈕重新開(kāi)始游戲壹无。
為按鈕添加樣式感帅，修改 index.pcss：
/* ... */
button {
position: absolute;
display: block;
width: 200px;
height: 50px;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background: #80d230;
border: 4px solid #54434b;
font-size: 24px;
color: #54434b;
border-radius: 4px;
}
到這里，我們完成了 Flappy Bird 游戲的制作失球。
線(xiàn)上體驗(yàn)的地址：https://vivaxy.github.io/flappy-bird/dist/html/flappy-bird.html
