Come fare la tua HTML 5 gioco

August 17

Come fare la tua HTML 5 gioco


Apple ha fatto una mossa fondamentale quando si ha optato per i dispositivi iOS di utilizzare HTML5 sui giocatori Flash. Nonostante le critiche, HTML5 sta cominciando a prendere forma come una piattaforma involo a sé stante, in particolare per la creazione di videogiochi. Creazione di un gioco di base di HTML5 richiede un po 'di know-how quando si tratta di codifica e di programmazione, ma per fortuna non c'è bisogno di essere un designer vero e proprio gioco per creare un gioco di base.

istruzione

1 Creare un nuovo file HTML (index.html) in Box2D e copiare i js e le directory lib dal progetto Box2D-JS per la vostra cartella di gioco. Inserire i seguenti file come un unico file di script nel file HTML:

<! - [If IE]> <script src = "lib / excanvas.js"> </ script> <! [Endif] ->
<Script src = "lib / prototipo-1.6.0.2.js"> </ script>
<! - Box2djs ->
<Script src = 'js / box2d / common / b2Settings.js'> </ script>
<Script src = 'js / box2d / common / math / b2Vec2.js'> </ script>
<Script src = 'js / box2d / common / math / b2Mat22.js'> </ script>
<Script src = 'js / box2d / common / math / b2Math.js'> </ script>
<Script src = 'js / box2d / scontro / b2AABB.js'> </ script>
<Script src = 'js / box2d / scontro / b2Bound.js'> </ script>
<Script src = 'js / box2d / scontro / b2BoundValues.js'> </ script>
<Script src = 'js / box2d / scontro / b2Pair.js'> </ script>
<Script src = 'js / box2d / scontro / b2PairCallback.js'> </ script>
<Script src = 'js / box2d / scontro / b2BufferedPair.js'> </ script>
<Script src = 'js / box2d / scontro / b2PairManager.js'> </ script>
<Script src = 'js / box2d / scontro / b2BroadPhase.js'> </ script>
<Script src = 'js / box2d / scontro / b2Collision.js'> </ script>
<Script src = 'js / box2d / scontro / Features.js'> </ script>
<Script src = 'js / box2d / scontro / b2ContactID.js'> </ script>
<Script src = 'js / box2d / scontro / b2ContactPoint.js'> </ script>
<Script src = 'js / box2d / scontro / b2Distance.js'> </ script>
<Script src = 'js / box2d / scontro / b2Manifold.js'> </ script>
<Script src = 'js / box2d / scontro / b2OBB.js'> </ script>
<Script src = 'js / box2d / scontro / b2Proxy.js'> </ script>
<Script src = 'js / box2d / scontro / ClipVertex.js'> </ script>
<Script src = 'js / box2d / scontro / forme / b2Shape.js'> </ script>
<Script src = 'js / box2d / scontro / forme / b2ShapeDef.js'> </ script>
<Script src = 'js / box2d / scontro / forme / b2BoxDef.js'> </ script>
<Script src = 'js / box2d / scontro / forme / b2CircleDef.js'> </ script>
<Script src = 'js / box2d / scontro / forme / b2CircleShape.js'> </ script>
<Script src = 'js / box2d / scontro / forme / b2MassData.js'> </ script>
<Script src = 'js / box2d / scontro / forme / b2PolyDef.js'> </ script>
<Script src = 'js / box2d / scontro / forme / b2PolyShape.js'> </ script>
<Script src = 'js / box2d / dinamica / b2Body.js'> </ script>
<Script src = 'js / box2d / dinamica / b2BodyDef.js'> </ script>
<Script src = 'js / box2d / dinamica / b2CollisionFilter.js'> </ script>
<Script src = 'js / box2d / dinamica / b2Island.js'> </ script>
<Script src = 'js / box2d / dinamica / b2TimeStep.js'> </ script>
<Script src = 'js / box2d / dinamica / contatti / b2ContactNode.js'> </ script>
<Script src = 'js / box2d / dinamica / contatti / b2Contact.js'> </ script>
<Script src = 'js / box2d / dinamica / contatti / b2ContactConstraint.js'> </ script>
<Script src = 'js / box2d / dinamica / contatti / b2ContactConstraintPoint.js'> </ script>
<Script src = 'js / box2d / dinamica / contatti / b2ContactRegister.js'> </ script>
<Script src = 'js / box2d / dinamica / contatti / b2ContactSolver.js'> </ script>
<Script src = 'js / box2d / dinamica / contatti / b2CircleContact.js'> </ script>
<Script src = 'js / box2d / dinamica / contatti / b2Conservative.js'> </ script>
<Script src = 'js / box2d / dinamica / contatti / b2NullContact.js'> </ script>
<Script src = 'js / box2d / dinamica / contatti / b2PolyAndCircleContact.js'> </ script>
<Script src = 'js / box2d / dinamica / contatti / b2PolyContact.js'> </ script>
<Script src = 'js / box2d / dinamica / b2ContactManager.js'> </ script>
<Script src = 'js / box2d / dinamica / b2World.js'> </ script>
<Script src = 'js / box2d / dinamica / b2WorldListener.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2JointNode.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2Joint.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2JointDef.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2DistanceJoint.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2DistanceJointDef.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2Jacobian.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2GearJoint.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2GearJointDef.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2MouseJoint.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2MouseJointDef.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2PrismaticJoint.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2PrismaticJointDef.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2PulleyJoint.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2PulleyJointDef.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2RevoluteJoint.js'> </ script>
<Script src = 'js / box2d / dinamica / Giunti / b2RevoluteJointDef.js'> </ script>

