Apple hat eine kritische Bewegung , wenn es für iOS-Geräte entschieden, über HTML5 Flash- Player verwenden . Trotz der Kritik , wird HTML5 langsam Gestalt als flügge Plattform in seinem eigenen Recht zu nehmen , vor allem für die Erstellung von Videospielen. Erstellen eines einfachen HTML5 Spiel erfordert ein wenig Know-how , wenn es um Codierung und Programmierung kommt, aber zum Glück nicht haben, um ein vollwertiges Game-Designer , um eine grundlegende Spiel zu schaffen. Things You
Box2D Physik-Engine
brauchen anzeigen Weitere Anweisungen
1

Erstellen Sie eine neue HTML-Datei (index.html ) in Box2D und kopieren Sie die js und lib Verzeichnisse aus Box2D -js -Projekt , um Ihr Spiel Ordner . Fügen Sie die folgenden Dateien als eine Skript -Datei in Ihre HTML-Datei :

< - [if IE ]> < [ endif] -> < script src = ' js/box2d/common/b2Settings.js " > < script src = ' js /box2d/common/math/b2Mat22.js " > < script src = ' js /box2d/collision/b2AABB.js " > < script src = ' js/box2d/collision /b2BoundValues.js " > < script src = ' js/box2d/collision/b2PairCallback.js ' > < ; script src = ' js/box2d/collision/Features.js " > < script src = ' js/box2d/collision/b2ContactPoint.js " > < script src =' js/box2d /collision/b2Manifold.js " > < script src = ' js/box2d/collision/b2Proxy . js ' > < script src =' js/box2d/collision/shapes/b2Shape.js " > < script src = ' js/box2d/collision/shapes/b2BoxDef.js " > < script src = ' js/box2d/collision/shapes/b2CircleShape.js " > < script src = ' js/box2d/collision/shapes/b2PolyDef.js " > < script src = ' js/box2d/dynamics/contacts/b2ContactNode.js " > < script src = ' js/box2d/dynamics/contacts/b2ContactConstraint.js " > < script src = ' js/box2d/dynamics/contacts/b2ContactRegister.js " > < script src = ' js/box2d/dynamics/contacts/b2CircleContact.js " > < script src = ' js/box2d/dynamics/contacts/b2NullContact.js " > < script src = ' js/box2d/dynamics/contacts/b2PolyContact.js " > < script src = ' js/box2d/dynamics/b2World.js " > < script src =' js /box2d/dynamics/joints/b2JointNode.js " > < script src = ' js /box2d/dynamics/joints/b2JointDef.js " > < script src = ' js /box2d/dynamics/joints/b2DistanceJointDef.js " > < script src = ' js /box2d/dynamics/joints/b2GearJoint.js " > < script src = ' js /box2d/dynamics/joints/b2MouseJoint.js " > < script src = ' js /box2d/dynamics/joints/b2PrismaticJoint.js " > < script src = ' js /box2d/dynamics/joints/b2PulleyJoint.js " > < script src = ' js /box2d/dynamics/joints/b2RevoluteJoint.js " >
2 < p> erstellen Sie zwei weitere Skripte aufgerufen box2dutils.js und game.js innerhalb des /js /Ordner . Fügen Sie den folgenden Code in box2dutils.js :

