💒 es6 + canvas 開源 蓋樓小遊戲 完整代碼註釋 從零教你作遊戲（一）

蓋樓遊戲

一個基於 Canvas 的蓋樓遊戲

Demo 預覽

在線預覽地址 (Demo Link)

手機設備能夠掃描下方二維碼

地址 💖

喜歡這個遊戲能夠給個💖star💖鼓勵一下嗎 github.com/iamkun/towe…

Game Rule 遊戲規則

如下爲默認遊戲規則，也可參照下節自定義遊戲參數

• 每局遊戲生命值爲3，掉落一塊樓層生命值減1，掉落3塊後遊戲結束，單局遊戲無時間限制

• 成功蓋樓加25分，完美蓋樓加50分，連續完美蓋樓額外加25分，樓層掉落扣除生命值1，單局遊戲共有3次掉落機會

栗子：第一塊完美蓋樓加50分，第二塊連續完美蓋樓加75分，第三塊連續完美蓋樓加100分，依此類推……

Customise 自定義

git clone https://github.com/iamkun/tower_game.git
cd tower_game
npm install
npm start
複製代碼

打開 http://localhost:8082

• 圖片、音頻資源能夠直接替換 assets 目錄下對應的資源文件
• 遊戲規則能夠修改 index.html 文件 L480 的 option 對象

Option 自定義選項

可使用如下 option 表格裏的參數，完成遊戲自定義，全部參數都是非必填項

Option	Type	Description
width	number	遊戲主畫面寬度
height	number	遊戲主畫面高度
canvasId	string	Canvas 的 DOM ID
soundOn	boolean	是否開啓聲音
successScore	number	成功蓋樓分數
perfectScore	number	完美蓋樓額外獎勵分數
hookSpeed	function	鉤子平移速度
hookAngle	function	鉤子擺動角度
landBlockSpeed	function	下方樓房橫向速度
setGameScore	function	當前遊戲分數hook
setGameSuccess	function	當前遊戲成功次數hook
setGameFailed	function	當前遊戲失敗次數hook

hookSpeed

鉤子平移速度 函數接收兩個參數，當前成功樓層和當前分數，返回速度數值

function(currentFloor, currentScore) {
  return number
}
複製代碼

hookAngle

鉤子擺動角度 函數接收兩個參數，當前成功樓層和當前分數，返回角度數值

function(currentFloor, currentScore) {
  return number
}
複製代碼

landBlockSpeed

下方樓房平移速度 函數接收兩個參數，當前成功樓層和當前分數，返回速度數值

function(currentFloor, currentScore) {
  return number
}
複製代碼

setGameScore

當前遊戲分數hook 函數接收一個參數，當前遊戲分數

function(score) {
  // your logic
}
複製代碼

setGameSuccess

當前遊戲成功次數hook 函數接收一個參數，當前遊戲成功次數

function(successCount) {
  // your logic
}
複製代碼

setGameFailed

當前遊戲失敗次數hook 函數接收一個參數，當前遊戲失敗次數

function(failedCount) {
  // your logic
}
複製代碼

License

MIT license.