2 Creare due ulteriori script chiamato box2dutils.js e game.js all'interno del / js / cartella. Inserire il seguente codice in box2dutils.js:

Funzione drawWorld (mondo, contesto) {
for (var j = world.m_jointList; j; j = j.m_next) {
drawJoint (j, contesto);
}
for (var b = world.m_bodyList; b; b = b.m_next) {
for (var s = b.GetShapeList ();! s = null; s = s.GetNext ()) {
drawShape (s, contesto);
}
}
}
Funzione drawJoint (giunto, contesto) {
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 ();
interruttore (joint.m_type) {
caso b2Joint.e_distanceJoint:
context.moveTo (P1.x, p1.y);
context.lineTo (p2.x, p2.y);
rompere;

caso b2Joint.e_pulleyJoint:
// FARE
rompere;

predefinito:
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);
}
altro {
context.moveTo (x1.x, x1.y);
context.lineTo (P1.x, p1.y);
context.lineTo (x2.x, x2.y);
context.lineTo (p2.x, p2.y);
}
rompere;
}
context.stroke ();
}
Funzione drawShape (forma, contesto) {
context.strokeStyle = '# 000000';
context.beginPath ();
interruttore (shape.m_type) {
caso b2Shape.e_circleShape:
{
var = cerchio forma;
var pos = circle.m_position;
var r = circle.m_radius;
segmenti var = 16.0;
var theta = 0.0;
var dtheta = 2.0

Math.PI / segmenti;
// Disegnare cerchio
context.moveTo (pos.x + r, pos.y);
for (var i = 0; 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);

// Disegnare raggio
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);
}
rompere;
caso b2Shape.e_polyShape:
{
var poli = forma;
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);
}
rompere;
}
context.stroke ();
}

3 Continuare il seguente codice nel box2dutils.js:

Funzione createWorld () {
var worldAABB = new b2AABB ();
worldAABB.minVertex.Set (-1000, -1000);
worldAABB.maxVertex.Set (1000, 1000);
var gravità = new b2Vec2 (0, 300);
var doSleep = true;
var = new mondo b2World (worldAABB, gravità, doSleep);
tornare mondo;
}

Funzione createGround (mondo) {
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);
tornare world.CreateBody (groundBd)
}

Funzione createBall (mondo, 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);
tornare world.CreateBody (ballBd);
}

