微信小游戏flappy bird填坑

最新推荐文章于 2025-02-12 21:31:56 发布

diangang2369

最新推荐文章于 2025-02-12 21:31:56 发布

阅读量322

点赞数

文章标签：游戏

原文链接：http://www.cnblogs.com/Mask-D/p/9190720.html

版权

在浏览器中写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";

加载图片后图片覆盖不了整个屏幕，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 ...

加载图片：

创建图片后显示不出来是因为没有通过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         }