se puede simplificar algo de este codigo ? const canvas1 = document.getElementById("canvas1"); const canvas2 = document.getElementById("canvas2"); const info = document.getElementById("info"); const contexto1 = canvas1.getContext("2d"); const contexto2 = canvas2.getContext("2d"); const num_filas = 11; const num_columnas = 11; const ancho_celda = canvas1.width / num_columnas; const alto_celda = canvas1.height / num_filas; let tablero1 = Array.from({ length: num_filas }, () => new Array(num_columnas).fill("")); let tablero2 = Array.from({ length: num_filas }, () => new Array(num_columnas).fill("")); let barcosColocados = 0; const barcos = [ { size: 2, orientation: "vertical" }, { size: 2, orientation: "horizontal" }, { size: 3, orientation: "vertical" }, { size: 4, orientation: "horizontal" } ]; let barcosColocados2 = 0; const barcos2 = [ { size: 2, orientation: "vertical" }, { size: 2, orientation: "horizontal" }, { size: 3, orientation: "vertical" }, { size: 4, orientation: "horizontal" } ]; let turnoJugador1 = true; function dibujaCuadricula(contexto, tablero, jugador1) { contexto.clearRect(0, 0, canvas1.width, canvas1.height); for (let fila = 0; fila < num_filas; fila++) { for (let columna = 0; columna < num_columnas; columna++) { const x = columna * ancho_celda; const y = fila * alto_celda; contexto.strokeStyle = "black"; contexto.strokeRect(x, y, ancho_celda, alto_celda); if (fila === 0 && columna === 0) { contexto.fillStyle = "black"; } else if (fila === 0) { contexto.fillStyle = "white"; contexto.fillText(String.fromCharCode(64 + columna), x + ancho_celda / 2, y + alto_celda / 2); } else if (columna === 0) { contexto.fillStyle = "white"; contexto.fillText(fila.toString(), x + ancho_celda / 2, y + alto_celda / 2); } else { if (tablero === tablero1 && jugador1) { if (tablero[fila][columna] === "X") { contexto.fillStyle = "black"; // Pintar las celdas con barcos en negro } else if (tablero[fila][columna] === "T") { contexto.fillStyle = "red"; // Pintar las celdas tocadas en rojo } else { contexto.fillStyle = "#aeebff"; // Pintar las celdas de agua en azul } } else if (tablero === tablero2 && !jugador1) { if (tablero[fila][columna] === "X") { contexto.fillStyle = "black"; // Pintar las celdas con barcos en negro } else if (tablero[fila][columna] === "T") { contexto.fillStyle = "red"; // Pintar las celdas tocadas en rojo } else if (tablero[fila][columna] === "O") { contexto.fillStyle = "blue"; // Pintar las celdas de agua en azul } else { contexto.fillStyle = "#fff"; // Pintar las celdas vacías en blanco } } else { contexto.fillStyle = "#3df8ef"; // Pintar las celdas de la cuadrícula de referencia en turquesa } contexto.fillRect(x, y, ancho_celda, alto_celda); } } } } function verificarCeldasDisponibles(fila, columna, size, orientation, tablero) { if (orientation === "horizontal") { for (let i = 0; i < size; i++) { if (tablero[fila][columna + i] !== "") { return false; } } } else if (orientation === "vertical") { for (let i = 0; i < size; i++) { if (tablero[fila + i][columna] !== "") { return false; } } } return true; } function colocarBarco(fila, columna, size, orientation, tablero) { if (orientation === "horizontal") { for (let i = 0; i < size; i++) { tablero[fila][columna + i] = "X"; } } else if (orientation === "vertical") { for (let i = 0; i < size; i++) { tablero[fila + i][columna] = "X"; } } } function dibujarBarcos() { dibujaCuadricula(contexto1, tablero1, true); dibujaCuadricula(contexto2, tablero2, false); } // TODO LO DEL JUGADOR 1 function colocarBarcoManualmenteJugador1(fila, columna, size, orientation) { if (orientation === "vertical") { for (let i = fila; i < fila + size; i++) { tablero1[i][columna] = "X"; // Marcar las celdas del barco en el tablero1 } } else { for (let j = columna; j < columna + size; j++) { tablero1[fila][j] = "X"; // Marcar las celdas del barco en el tablero1 } } dibujaCuadricula(contexto1, tablero1, true); // Volver a dibujar el tablero1 actualizado } function dibujarTableroJugador1(event) { const rect = canvas1.getBoundingClientRect(); const clickX = event.clientX - rect.left; const clickY = event.clientY - rect.top; const columna = Math.floor(clickX / ancho_celda); const fila = Math.floor(clickY / alto_celda); if (barcosColocados < barcos.length && tablero1[fila][columna] === "") { const barco = barcos[barcosColocados]; if (verificarCeldasDisponibles(fila, columna, barco.size, barco.orientation, tablero1)) { colocarBarcoManualmenteJugador1(fila, columna, barco.size, barco.orientation); barcosColocados++; dibujaCuadricula(contexto1, tablero1, true); } } if (barcosColocados === barcos.length) { canvas1.removeEventListener("click", dibujarTableroJugador1); canvas2.addEventListener("click", dibujarTableroJugador2); info.innerHTML = "¡Barcos del jugador 1 colocados! Turno del jugador 2"; } } // TODO LO DEL JUGADOR 2 function colocarBarcoManualmenteJugador2(fila, columna, size, orientation) { if (orientation === "vertical") { for (let i = fila; i < fila + size; i++) { tablero2[i][columna] = "X"; // Marcar las celdas del barco en el tablero2 } } else { for (let j = columna; j < columna + size; j++) { tablero2[fila][j] = "X"; // Marcar las celdas del barco en el tablero2 } } dibujaCuadricula(contexto2, tablero2, false); // Volver a dibujar el tablero2 actualizado } function dibujarTableroJugador2(event) { const rect = canvas2.getBoundingClientRect(); const clickX = event.clientX - rect.left; const clickY = event.clientY - rect.top; const columna = Math.floor(clickX / ancho_celda); const fila = Math.floor(clickY / alto_celda); if (barcosColocados2 < barcos2.length && tablero2[fila][columna] === "") { const barco = barcos2[barcosColocados2]; if (verificarCeldasDisponibles(fila, columna, barco.size, barco.orientation, tablero2)) { colocarBarcoManualmenteJugador2(fila, columna, barco.size, barco.orientation); barcosColocados2++; dibujaCuadricula(contexto2, tablero2, false); } } if (barcosColocados2 === barcos2.length) { canvas1.removeEventListener("click", dibujarTableroJugador1); canvas2.addEventListener("click", logicaDisparo); info.innerHTML = "¡Barcos del jugador 2 colocados! ¡Dispara Jugador 1!"; turnoJugador1 = true; } } function logicaDisparo(event) { const rect = turnoJugador1 ? canvas2.getBoundingClientRect() : canvas1.getBoundingClientRect(); const clickX = event.clientX - rect.left; const clickY = event.clientY - rect.top; const columna = Math.floor(clickX / ancho_celda); const fila = Math.floor(clickY / alto_celda); let tableroDisparado = turnoJugador1 ? tablero2 : tablero1; if (tableroDisparado[fila][columna] === "X") { tableroDisparado[fila][columna] = "T"; // Marcar la celda como tocada info.innerHTML = "Tocado. Vuelve a disparar"; canvas2.removeEventListener("click", logicaDisparo); canvas2.addEventListener("click", logicaDisparo); if (turnoJugador1) { turnoJugador1 = false; dibujaCuadricula(contexto2, tablero2, false); // Actualizar el tablero del Jugador 2 info.innerHTML = "¡Turno del jugador 2!"; canvas2.removeEventListener("click", logicaDisparo); canvas1.addEventListener("click", logicaDisparo); } else { turnoJugador1 = true; dibujaCuadricula(contexto1, tablero1, true); // Actualizar el tablero del Jugador 1 info.innerHTML = "¡Turno del jugador 1!"; canvas1.removeEventListener("click", logicaDisparo); canvas2.addEventListener("click", logicaDisparo); } } } // RESET GAME const resetButton = document.getElementById("reset"); resetButton.addEventListener("click", resetGame); function resetGame() { tablero1 = Array.from({ length: num_filas }, () => new Array(num_columnas).fill("")); tablero2 = Array.from({ length: num_filas }, () => new Array(num_columnas).fill("")); barcosColocados = 0; barcosColocados2 = 0; dibujaCuadricula(contexto1, tablero1, true); dibujaCuadricula(contexto2, tablero2, false); info.textContent = "Coloca el primer barco."; canvas1.addEventListener("click", dibujarTableroJugador1); canvas2.removeEventListener("click", dibujarTableroJugador2); } // CUADRICULA dibujaCuadricula(contexto1, tablero1, true); dibujaCuadricula(contexto2, tablero2, false); info.textContent = "Coloca el primer barco."; canvas1.addEventListener("click", dibujarTableroJugador1); canvas2.removeEventListener("click", dibujarTableroJugador2);

function restar(a, b){
  return a - b
}

restar(3, 1)