Funzione createBox (mondo, x, y, larghezza, altezza, fissa, userData) {
if (typeof (fisso) == 'undefined') fissa = true;
var boxSd = new b2BoxDef ();
if (fisso!) boxSd.density = 1.0;

boxSd.userData = userData;

boxSd.extents.Set (larghezza, altezza);
var boxBd = new b2BodyDef ();
boxBd.AddShape (boxSd);
boxBd.position.Set (x, y);
tornare world.CreateBody (boxBd)
}

4 Aprire il file index.html e aggiungere un elemento di 600x400 tela entro l'elemento del corpo:

<Canvas id = "gioco" width = "600" height = "400"> </ canvas>

Inoltre, fare riferimento game.js e box2dutils.js:

visualizzare plaincopy a clipboardprint?
<Script src = 'js / box2dutils.js'> </ script>
<Script src = 'js / game.js'> </ script>

5 game.js aperte e inserire il seguente codice:

visualizzare plaincopy a clipboardprint?
// alcune variabili che abbiamo intenzione di utilizzare in questa demo
var initid = 0;
giocatore var = function () {
this.object = null;
this.canJump = false;
};
var mondo;
var CTX;
var canvasWidth;
var canvasHeight;
Tasti var = [];

// Evento HTML5 onLoad
Event.observe (finestra, 'carico', function () {
Mondo = createWorld (); // box2DWorld
CTX = $ ( 'gioco') getContext ( '2d.'); // 2
var canvasElm = $ ( 'gioco');
canvasWidth = parseInt (canvasElm.width);
canvasHeight = parseInt (canvasElm.height);
initGame (); // 3
passo(); // 4

// 5
window.addEventListener ( 'keydown', handleKeyDown, true);
window.addEventListener ( 'keyup', handleKeyUp, true);
});

6 Ricerca per la funzione createWorld () in boxdutils.js e di ingresso di questo codice:

Funzione createWorld () {
// Qui creiamo le nostre impostazioni mondo per le collisioni
var worldAABB = new b2AABB ();
worldAABB.minVertex.Set (-1000, -1000);
worldAABB.maxVertex.Set (1000, 1000);
// Imposta vettore della gravità
var gravità = new b2Vec2 (0, 300);
var doSleep = true;
// Init il nostro mondo e restituire il suo valore
var = new mondo b2World (worldAABB, gravità, doSleep);
tornare mondo;
}

7 Copia il codice qui sotto e incollarlo in 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:

funzione initGame () {
// Crea 2 grandi piattaforme
createBox (mondo, 3, 230, 60, 180, vero, 'terra');
createBox (mondo, 560, 360, 50, 50, vera, 'terra');

// Crea piccole piattaforme
for (var i = 0; i <5; i ++) {
createBox (mondo, 150 + (80

i), 360, 5, 40+ (i 15), vero, 'terra');
}

// Crea palla Giocatore
var ballSd = new b2CircleDef ();
ballSd.density = 0.1;
ballSd.radius = 12;
ballSd.restitution = 0.5;
ballSd.friction = 1;
ballSd.userData = 'giocatore';
var ballBd = new b2BodyDef ();
ballBd.linearDamping = .03;
ballBd.allowSleep = false;
ballBd.AddShape (ballSd);
ballBd.position.Set (20,0);
player.object = world.CreateBody (ballBd);

}

All'interno <code> box2dutils.js </ code>, abbiamo creato una funzione, chiamata <code> createBox </ code>. Questo crea un corpo rettangolare statico.

Funzione createBox (mondo, x, y, larghezza, altezza, fissa, userData) {
if (typeof (fisso) == 'undefined') fissa = true;
// 1
var boxSd = new b2BoxDef ();
if (fisso!) boxSd.density = 1.0;
// 2
boxSd.userData = userData;
// 3
boxSd.extents.Set (larghezza, altezza);

// 4
var boxBd = new b2BodyDef ();
boxBd.AddShape (boxSd);
// 5
boxBd.position.Set (x, y);
// 6
tornare world.CreateBody (boxBd)
}

8 Script Apri game.js e copiare e incollare il seguente codice a tempo di rendering:

