微信小遊戲開發 - 學習筆記

官方教程地址

- 玩微信小遊戲前提基礎技能

JS ES6 寫法

- 小遊戲一個純jscore的程序，沒有DOM 操做 ；H5遊戲都是玩弄canvas；因此官方有個weapp-adapter.js，模擬了canvas

import './js/libs/weapp-adapter';

引入後，全局就會有一個canvas對象；Adapter下載地址

- 單例類的寫法

let instance;
export default class Instant {
  constructor() {
    if (instance)
      return instance;
    instance = this;
    //無論怎麼new xxx 不會是新的對象
    this.xxx="xxxx";
  }
}

調用

import Instant from './js/tt/instant';
let instant = new Instant();

或是在類裏

import Instant from './js/tt/instant';
export default class Main{
  constructor() {
    this.instant = new Instant();
  }
}

- 時間軸 window.requestAnimationFrame
用法

let render= e => {
  //刷新邏輯
  window.requestAnimationFrame(render, canvas);
}
window.requestAnimationFrame(render, canvas);

- 圖片

let img = new Image();
img.src = 'images/enemy.png';

圖片的x,y屬性是隻讀;
要刷新位置得這麼玩

let img = new Image();
let ctx = canvas.getContext('2d');
img.src = 'images/enemy.png';
var render = e => {
  //清空canvas內容
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  //從新繪製img對象到canvas xx yy 是 鼠標點擊的座標位置
  ctx.drawImage(img, xx, yy, img.width, img.height);
  window.requestAnimationFrame(render, canvas);
}
window.requestAnimationFrame(render, canvas);
let [xx, yy] = [0, 0];
canvas.addEventListener('touchstart', ((e) => {
  e.preventDefault();
  let x = e.touches[0].clientX;
  let y = e.touches[0].clientY;
  [xx, yy] = [x,y]
}));

- 按鈕互動事件 （好惡心）
竟然只能經過touch的 x y 屬性，與對象存在的位置 寬高 進行判斷比較！！！
官方教程代碼：

//遊戲結束後的觸摸事件處理邏輯
  touchEventHandler(e) {
    e.preventDefault()
    let x = e.touches[0].clientX
    let y = e.touches[0].clientY
    let area = this.gameinfo.btnArea
    if (x >= area.startX
      && x <= area.endX
      && y >= area.startY
      && y <= area.endY)
      this.restart()
  }

以前用過egret定位圖片ui元素，也是各類x y ，很是累！！