Funktion drawWorld ( Welt , context) {for (var j = world.m_jointList ; j; j = j.m_next ) { drawJoint (j, context) ;} für (var b = world.m_bodyList , b , b = b.m_next ) {for (var s = b.GetShapeList (); ! s = null; s = s.GetNext ()) { drawShape (s, context) ;} } } function drawJoint (gemeinsame , context) {var b1 = joint.m_body1 ; var b2 = joint.m_body2 ; var x1 = b1.m_position ; var x2 = b2.m_position ; var p1 = joint.GetAnchor1 (); var p2 = joint.GetAnchor2 (); context.strokeStyle = '# 00eeee '; context.beginPath (); Schalter ( joint.m_type ) {case b2Joint.e_distanceJoint : context.moveTo ( P1.x , p1.y ); context.lineTo ( P2.x , p2.y ); break; Fall b2Joint.e_pulleyJoint : //TODO break; default: if ( b1 == world.m_groundBody ) { context.moveTo ( P1.x , p1.y ); context.lineTo ( x2.x , x2.y ); } else if ( b2 == world.m_groundBody ) { context.moveTo ( P1.x , p1.y ); context.lineTo ( x1.x , x1.y );} else { context.moveTo ( x1.x , x1.y ); context.lineTo ( P1.x , p1.y ); context.lineTo ( x2.x , x2.y ); context.lineTo ( P2.x , p2.y );} break;} context.stroke (); } function drawShape (Form, Kontext) { context.strokeStyle = '# 000000' ; context.beginPath (); Schalter ( shape.m_type ) {case b2Shape.e_circleShape : {var Kreis = Form ; var pos = circle.m_position ; var r = circle.m_radius ; var Segmente = 16,0 ; var Theta = 0,0 ; var dTHETA = 2,0 * Math.PI /Segmente //draw Kreis context.moveTo ( pos.x + r , pos.y ); for (var i = 0; i < Segmenten ; i + + ) {var d = new b2Vec2 ( r * Math.cos ( Theta) , r * Math.sin ( Theta) ); var v = b2Math.AddVV (pos , d); context.lineTo ( vx, vy ); Theta + = dTHETA ;} context.lineTo ( pos.x + r , pos.y ); //Ziehradius context.moveTo (Pos. x , pos.y ); var ax = circle.m_R.col1 ; var pos2 = new b2Vec2 ( pos.x + r * ax.x , pos.y + r * Ax.y ); context.lineTo ( pos2.x , pos2.y );} break; Fall b2Shape.e_polyShape : {var Poly = Form ; var tV = b2Math.AddVV ( poly.m_position , b2Math.b2MulMV ( poly.m_R , poly.m_vertices [0]) ); Kontext. moveTo ( tV.x , tV.y ); for (var i = 0; i < poly.m_vertexCount ; i + + ) {var v = b2Math.AddVV ( poly.m_position , b2Math.b2MulMV ( poly.m_R , poly.m_vertices [i]) ); context.lineTo ( vx, vy );} context.lineTo ( tV.x , tV.y );} break;} context.stroke ();}
3

Setzen Sie den folgenden Code in box2dutils.js :

Funktion createWorld () {var worldAABB = new b2AABB (); worldAABB.minVertex.Set (-1000 , -1000 ); worldAABB.maxVertex.Set ( 1000, 1000 ); var Schwerkraft = new b2Vec2 (0, 300); var doSleep = true; var Welt = new b2World ( worldAABB , Schwerkraft, doSleep ); Rückkehr Welt ; } function createGround ( Welt ) {var groundSd = new b2BoxDef ( ); groundSd.extents.Set (1000, 50); groundSd.restitution = 0,2 ; var groundBd = new b2BodyDef (); groundBd.AddShape ( groundSd ); groundBd.position.Set ( -500 , 340) ; Rückkehr world.CreateBody ( groundBd ) } function createBall ( Welt , x, y ) {var ballSd = new b2CircleDef (); ballSd.density = 1,0 ; ballSd.radius = 20; ballSd.restitution = 1,0 ; ballSd.friction = 0; var ballBd = new b2BodyDef (); ballBd.AddShape ( ballSd ); ballBd.position.Set (x, y); Rückkehr world.CreateBody ( ballBd ); } function createBox ( Welt , x, y , Breite, Höhe , fest, userData ) {if (typeof (fest) == ' undefined ') fixed = true; var boxSd = new b2BoxDef (); ( ! fest) , wenn boxSd.density = 1,0 ; boxSd.userData = userData ; boxSd.extents.Set (Breite, Höhe ) ; var boxBd = new b2BodyDef (); boxBd.AddShape ( boxSd ); boxBd.position.Set (x, y); Rückkehr world.CreateBody ( boxBd ) }
4

öffnen Sie die index.html Datei und fügen Sie eine 600x400 Canvas-Element innerhalb des body-Element:

< p> auch Referenz game.js und box2dutils.js :

Ansicht plaincopy zu clipboardprint < script src = ' js /game.js " >
5

öffnen game.js und fügen Sie den folgenden Code :

Ansicht plaincopy zu clipboardprint //einige Variablen, die wir jetzt verwenden in dieser Demo var initid = 0; var player = function () { this.object = null; this.canJump = false; }; var Welt ; var ctx ; var canvasWidth ; var canvasHeight ; var Tasten = []; //HTML5 onLoad Ereignis Event.observe ( window, ' load', function () { Welt = createWorld (); //box2DWorld ctx = $ (' Spiel' ) getContext ( '2 d ') ; . //2 var canvasElm = $ ( "Spiel" ); canvasWidth = parseInt ( canvasElm.width ); canvasHeight = parseInt ( canvasElm.height ); initGame (); //3. Schritt (); //4 //5 window.addEventListener ( ' keydown ' , HandleKeyDown , true); window.addEventListener ( ' keyup ' , handleKeyUp , true); });
6

Suche nach dem createWorld ()-Funktion in boxdutils.js und geben Sie diesen Code ein:
< p > Funktion createWorld () { //hier schaffen wir unsere Welt Einstellungen für Kollisionen var worldAABB = new b2AABB (); worldAABB.minVertex.Set (-1000 , -1000 ); worldAABB.maxVertex.Set (1000, 1000); //gesetzt Gravitationsvektors var Schwerkraft = new b2Vec2 (0, 300); var doSleep = true; //init unsere Welt zurückzukehren und seinen Wert var Welt = new b2World ( worldAABB , Schwerkraft, doSleep ); Rückkehr Welt ;}
< br > 7

Kopieren Sie den nachfolgenden Code und fügen Sie ihn in game.js Gestalt Definition , bis Dichte eingestellt , Format userData erstellen, erstellen Körper Definition , die Position gesetzt , und erstellen Sie den Körper in der Spielwelt :
< p > Funktion initGame () { //erstellen 2 große Plattformen createBox ( Welt , 3, 230 , 60, 180 , wahr, ' Boden '); createBox ( Welt , 560 , 360, 50, 50 , wahr, ' Boden '); //erstellen kleinen Plattformen for (var i = 0; i < 5 ; i + +) { createBox ( Welt , 150 + ( 80 * i) , 360, 5 , 40 + (i * 15) , wahr, ' Boden ') ;} //erstellen Spieler Ball var ballSd = new b2CircleDef (); ballSd.density = 0,1 ; ballSd.radius = 12; ballSd.restitution = 0,5 ; ballSd.friction = 1; ballSd.userData = ' Spieler '; var ballBd = neue b2BodyDef (); ballBd.linearDamping = .03 ; ballBd.allowSleep = false; ballBd.AddShape ( ballSd ); ballBd.position.Set (20,0 ); player.object = world.CreateBody ( ballBd );} Innen < ; code> box2dutils.js haben wir eine Funktion erstellt , createBox . Dies schafft eine statische Rechteck Körper. Funktion createBox ( Welt , x, y , Breite, Höhe , fest, userData ) {if (typeof (fest) == ' undefined ') fixed = true; //1 var boxSd = new b2BoxDef (); if ( Festnetz ! ) boxSd.density = 1.0; //2 = boxSd.userData userData ; //3 boxSd.extents.Set (Breite, Höhe ); //4 var boxBd = new b2BodyDef (); boxBd.AddShape ( boxSd ); //5 boxBd.position.Set (x, y); //6 Rückkehr world.CreateBody ( boxBd ) }
8

öffnen game.js Skript und kopieren Sie den folgenden Code zu rendern :

Ansicht plaincopy zu clipboardprint Funktion Schritt () {var Stepping = false; var timeStep = 1.0/60 ; var Iteration = 1; //1 world.Step ( timeStep , Iteration) ; //2 ctx.clearRect ( 0, 0, canvasWidth , canvasHeight ); drawWorld ( Welt , ctx ); //3 setTimeout ( 'step () ', 10 );}
9

Fügen Sie folgenden Code in box2dutils.js zu ziehen " Gelenke " der Spieler Gremien:

Funktion drawWorld ( Welt , context) {for (var j = world.m_jointList ; j; j = j.m_next ) { drawJoint (j, context) ;} für (var b = world.m_bodyList , b , b = b.m_next ) {for (var s = b.GetShapeList (); ! s = null; s = s.GetNext ()) { drawShape (s, context) ;} }}
10

Legen Sie eine zweite Schleife , um alle Stellen zu ziehen :

Funktion drawShape (Form, Kontext) { context.strokeStyle = '# 000000' ; context.beginPath (); Schalter ( shape.m_type ) {case b2Shape.e_circleShape : {var Kreis = Form ; var pos = circle.m_position ; var r = circle.m_radius ; var Segmente = 16,0 ; var Theta = 0,0 ; var dTHETA = 2,0 * Math.PI /Segmente //draw Kreis context.moveTo ( pos.x + r , pos.y ); for (var i = 0; i < Segmenten ; i + + ) {var d = new b2Vec2 ( r * Math.cos (Theta ) , r * Math.sin ( Theta) ); var v = b2Math.AddVV (pos , d); context.lineTo ( vx, vy ); Theta + = dTHETA ;} context.lineTo ( pos.x + r , Pos. . y); //Ziehradius context.moveTo ( pos.x , pos.y ); var ax = circle.m_R.col1 ; var pos2 = new b2Vec2 ( pos.x + r * ax.x , pos.y + r * Ax.y ); context.lineTo ( pos2.x , pos2.y );} break; Fall b2Shape.e_polyShape : {var Poly = Form ; var tV = b2Math.AddVV ( poly.m_position , b2Math.b2MulMV (poly . m_R , poly.m_vertices [0]) ); context.moveTo ( tV.x , tV.y ); for (var i = 0; i < poly.m_vertexCount ; i + + ) {var v = b2Math.AddVV (poly . m_position , b2Math.b2MulMV ( poly.m_R , poly.m_vertices [i]) ); context.lineTo ( vx, vy );} context.lineTo ( tV.x , tV.y );} break;} context.stroke ();}
11

erstellen Interaktivität in Ihr Spiel mit dem folgenden Code:

Funktion HandleKeyDown ( evt ) {keys [ evt.keyCode ] = true; } function handleKeyUp ( evt ) {keys [ evt.keyCode ] = false; } //deaktivieren vertikales Scrollen von Pfeilen document.onkeydown = function ( ) {return event.keyCode ! = 38 && event.keyCode ! = 40}
12 < p > Herstellung Spieler Kollisionserkennung und Geschwindigkeit durch Eingabe des folgenden Code in den Schritt ()-Funktion :

Funktion handleInteractions () { //Pfeil nach oben //1 = var Kollision world.m_contactList ; player.canJump = false if ( Kollision = null ) { if ( collision.GetShape1 () getUserData () == 'player '