Morton 21 de febrero de 2012 a las 14.28
   Imprimir artículo
elWebmaster.com

Crea tu propio juego con HTML5 y Box2D


juego, tutorial, videojuego, render, HTML5, Canvas, game, box2d, engine, escenario

html5logowideHTML5 está creciendo más rápido de lo que cualquiera hubiese imaginado. Poderosas y profesionales soluciones están siendo desarrolladas día a día… ¡Incluso en el mundo de los videojuegos! Hoy, te enseñaremos a hacer tu primer juego utilizando Box2D y la propiedad canvas de HTML5.

Haz clic aquí para ver una demostración >>

Pero… ¿Qué es Box2D? Es un motor de código abierto que simula físicas en 2D para desarrollar juegos y aplicaciones. Escrito principalmente en C++, ha sido convertido a numerosos lenguajes por su comunidad.

Con los mismos métodos y objetos, tienes la capacidad de crear las físicas de tus juegos en varios lenguajes como Objective C (iPhone/iPad), Actionscript 3.0 (Web), HTML 5 (Web), etc.

1 – Situando los archivos

Para comenzar a desarrollar tu demo, descarga el motor Box2D para HTML5 aquí. 

Haz clic en este enlace para descargar Box2D para HTML5 >>

Copia los directorios js y lib del proyecto box2d-js a la carpeta de tu juego, y luego crea un nuevo archivo HTML en el mismo directorio raíz, con la siguiente estructura:

  1. <!--[if IE]><script src="lib/excanvas.js"></script><![endif]-->
  2.  <script src="lib/prototype-1.6.0.2.js"></script>
  3. <!-- box2djs -->
  4.  <script src='js/box2d/common/b2Settings.js'></script>
  5.  <script src='js/box2d/common/math/b2Vec2.js'></script>
  6.  <script src='js/box2d/common/math/b2Mat22.js'></script>
  7.  <script src='js/box2d/common/math/b2Math.js'></script>
  8.  <script src='js/box2d/collision/b2AABB.js'></script>
  9.  <script src='js/box2d/collision/b2Bound.js'></script>
  10.  <script src='js/box2d/collision/b2BoundValues.js'></script>
  11.  <script src='js/box2d/collision/b2Pair.js'></script>
  12.  <script src='js/box2d/collision/b2PairCallback.js'></script>
  13.  <script src='js/box2d/collision/b2BufferedPair.js'></script>
  14.  <script src='js/box2d/collision/b2PairManager.js'></script>
  15.  <script src='js/box2d/collision/b2BroadPhase.js'></script>
  16.  <script src='js/box2d/collision/b2Collision.js'></script>
  17.  <script src='js/box2d/collision/Features.js'></script>
  18.  <script src='js/box2d/collision/b2ContactID.js'></script>
  19.  <script src='js/box2d/collision/b2ContactPoint.js'></script>
  20.  <script src='js/box2d/collision/b2Distance.js'></script>
  21.  <script src='js/box2d/collision/b2Manifold.js'></script>
  22.  <script src='js/box2d/collision/b2OBB.js'></script>
  23.  <script src='js/box2d/collision/b2Proxy.js'></script>
  24.  <script src='js/box2d/collision/ClipVertex.js'></script>
  25.  <script src='js/box2d/collision/shapes/b2Shape.js'></script>
  26.  <script src='js/box2d/collision/shapes/b2ShapeDef.js'></script>
  27.  <script src='js/box2d/collision/shapes/b2BoxDef.js'></script>
  28.  <script src='js/box2d/collision/shapes/b2CircleDef.js'></script>
  29.  <script src='js/box2d/collision/shapes/b2CircleShape.js'></script>
  30.  <script src='js/box2d/collision/shapes/b2MassData.js'></script>
  31.  <script src='js/box2d/collision/shapes/b2PolyDef.js'></script>
  32.  <script src='js/box2d/collision/shapes/b2PolyShape.js'></script>
  33.  <script src='js/box2d/dynamics/b2Body.js'></script>
  34.  <script src='js/box2d/dynamics/b2BodyDef.js'></script>
  35.  <script src='js/box2d/dynamics/b2CollisionFilter.js'></script>
  36.  <script src='js/box2d/dynamics/b2Island.js'></script>
  37.  <script src='js/box2d/dynamics/b2TimeStep.js'></script>
  38.  <script src='js/box2d/dynamics/contacts/b2ContactNode.js'></script>
  39.  <script src='js/box2d/dynamics/contacts/b2Contact.js'></script>
  40.  <script src='js/box2d/dynamics/contacts/b2ContactConstraint.js'></script>
  41.  <script src='js/box2d/dynamics/contacts/b2ContactConstraintPoint.js'></script>
  42.  <script src='js/box2d/dynamics/contacts/b2ContactRegister.js'></script>
  43.  <script src='js/box2d/dynamics/contacts/b2ContactSolver.js'></script>
  44.  <script src='js/box2d/dynamics/contacts/b2CircleContact.js'></script>
  45.  <script src='js/box2d/dynamics/contacts/b2Conservative.js'></script>
  46.  <script src='js/box2d/dynamics/contacts/b2NullContact.js'></script>
  47.  <script src='js/box2d/dynamics/contacts/b2PolyAndCircleContact.js'></script>
  48.  <script src='js/box2d/dynamics/contacts/b2PolyContact.js'></script>
  49.  <script src='js/box2d/dynamics/b2ContactManager.js'></script>
  50.  <script src='js/box2d/dynamics/b2World.js'></script>
  51.  <script src='js/box2d/dynamics/b2WorldListener.js'></script>
  52.  <script src='js/box2d/dynamics/joints/b2JointNode.js'></script>
  53.  <script src='js/box2d/dynamics/joints/b2Joint.js'></script>
  54.  <script src='js/box2d/dynamics/joints/b2JointDef.js'></script>
  55.  <script src='js/box2d/dynamics/joints/b2DistanceJoint.js'></script>
  56.  <script src='js/box2d/dynamics/joints/b2DistanceJointDef.js'></script>
  57.  <script src='js/box2d/dynamics/joints/b2Jacobian.js'></script>
  58.  <script src='js/box2d/dynamics/joints/b2GearJoint.js'></script>
  59.  <script src='js/box2d/dynamics/joints/b2GearJointDef.js'></script>
  60.  <script src='js/box2d/dynamics/joints/b2MouseJoint.js'></script>
  61.  <script src='js/box2d/dynamics/joints/b2MouseJointDef.js'></script>
  62.  <script src='js/box2d/dynamics/joints/b2PrismaticJoint.js'></script>
  63.  <script src='js/box2d/dynamics/joints/b2PrismaticJointDef.js'></script>
  64.  <script src='js/box2d/dynamics/joints/b2PulleyJoint.js'></script>
  65.  <script src='js/box2d/dynamics/joints/b2PulleyJointDef.js'></script>
  66.  <script src='js/box2d/dynamics/joints/b2RevoluteJoint.js'></script>
  67.  <script src='js/box2d/dynamics/joints/b2RevoluteJointDef.js'></script>

