Prendre 1 heure pour réaliser un jeu de physique simple (principe de la corde)

Avant-hier, l'entreprise a organisé une fête et nous avons joué à des jeux ensemble. Bien que le jeu soit extrêmement simple, il est très approprié pour jouer lors d'événements car de nombreuses personnes assistent à la fête. l'entreprise, seules certaines personnes peuvent y jouer. Après être rentré à la maison le soir, j'ai essayé de restaurer l'un des jeux en utilisant HTML5 et j'y ai joué pour tout le monde le lendemain. Il est devenu très populaire dans l'entreprise, en particulier les filles. Pendant qu'elles jouaient, elles ont crié : « おもしろい ! , "Il est difficile!" !"….

Généralement quand on voit une fille aimer ça, on doit avoir hâte de savoir de quel jeu il s'agit, non ? L'interface du jeu est la suivante.

Après avoir vu l'interface du jeu, je suppose que quelques personnes sont tombées à terre. C'est tellement simple. jeu de physique. Une fois le jeu lancé, maintenez la souris enfoncée et faites glisser l'écran vers la gauche et la droite. Le protagoniste sera comme se balancer sur une balançoire, plus il se balance, relâchez la souris au bon moment et faites sortir le protagoniste. le plus loin gagnera.

En fait, plus le jeu est simple et court, plus il est adapté pour jouer à des activités telles que des fêtes. Surtout avec le système de classement, tout le monde voudra également être classé plus haut, et En compétition pour jouer.

Connexion test du jeu :

http://lufylegend.com/demo/box2dJump

Remarque : Ce jeu a été créé uniquement pour le divertissement de mes collègues de l'entreprise pendant environ une heure. Les graphismes et l'efficacité n'ont pas été optimisés. Veuillez utiliser un PC pour l'ouvrir. La version mobile se bloquera probablement lors de son exécution

Début de la production

1 Préparation

Deux moteurs sont utilisés dans le jeu<.>

L'un est le moteur open source HTML5 lufylegend.js Ce qui suit est mon article lufylegend-1.7.0 sur mon blog, qui contient une brève introduction

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

L'autre est Box2dWeb, l'adresse de téléchargement est la suivante

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

2. Développement de jeux

Comme vous pouvez le voir sur l'interface du jeu, l'objectif du développement de jeux est une corde. Comment implémenter la corde en HTML5 ?

Il n'y a pas de corde dans box2d, mais les amis qui connaissent box2d devraient être familiers avec l'ensemble de joints rotatifsRevoluteJoint. Pour mettre en œuvre la corde, nous pouvons connecter une série de corps rigides avec rotation. Ensemble, ces corps rigides ressemblent presque à des cordes lorsqu'ils se balancent.

Regardez le code ci-dessous, j'ai connecté 1 corps rigide statique et 20 corps rigides dynamiques avec des articulations tournantes.

Liste de codes 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;
    }

Enfin, ajoutez un corps rigide légèrement plus grand pour servir de protagoniste dans le jeu, et utilisez également des joints rotatifs pour suivre l'avant les corps rigides sont connectés.

Liste de codes 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 );

C'est tout. La seule chose qui reste est de savoir comment contrôler le swing du protagoniste et s'envoler. Cela nécessite trois événements.

Liste de codes 3

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

Dans le code ci-dessus, la fonction onframe est la chronologie, ondown et onup sont des événements appelés lorsque la souris est enfoncée et levée respectivement . Appuyer et apparaître est relativement simple, le code est le suivant.

Liste de codes 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;
}

La fonction onframe contient essentiellement toutes les parties logiques du jeu.

Tout d'abord, la "corde" réalisée plus tôt n'a pas de skin, ce qui signifie qu'elle ne sera affichée que si elle est en mode débogage. Ensuite, vous devez les suivre lorsque la corde. se balance. Le corps rigide dessine une courbe et la transforme en corde. Le code est le suivant.

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

Ensuite, laissez la corde se balancer, déterminez si la souris tremble à gauche ou à droite et appliquez une force sur le corps rigide pour respectivement à gauche ou à droite Pour faire bouger le corps rigide, le code est le suivant

Liste de codes 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;
		}	
	}	

Enfin, lorsque la souris rebondit, le protagoniste est jeté, alors laissez simplement la fenêtre de jeu bouger avec lui.

Liste de codes 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);
	}

Le jeu entier est terminé de cette manière. Prévisualisez-le d'abord en mode débogage. peut voir que la "corde" que nous avons fabriquée est en fait une chaîne de corps rigides

plutôt qu'en débogage mode, cela devient l’interface suivante.

Trois, le code source

Enfin, le code source de ce jeu est donné

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

Remarque : seul le code source du jeu est inclus. Veuillez consulter la section de préparation du moteur lufylegend.js et du moteur box2dweb à télécharger par vous-même

et plus Cela signifie prendre 1 heure pour créer un jeu de physique simple (principe de la corde). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !