目錄
微信小遊戲_遊戲名待定——前言
微信小遊戲_遊戲名待定——基礎支撐類（sprite、animation、pool）
微信小遊戲_遊戲名待定——npc類（enemy、mask、sars）
微信小遊戲_遊戲名待定——player類（hero、button）
微信小遊戲_遊戲名待定——runtime類（background、fstart1、fstart2、gameinfo、music）
微信小遊戲_遊戲名待定——lib類（symbol、weapp-adapter）及databus
微信小遊戲_遊戲名待定——main.js及index.js
微信小遊戲_遊戲名待定——game.js、game.json、project.config.json
微信小遊戲_遊戲名待定——後記
正文
本文主要講解hero.js、button.js的內容。
由於將整個js全部粘貼到博文裏過於佔位置，只對於一些關鍵部分以及該js代碼實現的功能進行講解。若想獲取整個js文件，可以去目錄–>前言–>資源鏈接裏下載，內含超詳細註釋。
英雄類
玩家可以操作的就是一輛護送口罩的小卡車，可以執行的操作是通過觸摸兩個箭頭按鍵讓小卡車在三條賽道上左右移動來規避病毒，躲避障礙物和獲取口罩。
先說一說簡單的button類：
import Sprite from '../base/sprite'
export default class Button extends Sprite {
constructor(imgSrc = '', width = 0, height = 0, x = 0, y = 0) {
super(imgSrc, width, height, x, y)
}
}
可以看出來只是簡單的繼承了sprite類。這裏主要是做了一類封裝，讓整體代碼理解起來更爲方便。
再來說一下游戲裏的主角 hero類：
hero類也有一系列的常量，內容同前npc類的類似，只是在部分值上有所不同。同時還定義了兩個button的位置常量，方便判斷是否觸摸在按鍵。
在hero.js中相比之前的js增加了一個事件監聽綁定。
initEvent() {
//觸摸開始時事件
canvas.addEventListener('touchstart', ((e) => {
e.preventDefault()
//獲取觸摸點座標
let x = e.touches[0].clientX
let y = e.touches[0].clientY
//判斷是否觸摸在左鍵上
if (this.checkIsFingerOnLeft(x, y)) {
this.left_touched = true
this.setAirPosAcrossFingerPosZ(1)
}//判斷是否觸摸在右鍵上
else if (this.checkIsFingerOnRight(x, y)) {
this.right_touched = true
this.setAirPosAcrossFingerPosZ(2)
}
}).bind(this))
//觸摸結束時事件
canvas.addEventListener('touchend', ((e) => {
e.preventDefault()
this.left_touched = false
this.right_touched = false
}).bind(this))
}
這裏調用了addEventListener（參數1，參數2）函數去增加事件監聽。
參數1是由wx規定的幾類觸摸事件：
- touchstart 觸摸開始時 ，就是剛點擊的時候
- touchmove觸摸移動時 ，比如拖動的時候
- touchend 觸摸結束時，手指離開屏幕的時候
- 等等，還有一系列其他事件，可以參見w3cschool。
參數2是當該事件觸發的時候應該繼續執行的函數。
在本遊戲中，上述代碼主要實現功能是在觸摸時判斷是觸摸的左鍵還是右鍵，然後根據規則去更新hero的位置，觸摸結束時，更新觸摸狀態。
若有錯誤或者不解，歡迎評論區留言！