Ahora, crea dos scripts más dentro del directorio /js/, llamados "box2dutils.js" y "game.js".

  • box2dutils.js – contendrá un código que suele venir en algunas demos con box2dlib, y es importante para las funciones de dibujo.
  • game.js – El juego, en sí mismo. Aquí es donde crearemos las plataformas, el jugador, aplicaremos las interacciones de teclado, etc.

Copia y pega el siguiente código dentro de box2dutils.js:

  1. function drawWorld(world, context) {
  2.     for (var j = world.m_jointList; j; j = j.m_next) {
  3.         drawJoint(j, context);
  4.     }
  5.     for (var b = world.m_bodyList; b; b = b.m_next) {
  6.         for (var s = b.GetShapeList(); s != null; s = s.GetNext()) {
  7.             drawShape(s, context);
  8.         }
  9.     }
  10. }
  11. function drawJoint(joint, context) {
  12.     var b1 = joint.m_body1;
  13.     var b2 = joint.m_body2;
  14.     var x1 = b1.m_position;
  15.     var x2 = b2.m_position;
  16.     var p1 = joint.GetAnchor1();
  17.     var p2 = joint.GetAnchor2();
  18.     context.strokeStyle = '#00eeee';
  19.     context.beginPath();
  20.     switch (joint.m_type) {
  21.     case b2Joint.e_distanceJoint:
  22.         context.moveTo(p1.x, p1.y);
  23.         context.lineTo(p2.x, p2.y);
  24.         break;
  25.  
  26.     case b2Joint.e_pulleyJoint:
  27.         // TODO
  28.         break;
  29.  
  30.     default:
  31.         if (b1 == world.m_groundBody) {
  32.             context.moveTo(p1.x, p1.y);
  33.             context.lineTo(x2.x, x2.y);
  34.         }
  35.         else if (b2 == world.m_groundBody) {
  36.             context.moveTo(p1.x, p1.y);
  37.             context.lineTo(x1.x, x1.y);
  38.         }
  39.         else {
  40.             context.moveTo(x1.x, x1.y);
  41.             context.lineTo(p1.x, p1.y);
  42.             context.lineTo(x2.x, x2.y);
  43.             context.lineTo(p2.x, p2.y);
  44.         }
  45.         break;
  46.     }
  47.     context.stroke();
  48. }
  49. function drawShape(shape, context) {
  50.     context.strokeStyle = '#000000';
  51.     context.beginPath();
  52.     switch (shape.m_type) {
  53.     case b2Shape.e_circleShape:
  54.         {
  55.             var circle = shape;
  56.             var pos = circle.m_position;
  57.             var r = circle.m_radius;
  58.             var segments = 16.0;
  59.             var theta = 0.0;
  60.             var dtheta = 2.0 * Math.PI / segments;
  61.             // draw circle
  62.             context.moveTo(pos.x + r, pos.y);
  63.             for (var i = 0; i < segments; i++) {
  64.                 var d = new b2Vec2(r * Math.cos(theta), r * Math.sin(theta));
  65.                 var v = b2Math.AddVV(pos, d);
  66.                 context.lineTo(v.x, v.y);
  67.                 theta += dtheta;
  68.             }
  69.             context.lineTo(pos.x + r, pos.y);
  70.  
  71.             // draw radius
  72.             context.moveTo(pos.x, pos.y);
  73.             var ax = circle.m_R.col1;
  74.             var pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y);
  75.             context.lineTo(pos2.x, pos2.y);
  76.         }
  77.         break;
  78.     case b2Shape.e_polyShape:
  79.         {
  80.             var poly = shape;
  81.             var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0]));
  82.             context.moveTo(tV.x, tV.y);
  83.             for (var i = 0; i < poly.m_vertexCount; i++) {
  84.                 var v = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[i]));
  85.                 context.lineTo(v.x, v.y);
  86.             }
  87.             context.lineTo(tV.x, tV.y);
  88.         }
  89.         break;
  90.     }
  91.     context.stroke();
  92. }
  93.  
  94. function createWorld() {
  95.     var worldAABB = new b2AABB();
  96.     worldAABB.minVertex.Set(-1000, -1000);
  97.     worldAABB.maxVertex.Set(1000, 1000);
  98.     var gravity = new b2Vec2(0, 300);
  99.     var doSleep = true;
  100.     var world = new b2World(worldAABB, gravity, doSleep);
  101.     return world;
  102. }
  103.  
  104. function createGround(world) {
  105.     var groundSd = new b2BoxDef();
  106.     groundSd.extents.Set(1000, 50);
  107.     groundSd.restitution = 0.2;
  108.     var groundBd = new b2BodyDef();
  109.     groundBd.AddShape(groundSd);
  110.     groundBd.position.Set(-500, 340);
  111.     return world.CreateBody(groundBd)
  112. }
  113.  
  114. function createBall(world, x, y) {
  115.     var ballSd = new b2CircleDef();
  116.     ballSd.density = 1.0;
  117.     ballSd.radius = 20;
  118.     ballSd.restitution = 1.0;
  119.     ballSd.friction = 0;
  120.     var ballBd = new b2BodyDef();
  121.     ballBd.AddShape(ballSd);
  122.     ballBd.position.Set(x,y);
  123.     return world.CreateBody(ballBd);
  124. }
  125.  
  126. function createBox(world, x, y, width, height, fixed, userData) {
  127.     if (typeof(fixed) == 'undefined') fixed = true;
  128.     var boxSd = new b2BoxDef();
  129.     if (!fixed) boxSd.density = 1.0;
  130.  
  131.     boxSd.userData = userData;
  132.  
  133.     boxSd.extents.Set(width, height);
  134.     var boxBd = new b2BodyDef();
  135.     boxBd.AddShape(boxSd);
  136.     boxBd.position.Set(x,y);
  137.     return world.CreateBody(boxBd)
  138. }
  139. [/javascript]
  140.  
  141. <h2>2 - Desarrollando el juego</h2>
  142. Abre el archivo <code>index.html</code> que creamos previamente, y añade un elemento <code>canvas</code> (600x400) dentro del  elemento <code>body</code>. Esto es donde trabajaremos con la API de dibujo de HTML5:
  143.  
  144. [html]
  145. <canvas id="game" width="600" height="400"></canvas>
  146. [/html]
  147.  
  148. Además, añadiremos como referencia <code>game.js</code> y <code>box2dutils.js</code>.
  149.  
  150. [html]
  151. <script src='js/box2dutils.js'></script>
  152. <script src='js/game.js'></script>
  153. [/html]
  154.  
  155. Y eso es todo el HTML. Comencemos con el JavaScript: Abrimos <code>game.js</code>, y allí insertamos este código:
  156.  
  157. [javascript]
  158. // some variables that we gonna use in this demo
  159. var initId = 0;
  160. var player = function(){
  161.     this.object = null;
  162.     this.canJump = false;
  163. };
  164. var world;
  165. var ctx;
  166. var canvasWidth;
  167. var canvasHeight;
  168. var keys = [];
  169.  
  170. // HTML5 onLoad event
  171. Event.observe(window, 'load', function() {
  172.     world = createWorld(); // box2DWorld
  173.     ctx = $('game').getContext('2d'); // 2
  174.     var canvasElm = $('game');
  175.     canvasWidth = parseInt(canvasElm.width);
  176.     canvasHeight = parseInt(canvasElm.height);
  177.     initGame(); // 3
  178.     step(); // 4
  179.  
  180. // 5
  181.     window.addEventListener('keydown',handleKeyDown,true);
  182.     window.addEventListener('keyup',handleKeyUp,true);
  183. });

