h5汽车图片标注鼠标经过提示_边学习边分享，开源一个自己手写的超mini的H5游戏框架...

整体一览

整体框架结构

小文档

GKM_Scene

场景类：创建场景

color：背景颜色

image：背景图片

width：宽度

height：高度

frame：帧数

*注：为兼容不同比例的屏幕，宽度和高度会根据实际的比例做出调整，以宽度为主，计算比例后自定高度。

create()

创建方法：

初始化场景下背景、事件等

addSpirit()

添加精灵：往场景内添加精灵，并初始化该精灵

spirit：需要添加的精灵对象

refresh()

每一帧必须经过的函数，可以在里面判断碰撞等事件

createSpirits()

重绘当前场景中所有的精灵

getSpiritsByName()

根据名字可以获取Spirit

name：精灵的名字

return ：Array

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和源码的小伙伴，私信回复【游戏】即可~~

都看到这了，求一个点赞、收藏、转发、关注，谢谢啦~