Conecta4 javascript

Arm144 · 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 [Seleccionar]

<!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 (javascript) [Seleccionar]


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 (javascript) [Seleccionar]

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 (javascript) [Seleccionar]


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¡¡

[u]nsigned · 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

Test Foro de elhacker.net SMF 2.1

Conecta4 javascript

Arm144

[u]nsigned