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

 

 


Tema destacado: Recuerda que debes registrarte en el foro para poder participar (preguntar y responder)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Conecta4 javascript
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Conecta4 javascript  (Leído 1,743 veces)
Arm144

Desconectado Desconectado

Mensajes: 13


Ver Perfil
Conecta4 javascript
« en: 16 Diciembre 2016, 22:05 pm »

Buenas tardes. Me pongo en contacto con el foro para intentar que me den alguna pista o alguna solución a el siguiente problema. Estoy realizando el juego del Conecta4 en javascript, pero a la hora de la comprobación de que encuentre 4 fichas juntas, mi cabeza explota y no consigue llegar a la solución.

Este es el código que tengo:

Index.html:
Código:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Conecta4</title>
</head>

<body>
<img id="tabFondo" src="Images/Tablero.png" alt="tablero" hidden="true">
<img id="rojas" src="Images/fichaRoja.png" alt="Ficha Roja" hidden="true">
<img id="amarillas" src="Images/fichaAmarilla.png" alt="Ficha Amarilla" hidden="true">
<canvas id="cnvTablero" style="border:1px solid blue;" onClick="tab.pinchar(event)"></canvas>
<script src="Tablero.js"></script>
<script src="Ficha.js"></script>
<script type="text/javascript">
var tab = new Tablero();
tab.mostrar();
</script>
</body>
</html>

Ficha.js :
Código
  1. function Ficha(color){
  2. "use strict";
  3. this.color=color;
  4.  
  5. if(this.color===R){
  6. this.imagen = document.getElementById("rojas");
  7. }else{
  8. this.imagen = document.getElementById("amarillas");
  9. }
  10. }
  11.  

Tablero.js:
Código
  1. const R = 1;
  2. const A = -1;
  3.  
  4. function Tablero(){
  5. "use strict";
  6. var altura = 6;
  7. var anchura = 7;
  8. var coincidencias=0;
  9.  
  10. this.imagen = document.getElementById("tabFondo");
  11. this.canvas = document.getElementById("cnvTablero");
  12. this.ctx = this.canvas.getContext("2d");
  13. this.canvas.width=anchura*100;
  14. this.fichas = new Array();
  15.  
  16. //Pintar tablero
  17. for(var i=0; i<anchura; i++){
  18. for(var j=0; j<altura; j++){
  19. this.ctx.drawImage(this.imagen, i*100, j*100);
  20. }
  21. }
  22.  
  23. //Inicializar el array bidimensional
  24. for(var i=0; i<anchura; i++){
  25. this.fichas[i] = new Array();
  26. for(var j=0; j<altura; j++){
  27. this.fichas[i][j] = undefined;
  28. }
  29. }
  30. this.jugador = R;
  31.  
  32.  
  33. this.pinchar=function(event){
  34. //Obtiene posicion del tablero
  35. var x =Math.floor((event.pageX - this.canvas.offsetLeft)/ 100);
  36. var y =Math.floor((event.pageY - this.canvas.offsetTop) / 100);
  37.  
  38. for(var i=altura-1; i>=0; i--){
  39. if(this.fichas[x][i] == undefined){
  40. this.fichas[x][i]=new Ficha(this.jugador);
  41. break;
  42. }
  43. }
  44. this.jugador = -this.jugador;
  45. this.mostrar();
  46. this.comprobar(x,y);
  47. };
  48.  
  49. this.mostrar=function(){
  50. for(var i=anchura-1; i>=0; i--){
  51. for(var j=altura-1; j>=0; j--){
  52. if(this.fichas[i][j] != undefined){
  53. this.ctx.drawImage(this.fichas[i][j].imagen, i*100, j*100);
  54. }
  55. }
  56. }
  57. };
  58.  
  59. this.comprobar=function(x,y){
  60. for(var i=0;i<anchura;i++){
  61.                             coincidencias=1;
  62. for(var j=0;j<altura;j++){
  63. if(this.fichas[i][j]!=undefined){
  64. //Comprobación Horizontal
  65. //Comprobación Vertical
  66. //Comprobación Diagonal Derecha a Izquierda y hacia Arriba
  67. //Comprobación Diagonal Izquierda a Derecha y hacia Abajo
  68. }
  69. }
  70. }
  71.  
  72. };
  73.  
  74. this.gameOver(coincidencias){
  75. if(coincidencias==4){
  76. if(this.jugador==R){
  77. alert("Gana Rojo");
  78. }else if(this.jugador==A){
  79. alert("Gana Amarillo");
  80. }
  81. }
  82. }
  83. }
  84.  

He probado realizar lo siguiente para la comprobación horizontal, pero no funciona correctamente:
Código
  1. this.comprobar=function(x,y){
  2. for(var i=0;i<anchura;i++){
  3. coincidencias=1;
  4. for(var j=0;j<altura;j++){
  5. if(this.fichas[i][j]!=undefined){
  6. //Comprobación Horizontal
  7. for(var a=i;a<=anchura;a++){
  8. var h=y;
  9. if(this.fichas[a][y]!=undefined && this.fichas[a][y]==this.jugador){
  10. coincidencias++;
  11. }else{
  12. coincidencias=1;
  13. }
  14. }
  15. //Comprobación Vertical
  16. //Comprobación Diagonal Derecha a Izquierda y hacia Arriba
  17. //Comprobación Diagonal Izquierda a Derecha y hacia Abajo
  18. }
  19. }
  20. }
  21.  
  22. };
  23.  
  24.  

Gracias de antemano. Saludos¡¡


En línea

[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Conecta4 javascript
« Respuesta #1 en: 16 Diciembre 2016, 22:31 pm »

Te voy a decir lo que hago yo cuando estoy aprendiendo algo nuevo en js:

Lleno todo de console.debug() console.warn() y console.info().

Parece una locura, pero asi seguis la ejecución paso a paso, o si estas mas canchero en js hace todo el con un json. Es la única forma de entender lo que estás haciendo, y no solo hacerlo funcionar ;)

Saludos


En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ayuda con javascript en mi web(no tengo ni idea de javascript)
Desarrollo Web
jonathanmr 1 3,099 Último mensaje 1 Febrero 2013, 06:14 am
por Shell Root
Ayuda conecta4
Java
luismi_12 0 1,387 Último mensaje 16 Junio 2013, 17:56 pm
por luismi_12
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines