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

Crea tu propio juego con HTML5 y Box2D


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. }

2 – Desarrollando el juego

Abre el archivo index.html que creamos previamente, y a√Īade un elemento canvas (600×400) dentro del¬† elemento body. Esto es donde trabajaremos con la API de dibujo de HTML5:

  1. <canvas id="game" width="600" height="400"></canvas>

Adem√°s, a√Īadiremos como referencia game.js y box2dutils.js.

  1. <script src='js/box2dutils.js'></script>
  2. <script src='js/game.js'></script>

Y eso es todo el HTML. Comencemos con el JavaScript: Abrimos game.js, y allí insertamos este código:

  1. // some variables that we gonna use in this demo
  2. var initId = 0;
  3. var player = function(){
  4.     this.object = null;
  5.     this.canJump = false;
  6. };
  7. var world;
  8. var ctx;
  9. var canvasWidth;
  10. var canvasHeight;
  11. var keys = [];
  12.  
  13. // HTML5 onLoad event
  14. Event.observe(window, 'load', function() {
  15.     world = createWorld(); // box2DWorld
  16.     ctx = $('game').getContext('2d'); // 2
  17.     var canvasElm = $('game');
  18.     canvasWidth = parseInt(canvasElm.width);
  19.     canvasHeight = parseInt(canvasElm.height);
  20.     initGame(); // 3
  21.     step(); // 4
  22.  
  23. // 5
  24.     window.addEventListener('keydown',handleKeyDown,true);
  25.     window.addEventListener('keyup',handleKeyUp,true);
  26. });

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. }

10 – Interactividad

Un juego sin interactividad es una película, y una película con interactividad es un juego.

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 game.js :

  1. function handleKeyDown(evt){
  2.     keys[evt.keyCode] = true;
  3. }
  4.  
  5. function handleKeyUp(evt){
  6.     keys[evt.keyCode] = false;
  7. }
  8.  
  9. // disable vertical scrolling from arrows :)
  10. 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. }

11 – Objetivo del juego y pantalla de triunfo

A√Īade el siguiente c√≥digo al comienzo de tu funci√≥n LinearVelocity:

  1. if (player.object.GetCenterPosition().y > canvasHeight){
  2.         player.object.SetCenterPosition(new b2Vec2(20,0),0)
  3.     }
  4.     else if (player.object.GetCenterPosition().x > canvasWidth-50){
  5.         showWin();
  6.         return;
  7.     }
  • 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

Comentarios (3)

  1. Omar dice:

    recien lo voy a leer haber si se entiende les digo

  2. Leví dice:

    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:

    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