Ayuda con bugs en PONG (html5<canvas> + javascript)

pony012 · 7 Julio 2010, 06:41 AM

Pues bueno, soy nuevo en el foro, y pues, programando apenas llevo unos 6 meses, todo lo que se es de manera autodidacta, y esta es la segunda 'aplicacion' web que hago, ya antes habia visto muy poco de html y muuuuy pero muy poco de js, ahora ya eh avanzado mas y se de js, css, php(muy poco), c++, pascal(tambien muy poco), y me defiendo un poco en lo que a logica se refiere.

Los problemas que me faltan por solucionar en este juego es que la forma en que bajan y suben las barras se ve muy 'mecanico', no hay alguna manera hacerlo un poco mas dinamico?, tambien, cuando se deja presionada alguna tecla para bajar una de las dos barras o subirla, si el otro jugador presiona una tecla, la del primer jugador deja de moverse, y quisiera saber si se puede hacer una funcion que haga que se aprieten dos teclas al mismo tiempo.
Y otra cosa, despues de varios golpes la pelota se hace demasiado rapida(avanza con una cantidad muy grande de pixeles) y aunque se tope con alguna de las barras, la pelota se sigue de filo y pues se dá como punto para el contrincante, y quisiera saber si existe una forma para que no 'avance' de tantos pixeles, porque le intento bajar la cantidad y el juego se ve demasiado lento...

El codigo de la pagina es la siguiente, ahora solo lo eh testeado en chrome, la verdad no se si funcione en ff o en opera...

Código (javascript) [Seleccionar]


<html>
<head></head>
<body bgcolor="black">
<canvas id="a" style="position:absolute;left:0px;top:0px;"></canvas>
<script type="text/javascript">
 var numtema = 0;
 var tema = {colorbola:['rgb(200,0,200)','rgb(0,0,0)','rgb(200,0,50)'],
    colorbarra:['rgb(50,200,20)','rgb(0,0,255)','rgb(255,240,20)'],
    texto:['rgb(255,255,255)','rgb(0,0,0)','rgb(255,255,255)'],
    fondo:['rgb(0,0,0)','rgb(255,255,255)','rgb(0,0,255)'],
    fondofiltro:['rgba(0,0,0,.25)','rgba(255,255,255,.25)','rgba(0,0,255,.25)']};
 var filtro=true;
 var pause=false;
 var velocidad = 15;
 var bola = {x:window.innerWidth/2,y:window.innerHeight/2};
 var vel = {x:(Math.random()*(velocidad*2))-velocidad,y:(Math.random()*(velocidad*2))-velocidad};
 var barra = {p1:0,p2:0};
 var score = {p1:0,p2:0};
 
 var canvas=document.getElementById('a');
 var ctx;
 if(canvas && canvas.getContext){
  ctx = canvas.getContext('2d');
  ini();
 }
 function ini(){
  window.addEventListener('resize', ResizeW, false);
  setInterval( pong, 1000/30);
  ResizeW();
 }
 function pong(e){
 if(pause){}
 else{
  ctx.fillStyle = filtro?tema.fondofiltro[numtema]:tema.fondo[numtema];
  ctx.beginPath();
  ctx.fillRect(5,0,window.innerWidth-5,window.innerHeight);
  ctx.closePath();
  ctx.fill();
  ctx.fillStyle = tema.fondo[numtema];
  ctx.beginPath();
  ctx.fillRect(0,0,5,window.innerHeight);
  ctx.closePath();
  ctx.fill();
  ctx.fillStyle = tema.fondo[numtema];
  ctx.beginPath();
  ctx.fillRect(window.innerWidth-5,0,window.innerWidth,window.innerHeight);
  ctx.closePath();
  ctx.fill();
  
  ctx.fillStyle = tema.texto[numtema];
  ctx.font = '15px""';
  ctx.fillText("Controles",50,30);
  ctx.fillText("P1: arriba=w abajo=s",50,45);
  ctx.fillText("P2: arriba=8 abajo=2",50,60);
  ctx.fillText("Nueva bola= n",50,75);
  ctx.fillText("Desenfoque por movimiento= f",50,90);
  ctx.fillText("Temas +=derecha, -=izquierda",50,105);
  ctx.fillText("Pause= p",50,120);
  ctx.font = '35px""';
  ctx.fillText(score.p1+" || "+ score.p2 ,(window.innerWidth/2)-30,30);
  
  ctx.fillStyle = tema.colorbarra[numtema];
  ctx.beginPath();
  ctx.fillRect(0,barra.p1,5,150);
  ctx.closePath();
  ctx.fill();
  ctx.fillStyle = tema.colorbarra[numtema];
  ctx.beginPath();
  ctx.fillRect(window.innerWidth-5,barra.p2,5,150);
  ctx.closePath();
  ctx.fill();
  
  ctx.fillStyle = tema.colorbola[numtema];
  ctx.beginPath();
  ctx.arc(bola.x,bola.y,15,0,2*Math.PI,false);
  ctx.closePath();
  ctx.fill();
  
  if(bola.x>0 && bola.x<window.innerWidth-1){
  vel.x=(((bola.x<20) && ((bola.y>barra.p1)&&(bola.y<barra.p1+150))) || (bola.x>window.innerWidth-20&& ((bola.y>barra.p2)&&(bola.y<barra.p2+150))))?vel.x*-1.15:vel.x;
  vel.y=(bola.y<15 || bola.y>window.innerHeight-15)?-vel.y:vel.y;
  if(vel.x<-28)vel.x=-27;
  if(vel.x>28)vel.x=30;
  bola.x+=vel.x;
  bola.y+=vel.y;
  if(bola.x<1)score.p2++;
  if(bola.x>window.innerWidth-1)score.p1++;
  }
  else{
   bola.x=-30;
   bola.y=-30;
  }
  }
 }
 function ResizeW(e){
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
 }
 document.onkeydown = function (event){
  var keycode = (window.event||event).keyCode;
  switch(keycode){
   case 87: //p1 arriba
   barra.p1-=45;
   barra.p1<0?(barra.p1=0):(barra.p1=barra.p1);
   break;
   case 83: //p1 abajo
   barra.p1+=45;
   barra.p1+90>window.innerHeight?(barra.p1=window.innerHeight-90):barra.p1=barra.p1;
   break;
   case 104: //p2 arriba
   barra.p2-=45;
   barra.p2<0?(barra.p2=0):(barra.p2=barra.p2);
   break;
   case 98:  //p2 abajo
   barra.p2+=45;
   barra.p2+90>window.innerHeight?(barra.p2=window.innerHeight-90):(barra.p2=barra.p2);
   break;
   case 80: //pause
   pause=pause?false:true;
   break;
   case 70: //filtro
   filtro=filtro?false:true;
   break;
   case 78: //nueva bola
   vel = {x:(Math.random()*(velocidad*2))-velocidad,y:(Math.random()*(velocidad*2))-velocidad};
   bola = {x:window.innerWidth/2,y:window.innerHeight/2};
   break;
   case 37: //tema--
   numtema==0?(numtema=2):numtema--;
   break;
   case 39: //tema++
   numtema==2?(numtema=0):numtema++;
   break;  
   default:
   break;   
  }
 }
</script>
</body>
</html>

Quizá se pueda optimizar mucho, pero primero quiero terminarlo asi y ya despues acortarlo....

Se aceptan criticas constructivas

Test Foro de elhacker.net SMF 2.1

Ayuda con bugs en PONG (html5<canvas> + javascript)

pony012