【源码分享】腾讯公益H5《让爱心加倍》,Annie2x半小时复现,

腾讯牛逼H5,被Annie2x完爆,就这么厉害。

今天腾讯一款叫《让爱心加倍》的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;

attachments-2018-09-bJ8sWpqY5b923478e52cc.png

attachments-2018-09-0lXgLDc65b92349098803.png
然后在库中放一个rect的类:

attachments-2018-09-HujliEiZ5b9234caef689.png

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

attachments-2018-09-wysRB57g5b9234fe33673.png

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

attachments-2018-09-8rEKePsK5b923528a0c96.png


end场景:

直接放一个按钮,结束后再玩一次咯:

attachments-2018-09-DuTPzRvj5b92356ec34ac.png

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

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

代码块:

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

attachments-2018-09-eczxlMEX5b9235cd80568.png

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

attachments-2018-09-Djq0wuZT5b9236045019b.png

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

attachments-2018-09-lrJSvuVv5b92363df1cce.png

然后到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);
};

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

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


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

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

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

qr?data=http%3A%2F%2Fgz.100jc.net%2Fannie2xTest%2Fg01%2F&level=H&transparent=0&blockpixel=12&marginblock=1&logourl=&size=260&kid=cliim&key=c2d431306060c2ad2605b3dc01de4db6

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

  • 发表于 2018-09-07 16:37
  • 阅读 ( 1829 )
  • 分类:AnnieJS引擎

你可能感兴趣的文章

相关问题

4 条评论

请先 登录 后评论
不写代码的码农
vien007

不正经的码农

7 篇文章

作家榜 »

  1. 大北兔 15 文章
  2. 皮卡丘先生 13 文章
  3. hero 10 文章
  4. vien007 7 文章
  5. anlun214 5 文章
  6. ningbnii 4 文章
  7. Even 4 文章
  8. 炸天 4 文章