Take 1 hour to make a simple physics game (rope principle)

The day before yesterday, the company had a party and we played games together. Although the game is extremely simple, it is very suitable for playing at events. Because there are many people attending the party in the company, only some people can play it. After I got home in the evening, I tried to restore one of the games using HTML5 and played it for everyone the next day. It became very popular in the company, especially the girls. While playing, they shouted, "おもしろい!!", "It's difficult!" !”….

# Generally when everyone sees a girl liking it, they must be eager to know what game it is, right? The game interface is as follows.

##After seeing the game interface, I guess a few people have fallen to the ground. It’s just an extremely simple one. It's a physics game. After the game starts, hold down the mouse and slide the screen left and right. The protagonist will be like swinging on a swing, getting higher and higher. When the time is right, release the mouse and swing the protagonist out. Whoever flies the farthest will win. win.

In fact, the simpler and shorter the game, the more suitable it is to play in activities such as parties. Especially with the ranking system, everyone will also want to be ranked higher, and Competing to play.

Game test connection:

Note: This game was purely created after taking about an hour to entertain colleagues at the company. The graphics and efficiency have not been optimized. Please use a PC to open it. The mobile version will probably freeze when running.

Production begins

Two engines are used in the game

One is the HTML5 open source engine lufylegend.js. The following is my lufylegend-1.7.0 post on my blog, which has a brief introduction

The other is Box2dWeb, the download address is as follows

As you can see from the game interface, the focus of game development is a rope. How to implement the rope in HTML5?

There is no rope in box2d, but friends who are familiar with box2d should be familiar with the rotating joint setRevoluteJoint. To implement the rope, we can connect a series of rigid bodies with rotating joints. Together, these rigid bodies are almost like ropes when they swing.

Look at the code below. I connected 1 static rigid body and 20 dynamic rigid bodies with rotating joints.

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

Finally, add a slightly larger rigid body as the protagonist in the game, and also use rotating joints with the previous rigid body connect them.

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

That’s it. All that’s left is how to control the protagonist’s swing and fly out. At this time, three events are needed.

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

The onframe function in the above code is the timeline, ondown and onup are events called when the mouse is pressed and popped up respectively. When the mouse is pressed It is relatively simple to pop up, the code is as follows.

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

The onframe function basically contains all the logical parts of the game.

First of all, the "rope" made earlier has no skin, which means that it will not be displayed unless it is in debug mode. Then when the rope swings, follow these The rigid body draws a curve and turns it into a rope. The code is as follows.

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

Then, let the rope swing, judge whether the mouse is shaking left or right, and add a force to the rigid body to the left or right to make it The rigid body moves, the code is as follows

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

Finally, when the mouse bounces up, because the protagonist is bounced out, let the game window follow Just move him together.

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

The entire game is completed in this way. Preview it in debug mode first and you can see The "rope" we made is actually a string of rigid bodies

Three, source code

Finally, the source code of this game is given

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

Note: Only game source code is included. For lufylegend.js engine and box2dweb engine, please see the preparation section to download it yourself

above It means taking 1 hour to make a simple physics game (rope principle). For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!