微信小游戏flappy bird填坑

2018/06/16 18:21
阅读数 35

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         }

 

持续更新

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部