学习微信小游戏（一）

1、项目目录

1）audio：用于存放音频
2）images：用于存放图片
3）js：用于存放我们编写的js文件
a、symbol.js：
b、weapp-adapter.js：
4）game.js：小游戏程序的入口文件
5）game.json：小游戏的配置文件
6）project.config.json：小程序项目全局配置文件
7）project.private.config.json：小程序私有配置文件

2、canvas画布

1）微信小游戏使用两个文件创建了canvas画布（自带）
a、import ‘./js/libs/weapp-adapter’
b、import ‘./js/libs/symbol’
2）let ctx = canvas.getContest(‘2d’)

3、小游戏的坐标系统

1）原点（0，0）
2）x轴：右为正
3）y轴：下为正

###学习：微信小游戏制作工具，不需要写代码
@@@：‘./’：指目录

4、contest2d的重要方法

1）drawImage(img,sx,sy,s_width,s_height,dx,dy,width,height)
a、img：是图片对象，不是图片路径
a1、let img = new Image()
b1、img.src = ‘xxx.png’
b、sx，sy，s_width，s_height：表示从图片的（sx，sy）点开始，绘制区域宽s_width，高s_height
c、dx，dy：图片绘制在canvas的（dx，dy）坐标上
d、width，height：图片在canvas上的绘制大小

let ctx = canvas.getContext('2d')
let img = new Image()
img.src = 'xxx.png'
//onload回调函数，在图片加载完之后执行
img.onload( () =>{
ctx.drawImage(img,0,0,img.width,img.height,0,100,375,600)
} )

2）fillRect(x,y,width,height)
a、绘制一个被填充的矩形
b、绘制前应设置填充颜色fillStyle，边框颜色strokeStyle，边框宽度lineWidth
3）fillText(str,x,y)
a、绘制一个文本
b、绘制前应设置字体font，文字颜色fillStyle
4）clearRect(0,0,width,height)
a、清除

   ctx.clearRect(0,0,window.innerWidth,window.innerHeight)

5、游戏精灵的设计

游戏最基本的单位叫做精灵Sprite，场景中显示的任何对象都是精灵对象，所以我们先编写一个精灵类，提供游戏中通用的方法，然后不通的游戏元素都继承这个精灵类，对有特殊需求的方法进行重写，并补充一些专用的方法。