微信小遊戲入門筆記

原創

Ace.斗皇

2020-02-20 17:44

微信小遊戲，是沒有html標籤，是基於js，canvas....等實現的小遊戲。

1. 創建一個微信小遊戲項目文件夾：wx-game

2. 在項目wx-game中創建game.json：全局配置：參考https://developers.weixin.qq.com/minigame/dev/reference/configuration/app.html。

{
  "deviceOrientation":"portrait"
}

3. 在項目wx-game中創建game.js：

let canvas=wx.createCanvas()  //1.創建畫布，默認寬高爲手機屏幕的寬高，可修改
console.log(canvas.width)
console.log(canvas.height)


let ctx=canvas.getContext('2d') //2. 設置2d畫筆
// ctx.fillStyle='red'          //設置畫筆顏色
// ctx.fillRect(0,0,100,100)  //繪製矩形


/**
 * 上屏和離屏：上屏指的是第一個創建的canvas,離屏指的是第一次創建的canvas之後的其他創建的canvas對象，
 * 將離屏的對象繪製在上屏上面：ctx.drawImage(離屏的canvas對象, 0, 0)
 *
**/


let bgAudio=wx.createInnerAudioContext()  //3. 創建音頻對象
bgAudio.src='./audios/bgm.mp3'
bgAudio.autoplay = true
bgAudio.loop = true
bgAudio.play()   //播放音頻
//小遊戲被隱藏到後臺時，所有音頻會被暫停,回到前臺之後，被暫停的音頻不會自動繼續播放，如果小遊戲有背景音樂的話，需要監聽回到前臺事件，並在收到回到前臺事件之後調用背景音樂繼續播放。
wx.onShow(function () { 
  bgAudio.play()
})
//接到電話、鬧鐘響起、系統提醒、收到微信好友的語音/視頻通話請求。被中斷之後，小遊戲內所有音頻會被暫停，並在中斷結束之前都不能再播放成功。
wx.onAudioInterruptionEnd(function () {
  bgAudio.play()
})
//如果小遊戲的邏輯強依賴音樂的播放，則需要在音頻開始中斷的時候暫停遊戲
wx.onAudioInterruptionBegin(function () {
  // 暫停遊戲
})


let img=wx.createImage()  //3. 繪製上屏的背景圖片
img.src = './images/bg.jpg'
img.οnlοad=()=>{
  bgImgOnload()
}

//4. 動畫原理：定時器(setTimeout/setInterval/requestAnimationFrame))+清除畫布+繪製畫布圖像。
let timer=null
let count=0
loopAniate()

function loopAniate() { //setTimeout版定時器
  count++
  timer=setTimeout(()=>{ 
    ctx.clearRect(0,0,canvas.width,canvas.height)
    ctx.fillRect(0,count,100,100)
    clearTimeout(timer)
    if(count<150){
      loopAniate()
    }
  },)
}

function loopAniate() {  //requestAnimationFrame版定時器，根據設備性能，執行定時器
  count++
  cancelAnimationFrame(timer)
  timer = requestAnimationFrame(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.fillRect(0, count, 100, 100)
    if (count < 150) {
      loopAniate()
    }
  })
}

// 5. 事件：包括觸碰開始（wx.onTouchStart），觸碰移動（wx.onTouchMove），觸碰結束（wx.onTouchEnd），觸碰取消（wx.onTouchCancel）....
let isMove=false
wx.onTouchStart((e)=>{
  let touch=e.changedTouches[0]  //獲取手指按下的對象
  let touX=touch.clientX
  let touY=touch.clientY
  // 判斷手指按下的位置是否要需要移動對象/圖片的位置內，從而進行相應的事件處理,比如設置
  if ('判斷手指按下的位置是否要需要移動對象/圖片的位置內'){
   isMove=true
  }
})
wx.onTouchMove((e) => {
  let touch = e.changedTouches[0]  //獲取手指按下的對象
  if (isMove){
    //繪製圖片跟着手指移動的動畫
  }
})
wx.onTouchEnd((e) => {
  isMove = false
})
wx.onTouchCancel((e)=>{ //手指觸碰事件被打斷時觸發：比如來電話了，手機突然關機了....

})

//Adapter：適配插件庫 ，參考https://developers.weixin.qq.com/minigame/dev/guide/best-practice/adapter.html。

function bgImgOnload(){  //上屏背景圖片加載完成事件
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
  ctx.fillStyle = 'red'
  ctx.font = '30px Arial'
  ctx.fillText("繪製文字", 0, 100)
}