用绳子原理制作的一款简单的html5小游戏

　　

　　前天公司聚会，在一起玩游戏，游戏虽然及其简单，但是却很适合在活动中玩，因为公司参加聚会的人比较多，所以只有一部分人玩到了。晚上回家后我试着将其中一款游戏用html5还原了一下，第二天给大家玩儿，在公司的人气爆火，尤其女生。

　　一般大家看到女生喜欢，肯定急切想知道是什么游戏吧?游戏界面如下。

　　看到游戏界面后，估计有几个人已经摔倒在地了吧，就是一个及其简单的物理游戏，游戏开始后，按住鼠标左右划动屏幕，主人公就好像荡秋千一样，越荡越高，等适当的时候松开鼠标，将主人公荡出去，谁飞出去的最远，谁就获胜。

　　其实，越是这样简单短小的游戏，越是适合聚会这样的活动中玩，尤其加上排名系统后，大家也会想要排名靠前一些，而争着去玩儿。

　　游戏测试连接：

　　http://lufylegend.com/demo/box2dJump

　　注意：本游戏纯粹是抽了一个小时左右时间随便给公司同事娱乐一下而做的，画面和效率等都没经过优化，请用PC打开，移动端运行起来估计会卡死。

　　制作开始

　　一，准备

　　游戏中用到了两个引擎

　　一个是HTML5开源引擎lufylegend.js，下面是我在博客的lufylegend-1.7.0发布帖，里面有简单的介绍

　　http://blog.csdn.net/lufy_legend/article/details/8719768

　　另一个是Box2dWeb,下载地址如下

　　http://code.google.com/p/box2dweb/downloads/list

　　二，游戏开发

　　从游戏界面中可以看到，游戏开发的重点就是一条绳子，在HTML5中如何来实现绳子呢?

　　在box2d中是没有绳子的，但是熟悉box2d的朋友们，应该对旋转关节setRevoluteJoint不陌生，实现绳子的话，我们可以把一连串的刚体用旋转关节连接在一起，这样这些刚体摆动起来的话，就跟绳子差不多了。

　　看下面的代码，我把1个静态的刚体和20个动态的刚体用旋转关节连接到了一起。

　　代码清单1

[javascript] view plaincopy

1. var bx = 250,by=40;  
2.     var box01,box02;  
3.     box01 = new LSprite();  
4.     box01.x = bx;  
5.     box01.y = 30;  
6.     backLayer.addChild(box01);  
7.     box01.addBodyCircle(10,0,0,0,1,10,0.2);  
8.     linelist = [box01];  
9.     for(var i=0;i<20;i++){  
10.         box02 = new LSprite();  
11.         box02.x = bx;  
12.         box02.y = by+i*10;  
13.         backLayer.addChild(box02);  
14.         box02.addBodyCircle(10,0,0,1,1,10,0.2);  
15.         LGlobal.box2d.setRevoluteJoint(box02.box2dBody, box01.box2dBody );  
16.         linelist.push(box02);  
17.         box01 = box02;  
18.     }  

最后，在加上一个稍微大一点的刚体，来作为游戏中的主人公，并且也用旋转关节跟前面的刚体连接起来。
      代码清单2
[javascript] view plaincopy

1. hero = new LSprite();  
2.     var bit = new LBitmap(new LBitmapData(imglist["chara03"]));  
3.     bit.x = -25;  
4.     bit.y = -20;  
5.     hero.addChild(bit);  
6.     hero.bitmap = bit;  
7.     hero.x = bx;  
8.     hero.y = by+i*10;  
9.     backLayer.addChild(hero);  
10.     hero.addBodyPolygon(30,50,1,2,10,.2);  
11.     joinline = LGlobal.box2d.setRevoluteJoint(hero.box2dBody, box01.box2dBody );  

这样就差不多了，剩下的就是如何来控制主人公的摇摆和飞出去，这时候需要三个事件。

    代码清单3

[javascript] view plaincopy

1. backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
2.     backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,ondown);  
3.     backLayer.addEventListener(LMouseEvent.MOUSE_UP,onup);  

上面代码中onframe函数是时间轴，ondown和onup分别是鼠标按下和弹起时调用的事件，鼠标按下和弹起比较简单，代码如下。

代码清单4

[javascript] view plaincopy

1. function ondown(event){   
2.     if(out)return;  
3.     monseIsDown = true;   
4.     mouseObject.x = event.offsetX;  
5. }  
6. function onup(event){     
7.     if(out)return;  
8.     monseIsDown = false;  
9.     LGlobal.box2d.world.DestroyJoint(joinline);  
10.     hero.bitmap.bitmapData = new LBitmapData(imglist["chara04"])  
11.     hero.bitmap.x = 0;  
12.     hero.bitmap.y = 0;  
13.     out = true;  
14. }  

onframe函数里基本上包含了游戏的所有逻辑部分。

首先，前面制作的“绳子”是没有皮肤的，也就是说除非debug模式，否则是不显示的，那么就要在绳子摆动的时候，顺着这些刚体绘制出一条曲线，就变成了绳子了，代码如下。

代码清单5

[javascript] view plaincopy

1. backLayer.graphics.clear();  
2.     backLayer.graphics.drawRect(1,"#000000",[0,0,LGlobal.width,LGlobal.height]);  
3.     for(var i=0;i
4.         backLayer.graphics.drawLine(2,"#000000",[linelist[i].x,linelist[i].y,linelist[i+1].x,linelist[i+1].y]);  
5.     }  

接着，是让绳子摆动，判断鼠标是否左右晃动，分别向左或者向右给刚体加上一个力，来让刚体动起来，代码如下

代码清单6

[javascript] view plaincopy

1. if(monseIsDown && !out){      
2.         if(checkIndex++ > 10){  
3.             checkIndex = 0;  
4.             if(LGlobal.offsetX - mouseObject.x > 50){  
5.                 var force = 50;  
6.                 var vec = new LGlobal.box2d.b2Vec2(force,0);  
7.                 hero.box2dBody.ApplyForce(vec, hero.box2dBody.GetWorldCenter());  
8.             }else if(LGlobal.offsetX - mouseObject.x < -50){  
9.                 var force = 50;  
10.                 var vec = new LGlobal.box2d.b2Vec2(-force,0);  
11.                 hero.box2dBody.ApplyForce(vec, hero.box2dBody.GetWorldCenter());  
12.             }  
13.             mouseObject.x = LGlobal.offsetX;  
14.         }     
15.     }   

最后，在鼠标弹起的时候，由于主人公被弹飞了出去，所以让游戏窗口跟着他一起动起来就可以了。

代码清单7

整个游戏就这样制作完成了，先在debug模式下预览一下，可以看到我们制作的“绳子”其实就是一串刚体

而非debug模式下，就成了下面的界面了。

三，源码

最后给出本次游戏的源代码

http://lufylegend.com/lufylegend_download/box2dJump.rar

注：只含游戏源码，lufylegend.js引擎和box2dweb引擎请看准备部分自己下载

【用绳子原理制作的一款简单的html5小游戏】相关文章

1. 用绳子原理制作的一款简单的html5小游戏

2. HTML5小游戏：极度有趣的机械组合游戏

3. HTML5小游戏：超酷魔幻射击游戏

4. HTML5小游戏：施展小魔法，寻找大金币

5. HTML5小游戏：意想不到的地铁

6. 跨平台HTML5小游戏 随时随地玩

7. HTML5小游戏：惊险刺激的超级战机

8. 3366第二届小游戏开发大赛，开发小游戏共赢大未来

9. Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

10. Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

本文来源：https://www.51html5.com/a491.html