minesweeper

Dragaminas

Buscaminas... sí, ese viejo juego clásico que recuerdas haber jugado en el viejo Windows '95 en su día (de hecho, se implementó en las actualizaciones de software de Microsoft hasta Windows 8). Buscaminas tiene sus orígenes en los primeros juegos para mainframe de las décadas de 1960 y 1970. El primer antepasado del Buscaminas fue el Cubo de Jerimac Ratliff. El estilo de juego básico se convirtió en un segmento popular del género de los juegos de rompecabezas durante la década de 1980.

Repasa tu historia del Buscaminas aquí.

¿Sabes qué es un Buscaminas real? Yo tampoco lo hice hasta que leí esto.

Recuerdo que mi primera experiencia con computadoras en los años 90 involucró jugar mucho a este juego, así que pensé, ¿qué mejor juego que este para cerrar el círculo?

Mi versión

Empezando

¡Juega el juego aquí!

Jugabilidad básica

1. Selecciona tu nivel de dificultad.

• Fácil = 9x9, 10 minas
• Mediano = 16x16, 40 minas
• Difícil = 30x30, 160 minas

2. Haga clic en cualquier parte del tablero para comenzar e iniciar el cronómetro. *Los números representan cuántas minas hay adyacentes a una celda determinada.
3. Usa "Shift + Click" para agregar banderas a una celda si crees que es una mina.

Ganar/Perder

• Si golpeas una mina... se acabó el juego, amigo.
• ¡Gana descubriendo todas las celdas sin minas!

(entiendes... MÍO... BARREDOR...?)

Tecnologías utilizadas

Los buenos Tres Amigos:

• HTML
• CSS
• javascript

HTML

Como puede ver en el código fuente, el HTML es muy conciso, ya que la mayor parte de la acción ocurre en JavaScript. Sin mencionar que el tablero de juego en sí es solo una simple mesa.

CSS

Me divertí mucho diseñando esto con el aspecto antiguo de la vista de escritorio de Windows '95. Todavía quiero trastear un poco con él para que quede perfecto (no pude encontrar la fuente exacta utilizada por MS).

Mi mayor desafío con CSS fue descubrir los estilos de la tabla (bordes, tamaños de td, etc.)

javascript

Como esta fue la primera vez que escribí una aplicación web funcional usando JavaScript, no es una gran sorpresa que esta sección fuera, con diferencia, el mayor desafío del proyecto para mí.

Aquí hay un par de aspectos destacados:

1. Dimensionar dinámicamente la tabla al hacer clic en un nivel de dificultad

• Creé una función (con la ayuda de Jim, por supuesto) que analiza el número del ID en la tabla y lo convierte en una variable ${size} que básicamente agrega filas/columnas según el número que toma. Este concepto me dejó alucinado.

2. A su vez, se crea dinámicamente una matriz de matrices para que coincida con la tabla visual.
3. Crear una clase "Celda" que usé para crear "objetos de celda" individuales a los que asigné un montón de propiedades: número de fila, número de columna, bomba t/f, número de bombas adyacentes (otro desafío en sí mismo, por cierto) , reveló t/f y marcó t/f.

• Este enfoque hizo que fuera mucho más fácil escribir código más conciso y no repetirme una y otra vez, así como crear métodos en la clase que se ejecutarían para cada objeto de celda.

4. Creando un cronómetro funcional que mostraba los segundos transcurridos.
5. Colocación aleatoria de bombas en la matriz.
6. Representando todo en el DOM.
7. Asignar controladores de clic a diferentes eventos.
8. Creando una lógica de ganar/perder
9. Descubrir el flujo de control de cómo se encadenan todas las funciones de forma sincrónica.
10. Aprender sobre la recursividad y cómo escribir correctamente una función que cree tal efecto.

Mis opciones de diseño

Decidí seguir con el aspecto OG Windows '95. Soy un firme creyente en el “Imitar. Asimilar. Innovar”. modelo de aprendizaje, así que pensé que para mi primer proyecto necesitaba caminar antes de poder correr y comenzar con la fase de imitación del proceso de aprendizaje.

Estoy muy contento de haber elegido este camino, porque aprendí MUCHO simplemente intentando combinar los estilos del juego original.

Dicho esto, definitivamente voy a crear una versión modernizada de esto algún día pronto.

¡Próximos pasos!

Este proyecto realmente fue muy divertido para mí. Planeo seguir perfeccionándolo y hacer referencia a las muchas lecciones aprendidas en los años venideros.

• Como mencioné anteriormente, me encantaría hacer un "alternar pantalla" que cambie el CSS a una interfaz de usuario modernizada, limpia, plana y minimalista.
• Hay algunos pequeños errores estéticos estúpidos que me hacen arrancarme el pelo, como cómo el ancho/alto de la celda se modifica unos pocos píxeles cuando el tablero está totalmente revelado. Necesito arreglar eso.
• También me encantaría desarrollar más el aspecto de Windows '95, haciendo que el botón Inicio haga algo, agregar un reloj en la esquina inferior derecha y algunos íconos funcionales en el escritorio.
• Una característica realmente difícil que me encantaría abordar sería crear una característica donde el usuario pudiera elegir la dificultad ingresando números (números de fila/col/mina).

Será para un día lluvioso.

¡Gracias por leer! Espero que disfrutes el juego :)