3 – Box2DWorld

Box2DWorld es una de las clases a las que podemos acceder a través del nucleo de box2d. Su función es simple: combina todo en una sola clase. En box2DWorld, tienes la definición de cuerpos y el gestor de colisiones de tu juego o aplicación.

Manten los archivos game.js y box2dutils.js abiertos, y busca por la función createWorld() dentro de box2dutils.js:

  1. function createWorld() {
  2.     // here we create our world settings for collisions
  3.     var worldAABB = new b2AABB();
  4.     worldAABB.minVertex.Set(-1000, -1000);
  5.     worldAABB.maxVertex.Set(1000, 1000);
  6.     // set gravity vector
  7.     var gravity = new b2Vec2(0, 300);
  8.     var doSleep = true;
  9.     // init our world and return its value
  10.     var world = new b2World(worldAABB, gravity, doSleep);
  11.     return world;
  12. }

4 -Volvamos a Game.js

Copia y pega este código en el archivo game.js:

  1. function initGame(){
  2.     // create 2 big platforms
  3.     createBox(world, 3, 230, 60, 180, true, 'ground');
  4.     createBox(world, 560, 360, 50, 50, true, 'ground');
  5.  
  6.     // create small platforms
  7.     for (var i = 0; i < 5; i++){
  8.         createBox(world, 150+(80*i), 360, 5, 40+(i*15), true, 'ground');
  9.     }
  10.  
  11.     // create player ball
  12.     var ballSd = new b2CircleDef();
  13.     ballSd.density = 0.1;
  14.     ballSd.radius = 12;
  15.     ballSd.restitution = 0.5;
  16.     ballSd.friction = 1;
  17.     ballSd.userData = 'player';
  18.     var ballBd = new b2BodyDef();
  19.     ballBd.linearDamping = .03;
  20.     ballBd.allowSleep = false;
  21.     ballBd.AddShape(ballSd);
  22.     ballBd.position.Set(20,0);
  23.     player.object = world.CreateBody(ballBd);
  24.  
  25. }
  26.  
  27.  Inside <code>box2dutils.js</code>, we've created a function, called <code>createBox</code>. This creates a static rectangle body.
  28.  
  29. function createBox(world, x, y, width, height, fixed, userData) {
  30.     if (typeof(fixed) == 'undefined') fixed = true;
  31.     //1
  32. var boxSd = new b2BoxDef();
  33.     if (!fixed) boxSd.density = 1.0;
  34.     //2
  35.     boxSd.userData = userData;
  36.     //3
  37.     boxSd.extents.Set(width, height);
  38.  
  39.     //4
  40.     var boxBd = new b2BodyDef();
  41.     boxBd.AddShape(boxSd);
  42.     //5
  43.     boxBd.position.Set(x,y);
  44.     //6
  45.     return world.CreateBody(boxBd)
  46. }