visualizzare plaincopy a clipboardprint?
step function () {

var passo = false;
var passo temporale = 1.0 / 60;
var iterazione = 1;
// 1
world.Step (timestep, di iterazione);
// 2
ctx.clearRect (0, 0, canvasWidth, canvasHeight);
drawWorld (mondo, CTX);
// 3
setTimeout ( 'step ()', 10);
}

9 Inserire il seguente codice nel box2dutils.js disegnare "giunti" di corpi giocatore:

Funzione drawWorld (mondo, contesto) {
for (var j = world.m_jointList; j; j = j.m_next) {
drawJoint (j, contesto);
}
for (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 di trarre tutti i corpi:

Funzione drawShape (forma, contesto) {
context.strokeStyle = '# 000000';
context.beginPath ();
interruttore (shape.m_type) {
caso b2Shape.e_circleShape:
{
var = cerchio forma;
var pos = circle.m_position;
var r = circle.m_radius;
segmenti var = 16.0;
var theta = 0.0;
var dtheta = 2.0

Math.PI / segmenti;
// Disegnare cerchio
context.moveTo (pos.x + r, pos.y);
for (var i = 0; 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);

// Disegnare raggio
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);
}
rompere;
caso b2Shape.e_polyShape:
{
var poli = forma;
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);
}
rompere;
}
context.stroke ();
}

11 Crea interattività nel vostro gioco con il seguente codice:

Funzione handleKeyDown (EVT) {
tasti [evt.keyCode] = true;
}

Funzione handleKeyUp (EVT) {
tasti [evt.keyCode] = false;
}

// Disabilitare lo scorrimento verticale da frecce <img src = "http://net.tutsplus.com/wp-includes/images/smilies/icon_smile.gif&quot; alt =" :) "class =" wp-smiley ">
document.onkeydown = function () {return event.keyCode! = 38 && event.keyCode! = 40}

12 Fabbricazione rilevamento delle collisioni giocatore e la velocità inserendo il seguente codice nella fase () Funzione:

handleInteractions function () {
// Freccia su
// 1
var collisione = world.m_contactList;
player.canJump = false;
if (collisione! = null) {
if (collision.GetShape1 (). GetUserData () == 'giocatore' || collision.GetShape2 (). GetUserData () == 'giocatore') {
if ((collision.GetShape1 (). GetUserData () == 'terra' || collision.GetShape2 (). GetUserData () == 'terra')) {
var playerObj = (collision.GetShape1 () GetUserData () == 'giocatore' collision.GetShape1 () getPosition ():.?.. collision.GetShape2 () getPosition ());
var groundObj = (. collision.GetShape1 () GetUserData () == 'terra' collision.GetShape1 () getPosition ():?.. collision.GetShape2 () getPosition ());
if (playerObj.y <groundObj.y) {
player.canJump = true;
}
}
}
}
// 2
var vel = player.object.GetLinearVelocity ();
// 3
if (tasti [38] && player.canJump) {
vel.y = -150;
}

// 4
// / frecce destra e sinistra
if (tasti [37]) {
vel.x = -60;
}
else if (tasti [39]) {
vel.x = 60;
}

// 5
player.object.SetLinearVelocity (vel);
}

13 Creare l'obiettivo per il gioco inserendo il seguente codice nella funzione LinearVelocity:

if (player.object.GetCenterPosition (). y> canvasHeight) {
player.object.SetCenterPosition (nuova b2Vec2 (20,0), 0)
}
else if (player.object.GetCenterPosition (). x> canvasWidth-50) {
showWin ();
ritorno;
}

14 Creare una "You Win" che termina con una funzione di showWin ():

funzione showWin () {
ctx.fillStyle = '# 000';
ctx.font = "Verdana 30px ';
ctx.textBaseline = 'top';
ctx.fillText ( '! Ye hai fatta!', 30, 0);
ctx.fillText ( 'grazie, andersonferminiano.com', 30, 30);
ctx.fillText ( '@ andferminiano', 30, 60);
}