1 時間かけて簡単な物理ゲーム (ロープの原理) を作成します。

一昨日、会社の飲み会があり、みんなでゲームをしました。非常にシンプルなゲームですが、社内の飲み会には参加者が多いので、一部の人しか遊べません。遊んでください。夕方帰宅後、HTML5を使ってゲームを復元して翌日みんなでプレイしてみたところ、社内で特に女子たちから「面白い！！」と大評判になりました。 、 "それは難しい！" ！"…。

一般的に、女の子がゲームを気に入っているのを見ると、それが何のゲームなのか知りたくなりますよね?ゲームのインターフェースは以下の通りです。

ゲームのインターフェースを見た後、何人かの人が地面に落ちたと思います。ゲームが開始したら、マウスを押したまま画面を左右にスライドさせます。 、そして主人公はブランコでスイングするようなもので、より高くスイングするほど、適切なタイミングでマウスを放し、最も遠くまで飛んだ人が勝ちます。

実際、ゲームはシンプルで短いほど、パーティーなどのアクティビティでのプレイに適しています。特にランキングシステムでは、誰もが上位にランクされ、競い合いたいと思うでしょう。

ゲームテスト接続:

http://lufylegend.com/demo/box2dJump

注: このゲームは純粋に会社の同僚を楽しませるために、画像や効率などを目的として約 1 時間作成されています。最適化されていません。モバイル版は実行中にフリーズする可能性があります

1、準備

1 つは HTML5 オープン ソース エンジン lufylegend.js です。以下は私のブログの lufylegend-1.7.0 の投稿で、簡単に紹介されています

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

もう1つはBox2dWebで、ダウンロードアドレスは次のとおりです

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

2番目、ゲーム開発

からわかるように、ゲーム開発の焦点であるゲーム インターフェイス それは単なるロープです HTML5 でロープを実装するにはどうすればよいですか?

box2d にはロープはありませんが、box2d に精通している友人は回転ジョイント セット RevoluteJoint に精通しているはずです。ロープを実装するには、一連の剛体を回転ジョイントで接続します。まるでロープのようなブランコ。

以下のコードを見てください。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つです。

コードリスト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 関数には、基本的にゲームのすべての論理部分が含まれています。

まず、先ほど作成した「ロープ」にはスキンがありません。つまり、デバッグモードでないと表示されません。そして、ロープが揺れるときに、これらの剛体に沿って曲線を描くと、それがなります。がロープになっている場合、コードは次のようになります。

コードリスト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);
	}

最初にデバッグモードでゲーム全体が完成しました。作成した「ロープ」が実際には剛体の列であることがわかります

。

デバッグモードではなく、以下のインターフェースになります。

三、ソースコード

最後に、このゲームのソースコードを示します

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

注: ゲームのソースコード、lufylegend のみ。 js エンジンが含まれています 準備セクションを読んで、自分で box2dweb エンジンをダウンロードしてください

上記は、1 時間かけて簡単な物理ゲーム (ロープ原理) を作成する内容です。 PHP 中国語 Web サイト (www.php.cn)!