Notas de estudio de desarrollo del juego WeChat

Dirección oficial del tutorial

-Habilidades básicas para jugar mini juegos WeChat

JS ES6 escrito

-Un programa jscore puro para minijuegos, sin operación DOM; todos los juegos H5 están jugando con lienzo; por lo que el oficial tiene un arma-adapter.js, que simula el lienzo

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

Después de la introducción, habrá un objeto de lienzo globalmente; dirección de descarga del adaptador

-Cómo escribir singleton

let instance;
export default class Instant {
  constructor() {
    if (instance)
      return instance;
    instance = this;
    //不管怎么new xxx 不会是新的对象
    this.xxx="xxxx";
  }
}

Llamar

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

O en la clase

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

-Timeline window.requestAnimationFrame
uso

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

-Fotos

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

Los atributos x e y de la imagen son de solo lectura;
es muy divertido actualizar la posición

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]
}));

-¡Los eventos de interacción de botones (repugnantes)
solo se pueden juzgar y comparar con el ancho y la altura de la ubicación del objeto por el atributo xy del tacto! ! !
Código tutorial oficial:

//游戏结束后的触摸事件处理逻辑
  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()
  }

He usado la garceta para localizar el elemento ui de la imagen, y también es una variedad de xy, ¡muy cansado! !