利用小游戏模板,删去了多余的部分,在main.js中写了几句简单的代码,然后在game.js中new Main(),实现在屏幕上显示触发touchstart事件的次数,两个文件的代码如下,在开发者工具中能运行实现功能,但通过开发者工具的预览功能,微信扫面后运行是一片黑屏,搞不明白。
//++++++++++++++++++++++++main.js+++++++++++++++++++++++++
let ctx = canvas.getContext(‘2d’);
/**
* 游戏主函数
*/
export default class Main
{
constructor()
{
this.counter=0;
this.initEvent();
window.requestAnimationFrame(this.loop.bind(this),canvas);
}
//事件监听初始化
initEvent()
{
canvas.addEventListener(‘touchstart’, ((e) => {
e.preventDefault();
this.counter++;
}).bind(this))
}
// 实现游戏帧循环,输出触摸事件次数
loop()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillText(this.counter, 100, 100);
window.requestAnimationFrame(this.loop.bind(this),canvas);
}
}
//++++++++++++++++++++++++game.js+++++++++++++++++++++++++
import ‘./js/libs/weapp-adapter’
import ‘./js/libs/symbol’
import Main from ‘./js/main’
new Main()