Apple ha fatto un passo fondamentale quando si optò per dispositivi iOS di utilizzare HTML5 sui giocatori Flash . Nonostante le critiche , HTML5 sta cominciando a prendere forma come piattaforma involo a sé stante , in particolare per la creazione di videogiochi. Creazione di un gioco di base HTML5 richiede un po ' di know-how quando si tratta di codifica e programmazione , ma per fortuna non c'è bisogno di essere un game designer a tutti gli effetti per creare un gioco di base . Cose che ti serviranno
Box2D Physics Engine
Mostra più istruzioni
1

Creare un nuovo file HTML ( index.html ) in Box2D e copiare i js e lib da progetto Box2D - js nella cartella di gioco . Inserire i seguenti file da un file di script nel file HTML :

< script di src = ' js/box2d/collision/shapes/b2Shape.js " > < script di src = ' js/box2d/collision/shapes/b2BoxDef.js " > < script di src = ' js/box2d/collision/shapes/b2CircleShape.js " > < script di src = ' js/box2d/collision/shapes/b2PolyDef.js ' > < /script>
5

aperte game.js e inserire il codice seguente : ?
vista

plaincopy a clipboardprint //alcune variabili che faremo utilizzare in questa demo var initId = 0; var player = function () { this.object = null; this.canJump = false; }; mondo var ; var ctx ; var canvasWidth ; var canvasHeight ; chiavi var = []; //HTML5 onLoad evento Event.observe ( window , 'load' , function () { mondo = createWorld ( ) ; //box2DWorld ctx = $ ( 'gioco' ) getContext ( '2 d '); . //2 canvasElm var = $ ( 'gioco '); canvasWidth = parseInt ( canvasElm.width ) ; canvasHeight = parseInt ( canvasElm.height ) ; initGame ( ) ; //3 step ( ) ; //4 //5 window.addEventListener ( ' keydown ' , handleKeyDown , true); window.addEventListener ( ' keyup ' , handleKeyUp , true); });
6

Ricerca per la funzione in boxdutils.js createWorld ( ) e inserire questo codice:
< p > funzione createWorld ( ) { //qui creiamo le nostre impostazioni del mondo per collisioni worldAABB var = new b2AABB (); worldAABB.minVertex.Set ( -1000 , -1000 ) ; worldAABB.maxVertex.Set ( 1000, 1000) ; //impostare la gravità vettore var gravità = new b2Vec2 ( 0 , 300 ) ; var doSleep = true; //init il nostro mondo e ritorna il suo mondo var valore = new b2World ( worldAABB , gravità, doSleep ) ; mondo return; }
< br > 7

Copia il codice qui sotto e incollalo nelle game.js per creare definizione della forma , impostare la densità , formato userData , creare la definizione del corpo , impostare la posizione e creare il corpo nel mondo di gioco :
< p > initGame function () { //crea 2 grandi piattaforme createBox ( mondiale , 3 , 230 , 60 , 180 , vero , ' terra '); createBox ( mondiale , 560 , 360 , 50 , 50 , vero , ' terra '); //creare piccole piattaforme for (var i = 0; i < 5; i + + ) { createBox ( mondo , 150 + ( 80 * i) , 360 , 5 , 40 + (i * 15 ) , è vero, ' terra ') ; } //crea giocatore palla ballSd var = new b2CircleDef ( ) ; ballSd.density = 0.1 ; ballSd.radius = 12; ballSd.restitution = 0.5; ballSd.friction = 1; ballSd.userData = ' giocatore '; var ballBd = nuovo b2BodyDef ( ) ; ballBd.linearDamping = .03 ; ballBd.allowSleep = false; ballBd.AddShape ( ballSd ) ; ballBd.position.Set ( 20,0) ; player.object = world.CreateBody ( ballBd );} Dentro < , codice > box2dutils.js < /code > , abbiamo creato una funzione, chiamata createBox < /code > . Questo crea un corpo statico rettangolo . funzione createBox ( mondo , x , y , larghezza, altezza, fissa , userData ) {if ( typeof ( fisso) == 'undefined' ) fissa = true ; //1 boxSd var = new b2BoxDef (); if ( fisso ! ) boxSd.density = 1.0; //2 = boxSd.userData userData ; //3 boxSd.extents.Set ( larghezza, altezza ) ; //4 boxBd var = new b2BodyDef (); boxBd.AddShape ( boxSd ) ; //5 boxBd.position.Set ( x , y) ; //6 ritorno world.CreateBody ( boxBd ) }
8

Apri script game.js e copiare e incollare il seguente codice per eseguire il rendering di tempo : < br step funzione > vista

plaincopy a clipboardprint ( ) {var stepping = false; ? var passo temporale = 1.0/60 ; var iterazione = 1; //1 world.Step ( passo temporale , iterazione ) ; //2 ctx.clearRect ( 0 , 0 , canvasWidth , canvasHeight ) ; drawWorld ( mondiale , CTX ) ; //3 setTimeout ( 'step ( ) ' , 10) ; }
9

Inserisci il seguente codice nella box2dutils.js a disegnare "giunti" di corpi giocatore :


funzione drawWorld ( mondiale , context) { for (var j = world.m_jointList , j , j = j.m_next ) { drawJoint ( j , contesto); } per (var b = world.m_bodyList , b , b = b.m_next ) { for (var s = b.GetShapeList (); ! s = null; s = s.GetNext ( ) ) { drawShape ( s , contesto) ; } } }
10

inserire un secondo ciclo per disegnare tutti i corpi :


funzione drawShape (forma, context) { context.strokeStyle = ' # 000000 '; context.beginPath ( ) ; switch ( shape.m_type ) {case b2Shape.e_circleShape : {var cerchio = forma ; var pos = circle.m_position ; var r = circle.m_radius ; var segmenti = 16.0 ; var theta = 0.0 ; var dtheta = 2.0 * Math.PI /segmenti ; //Disegna cerchio context.moveTo ( pos.x + r, pos.y ) ; for (var i = 0; i < i segmenti , 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) ; //disegna raggio context.moveTo ( pos.x , pos.y ) ; var ax = circle.m_R.col1 ; pos2 var = new b2Vec2 ( pos.x + r * ax.x , pos.y + r * ax.y ) ; context.lineTo ( pos2.x , pos2.y );} break; caso b2Shape.e_polyShape : {var = poly forma ; var tV = b2Math.AddVV ( poly.m_position , b2Math.b2MulMV (poli . 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 (poli . 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

Creare interattività nel tuo gioco con il seguente codice :


funzione handleKeyDown ( evt ) { tasti [ evt.keyCode ] = true ; } function handleKeyUp ( evt ) { tasti [ evt.keyCode ] = false; } //disabilitare lo scorrimento verticale da frecce < img src = alt " http://net.tutsplus.com/wp-includes/images/smilies/icon_smile.gif " = ":)" class = " wp - smiley "> document.onkeydown = function () { event.keyCode ritorno = 38 && event.keyCode = 40 ! }
12 < p > Fabbricazione giocatore rilevamento delle collisioni e la velocità inserendo il seguente codice nel passo ( ) funzione :
handleInteractions funzione

( ) { //freccia //1 var collisione = world.m_contactList ; player.canJump = false if ( collisione = null ) { if ( collision.GetShape1 ( ) GetUserData ( ) == ' giocatore '