Adresse officielle du tutoriel
-Compétences de base pour jouer aux mini-jeux WeChat
JS ES6 libellé
-Un programme jscore pur pour les mini-jeux, pas d'opération DOM; les jeux H5 jouent tous avec la toile; donc le fonctionnaire a un arme-adapter.js, qui simule la toile
import './js/libs/weapp-adapter';
Après l'introduction, il y aura un objet canvas globalement; adresse de téléchargement de l'adaptateur
-Comment écrire singleton
let instance;
export default class Instant {
constructor() {
if (instance)
return instance;
instance = this;
//不管怎么new xxx 不会是新的对象
this.xxx="xxxx";
}
}
Appeler
import Instant from './js/tt/instant';
let instant = new Instant();
Ou en classe
import Instant from './js/tt/instant';
export default class Main{
constructor() {
this.instant = new Instant();
}
}
-Timeline window.requestAnimationFrame
utilisation
let render= e => {
//刷新逻辑
window.requestAnimationFrame(render, canvas);
}
window.requestAnimationFrame(render, canvas);
-Photos
let img = new Image();
img.src = 'images/enemy.png';
Les attributs x et y de l'image sont en lecture seule;
c'est tellement amusant de rafraîchir la position
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]
}));
-Les événements d'interaction des boutons (dégoûtants)
ne peuvent être jugés et comparés à la largeur et la hauteur de l'emplacement de l'objet que par l'attribut xy du toucher! ! !
Code tutoriel officiel:
//游戏结束后的触摸事件处理逻辑
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()
}
J'ai utilisé l'aigrette pour localiser l'élément ui de l'image, et c'est aussi une variété de xy, très fatiguée! !