Tema: Poner score o puntuacion Ayuda!
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/01/2010, 13:32
Avatar de Binaryboy
Binaryboy
 
Fecha de Ingreso: enero-2010
Mensajes: 31
Antigüedad: 15 años, 2 meses
Puntos: 0
Poner score o puntuacion Ayuda!
Hola estoy haciendo un juego tipo pong y con la ayuda de ceSharp lo he terminado
pero quiero darle los ultimos toque y es que no consigo poner un score o puntuacion cada vez que la bola toque la pala he probado creando una variable llamada con y pasarle el getElementById('scorea'). scorea es un parrafo pero no consigo nada mirar este es el codigo del juego

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
  4. <head> 
  5. <title>
  6. PelotaLoca
  7. </title>
  8.  
  9.  
  10.  
  11.  
  12. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  13. <meta name = "autor" content = ""/>
  14. <meta name = "generator" content = "Notepad++_TopStyle"/>
  15. <meta name = "keywords" content = "palabras para posicionarse arriba en buscadores"/>
  16. <meta name = "description" content = " javascript"/>
  17.  
  18. <style type="text/css">
  19. *{margin-left:225px;
  20. margin-top:125px;
  21. padding:0;
  22. }
  23. body{background-color: black;}
  24.  
  25. #borde{border: solid white 1px; 
  26. margin-left: -225px;
  27. margin-top: -125px; 
  28. width: 564px;
  29. height: 372px;}
  30.  
  31. #fondo{ background-color: black; 
  32. border: solid black 7px;
  33. margin-left: 0px;
  34. margin-top: 0px;
  35. }
  36.  
  37. #pelota{position: absolute;}
  38.  
  39. #raqueta{position: absolute;}
  40.  
  41. #titulo{margin-top:-90px; 
  42. position: absolute;
  43. margin-left: -255px;}
  44.  
  45. #score{position: absolute;
  46. margin-top: 0px;
  47. margin-left: 200px;}
  48.  
  49. #scorea{color: red; 
  50. position: absolute; 
  51. margin-left: 275px;
  52. margin-top: 3px;
  53. }
  54.  
  55. #gameover{position: absolute;
  56. margin-left: 0px;
  57. margin-top: 50px;
  58. visibility: hidden;}
  59.  
  60. #boton{position: absolute;
  61. margin-top: 150px;
  62. margin-left: 135px;
  63. visibility: hidden;
  64. }
  65.  
  66.  
  67. </style>
  68.  
  69.  
  70. <script type="text/javascript">
  71.  
  72. //he usado substring visto en el manual y tambien viendo ejemplos en google
  73. //El script se carga con la pagina
  74. window.onload = function()
  75. {
  76. setInterval(pelotaLoca,1);//funcion que produce el movimiento cada centesimade segundo
  77. }
  78. //declaracion de varibles
  79. var dirHorizontal = 0;//switch o bandera
  80. var dirVertical = 1;//switch o bandera
  81. var arriba = 0;//var de movimiento
  82. var izquierda = 0;//var de movimiento funcion ramdon para que la bola se coloque en diferentes posiciones
  83. var raque = 353;
  84. var raque2 = 230;
  85. var score = 100;
  86.  
  87.  
  88.  
  89.  
  90. function pelotaLoca()
  91. {
  92. var bola = document.getElementById('pelota')//almacenamos la imagen en un variable
  93. var pala = document.getElementById('raqueta')//almacenamos la imagen en un variable
  94. bola.style.left = izquierda+"px";//ponemos la bola en la esquina superior izquierda left: 0px;
  95. bola.style.top = arriba+"px";//ponemos la bola en la esquina superior izquierda top: 0px;
  96. document.getElementById('raqueta').style.top=raque+"px";
  97. document.getElementById('raqueta').style.left=raque2+"px";
  98.  
  99.  
  100. var leftBola = bola.style.left;//vamos almacenando en otra varible el movimiento horizontal
  101. var topBola = bola.style.top;//vamos almacenando en otra varible el movimiento vertical
  102. var Nbola = new Number(leftBola.substring(0,leftBola.length-2 ));//Nbola lo que hago es convertir en número leftBola y con substring lo que hago es eliminar "px" para que funcione en IE
  103. var zonaX = document.getElementById('fondo').style.width=550+"px";//damos tamaño de ancho al div de fondo añadimos "px" para que firefox lo interprete
  104. var zonaY = document.getElementById('fondo').style.height=358+"px";//damos tamaño de alto al div de fondo añadimos "px" para que firefox lo interprete
  105. var NzonaX = new Number(zonaX.substring(0,zonaX.length- 2 ));//Es la zona por donde se va a desplazar ls bola
  106. var NzonaY = new Number(zonaY.substring(0,zonaY.length- 2));//Es la zona por donde se va a desplazar ls bola
  107. var NtopBola = new Number(topBola.substring(0,topBola.length- 2 ));
  108.  
  109. //movimiento horizontal
  110. if(Nbola >= NzonaX)
  111. dirHorizontal = 1;
  112.  
  113.  
  114. if(Nbola == 0)
  115. dirHorizontal = 0;
  116.  
  117. if(dirHorizontal == 0)
  118. izquierda += 1;
  119. else
  120. izquierda -= 1;
  121.  
  122. //movimiento vertical
  123. if(NtopBola >= NzonaY-19 && Nbola > raque2 && Nbola < raque2+100)//para que la bola choque en la raqueta
  124. dirVertical = 1;
  125.  
  126.  
  127. if(NtopBola >= NzonaY)//si la bola supera a la raqueta bola y raqueta desapareceran dando lugar una imagen
  128. //que dice game over seguida de un boton que  reinicia el juego
  129. {
  130. bola.style.visibility = "hidden";
  131. document.getElementById('raqueta').style.visibility = 'hidden';//al terminar la raqueta desaparece
  132. bola.style.top = 0;//La bola vuelve  aposicion inicial
  133. bola.style.left = 0;//La bola vuelve  aposicion inicial
  134. document.getElementById('gameover').style.visibility = 'visible';//imagen de game over al terminar el juego aparece
  135. document.getElementById('boton').style.visibility = 'visible';}//boton de game over al terminar el juego aparece
  136.  
  137. if(NtopBola == 0)
  138. dirVertical = 0;
  139.  
  140. if(dirVertical == 0)
  141. arriba += 1;
  142.  
  143. else
  144. arriba -= 1;
  145. }
  146. function Mover(direccion)
  147.             {
  148.                 
  149.                 
  150.                 switch (direccion.keyCode)
  151.                 {
  152.                     
  153.                     
  154.                     case 90:if(raque2>0)
  155.                         {raque2-= 5;
  156.                 
  157.                          document.getElementById("raqueta").style.left= String(raque2) + "px";}
  158.                     
  159.                     break;
  160.             
  161.                 case 88:if(raque2<465)
  162.                         {raque2+= 5;
  163.                 
  164.                          document.getElementById("raqueta").style.left= String(raque2) + "px";}
  165.                     break;
  166.                 
  167.                 
  168.                 }
  169.             }
  170.  
  171.  
  172. //cambio de imagen al pasar el raton por encima de imagen &#191;otra partida?
  173. imagen1 = new Image();
  174. imagen1.src = "otrapartida.png";
  175.  
  176. imagen2 = new Image();
  177. imagen2.src = "otrapartida2.png";
  178. //funcion para cambiar imagen reutilizada de otro ejercicio
  179. function Cambia(pos,imagen) 
  180. {
  181. document[pos].src = eval(imagen+".src") 
  182. };
  183.  
  184. </script>
  185.  
  186.    
  187.  
  188.  
  189.  
  190. </head>
  191.  
  192. <body onkeyDown="Mover(event);">
  193. <img  id="titulo" src="pelotaLoca.png" />
  194. <div id="borde">
  195. <div id="fondo">
  196. <img  id="pelota" src="bola.gif" alt="pelota del juego" width="15" height="15" />
  197. <img  id="raqueta" src="raqueta.png" alt="raqueta del juego" />
  198. <img  id="gameover" src="gameover.png" alt="fin del juego" />
  199. <img  id="boton" src="otrapartida.png" alt="fin del juego" name="pos" onMouseOver="Cambia('pos','imagen2')" onMouseOut="Cambia('pos','imagen1')" onClick="location.reload();" />
  200. </div>
  201. </div>
  202. <img  id="score" src="score.png" /><p id="scorea">0000</p>
  203.  
  204.  
  205.  
  206.  
  207.  
  208. </body>
  209. </html>

Edito: me pasa una cosa curiosa si pongo que la pelota salga en una posicion RAMDON en el eje horizontal funciona pero la pelota sale por el lado izquierdo y se sale del campo por¿?
Última edición por Binaryboy; 18/01/2010 a las 13:37