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...
<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 ;D