Estoy haciendo un triki (Juego del gato o tres en raya) de manera recursiva en javascript usando el objeto canvas y su contexto, tengo el código separado en 4 archivos.
El primero es el main.js, el cual ejecuta los otros archivos, otro de ellos se llama functions.js, este almacena funciones pequeñas como el cambio de tamaño del canvas y el pasar de grados a radianes (Ya que la función arc del ctx, utiliza radianes), se me hace más cómodo trabajar con grados.
Otro de ellos es el player.js y el board.js, que serán usados como objetos, cada uno de estos tiene su propia función para dibujarse, algo como:
board.show();
player.show();
El juego pinta las formas correctamente en el lugar correcto, y pues no está del todo terminado, ya que solo tiene una comprobación para terminar el juego y es si se empata (Estas comprobaciones ya las se hacer por lo que no es lo que necesito).
El problema es el siguiente:
Tengo un arreglo en el que se guarda las posiciones en X y en Y relativas al tamaño del canvas por cada espacio que exista en el tablero.
También se guarda el ancho y el alto de cada casilla en este arreglo (es decir, dentro de cada espacio del arreglo un objeto JSON con estos valores), en este arreglo solo se definirán los valores una vez se ejecuta el programa por medio de una función, luego esta función no se volverá a ejecutar y los valores quedarán permanentemente establecidos hasta que el usuario recargue la página.
Este arreglo es usado para dibujar cada uno de los espacios del tablero únicamente.
También tengo otro arreglo vacío en el cual, si el usuario clickea una parte del canvas, se ejecuta una función que hace que se establezca en ese arreglo en una posición especifica, una X o un O como string, eso dependerá del turno en el que se encuentre el jugador si el turno es 1, será una X, si el turno es 2 será un círculo.
Es decir, supongamos que el usuario clickeo la casilla #2 y esa casilla esta vacía, (contando desde el 0), entonces en el arreglo en la posición #2, se añadirá ya sea un string "x", o un string "o", el resto de posiciones estará vacío.
Una vez añadidas las posiciones se ejecuta un ciclo que comprueba cada lugar de este arreglo para ver si hay algo que dibujar y en que posiciones, si hay algo por dibujar lo dibuja en esa casilla.
Y, una vez todas las casillas tengan ya sea una "x", o un "o", se ejecuta una función que restablece todos los valores de este arreglo a "", es decir, a nada.
La primera vez que se resetea vale, todo bien, la segunda, también, pero la tercera vez, cuando se resetea y vuelvo a darle click a cualquier casilla por primera vez, pasa algo muy muy extraño, y es que se me pinta ya sea un "x" o un "o" en la ultima casilla que yo había pintado el anterior ciclo, y al mismo tiempo se me pinta la casilla que quiero que se me pinte, luego le undo a otra casilla y todo vuelve a la normalidad, es decir "La casilla fantasma", se me despinta, esto ocurre cada 2 ciclos después de la primera vez que ocurra...
¿Que puede estar pasando?
Aquí el código functions.js:
function boardResize(percent){
percent = Math.floor((screen.availWidth/100)*percent);
return percent;
}
function degreesToRadians(degrees){
degrees = ((Math.PI*degrees)/180);
return degrees;
}
Aquí el código main.js:
window.onload = ()=>{
let screenWidth = boardResize(25);
let offset = Math.floor(screenWidth/3);
let col = Math.floor(Math.abs((offset*0.80)-offset));
let len = Math.floor(offset-(offset*0.40));
let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext("2d");
let board;
let player;
let absolX;
let absolY;
function handleClick(event){
absolX = Math.floor(window.event.clientX - board.canvasX);
absolY = Math.floor(window.event.clientY - board.canvasY);
console.log(absolX,absolY);
player.pushSpots(absolX,absolY,board.turn);
}
function setup(){
board = new Board(canvas,ctx,screenWidth,offset);
player = new Player(ctx,board,col,col,len);
board.setGrid();
}
function update(){
if(!board.end){
board.clear();
board.showGrid();
player.drawShapes();
board.gameOver(player);
requestAnimationFrame(update);
}else{
board.endMsg();
player.reset();
update();
}
}
setup();
canvas.addEventListener("click",handleClick);
update();
}
Aquí el código player.js:
function Player(ctx,board,x,y,l){
this.ctx = ctx;
this.board = board;
this.x = x;
this.y = y;
this.l = l;
this.spots = [];
this.pushSpots = (absX,absY,Turn)=>{
let temp = 0;
for(let i = 0; i < 3; i++){
for(let j = 0; j < 3; j++){
temp++;
if(absX >= this.board.grid[temp-1].x && absX <= this.board.grid[temp-1].x + this.board.offset
&& absY >= this.board.grid[temp-1].y && absY <= this.board.grid[temp-1].y + this.board.offset){
if(this.board.turn == 1){
if(this.spots[temp-1] == "" || this.spots[temp-1] == undefined){
this.spots[temp-1] = "x";
this.board.shiftTurn();
}
}else if(this.board.turn == 2){
if(this.spots[temp-1] == "" || this.spots[temp-1] == undefined){
this.spots[temp-1] = "o";
this.board.shiftTurn();
}
}
}
}
}
temp = 0;
}
this.deleteSpots = ()=>{
if(this.board.end){
for(let i = 0; i < 9; i++){
this.spots.shift();
}
}
}
this.drawShapes = ()=>{
let temp = 0;
for(let i = 0; i < 3; i++){
for(let j = 0; j < 3; j++){
temp++;
if(this.spots[temp-1] == "x"){
this.ctx.save();
this.ctx.lineWidth = 3;
this.ctx.strokeStyle = "#000000";
this.ctx.moveTo(this.x+(this.board.offset*(j)),this.y+(this.board.offset*(i)));
this.ctx.lineTo(this.x + (this.board.offset*(j) + this.l),this.y + (this.board.offset*(i)) + this.l);
this.ctx.moveTo(this.x+(this.board.offset*(j)),this.y+(this.board.offset*(i)) + this.l);
this.ctx.lineTo(this.x + (this.board.offset*(j) + this.l),this.y + (this.board.offset*(i)));
this.ctx.stroke();
this.ctx.restore();
}else if(this.spots[temp-1] == "o"){
this.ctx.save();
this.ctx.lineWidth = 3;
this.ctx.strokeStyle = "#000000";
this.ctx.moveTo(this.x+(this.board.offset*(j)),this.y+(this.board.offset*(i)));
this.ctx.beginPath();
this.ctx.arc((this.x *2.5)+(this.board.offset*(j)),(this.y *2.5)+(this.board.offset*(i)),Math.floor(this.l/1.8),0,degreesToRadians(360));
this.ctx.closePath();
this.ctx.stroke();
this.ctx.restore();
}
}
}
temp = 0;
}
this.reset = ()=>{
this.deleteSpots();
this.board.end = false;
this.board.win = "";
}
}
Aquí el código board.js:
function Board(canvas,ctx,size,offset){
this.grid = [];
this.size = size;
this.turn = 1;
this.end = false;
this.win;
this.offset = offset;
this.canvas = canvas;
this.ctx = ctx;
this.canvas.width = this.canvas.width;
this.canvas.height = this.canvas.height;
this.canvas.width = this.size;
this.canvas.height = this.size;
this.canvasX = this.canvas.getBoundingClientRect().left;
this.canvasY = this.canvas.getBoundingClientRect().top;
this.gameOver = (player)=>{
if(player.spots[0] != undefined && player.spots[1] != undefined && player.spots[2] != undefined && player.spots[3] != undefined
&& player.spots[4] != undefined && player.spots[5] != undefined && player.spots[6] != undefined && player.spots[7] != undefined
&& player.spots[8] != undefined){
this.end = true;
this.win = "empate";
}
}
this.endMsg = ()=>{
if(this.win != ""){
if(this.win == "x"){
alert("Player one wins!");
}else if (this.win == "o") {
alert("Player two wins!")
}else{
alert("DRAW");
}
}
}
this.clear = ()=>{
this.ctx.clearRect(0,0,this.size,this.size);
}
this.setGrid = ()=>{
let temp = 0;
for(let i = 0; i < 3; i++){
for(let j = 0; j < 3; j++){
temp++;
this.grid[temp-1] = {
x:j*this.offset,
y:i*this.offset,
w:this.offset,
h:this.offset
};
}
}
temp = 0;
}
this.showGrid = ()=>{
this.ctx.save();
this.ctx.strokeStyle = "#000000";
this.ctx.lineWidth = 3;
for(let i = 0; i < this.grid.length; i++){
this.ctx.strokeRect(this.grid[i].x,this.grid[i].y,this.grid[i].w,this.grid[i].h);
}
this.ctx.restore();
}
this.shiftTurn = ()=>{
this.turn == 1 ? this.turn = 2 : this.turn = 1;
}
}
Añado que mi elemento canvas esta centrado a partir de las etiquetas center, por si esto tuviera algo que ver...