游戏简介
前些天我们公司吃团圆饭时，搞了个超好玩的小游戏。其实很简单，但是在那种场面下真的特合适。因为人太多了，只有少数几个人幸运地被挑中了。
游戏回顾
下班后，我打算用HTML5搞个游戏，次日拿给同事们玩。结果咋样？整个公司的人都疯狂爱上它，特别是女生们，她们可是玩得特high，嘴里还不停地说“真好玩”!或者是“这也太难啦”这类话。
游戏玩法
这款游戏的界面超简单明了！刚开始要左拖右拉，模拟荡秋千时找最佳放手时刻，让角色跃出。最后比谁飞得更远分胜负！这款轻松又有趣的物理小游，很适合大家一块来挑战一下
吸引力
新颖的游戏最受欢迎！再加个排行榜，大家都摩拳擦掌地挑战自我，享受这刺激的感觉。女生们尤其热衷这类游戏，别的办公室的人都被吸引来看热闹！
游戏开发技术
var bx = 250,by=40;
var box01,box02;
box01 = new LSprite();
box01.x = bx;
box01.y = 30;
backLayer.addChild(box01);
box01.addBodyCircle(10,0,0,0,1,10,0.2);
linelist = [box01];
for(var i=0;i<20;i++){
box02 = new LSprite();
box02.x = bx;
box02.y = by+i*10;
backLayer.addChild(box02);
box02.addBodyCircle(10,0,0,1,1,10,0.2);
LGlobal.box2d.setRevoluteJoint(box02.box2dBody, box01.box2dBody );
linelist.push(box02);
box01 = box02;
}
这个游戏就是靠HTML5里的lufylegend.js和Box2dWeb两个引擎搞出来的！说到绳子这个环节，那可是我们花了大力气做出来的
hero = new LSprite(); var bit = new LBitmap(new LBitmapData(imglist["chara03"])); bit.x = -25; bit.y = -20; hero.addChild(bit); hero.bitmap = bit; hero.x = bx; hero.y = by+i*10; backLayer.addChild(hero); hero.addBodyPolygon(30,50,1,2,10,.2); joinline = LGlobal.box2d.setRevoluteJoint(hero.box2dBody, box01.box2dBody );
绳子实现方法
在Box2D中，虽然没有直接的绳子功能，但咱可以用旋转关节模拟一个！就拿一堆方块，搭出个旋转关节的链子，看上去不就是在晃动吗？
代码示例
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe); backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,ondown); backLayer.addEventListener(LMouseEvent.MOUSE_UP,onup);
在上边的代码和场景，你是不是已经知道怎么用转来转去的关节将静态的和动态的物体连接起来变成绳子了？然后还要在主角身上装这个关节，让他能跟那个”绳子”融为一体！
控制事件
function ondown(event){
if(out)return;
monseIsDown = true;
mouseObject.x = event.offsetX;
}
function onup(event){
if(out)return;
monseIsDown = false;
LGlobal.box2d.world.DestroyJoint(joinline);
hero.bitmap.bitmapData = new LBitmapData(imglist["chara04"])
hero.bitmap.x = 0;
hero.bitmap.y = 0;
out = true;
}
想让主角摇摆不定、飞起来？主要得做三件事哦：onframe、ondown、onup。onframe这家伙就像游戏里的主要路线，管理着所有的游戏步骤；ondown和onup则是在鼠标按下和松开时发生作用的小细节。
游戏逻辑
在这个onframe函数里头，咱们得搞定画“绳子”，还有操控它摆动以及主角跳走后窗户还得跟着动这类事儿这不就是清单3到7为大家呈现的内容！
backLayer.graphics.clear();
backLayer.graphics.drawRect(1,"#000000",[0,0,LGlobal.width,LGlobal.height]);
for(var i=0;i<linelist.length - 1;i++){
backLayer.graphics.drawLine(2,"#000000",[linelist[i].x,linelist[i].y,linelist[i+1].x,linelist[i+1].y]);
}
总结与展望
这个游戏太有趣了！让公司聚会变得更欢乐，也证明了HTML5做游戏的实力。就是通过模拟绳子移动、简化操作以及提升用户感受这几个点，让大家都爱上了玩它！
if(monseIsDown && !out){
if(checkIndex++ > 10){
checkIndex = 0;
if(LGlobal.offsetX - mouseObject.x > 50){
var force = 50;
var vec = new LGlobal.box2d.b2Vec2(force,0);
hero.box2dBody.ApplyForce(vec, hero.box2dBody.GetWorldCenter());
}else if(LGlobal.offsetX - mouseObject.x < -50){
var force = 50;
var vec = new LGlobal.box2d.b2Vec2(-force,0);
hero.box2dBody.ApplyForce(vec, hero.box2dBody.GetWorldCenter());
}
mouseObject.x = LGlobal.offsetX;
}
}
跟你们分享我们公司聚会玩过的一个挺有意思的游戏，希望你们也能感受下团队活动那种特有滴欢乐！
评论0