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:
<!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 :
function Ficha(color){
"use strict";
this.color=color;
if(this.color===R){
this.imagen = document.getElementById("rojas");
}else{
this.imagen = document.getElementById("amarillas");
}
}
Tablero.js:
const R = 1;
const A = -1;
function Tablero(){
"use strict";
var altura = 6;
var anchura = 7;
var coincidencias=0;
this.imagen = document.getElementById("tabFondo");
this.canvas = document.getElementById("cnvTablero");
this.ctx = this.canvas.getContext("2d");
this.canvas.width=anchura*100;
this.fichas = new Array();
//Pintar tablero
for(var i=0; i<anchura; i++){
for(var j=0; j<altura; j++){
this.ctx.drawImage(this.imagen, i*100, j*100);
}
}
//Inicializar el array bidimensional
for(var i=0; i<anchura; i++){
this.fichas[i] = new Array();
for(var j=0; j<altura; j++){
this.fichas[i][j] = undefined;
}
}
this.jugador = R;
this.pinchar=function(event){
//Obtiene posicion del tablero
var x =Math.floor((event.pageX - this.canvas.offsetLeft)/ 100);
var y =Math.floor((event.pageY - this.canvas.offsetTop) / 100);
for(var i=altura-1; i>=0; i--){
if(this.fichas[x][i] == undefined){
this.fichas[x][i]=new Ficha(this.jugador);
break;
}
}
this.jugador = -this.jugador;
this.mostrar();
this.comprobar(x,y);
};
this.mostrar=function(){
for(var i=anchura-1; i>=0; i--){
for(var j=altura-1; j>=0; j--){
if(this.fichas[i][j] != undefined){
this.ctx.drawImage(this.fichas[i][j].imagen, i*100, j*100);
}
}
}
};
this.comprobar=function(x,y){
for(var i=0;i<anchura;i++){
coincidencias=1;
for(var j=0;j<altura;j++){
if(this.fichas[i][j]!=undefined){
//Comprobación Horizontal
//Comprobación Vertical
//Comprobación Diagonal Derecha a Izquierda y hacia Arriba
//Comprobación Diagonal Izquierda a Derecha y hacia Abajo
}
}
}
};
this.gameOver(coincidencias){
if(coincidencias==4){
if(this.jugador==R){
alert("Gana Rojo");
}else if(this.jugador==A){
alert("Gana Amarillo");
}
}
}
}
He probado realizar lo siguiente para la comprobación horizontal, pero no funciona correctamente:
this.comprobar=function(x,y){
for(var i=0;i<anchura;i++){
coincidencias=1;
for(var j=0;j<altura;j++){
if(this.fichas[i][j]!=undefined){
//Comprobación Horizontal
for(var a=i;a<=anchura;a++){
var h=y;
if(this.fichas[a][y]!=undefined && this.fichas[a][y]==this.jugador){
coincidencias++;
}else{
coincidencias=1;
}
}
//Comprobación Vertical
//Comprobación Diagonal Derecha a Izquierda y hacia Arriba
//Comprobación Diagonal Izquierda a Derecha y hacia Abajo
}
}
}
};
Gracias de antemano. Saludosˇˇ