Foros del Web » Programando para Internet » Javascript »

pong canvas+JS (html5)

 Estas en el tema de pong canvas+JS (html5) en el foro de Javascript en Foros del Web. Pues bien, soy nuevo por aqui, este es mi primer tema, y quisiera que me ayudaran un poco. Tengo como 3 días programando un PONG, ...
  #1 (permalink)  
Antiguo 01/07/2010, 13:23
 
Fecha de Ingreso: julio-2010
Mensajes: 4
Antigüedad: 13 años, 10 meses
Puntos: 0
pong canvas+JS (html5)
Pues bien, soy nuevo por aqui, este es mi primer tema, y quisiera que me ayudaran un poco.
Tengo como 3 días programando un PONG, y ya casi está listo el codigo base para despues comenzar a estilizarlo, el problema con el que me encuentro ahorita es que, al dejar apretada la tecla de arriba del jugador 1 su paleta comienza a moverse, pero si oprimo cualquier otra ésta se deja de mover, y lo que quiero saber es como puedo hacer que si aprieto 2 o más teclas, las dos manden sus respectivas funciones?

El codigo del pong que llevo hasta ahorita es:
Código javascript: 
Ver original
  1. <html> 
  2.     <head> 
  3.     </head> 
  4.     <body style="overflow:hidden" bgcolor="black"> 
  5.         
  6.         <canvas id="a" width="100" height="100">Your browser does not support the Canvas element.</canvas> 
  7.         
  8.         <script type="text/javascript"> 
  9.             var VELOCITY = 20;
  10.             var PARTICLES = 1;
  11.             var z = 1;
  12.             var v1 = 0;
  13.             var v2 = 0;
  14.             var p1 = 0;
  15.             var p2 = 0;
  16.             var myImage = new Image();
  17.             myImage.src = "a.png";
  18.             var myImage2 = new Image();
  19.             myImage2.src = "a2.png";
  20.             var myImage3 = new Image();
  21.             myImage3.src = "a3.png";
  22.             var myImage4 = new Image();
  23.             myImage4.src = "a4.png";
  24.             var particles = [];
  25.             var colors = [ "rgba(0,255,255,.50)","rgba(255,0,0,.50)","rgba(255,255,0,.50)","rgba(100,255,185,.50)" ];
  26.             var canvas = document.getElementById('a');
  27.             var context;
  28.             if (canvas && canvas.getContext) {
  29.                 context = canvas.getContext('2d');
  30.                 for( var i = 0; i < PARTICLES; i++ ) {
  31.                     particles.push( { 
  32.                         x: Math.random()*window.innerWidth, 
  33.                         y: Math.random()*window.innerHeight, 
  34.                         vx: ((Math.random()*(VELOCITY*2))-VELOCITY),
  35.                         vy: ((Math.random()*(VELOCITY*2))-VELOCITY),
  36.                         size: 1+Math.random()*2.5,
  37.                         color: colors[ Math.floor( Math.random() * colors.length ) ]
  38.                     } );
  39.                 }
  40.                 Initialize();
  41.             }
  42.             
  43.             function Initialize() {
  44.                 canvas.addEventListener('mousemove', MouseMove, false);
  45.                 window.addEventListener('resize', ResizeCanvas, false);
  46.                 setInterval( TimeUpdate, 1000/24 );
  47.                 ResizeCanvas();
  48.             }
  49.             
  50.             function TimeUpdate(e) {
  51.                 context.clearRect(0, 0, window.innerWidth, window.innerHeight);
  52.                 var len = particles.length;
  53.                 var particle;
  54.                 var aux1;
  55.                 var aux2;
  56.                 var posy1 = v1;
  57.                 var posy2 = v2;
  58.                 context.fillStyle = 'rgb(200,200,0)';
  59.                 context.beginPath();
  60.                 context.rect(0,posy1,5,150);
  61.                 context.closePath();
  62.                 context.fill();
  63.                 context.fillStyle = 'rgb(200,200,0)';
  64.                 context.beginPath();
  65.                 context.rect(window.innerWidth-15,posy2,5,150);
  66.                 context.closePath();
  67.                 context.fill();
  68.                 
  69.                 context.fillStyle = 'rgba(255,255,255,1)';
  70.                 context.font = '15px""';
  71.                 context.fillText("Controles",50,30);
  72.                 context.fillText("P1: arriba=w abajo=s",50,45);
  73.                 context.fillText("P2: arriba=8 abajo=2",50,60);
  74.                 context.fillText("Nueva bola= n",50,75);
  75.                 context.font = '35px""';
  76.                 context.fillText(p1+" || "+ p2 ,(window.innerWidth/2)-30,30);
  77.                 for( var i = 0; i < len; i++ ) {            
  78.                         particle = particles[i];
  79.                         particle.x += particle.vx;
  80.                         particle.y += particle.vy;
  81.                         if (particle.x > window.innerWidth-45 && (particle.y > (posy2) && particle.y < (posy2+150))) {
  82.                             VELOCITY += .35;
  83.                             particle.vx = -VELOCITY - Math.random();
  84.                         }
  85.                         else if (particle.x < 35 && (particle.y > (posy1) && particle.y < (posy1+150))) {
  86.                             VELOCITY += .35;
  87.                             particle.vx = VELOCITY + Math.random();
  88.                         }
  89.                         else {  
  90.                             particle.vx *= (1 + (Math.random() * 0.005));
  91.                         }                       
  92.                         if (particle.y > window.innerHeight-8) {
  93.                             particle.vy = -VELOCITY - Math.random();
  94.                         }
  95.                         else if (particle.y < 0) {
  96.                             particle.vy = VELOCITY + Math.random();
  97.                         }
  98.                         else {
  99.                             particle.vy *= (1 + (Math.random() * 0.005));
  100.                         }
  101.                     context.strokeStyle = particle.color;
  102.                     context.beginPath();
  103.                     context.arc(particle.x,particle.y,20,0,Math.PI*2,true);
  104.                     context.closePath();
  105.                     context.stroke();   
  106.                     
  107.                     if(particle.vx<=0){
  108.                     if ((particle.x > window.innerWidth-60 && (particle.y > (posy2) && particle.y < (posy2+150))) || (particle.x < 50 && (particle.y > (posy1) && particle.y < (posy1+150)))) {
  109.                             context.drawImage(myImage4, particle.x-20, particle.y-20, 40, 40);
  110.                         }
  111.                         else{
  112.                     context.drawImage(myImage2, particle.x-20, particle.y-20, 40, 40);
  113.                     }
  114.                     }
  115.                     else{
  116.                     if ((particle.x > window.innerWidth-60 && (particle.y > (posy2) && particle.y < (posy2+150))) || (particle.x < 50 && (particle.y > (posy1) && particle.y < (posy1+150)))) {
  117.                             context.drawImage(myImage3, particle.x-20, particle.y-20, 40, 40);
  118.                         }
  119.                         else{
  120.                     context.drawImage(myImage, particle.x-20, particle.y-20, 40, 40);
  121.                     }
  122.                     }
  123.                     
  124.                     if(particle.x<0||particle.x>window.innerWidth){
  125.                     aux1=-particle.vx;
  126.                     particle.vx=0;
  127.                     aux2=-particle.vy;
  128.                     particle.vy=0;
  129.                     
  130.                     particle.y=-30;
  131.                     if(particle.x < 0 && particle.x != -30){
  132.                         p2++;
  133.                         particle.x=-30;
  134.                         };
  135.                     if(particle.x>window.innerWidth && particle.x != -30){
  136.                         p1++;
  137.                         particle.x=-30;
  138.                         };
  139.                     };
  140.                     
  141.                     
  142.                     
  143.                 }
  144.                 
  145.             }
  146.             
  147.             function MouseMove(e) {
  148.                 mouse.x = e.layerX;
  149.                 mouse.y = e.layerY;
  150.             }
  151.             
  152.             document.onkeydown = function(event) {
  153.             var keyCode = (window.event||event).keyCode;
  154.             switch(keyCode)
  155.             {
  156.                 case 78:
  157.                 VELOCITY = 20;
  158.                 particles[0].x=(window.innerWidth/2);
  159.                 particles[0].y=(window.innerHeight/2);
  160.                 particles[0].vx=((Math.random()*(VELOCITY*2))-VELOCITY);
  161.                 particles[0].vy=((Math.random()*(VELOCITY*2))-VELOCITY);
  162.                 TimeUpdate();
  163.                 break;
  164.                 case 104:
  165.                 if(v2>-1){
  166.                 v2-=45;
  167.                 }
  168.                 else{
  169.                 v2=0;
  170.                 }
  171.                 break;
  172.                 case 87:
  173.                 if(v1>-1){
  174.                 v1-=45;
  175.                 }
  176.                 else{
  177.                 v1=0;
  178.                 }
  179.                 break;
  180.                 case 98:
  181.                 if(v2<window.innerHeight-80){
  182.                 v2+=45;
  183.                 }
  184.                 else{
  185.                 v2=window.innerHeight-90;
  186.                 }
  187.                 break; 
  188.                 case 83:
  189.                 if(v1<window.innerHeight-80){
  190.                 v1+=45;
  191.                 }
  192.                 else{
  193.                 v1=window.innerHeight-90;
  194.                 }
  195.                 break; 
  196.                 default: 
  197.                 break; 
  198.             } 
  199.             }
  200.             
  201.             function ResizeCanvas(e) {
  202.                 canvas.width = window.innerWidth;
  203.                 canvas.height = window.innerHeight;
  204.             }
  205.         </script> 
  206.     </body> 
  207. </html>
Se aceptan criticas y recomendaciones :p
  #2 (permalink)  
Antiguo 01/07/2010, 23:21
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: pong canvas+JS (html5)
Es difícil testear tu código porque tiene errores. Revísalo con Firebug.

Etiquetas: html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 07:00.