请选择 进入手机版 | 继续访问电脑版
查看: 2901|回复: 153

[新手教程] html5制作一款简单的物理小游戏(绳子原理)

  [复制链接]
最佳答案
0 
guofinni 发表于 2017-3-28 13:48:21 | 显示全部楼层 |阅读模式


采用HTML5制作一款及其简单的游戏
游戏界面如下:

312.jpg

看到游戏界面后,估计有几个人已经摔倒在地了吧,就是一个及其简单的物理游戏,游戏开始后,按住鼠标左右划动屏幕,主人公就好像荡秋千一样,越荡越高,等适当的时候松开鼠标,将主人公荡出去,谁飞出去的最远,谁就获胜。
其实,越是这样简单短小的游戏,越是适合聚会这样的活动中玩,尤其加上排名系统后,大家也会想要排名靠前一些,而争着去玩儿。

制作开始:

一,准备


游戏中用到了两个引擎:
一个是Html5开源引擎lufylegend.js,里面有简单的介绍
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. 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.     }
复制代码

最后,在加上一个稍微大一点的刚体,来作为游戏中的主人公,并且也用旋转关节跟前面的刚体连接起来。
  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 );  
复制代码

这样就差不多了,剩下的就是如何来控制主人公的摇摆和飞出去,这时候需要三个事件。
  1. backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
  2.     backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,ondown);  
  3.     backLayer.addEventListener(LMouseEvent.MOUSE_UP,onup);  
复制代码

上面代码中onframe函数是时间轴,ondown和onup分别是鼠标按下和弹起时调用的事件,鼠标按下和弹起比较简单,代码如下。
  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模式,否则是不显示的,那么就要在绳子摆动的时候,顺着这些刚体绘制出一条曲线,就变成了绳子了,代码如下。
  1. backLayer.graphics.clear();  
  2.     backLayer.graphics.drawRect(1,"#000000",[0,0,LGlobal.width,LGlobal.height]);  
  3.     for(var i=0;i<linelist.length - 1;i++){  
  4.         backLayer.graphics.drawLine(2,"#000000",[linelist[i].x,linelist[i].y,linelist[i+1].x,linelist[i+1].y]);  
  5.     }  
复制代码

接着,是让绳子摆动,判断鼠标是否左右晃动,分别向左或者向右给刚体加上一个力,来让刚体动起来,代码如下
  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.     }     
复制代码

最后,在鼠标弹起的时候,由于主人公被弹飞了出去,所以让游戏窗口跟着他一起动起来就可以了。
  1. if(!out)return;  
  2.     backLayer.x = LGlobal.width*0.5 - hero.x;  
  3.     if(backLayer.x > 0){  
  4.         backLayer.x=0;  
  5.     }  
  6.     LGlobal.box2d.synchronous();  
  7.     if(!hero.box2dBody.IsAwake() && out){  
  8.         backLayer.removeEventListener(LEvent.ENTER_FRAME,onframe);  
  9.         point = Math.floor((hero.x - 250)*0.1);  
  10.   
  11.         var rank = new GameRanking();  
  12.         backLayer.addChild(rank);  
  13.     }  
复制代码

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

而非debug模式下,就成了下面的界面了。
31.jpg
三,源码

最后给出本次游戏的源代码
游客,如果您要查看本帖隐藏内容请回复



最佳答案
0 
isygqn11 发表于 2017-3-28 15:28:58 | 显示全部楼层
#在这里快速回复#网站主域名:[
最佳答案
0 
isygqn11 发表于 2017-3-28 15:29:03 | 显示全部楼层
#在这里快速回复#网站主域名:[
最佳答案
0 
isygqn11 发表于 2017-3-28 15:29:08 | 显示全部楼层
网站主域名:[
最佳答案
0 
isygqn11 发表于 2017-3-28 15:29:12 | 显示全部楼层
网站主域名:[
最佳答案
0 
isygqn11 发表于 2017-3-28 15:29:15 | 显示全部楼层
网站主域名:[
最佳答案
0 
isygqn11 发表于 2017-3-28 15:29:18 | 显示全部楼层
网站主域名:[
最佳答案
0 
cyp4087 发表于 2017-3-28 15:48:33 | 显示全部楼层
房卡麻将后台搭建和客户端编译+微信登录源码
最佳答案
0 
jiangzi 发表于 2017-3-28 17:23:44 | 显示全部楼层
html5制作一款简单的物理小游戏(绳子原理)
最佳答案
0 
isygqn11 发表于 2017-3-28 17:54:50 | 显示全部楼层
说是土豪金麻将的    你脑子确定没被门夹过????
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表