如何用h5开发游戏：开源一个自己手写的超mini的H5游戏框架
如何用h5开发游戏：开源一个自己手写的超mini的H5游戏框架*注：为兼容不同比例的屏幕，宽度和高度会根据实际的比例做出调整，以宽度为主，计算比例后自定高度。frame：帧数image：背景图片width：宽度height：高度
整体一览
整体框架结构
小文档GKM_Scene
场景类：创建场景
color：背景颜色
image：背景图片
width：宽度
height：高度
frame：帧数
*注：为兼容不同比例的屏幕，宽度和高度会根据实际的比例做出调整，以宽度为主，计算比例后自定高度。
create()
创建方法：
初始化场景下背景、事件等
addSpirit()
添加精灵：往场景内添加精灵，并初始化该精灵
spirit：需要添加的精灵对象
refresh()
每一帧必须经过的函数，可以在里面判断碰撞等事件
createSpirits()
重绘当前场景中所有的精灵
getSpiritsByName()
根据名字可以获取Spirit
name：精灵的名字
return ：Array<Spirit>
removeSpirit()
移除场景中的精灵
spirit：需要删除的精精灵
show()
显示场景
hide()
隐藏场景
GKM_Spirit
精灵类，游戏中的基础对象
name：精灵的名称
x：精灵的初始x坐标
y：精灵的初始y坐标
width：精灵的宽度
height：精灵的高度
image：精灵的图片
create()
创建精灵，并初始化
event_mouse_down()
鼠标、手指按下的事件
x：x 坐标
y：y坐标
event_mouse_up()
鼠标或手指抬起的时间
x：x 坐标
y：y坐标
event_click()
鼠标点击的事件
x：x 坐标
y：y坐标
event_move()
手指移动的事件
x：x 坐标
y：y坐标
GKM_Action
活动类，各个精灵对象的活动
mx
变动的坐标x
my
变动的坐标Y
mw
缩放的宽度
mh
缩放的高度
ma
旋转的角度
time
变化的时间
GKM_Timer
计时器类：
obj：对象
func：方法
time:时间间隔
start
开始
stop
停止
start_action(spirit action number)
spirit:需要变动的精灵
action：GKM_Action的数组
number：循环次数
stop_action(spirit)
停止动作，
spirit：需要停止动作的精灵
check_collision(spirit1 spirit2)
碰撞检查
spirit1：精灵1
spirit2：精灵2
load_res(name path type)
加载资源：
name：资源名称
path：资源路径
type：资源类型
type有一下两类：
RES_TYPE_AUDIO : "audio" 音频
RES_TYPE_IMAGE : "image" 图片
play_audio(audio_name)
播放音效：
audio_name：加载资源的名称
一个小的H5游戏实例预览效果，点击按钮，让小熊猫吃星星
游戏截图
游戏效果
第0步，注册游戏场景和预加载需要的资源
在setting.js中，注册游戏场景和预加载游戏资源，如图：
第1步，我们先创建一个刚才注册好的Main场景类
main场景类继承于GKM_Scene类
第2步，重写场景类的init方法
2-0:绘制场景UI
绘制地板
2-1:绘制向上的按钮
绘制向上的按钮
2-2:绘制向下，向左，向右的按钮
绘制向下，向左，向右的按钮
2-3:绘制主角，也就是小熊猫
绘制小熊猫
2-4:绘制星星
绘制熊猫吃的星星
说明一下，绘制星星是先写一个绘制星星的方法，然后再通过计时器来调用这个方法，就可以一直不停地生成星星了。
2-5:重写帧函数
重写帧函数
在每一帧重绘时检查碰撞，如果主角碰到了星星，就把星星移除，然后加分，当然，这里只做了移除，没有做加分
END需要Demo和源码的小伙伴，私信回复【游戏】即可~~
都看到这了，求一个点赞、收藏、转发、关注，谢谢啦~
