腾出1个小时制作一款简单的物理小游戏(绳子原理)

抽出1个小时制作一款简单的物理小游戏(绳子原理)

前天公司聚会，在一起玩游戏，游戏虽然及其简单，但是却很适合在活动中玩，因为公司参加聚会的人比较多，所以只有一部分人玩到了。晚上回家后我试着将其中一款游戏用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

而非debug模式下，就成了下面的界面了。
三，源码
最后给出本次游戏的源代码
http://lufylegend.com/lufylegend_download/box2dJump.rar
注：只含游戏源码，lufylegend.js引擎和box2dweb引擎请看准备部分自己下载
1楼yorhomwang1小时前
十分屌啊，大力支持（关注lufy这么久了，偶终于抢到沙发了）。