5 -Box2DBody

Un Box2DBody tiene características únicas:

  • Puede ser estático (no lo afectan las colisiones), kinético (no lo afectan las colisiones, pero puede ser movido por el mouse u otros, o dinámico (interactúa con todo)
  • Debe tener una definición de forma, y debe indicar cómo aparece el objeto.
  • Puede tener más de un aparato, lo que indica cómo el objeto interactuará con colisiones
  • Su posición estará establecida en el centro del objeto, no en su costado superior izquierdo como otros motores suelen hacer.

6 – Creando el cuerpo Player Ball

El código del jugador (la bola) estará en el archivo game.js. Lo seguirá la misma secuencia de crear cajas, pero esta vez, será una bola.

  1. var ballSd = new b2CircleDef();
  2.     ballSd.density = 0.1;
  3.     ballSd.radius = 12;
  4.     ballSd.restitution = 0.5;
  5.     ballSd.friction = 1;
  6.     ballSd.userData = 'player';
  7.     var ballBd = new b2BodyDef();
  8.     ballBd.linearDamping = .03;
  9.     ballBd.allowSleep = false;
  10.     ballBd.AddShape(ballSd);
  11.     ballBd.position.Set(20,0);
  12.     player.object = world.CreateBody(ballBd);

7 – Box2DCircle

Como notamos antes, la bola tiene algunas diferencias en su creación con las cajas:

  • radius – Este es el largo de una linea desde el centro del círculo a cualquier punto de su borde.
  • restitution – Cómo la bola perderá, o ganará fuerza cuando colisione con otro cuerpo.
  • friction – Cómo la bola rodará.

8 – Hora del render

Ahora, llegó el momento de renderear nuestro box2DWorld.

Abre game.js, y añade el siguiente código:

  1. function step() {
  2.  
  3.     var stepping = false;
  4.     var timeStep = 1.0/60;
  5.     var iteration = 1;
  6.     // 1
  7.     world.Step(timeStep, iteration);
  8.     // 2
  9.     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  10.     drawWorld(world, ctx);
  11.     // 3
  12.     setTimeout('step()', 10);
  13. }

Si hemos hecho todo bien, nuestro juego se verá así:

scenarydone

9 – drawWorld en box2dutils.js

Ahora, añadiremos este código a nuestro archivo box2dutils.js:

  1. function drawWorld(world, context) {
  2.     for (var j = world.m_jointList; j; j = j.m_next) {
  3.         drawJoint(j, context);
  4.     }
  5.     for (var b = world.m_bodyList; b; b = b.m_next) {
  6.         for (var s = b.GetShapeList(); s != null; s = s.GetNext()) {
  7.             drawShape(s, context);
  8.         }
  9.     }
  10. }
  11. function drawShape(shape, context) {
  12.     context.strokeStyle = '#000000';
  13.     context.beginPath();
  14.     switch (shape.m_type) {
  15.     case b2Shape.e_circleShape:
  16.         {
  17.             var circle = shape;
  18.             var pos = circle.m_position;
  19.             var r = circle.m_radius;
  20.             var segments = 16.0;
  21.             var theta = 0.0;
  22.             var dtheta = 2.0 * Math.PI / segments;
  23.             // draw circle
  24.             context.moveTo(pos.x + r, pos.y);
  25.             for (var i = 0; i < segments; i++) {
  26.                 var d = new b2Vec2(r * Math.cos(theta), r * Math.sin(theta));
  27.                 var v = b2Math.AddVV(pos, d);
  28.                 context.lineTo(v.x, v.y);
  29.                 theta += dtheta;
  30.             }
  31.             context.lineTo(pos.x + r, pos.y);
  32.  
  33.             // draw radius
  34.             context.moveTo(pos.x, pos.y);
  35.             var ax = circle.m_R.col1;
  36.             var pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y);
  37.             context.lineTo(pos2.x, pos2.y);
  38.         }
  39.         break;
  40.     case b2Shape.e_polyShape:
  41.         {
  42.             var poly = shape;
  43.             var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0]));
  44.             context.moveTo(tV.x, tV.y);
  45.             for (var i = 0; i < poly.m_vertexCount; i++) {
  46.                 var v = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[i]));
  47.                 context.lineTo(v.x, v.y);
  48.             }
  49.             context.lineTo(tV.x, tV.y);
  50.         }
  51.         break;
  52.     }
  53.     context.stroke();
  54. }
  55. [/javascript]
  56.  
  57. <h2>10 - Interactividad</h2>
  58. Un juego sin interactividad es una película, y una película con interactividad es un juego.
  59.  
  60. Vamos a construir la funcionalidad de las flechas del teclado para saltar y mover la bola. Añade el siguiente código a tu archivo <code>game.js </code>:
  61.  
  62. [javascript]
  63. function handleKeyDown(evt){
  64.     keys[evt.keyCode] = true;
  65. }
  66.  
  67. function handleKeyUp(evt){
  68.     keys[evt.keyCode] = false;
  69. }
  70.  
  71. // disable vertical scrolling from arrows :)
  72. document.onkeydown=function(){return event.keyCode!=38 && event.keyCode!=40}

