elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Arreglado, de nuevo, el registro del warzone (wargame) de EHN


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ayuda con bugs en PONG (html5<canvas> + javascript)
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ayuda con bugs en PONG (html5<canvas> + javascript)  (Leído 1,792 veces)
pony012

Desconectado Desconectado

Mensajes: 2


Ver Perfil
Ayuda con bugs en PONG (html5<canvas> + javascript)
« en: 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
  1. <html>
  2. <head></head>
  3. <body bgcolor="black">
  4. <canvas id="a" style="position:absolute;left:0px;top:0px;"></canvas>
  5. <script type="text/javascript">
  6. var numtema = 0;
  7. var tema = {colorbola:['rgb(200,0,200)','rgb(0,0,0)','rgb(200,0,50)'],
  8. colorbarra:['rgb(50,200,20)','rgb(0,0,255)','rgb(255,240,20)'],
  9. texto:['rgb(255,255,255)','rgb(0,0,0)','rgb(255,255,255)'],
  10. fondo:['rgb(0,0,0)','rgb(255,255,255)','rgb(0,0,255)'],
  11. fondofiltro:['rgba(0,0,0,.25)','rgba(255,255,255,.25)','rgba(0,0,255,.25)']};
  12. var filtro=true;
  13. var pause=false;
  14. var velocidad = 15;
  15. var bola = {x:window.innerWidth/2,y:window.innerHeight/2};
  16. var vel = {x:(Math.random()*(velocidad*2))-velocidad,y:(Math.random()*(velocidad*2))-velocidad};
  17. var barra = {p1:0,p2:0};
  18. var score = {p1:0,p2:0};
  19.  
  20. var canvas=document.getElementById('a');
  21. var ctx;
  22. if(canvas && canvas.getContext){
  23. ctx = canvas.getContext('2d');
  24. ini();
  25. }
  26. function ini(){
  27. window.addEventListener('resize', ResizeW, false);
  28. setInterval( pong, 1000/30);
  29. ResizeW();
  30. }
  31. function pong(e){
  32. if(pause){}
  33. else{
  34. ctx.fillStyle = filtro?tema.fondofiltro[numtema]:tema.fondo[numtema];
  35. ctx.beginPath();
  36. ctx.fillRect(5,0,window.innerWidth-5,window.innerHeight);
  37. ctx.closePath();
  38. ctx.fill();
  39. ctx.fillStyle = tema.fondo[numtema];
  40. ctx.beginPath();
  41. ctx.fillRect(0,0,5,window.innerHeight);
  42. ctx.closePath();
  43. ctx.fill();
  44. ctx.fillStyle = tema.fondo[numtema];
  45. ctx.beginPath();
  46. ctx.fillRect(window.innerWidth-5,0,window.innerWidth,window.innerHeight);
  47. ctx.closePath();
  48. ctx.fill();
  49.  
  50. ctx.fillStyle = tema.texto[numtema];
  51. ctx.font = '15px""';
  52. ctx.fillText("Controles",50,30);
  53. ctx.fillText("P1: arriba=w abajo=s",50,45);
  54. ctx.fillText("P2: arriba=8 abajo=2",50,60);
  55. ctx.fillText("Nueva bola= n",50,75);
  56. ctx.fillText("Desenfoque por movimiento= f",50,90);
  57. ctx.fillText("Temas +=derecha, -=izquierda",50,105);
  58. ctx.fillText("Pause= p",50,120);
  59. ctx.font = '35px""';
  60. ctx.fillText(score.p1+" || "+ score.p2 ,(window.innerWidth/2)-30,30);
  61.  
  62. ctx.fillStyle = tema.colorbarra[numtema];
  63. ctx.beginPath();
  64. ctx.fillRect(0,barra.p1,5,150);
  65. ctx.closePath();
  66. ctx.fill();
  67. ctx.fillStyle = tema.colorbarra[numtema];
  68. ctx.beginPath();
  69. ctx.fillRect(window.innerWidth-5,barra.p2,5,150);
  70. ctx.closePath();
  71. ctx.fill();
  72.  
  73. ctx.fillStyle = tema.colorbola[numtema];
  74. ctx.beginPath();
  75. ctx.arc(bola.x,bola.y,15,0,2*Math.PI,false);
  76. ctx.closePath();
  77. ctx.fill();
  78.  
  79. if(bola.x>0 && bola.x<window.innerWidth-1){
  80. 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;
  81. vel.y=(bola.y<15 || bola.y>window.innerHeight-15)?-vel.y:vel.y;
  82. if(vel.x<-28)vel.x=-27;
  83. if(vel.x>28)vel.x=30;
  84. bola.x+=vel.x;
  85. bola.y+=vel.y;
  86. if(bola.x<1)score.p2++;
  87. if(bola.x>window.innerWidth-1)score.p1++;
  88. }
  89. else{
  90. bola.x=-30;
  91. bola.y=-30;
  92. }
  93. }
  94. }
  95. function ResizeW(e){
  96. canvas.width = window.innerWidth;
  97. canvas.height = window.innerHeight;
  98. }
  99. document.onkeydown = function (event){
  100. var keycode = (window.event||event).keyCode;
  101. switch(keycode){
  102. case 87: //p1 arriba
  103. barra.p1-=45;
  104. barra.p1<0?(barra.p1=0):(barra.p1=barra.p1);
  105. break;
  106. case 83: //p1 abajo
  107. barra.p1+=45;
  108. barra.p1+90>window.innerHeight?(barra.p1=window.innerHeight-90):barra.p1=barra.p1;
  109. break;
  110. case 104: //p2 arriba
  111. barra.p2-=45;
  112. barra.p2<0?(barra.p2=0):(barra.p2=barra.p2);
  113. break;
  114. case 98:  //p2 abajo
  115. barra.p2+=45;
  116. barra.p2+90>window.innerHeight?(barra.p2=window.innerHeight-90):(barra.p2=barra.p2);
  117. break;
  118. case 80: //pause
  119. pause=pause?false:true;
  120. break;
  121. case 70: //filtro
  122. filtro=filtro?false:true;
  123. break;
  124. case 78: //nueva bola
  125. vel = {x:(Math.random()*(velocidad*2))-velocidad,y:(Math.random()*(velocidad*2))-velocidad};
  126. bola = {x:window.innerWidth/2,y:window.innerHeight/2};
  127. break;
  128. case 37: //tema--
  129. numtema==0?(numtema=2):numtema--;
  130. break;
  131. case 39: //tema++
  132. numtema==2?(numtema=0):numtema++;
  133. break;
  134. default:
  135. break;
  136. }
  137. }
  138. </script>
  139. </body>
  140. </html>
  141.  

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

Se aceptan criticas constructivas  ;D


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Dudas] javascript y Canvas
Desarrollo Web
Valkyr 1 1,627 Último mensaje 9 Marzo 2012, 19:38 pm
por Valkyr
Browsergame HTML5 de Robots para practicar javascript
Scripting
Prozac20mg 1 1,447 Último mensaje 14 Noviembre 2013, 22:12 pm
por ivancea96
Duda sobre el canvas html5
Desarrollo Web
kakashi20 0 860 Último mensaje 5 Octubre 2015, 16:09 pm
por kakashi20
Ayuda con javascript - Sprite canvas
Desarrollo Web
SrTrp 2 2,044 Último mensaje 3 Julio 2017, 23:35 pm
por SrTrp
Efectos sobre Canvas HTML5
Desarrollo Web
AlbertoBSD 2 909 Último mensaje 12 Noviembre 2018, 21:49 pm
por AlbertoBSD
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines