Tema: desafios javascript 2012
Ver Mensaje Individual
  #15 (permalink)  
Antiguo 19/09/2012, 15:55
Avatar de hackjose
hackjose
 
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años, 1 mes
Puntos: 131
Respuesta: desafios javascript 2012
En cuanto al juego de pong, este es mi avance.
No es un super avance pero lo posteo para que se vea actividad

Codigo

Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Juego Pong</title>
  6.     <script type="text/javascript">
  7.     
  8.     var X1 = 0, Y1 = 40, X2 = 110, Y2 = 0;
  9.     var canvas = null, ctx = null;
  10.     var PAUSE = true;
  11.     var lastKey = null;
  12.     
  13.     window.addEventListener('load',function(){canvas = document.getElementById('canvas');canvas.style.background = "#000";ctx = canvas.getContext('2d');
  14.     paint(ctx);ejecutar();},false);
  15.     
  16.     document.addEventListener('keydown',function(evt){lastKey = evt.keyCode;ejecutar();},false);
  17.     
  18.     function paint(ctx){
  19.     ctx.fillStyle = "#F00";
  20.     ctx.fillRect(0,0,10,60);
  21.     ctx.fillStyle = "#0F0";
  22.     ctx.fillRect(X1,Y1,10,20);
  23.     
  24.     ctx.fillStyle = "#F00";
  25.     ctx.fillRect(110,0,10,60);
  26.     ctx.fillStyle = "#0F0";
  27.     ctx.fillRect(X2,Y2,10,20);
  28.     }
  29.         
  30.     function ejecutar(){
  31.     
  32.         if(lastKey == 13)
  33.         PAUSE = !PAUSE;
  34.         
  35.         if(PAUSE)
  36.         {
  37.             document.getElementById("pause").innerHTML = "PAUSE";
  38.             
  39.         }
  40.         else
  41.         {
  42.             document.getElementById("pause").innerHTML = "";
  43.         
  44.             if(lastKey == 37)
  45.             {
  46.                 if(Y1 > 0)
  47.                 Y1 -= 2;
  48.                 ctx.fillStyle = "#F00";
  49.                 ctx.fillRect(0,0,10,60);
  50.                 ctx.fillStyle = "#0F0";
  51.                 ctx.fillRect(X1,Y1,10,20);
  52.             }
  53.                 
  54.             if(lastKey == 39)
  55.             {
  56.                     if(Y1 < 40)
  57.                     Y1 += 2;
  58.                     ctx.fillStyle = "#F00";
  59.                     ctx.fillRect(0,0,10,60);
  60.                     ctx.fillStyle = "#0F0";
  61.                     ctx.fillRect(X1,Y1,10,20);
  62.             }
  63.                 
  64.             if(lastKey == 38)
  65.             {
  66.                 if(Y2 > 0)
  67.                 Y2 -= 2;
  68.                 ctx.fillStyle = "#F00";
  69.                 ctx.fillRect(110,0,10,60);
  70.                 ctx.fillStyle = "#0F0";
  71.                 ctx.fillRect(X2,Y2,10,20);
  72.             }
  73.                 
  74.             if(lastKey == 40)
  75.             {
  76.                 if(Y2 < 40)
  77.                 Y2 += 2;
  78.                 ctx.fillStyle = "#F00";
  79.                 ctx.fillRect(110,0,10,60);
  80.                 ctx.fillStyle = "#0F0";
  81.                 ctx.fillRect(X2,Y2,10,20);
  82.             }
  83.         
  84.         }
  85.     }
  86.     </script>
  87. </head>
  88. <body>
  89.     <canvas id="canvas" width="120" height="60"></canvas>
  90.     <p id="pause"></p>
  91. </body>
  92. </html>

Saludos