原生JS實現(xiàn)flappyBird
demo.png
項目簡介
使用原生JS申眼，通過ES6練習面向?qū)ο笏枷肼鹘颍O(shè)置重力效果，進行碰撞檢測從而實現(xiàn)Flappybird游戲括尸，
設(shè)計思路
- 為了實現(xiàn)小鳥的飛行效果巷蚪，使用定時器對天空及陸地進行移動，動態(tài)添加管子實現(xiàn)類似小鳥飛行的效果
- 游戲中設(shè)計天空移動濒翻，陸地移動屁柏，管道移動，小鳥扇動翅膀有送，因此定時器存在多個淌喻，設(shè)置一個類產(chǎn)生定時器
- 小鳥的跳動通過設(shè)置重力動態(tài)計算速度，通過改變速度即可實現(xiàn)跳躍及掉落
- 對碰撞進行檢測
類及其結(jié)構(gòu)
定時器設(shè)置類 {
開啟定時器start
停止定時器stop
定時器運行時執(zhí)行的函數(shù)action
}
//
天空類{
天空移動函數(shù)action
//left-- 圖片設(shè)置為二倍寬度雀摘，到達一倍寬度時再將left置零實現(xiàn)移動
}
大地類{
大地移動函數(shù)action
//同上
}
小鳥類{
小鳥翅膀扇動函數(shù)action
小鳥掉落函數(shù)drop
小鳥跳躍函數(shù)jump
}
管道類{
生成管道函數(shù)build
管道隨機高度函數(shù)setHeight
管道運動函數(shù)action
}
游戲類{
初始化init
//初始上面的所有類
開始游戲函數(shù)start
//開啟所有的定時器
游戲暫停函數(shù)stop
游戲停止函數(shù)over
碰撞檢測函數(shù)judge
}
定時器設(shè)置
class SetTime{
constructor(){
this.timer = null;
}
start(interval){
if(this.timer){
console.log('已經(jīng)有定時器存在了');
return;
}
this.timer = setInterval(()=>{
this.action();
},interval)
}
stop(){
clearInterval(this.timer);
//對定時器對象進行重置裸删，否則對象有值start方法無法開啟
this.timer = null;
}
//行為 如果未定義定位輸出
action(){
console.log(undefined);
}
}
- start開啟一個定時器，傳入?yún)?shù)為執(zhí)行間隔
- action為定時器每次要執(zhí)行的行為阵赠，后續(xù)統(tǒng)一設(shè)置
【注】設(shè)置this.timer對定時器加鎖涯塔，防止定時器的多次開啟
? 清楚定時器后對定時器對象置null,否則定時器不能再次開啟
小鳥扇動翅膀
在鳥的類中設(shè)置一個狀態(tài)位，每個狀態(tài)位對應(yīng)一個圖片清蚀，快速替換圖片即可
小鳥掉落函數(shù)
在鳥的類中設(shè)置小鳥的初速度匕荸，每次移動的高度，每次獲取一次賦值即可
通過v = v + a * t h = v + 0.5 *a * t * t
計算新的速度及移動的距離枷邪，對小鳥top進行賦值即可
a及t可以自行設(shè)置每聪，我的設(shè)置為 0.01 20
drop(){
//計算出新的速度及移動的距離
this.h = this.v + 0.5 * this.a * this.t * this.t;
this.v = this.v + this.a * this.t;
//對新top進行記錄
this.top = this.top + this.h;
//改變鳥的高度
this.dom.style.top = `${this.top}px`;
//后續(xù)的碰撞檢測
this.positionY = parseInt(this.dom.style.top) + this.height /2;
//當前top值是否碰到了大地？停止：繼續(xù)
return this.top >= this.distance;
}
小鳥跳躍函數(shù)
將v設(shè)置為一個負值即可
管道生成函數(shù)
設(shè)置一個管道類，在一個固定位置通過定時器產(chǎn)生管道药薯，產(chǎn)生的管道存入數(shù)組中便于管理绑洛，管道的生成有以下幾個要點
- 長度要隨機
- 管道間的間隔是一個定制，我設(shè)置為整體高度的30%
- 設(shè)置一個區(qū)間童本，生成這個區(qū)間內(nèi)的隨機數(shù)真屯，作為一個管道的高度
- 剩下的管道通過總高度 - 隨機的管道高度 - 管道間隔計算
- 將每對管道作為對象存入數(shù)組中，方便其移動及后面的碰撞檢測
管道移動函數(shù)
遍歷管道對象數(shù)組穷娱，統(tǒng)一left--即可
碰撞檢測
中心點：矩形寬高的一半
發(fā)生碰撞的條件是
小鳥中心點到管道中心點的橫向距離小于小鳥及管道寬度的和的一半同時
小鳥中心點到管道中心點的縱向距離小于小鳥及管道高度的和的一半
