今天腾讯一款叫《让爱心加倍》的H5出现在朋友圈，项目地址：http://ssl.gongyi.qq.com/m/weixin/201899fr.html?id=06201808213922567543&et=upup_fx&ADTAG=upup_fx；

项目经理跑过来激动的问我。

项：这个案例开发要多久？

我：给我Annie2x买授权一小时完成，不买授权……emmm……（本来想推了，但是觉得这种不符合我的气质）三天。

项：一定要买吗？

我：肯定的。

项：好吧，我们内部先对一下。

我知道肯定又黄了，麻痹，我自己私下做一个吧，反正做了也懒得跟他说。他要我弄，我就让他买授权。

废话不多说开撸。

这个H5逻辑很简单，其实大家伙一看就会，我是为了挣点分，所以写一篇文章啦啦啦啦啦！

=================================================

场景很简单，一个游戏场景，一个end场景；

game场景：

舞台上三个元素：1、移动的人物；2、积分；3、放方块的sprite；

然后在库中放一个rect的类：

这个rect mc张这样(是的，就一个块状物):

发布设置好后，直接Ctrl+Enter发布

end场景：

直接放一个按钮，结束后再玩一次咯：

同样的设置好发布路径后发布；

==================================================

代码块：

一般我喜欢吧main.js搬到body的最下方，反正习惯这么搞了：

common.js里面做了一些适配而已，乱写的：

之后在main.js中把场景一起加进来，反正一张图都没有，直接一起加载了：

然后到game.js里面开始撸：

game.Game.prototype.initGame=function () {
var s = this;
s.TIME = 10;                                //出现方块的间隔
s._fps = 0;                                 //根据帧频递增的变量
s.rect = null;                              //即将出现的方块
s.rectArr = [];                             //方块的数组
s.SPEED = 10;                               //方块移动速度
s.wi = 0;                                   //这个变量主要是为了避免两个方块都是最长的状态把路堵死了
s._line = new annie.Rectangle(0, 750, 600, 0);//拖动范围，让人物只能左右拖动

//开始拖动
s.man_mc.addEventListener(annie.MouseEvent.MOUSE_DOWN, function () {
s.man_mc.startDrag(false, s._line);
    }.bind(s));

//结束拖动
s.man_mc.addEventListener(annie.MouseEvent.MOUSE_UP, function () {
s.man_mc.stopDrag();
    }.bind(s));

//帧时间循环出现方块并移动
s.addEventListener(annie.Event.ENTER_FRAME, s.entFrame = function () {
s.gameStart();
    }.bind(s));

};

//这里写的方式是每帧频加1分，并且在分数达到time倍数时出现方块
game.Game.prototype.gameStart=function () {
var s = this;
s._fps += 1;
s.score.text = s._fps;
if (s._fps % s.TIME == 0)
    {
s.addProp();
    }
s.goalScore();
};

//添加方块后载入到舞台
game.Game.prototype.addProp=function () {
var s = this;
var _k = s.getMathId(0,1);
var _w = s.getMathId(4,10);
if (Math.abs(_w - s.wi) < 3 && s.wi > 6)
   {
_w = 0;
   }else{
s.wi = _w;
   }
s.rect = new game.Rect_mc();
s.box_mc.addChild(s.rect);
s.rect.y = 0;
s.rect.width += _w * 10;
if (_k == 0)
   {
s.rect.x = 20;
   }else{
s.rect.x = 640 - (s.rect.width + 20);
   }

s.rectArr.push(s.rect);
};

//随机获取一个ID
game.Game.prototype.getMathId=function(min, max)
{
var s = this;
var _id = Math.floor(Math.random() * (max - min + 1) + min);
return _id;
};

//移动方块
game.Game.prototype.goalScore=function()
{
var s = this;
if (s.rectArr.length > 0)
    {
for (var i = 0;i < s.rectArr.length;i ++)
        {
s.rectArr[i].y += s.SPEED;

//碰撞
if (s.hitTestRectangle(s.rectArr[i], s.man_mc))
            {
console.log("hitTestRectangle OK---");
s.gameOver();
            }else{
if (s.rectArr[i].y > STAGE_HEIGHT)
                {
s.rectArr[i].removeAllEventListener();
s.box_mc.removeChild(s.rectArr[i]);
s.rectArr.splice(i, 1);
                }
            }
        }
    }
};

//检测碰撞
game.Game.prototype.hitTestRectangle=function(obj1, obj2)
{
var s = this;
var rect1 = obj1.getDrawRect();
var rect2 = obj2.getDrawRect();
var ax = 0, ay = 0, bx = 0, by = 0;

ax = rect1.x +  obj1.width * 0.5;//道具的x坐标+道具宽度的一半
ay = rect1.y + 40 * 0.5;//道具的y坐标+道具高度的一半

bx = rect2.x + 48 * 0.5;//人物的x坐标+人物宽度的一半
by = rect2.y + 86 * 0.5;//人物的y坐标+人物高度的一半

return ((Math.abs(ax - bx) <= (obj1.width * 0.5 + 48 * 0.5)) && (Math.abs(ay - by) <= (40 * 0.5 + 86 * 0.5)));
};

//游戏结束
game.Game.prototype.gameOver=function()
{
var s = this;
s.removeEventListener(annie.Event.ENTER_FRAME, s.entFrame);

var _e = new end.End();
s.stage.addChild(_e);
s.stage.removeChild(s);
};

以上就是游戏主要逻辑代码，当然也可以在移动的时候，更具分数的多少增加下落速度，其他东西自己添加哦；

好了，前前后后开发时间不到半小时，我能说啥？

=================偷工减料的分割线=======================

游戏结束的代码后面自己看去；我这里就不写了；

这里是我仿写的案例地址：

源码我会放出来，在商城自己去兑换？大家不会有意见吧？