抽出1小時製作一款簡單的實體小遊戲(繩子原理)-H5教程-PHP中文網

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

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;
    }

登入後複製

最后，在加上一个稍微大一点的刚体，来作为游戏中的主人公，并且也用旋转关节跟前面的刚体连接起来。

代码清单2

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 );

登入後複製

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

代码清单3

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

登入後複製

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

代码清单4

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函数里基本上包含了游戏的所有逻辑部分。

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

代码清单5

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]);
	}

登入後複製

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

代码清单6

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;
		}	
	}

登入後複製

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

代码清单7

if(!out)return;
	backLayer.x = LGlobal.width*0.5 - hero.x;
	if(backLayer.x > 0){
		backLayer.x=0;
	}
	LGlobal.box2d.synchronous();
	if(!hero.box2dBody.IsAwake() && out){
		backLayer.removeEventListener(LEvent.ENTER_FRAME,onframe);
		point = Math.floor((hero.x - 250)*0.1);

		var rank = new GameRanking();
		backLayer.addChild(rank);
	}

登入後複製

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