3-4 小游戏框架搭建与开发工具兼容性填坑

如果要把开发环境迁移到webstorm里面的话，需要对canvas大小做一个简单的调整。小游戏有一句：console.log(canvas.width, canvas.height)  获取canvas内置的宽和高。这个是很重要的，因为如果在webstorm上面写好之后，迁移到开发者工具上时候，大小不一致，会有很多穿帮镜头。所以先在开发者工具上输出canvas的大小，获得：374 666。

再做一个样式的限制，毕竟是浏览器，不是微信小游戏，不能让周围出现margin和padding。给它一个100%的限制，让它不能自由滑动。

webstorm有格式化工具：command+alt+L

调整语言结构，选ES6。

创建js目录，里面包括三个目录：base、player、runtime

base：基本工具类，

player：跟玩家交互的类，不断变化的类，

runtime：游戏场景环境资源、

js完全可以写成一个文件，还不用导入导出，但是软开一定要模块化。类多，戴氏代码少，才比较好。

ES6模块化，导入导出export和import。这里可以参看阮一峰教程。这里导出，有两种方式。

1、如果只有一个类，那么可以直接 export class Resources{ }

2、如果这个文件有很多定义的类，或者方法，变量，export {类，或者变量}

类似创建并导出类Resources，在base中创建并导出类：1、ResourceLoader //资源文件加载器，确保只有资源文件全部加载之后才开始渲染。2、DataStore //变量缓存器，方便我们在不同的类中访问和修改变量。3、Sprite //精灵的基类，负责初始化精灵加载的资源和大小以及位置。

在player下面创建：1、Brids.js类，小鸟类。2、Score.js类，计分器类。3、StartButton.js 开始按钮类

runtime下面：1、BackGround.js 背景类 2、Land.js  陆地类，不断移动的陆地、3、DownPencil.js 下一半铅笔  4、UpPencil.js   上一半铅笔类、

创建导演类：Director.js 控制游戏的逻辑

创建main.js 初始化整个游戏的精灵，作为游戏开始的入口。

在game.js中new一个main，就可以智能直接生成如下：

import {main} from "./Main.js"; 这是从Main.js文件引入main类的意思。注意，Main.js 如果不带.js ，浏览器会报错，小程序正常。所以为了兼容性，还是带上吧。

这里index.html 通过 src=game.js 引入game.js文件，记得写上type = “module”，然后在game.js中导入main.js文件。一个坑就是，导入文件的时候，记得带.js

如果出现

解决方案也是蛮简单的咯，把他勾选上就好啦！如下图：