1.
在浏览器中写es6语法的js时候，没有bable转译时。有inport和export时，type一定要写成module，而且import js时候一定要写全称。
1 // type的属性设为module 2 <script type="module" src="game.js"></script> 3 4 //引入时要用写全称 5 import {Main} from "./Main.js";
2.
加载图片后图片覆盖不了整个屏幕，canvas大小调的是屏幕大小，而且图片大小加载的也是image.weight和image.hight。
解决方法：
在 index的head中加入meta viewport适应屏幕语句。
1 <head> 2 <meta name="viewport" content="width=device-width, initial-scale=1"> 3 <meta charset="UTF-8"> 4 ...
3.
加载图片：
创建图片后显示不出来是因为没有通过onload创建，Resourceload是确保所有资源都加载完成后再渲染。所以需要用onload加载背景图片
图片文件在js中所以需要在地址中加“..”表示上一目录。而后面的es6的箭头函数也是代替了上一层的this指针。
1 let image = new Image(); 2 image.src='../res/background.png'; 3 4 image.onload = () => { 5 /*第一个参数是image对象，要渲染的一张图 6 * 第二、三个参数是图片剪裁起始位置 x.y轴 7 * 第四、五个参数是被剪裁的图片的宽度，即剪多大 8 * 第六、七个参数是放置在画布上的位置，图形的左上角 9 * 第八九个参数是要使用的图片的大小*/ 10 this.ctx.drawImage( 11 image, 12 0, 13 0, 14 image.width, 15 image.height, 16 0, 17 0, 18 image.width, 19 image.height, 20 ); 21 }
持续更新
转载于:https://www.cnblogs.com/Mask-D/p/9190720.html
相关资源：微信小程序-FlappyBird