Nehmen Sie sich 1 Stunde Zeit, um ein einfaches Physikspiel (Seilprinzip) zu erstellen.-H5-Tutorial-php.cn

Nehmen Sie sich 1 Stunde Zeit, um ein einfaches Physikspiel (Seilprinzip) zu erstellen.

黄舟

Freigeben： 2017-03-01 16:01:24

Original

3606 Leute haben es durchsucht

Vorgestern veranstaltete die Firma eine Party und wir spielten zusammen. Obwohl das Spiel äußerst einfach ist, eignet es sich sehr gut zum Spielen auf Veranstaltungen Die Firma, nur einige Leute können es spielen. Als ich am Abend nach Hause kam, versuchte ich, eines der Spiele mit HTML5 wiederherzustellen und spielte es am nächsten Tag in der Firma, besonders bei den Mädchen, sehr beliebt. , „Es ist schwierig!“

Wenn man sieht, dass ein Mädchen es mag, muss man im Allgemeinen unbedingt wissen, um welches Spiel es sich handelt, oder? Die Spieloberfläche ist wie folgt.

Nachdem ich die Spieloberfläche gesehen habe, sind einige Leute wohl zu Boden gefallen. Es ist so einfach Halten Sie nach dem Spielstart die Maus gedrückt und schieben Sie den Protagonisten wie auf einer Schaukel, indem Sie ihn immer höher schwingen. Wer am weitesten fliegt, gewinnt.

Tatsächlich gilt: Je einfacher und kürzer das Spiel, desto besser eignet es sich für Aktivitäten wie Partys. Insbesondere mit dem Ranglistensystem möchte jeder auch einen höheren Rang erreichen. und Konkurrieren, um zu spielen.

Spieltestverbindung:

http://lufylegend.com/demo/box2dJump

Hinweis: Dieses Spiel wurde etwa eine Stunde lang ausschließlich zur Unterhaltung meiner Kollegen erstellt. Die Grafik und die Effizienz wurden nicht optimiert. Bitte verwenden Sie einen PC, um es zu öffnen. Die mobile Version wird beim Ausführen wahrscheinlich einfrieren >

Produktion beginnt1. Vorbereitung

Im Spiel werden zwei Motoren verwendet

Eine davon ist die HTML5-Open-Source-Engine lufylegend.js. Das Folgende ist mein lufylegend-1.7.0-Beitrag auf meinem Blog, der eine kurze Einführung enthält

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

Das andere ist Box2dWeb, die Download-Adresse lautet wie folgt

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

2. Spieleentwicklung

Wie Sie an der Spieloberfläche sehen können, liegt der Schwerpunkt der Spieleentwicklung auf einem Seil. Wie implementiert man das Seil in HTML5?

In box2d gibt es kein Seil, aber Freunde, die mit box2d vertraut sind, sollten mit dem rotierenden GelenksetRevoluteJoint vertraut sein. Um das Seil zu implementieren, können wir eine Reihe starrer Körper mit Rotation verbinden Zusammengenommen sind diese starren Körper beim Schwingen fast wie Seile.

Schauen Sie sich den Code unten an, ich habe 1 statischen starren Körper und 20 dynamische starre Körper mit rotierenden Gelenken verbunden.

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

Nach dem Login kopieren

Fügen Sie abschließend einen etwas größeren starren Körper hinzu, der als Protagonist im Spiel dient, und verwenden Sie außerdem rotierende Gelenke, um der Front zu folgen Starre Körper sind verbunden.

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

Nach dem Login kopieren

Das ist alles, was noch übrig ist, wie man den Schwung und das Herausfliegen des Protagonisten steuert.

Codeliste 3

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

Nach dem Login kopieren

Im obigen Code ist die Onframe-Funktion die Zeitleiste, ondown und onup sind Ereignisse, die aufgerufen werden, wenn die Maus gedrückt bzw. angehoben wird Das Drücken und Auftauchen ist relativ einfach. Der Code lautet wie folgt.

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

Nach dem Login kopieren

Die Onframe-Funktion enthält grundsätzlich alle logischen Teile des Spiels.

Zuallererst hat das zuvor erstellte „Seil“ keine Skin, was bedeutet, dass es nicht angezeigt wird, es sei denn, es befindet sich im Debug-Modus. Dann müssen Sie diese befolgen, wenn das Seil Der starre Körper zeichnet eine Kurve und verwandelt sie in ein Seil. Der Code lautet wie folgt.

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

Nach dem Login kopieren

Lassen Sie dann das Seil schwingen, bestimmen Sie, ob die Maus nach links oder rechts zittert, und üben Sie eine Kraft auf den starren Körper aus Um den starren Körper zu bewegen, lautet der Code wie folgt:

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

Nach dem Login kopieren

Wenn die Maus schließlich nach oben springt, Der Protagonist wird weggeworfen, also lass das Spielfenster einfach mit ihm wandern.

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

Nach dem Login kopieren

Auf diese Weise wird zunächst eine Vorschau angezeigt dass das „Seil“, das wir erstellt haben, tatsächlich eine Reihe starrer Körper ist

und nicht im Debug-Modus, Es wird die folgende Schnittstelle.

Drei, Quellcode

Schließlich wird der Quellcode dieses Spiels angegeben

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

Hinweis: Es ist nur der Quellcode des Spiels enthalten, um ihn selbst herunterzuladen

und höher Nehmen Sie sich einfach 1 Stunde Zeit, um ein einfaches Physikspiel (Seilprinzip) zu erstellen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!