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
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:
Código
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:
Código
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¡¡