Con handleKeyDown y handleKeyUp, configuramos un array con caminos cada vez que el usuario presiona una tecla. Con document.onkeydown, desactivamos la función de scrolling vertical nativa del navegador para las flechas arriba y abajo.

Añade a esto un poco de código al comienzo de tu función step():

  1. handleInteractions();

Y por fuera, declara la función:

  1. function handleInteractions(){
  2.     // up arrow
  3.     // 1
  4.     var collision = world.m_contactList;
  5.     player.canJump = false;
  6.     if (collision != null){
  7.         if (collision.GetShape1().GetUserData() == 'player' || collision.GetShape2().GetUserData() == 'player'){
  8.             if ((collision.GetShape1().GetUserData() == 'ground' || collision.GetShape2().GetUserData() == 'ground')){
  9.                 var playerObj = (collision.GetShape1().GetUserData() == 'player' ? collision.GetShape1().GetPosition() :  collision.GetShape2().GetPosition());
  10.                 var groundObj = (collision.GetShape1().GetUserData() == 'ground' ? collision.GetShape1().GetPosition() :  collision.GetShape2().GetPosition());
  11.                 if (playerObj.y < groundObj.y){
  12.                     player.canJump = true;
  13.                 }
  14.             }
  15.         }
  16.     }
  17.     // 2
  18.     var vel = player.object.GetLinearVelocity();
  19.     // 3
  20.     if (keys[38] && player.canJump){
  21.         vel.y = -150;
  22.     }
  23.  
  24.     // 4
  25.     // left/right arrows
  26.     if (keys[37]){
  27.         vel.x = -60;
  28.     }
  29.     else if (keys[39]){
  30.         vel.x = 60;
  31.     }
  32.  
  33.     // 5
  34.     player.object.SetLinearVelocity(vel);
  35. }
  36. [/javascript]
  37.  
  38. <h2>11 - Objetivo del juego y pantalla de triunfo</h2>
  39. Añade el siguiente código al comienzo de tu función <code>LinearVelocity</code>:
  40.  
  41. [javascript]
  42.     if (player.object.GetCenterPosition().y > canvasHeight){
  43.         player.object.SetCenterPosition(new b2Vec2(20,0),0)
  44.     }
  45.     else if (player.object.GetCenterPosition().x > canvasWidth-50){
  46.         showWin();
  47.         return;
  48.     }
  • La primera condición determina si el jugador cae, y debe ser transportado de vuelta al punto de comenzo (debajo de la plataforma oeste).
  • La segunda condición se asegura si el jugador está sobre la segunda plataforma, ganando así el juego. Aquí debe ir la función showWin():
  1. function showWin(){
  2.     ctx.fillStyle    = '#000';
  3.     ctx.font         = '30px verdana';
  4.     ctx.textBaseline = 'top';
  5.     ctx.fillText('Ye! you made it!', 30, 0);
  6.     ctx.fillText('thank you, andersonferminiano.com', 30, 30);
  7.     ctx.fillText('@andferminiano', 30, 60);
  8. }

¡Y eso es todo! Has completado tu primer (muy sencillo) juego en HTML5 y Box2D. ¡Felicitaciones!

Haz clic aquí para ver una demostración >>

Fuente original del artículo: Net Tuts+
Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Comentarios (3)

  1. Omar dice:
    Lunes, 5 de marzo de 2012 a las 18.52

    recien lo voy a leer haber si se entiende les digo

  2. Leví dice:
    Lunes, 19 de marzo de 2012 a las 20.17

    Hola, me parece un exelente ejemplo para empezar a desarrollar juegos con html5 y Box2D.
    Sin embargo, creo que cometiste un error en el paso 11, el código que colocas allí debe ir en la función “step()” y no en “LinearVelocity()” ya que esa función no existe y al no colocar ese fragmento de código correctamente como resultado el juego nunca termina.

    Saludos!

  3. Alessandro dice:
    Lunes, 19 de marzo de 2012 a las 22.45

    muy bueno!!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder