La idea es, con lo que hemos aprendido más alguna cosa que ponga aquí nueva que os tocara investigar por vuestra cuenta es hacer proyectos muy sencillos muy básicos para que veáis lo que se puede hacer con poca cosa.
No es hacer un código super profesional ni super depurado, es intentar sacar cosas adelante con lo básico, cuando más soltura veréis que estos códigos se pueden mejorar y hacerlos de manera más eficiente pero la idea es intentar meter el gusanillo em le cuerpo.
Aquí dejare la idea básica y luego vosotros por vuestra cuenta podréis ir desarrollando el juego tarquinamente. Igual hasta pongo opciones de sugerencia para futuros proyectos o para mejorar los que tengamos.
Haremos un hundir la flota versión casera y sencilla. Repetiré lo de casera para que nadie se alarme luego. La idea es hacer que se coloque un barco al azar y luego nosotros simplemente pincharemos hasta dar con él.
<style>
.juegoHundir {
display: flex;
justify-content: center;
align-items: center;
}
.boton {
width: 50px;
height: 50px;
color: blanchedalmond;
}
.botonOpcion {
margin-left: 10%;
margin-top: 10%;
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
<div class="juegoHundir">
<div id="tablero"></div>
<div class="opciones">
<button onclick="empezar()" class="botonOpcion">Empezar / Reset</button>
</div>
</div>
<script>
let tablero = document.querySelector("#tablero");
let azar;
let botones;
function empezar() { //Al clicar el botón de empezar salta a esta función donde se crea la magia.
tablero.innerHTML = ""; //Cada vez que se aprieta el botón se pone el tablero en blanco
for (x = 0; x <= 5; x++) {//Bucle anidado para crear el tablero de forma rápida (con array sería más optimo pero para empezar...)
tablero.innerHTML += `<br data-espacio= "1">`; //Cada iteración del bucle deja un espacio (no es lo más optimo)
for (j = 0; j <= 5; j++) { //Segundo bucle
tablero.innerHTML += `<button id = "${x},${j}" class='boton' onclick="aprieta(this)" data-ocupado = "0" data-espacio= "0"></button>`;//En este bucle se crean los botones con diferentes dataSet para poder darles un valor cada botón tienen su id, clase y para hacer una función.
}
}
botones = tablero.childNodes; //En la variable botones hago referencia a una propiedad del tablero para poder tenerlo numerado.(por no hacerlo bien desde el principio)
pintarBarco(); //Llamo a la función que me dibujara un barco al azat
}
function pintarBarco() {//Función donde dibujo el barco al azar
azar = parseInt(Math.random() * 41); //Opcion de JS para crear números al azar
if (botones[azar].dataset.espacio == 1) {//Condicional si ocurre la condición se repite el bucle, lo hago para que no pueda ser el barco un espacio en blanco
pintarBarco();//Lo que pasa si se cumple la condición.
} else if (botones[azar].dataset.espacio == 0) { //Si la condición anterior no se cumple salta a esta otra condición.
botones[azar].dataset.ocupado = 1; //Si esta condición se cumple se dibuja el barco.
}
}
function aprieta(este) { //Función para ver si es impacto o agua
if (este.dataset.ocupado == 1) { //Condicional, si es un impacto
este.style.backgroundColor = "red"; //El fondo se pondrá de color rojo
alert ("Has ganado eres el puto amo") //Saldrá un alert diciendo lo bueno que eres.
empezar(); //Se reinicia la partida.
} else if (este.dataset.ocupado == 0) { //En caso del condicional anterior no se cumpla sala a este otro.
este.style.backgroundColor = "blue"; //Donde si es agua el color cambia por azul
}
}
</script>