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


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

更多 hero 相关资讯

When Earth Needs a Hero

When Earth Needs a Hero

简介:完全基于HTML5技术开发的在线小游戏,即你需要操控这个“人物”来保护地球,画面效果都不错,赶快试试吧。

更多 html5 相关资讯

制作HTML5视觉游戏编程工具DASH的经验

制作HTML5视觉游戏编程工具DASH的经验

    本文由两部分内容混合而成,一是简短的开发者日志,二是对我们开发HTML5可视化编程工具DASH时面临的挑战的总结。   DASH是一个用于制作游戏的HTML5可视化编程工具。

创造一款成功HTML5游戏的完整指南

创造一款成功HTML5游戏的完整指南

     现在,我会花大量时间向学生,业余爱好者,专业开发者以及老师解释如何使用HTML5创造。而最近我也一直纠结着是否应该将这些观点与所有人分享。   为什么现在有这么多

一个HTML5的视频智力游戏

一个HTML5的视频智力游戏

这是一个可定制的HTML5视频/图像难题。祝你好运试图解决它;

HTML5 canvas DEMO:生长的树

HTML5 canvas DEMO:生长的树

简介:一个简单的HTML5演示实例,所有的动态画面和色彩效果完全由HTML5技术实现。

HTML5 3D游戏:球撞球

HTML5 3D游戏:球撞球

简介:一个完全由HTML5技术实现的在线小游戏,在这个游戏,你只需控制蓝色的球球把绿色的球撞出这个平台即可。

HTML5 Blackjack

HTML5 Blackjack

简介:一个完全由HTML5技术打造的21点游戏,你的本金是$100,每10美元一手。游戏的设计是主要以快打为主。

HTML5塔防游戏

HTML5塔防游戏

简介:一款基于HTML5技术的塔防小游戏,你只需阻止你的敌人走到终点即可。期间你可以安装障碍物或者安装大炮将他们击毙,当然,你不能把从起点到终点的露给堵死。

HTML5版扫雷

HTML5版扫雷

简介:一个完全由HTML5技术开发的在线扫雷小游戏。规则很简单-点击方块来清除它们,但要提防致命的炸弹。编号是告诉你周边有几个炸弹,用这些信息来计算你下一步。用右键点击

又见HTML5版的俄罗斯方块

又见HTML5版的俄罗斯方块

简介:完全基于HTML5+Javascript技术开发的在线俄罗斯方块,虽然没有之前的3d效果,但是画面效果还是值得一玩。

HTML5版宝石迷阵

HTML5版宝石迷阵

简介:完全基于HTML5技术开发的网页版钻石迷阵,相当经典的小游戏,页面布局相当合理漂亮。玩起来的也非常的流畅