Crea un juego web atractivo: 'No pisar el ladrillo blanco'

Introducción

Este proyecto te guía a través de la creación de un juego web sencillo pero atractivo llamado "No pisar el ladrillo blanco". Siguiendo estos pasos, aprenderás a combinar HTML, CSS y JavaScript para construir un juego interactivo donde los jugadores deben evitar pisar los ladrillos blancos para obtener puntos. Este proyecto es ideal para los principiantes que deseen practicar sus habilidades de desarrollo web.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

Cómo establecer una estructura básica de HTML para diseñar la interfaz de tu juego.
Cómo utilizar CSS para dar estilo al juego, haciéndolo visualmente atractivo y fácil de usar.
Cómo implementar JavaScript para agregar funcionalidades dinámicas como el movimiento de los ladrillos, los sistemas de puntuación y la lógica del juego.
Cómo manejar las interacciones del usuario a través de eventos como los clics, mejorando la interactividad del juego.
Cómo manipular el DOM para actualizar dinámicamente el estado del juego, como la puntuación y las condiciones de fin de juego.
Cómo aplicar conceptos básicos de desarrollo de juegos como los bucles del juego, la detección de colisiones y los ajustes de velocidad.

🏆 Logros

Después de completar este proyecto, podrás:

Demostrar una sólida comprensión de cómo se pueden combinar HTML, CSS y JavaScript para crear aplicaciones web interactivas.
Aplicar experiencia práctica en conceptos de desarrollo de juegos como la animación, el manejo de la entrada del usuario y las actualizaciones en tiempo real.
Manipular el DOM y manejar eventos para crear aplicaciones web responsivas.
Mejorar tus habilidades de resolución de problemas a través de la implementación de la lógica del juego y el manejo de casos extremos como las condiciones de fin de juego.
Mostrar tu creatividad en el diseño web y la estética del juego, y explorar futuras personalizaciones y mejoras.
Dar un paso fundamental hacia proyectos de desarrollo web y diseño de juegos más complejos, preparando el terreno para futuros aprendizajes y exploraciones en el campo de las tecnologías web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/arith_ops -.-> lab-445719{{"No pisar el ladrillo blanco"}} javascript/cond_stmts -.-> lab-445719{{"No pisar el ladrillo blanco"}} javascript/loops -.-> lab-445719{{"No pisar el ladrillo blanco"}} javascript/functions -.-> lab-445719{{"No pisar el ladrillo blanco"}} javascript/dom_select -.-> lab-445719{{"No pisar el ladrillo blanco"}} javascript/dom_manip -.-> lab-445719{{"No pisar el ladrillo blanco"}} javascript/event_handle -.-> lab-445719{{"No pisar el ladrillo blanco"}} javascript/dom_traverse -.-> lab-445719{{"No pisar el ladrillo blanco"}} end

Estableciendo la estructura de HTML

Comienza creando la estructura básica de HTML para el juego en index.html. Esto incluye el título del juego, la visualización de la puntuación, el área principal del juego (#main) y el botón de inicio. El área principal del juego contendrá las filas móviles de ladrillos.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Don't Step on the White Tile</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h2>Puntuación</h2>
    <h2 id="score">0</h2>
    <div id="main">
      <div id="con"></div>
    </div>
    <div class="btn">
      <button class="start" onclick="start()">Iniciar juego</button>
    </div>
    <script src="index.js"></script>
  </body>
</html>

En este paso, has establecido la estructura fundamental de HTML para el juego. La estructura incluye un título para el juego, una visualización de la puntuación, un área principal del juego identificada por #main para los ladrillos móviles y un botón de inicio para comenzar el juego. El área #main se llenará más adelante con filas de ladrillos con los que los jugadores interactuarán durante el juego. Esta configuración es crucial ya que establece el esqueleto del juego, sobre el cual CSS y JavaScript agregarán estilo y funcionalidad.

✨ Revisar Solución y Practicar

Creando los estilos de CSS

Define los estilos de CSS para estructurar visualmente el juego en index.css. Este paso implica dar estilo al contenedor principal del juego, a los ladrillos individuales (celdas) y al botón de inicio para que el juego sea visualmente atractivo.

#main {
  width: 408px;
  height: 408px;
  background: white;
  border: 2px solid gray;
  margin: 0 auto;
  overflow: hidden;
}

h2 {
  text-align: center;
}

#con {
  width: 100%;
  height: 400px;
  position: relative;
  top: -408px;
  border-collapse: collapse;
}

.row {
  height: 100px;
  width: 100%;
}

.cell {
  height: 100px;
  width: 100px;
  float: left;
  border: rgb(54, 74, 129) 1px solid;
}

.black {
  background: black;
}

.btn {
  width: 100%;
  text-align: center;
}

.start {
  margin: 20px auto;
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background: yellowgreen;
  line-height: 50px;
  color: #fff;
}

Has definido los estilos de CSS que determinan los aspectos visuales del juego. Los estilos incluyen la disposición del área principal del juego, la apariencia de los ladrillos (o celdas) y el estilo del botón de inicio. Al establecer estos estilos, has hecho que el juego sea visualmente atractivo y has definido los elementos de la interfaz de usuario con los que los jugadores interactuarán, como el tablero de juego y el botón de inicio. Estos estilos son esenciales para hacer que el juego sea atractivo y accesible para los jugadores.

✨ Revisar Solución y Practicar

Inicialización del juego

En este paso, comenzarás a escribir el JavaScript necesario para dar vida a tu juego en index.js. Comienza creando las funciones start e init para inicializar el juego y crear dinámicamente el conjunto inicial de filas para el área del juego.

// Función auxiliar para obtener un elemento por su ID
function $(id) {
  return document.getElementById(id);
}

// Función para crear un div con un nombre de clase dado
function createDiv(className) {
  var div = document.createElement("div");
  div.className = className;
  return div;
}

var gameStarted = false;

// Función para iniciar el juego
function start() {
  if (!gameStarted) {
    init();
  } else {
    alert("El juego ya ha comenzado, no es necesario hacer clic nuevamente!");
  }
}

// Inicializar el juego
function init() {
  gameStarted = true;
  for (var i = 0; i < 4; i++) {
    createRow();
  }
}

En esta etapa, has comenzado a dar vida al juego con JavaScript. El código que has escrito inicializa el juego y configura la mecánica para crear las filas iniciales de ladrillos. Esto incluye definir funciones auxiliares para la manipulación del DOM, establecer una bandera para evitar múltiples inicios de juego y plantear la base para agregar dinámicamente filas al área del juego. Este paso es crucial ya que configura los elementos dinámicos del juego, preparando para la parte interactiva del juego donde los ladrillos se mueven y los jugadores pueden comenzar a interactuar con el juego.

✨ Revisar Solución y Practicar

Manejo del movimiento de filas y comprobación de fin de juego

Extiende la funcionalidad de JavaScript para incluir el movimiento de las filas hacia abajo y la comprobación de si el juego ha terminado. Esto implica crear un bucle del juego que actualice la posición de las filas y compruebe si alguna fila ha pasado el límite permitido sin ser "pisada".

// Continúa en index.js

var speed = 6; // Velocidad inicial de las filas en movimiento
var clock = null;

// Mueve las filas hacia abajo
function move() {
  var con = $("con");
  var top = parseInt(window.getComputedStyle(con, null)["top"]);
  if (speed + top > 0) {
    top = 0;
  } else {
    top += speed;
  }
  con.style.top = top + "px";
  checkGameOver();
  if (top == 0) {
    createRow();
    con.style.top = "-102px";
    deleteRow();
  }
}

// Comprueba si el juego ha terminado
function checkGameOver() {
  var con = $("con");
  var rows = con.childNodes;
  var conTop = parseInt(window.getComputedStyle(con, null)["top"]);
  var conHeight = con.offsetHeight;
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    var rowTop = conTop + i * row.offsetHeight;
    if (rowTop >= conHeight && row.passed !== 1) {
      fail();
      break;
    }
  }
}

Aquí, has ampliado la funcionalidad del juego agregando la lógica para mover las filas hacia abajo y comprobar las condiciones de fin de juego. La función move actualiza la posición de las filas, simulando el movimiento de los ladrillos que los jugadores deben evitar pisar. La función checkGameOver controla si alguna fila ha pasado por debajo del área del juego sin ser "pisada", lo que terminaría el juego. Este paso introduce la mecánica principal y el desafío del juego, haciéndolo interactivo y atractivo.

✨ Revisar Solución y Practicar

Implementando la puntuación y el aumento de velocidad

En este paso, centra en implementar el mecanismo de puntuación del juego y aumentar la velocidad de las filas a medida que aumenta la puntuación del jugador. Esto agrega un nivel de desafío al juego, manteniéndolo atractivo.

// Continúa en index.js

// Actualiza la puntuación
function score() {
  var newScore = parseInt($("score").innerHTML) + 1;
  $("score").innerHTML = newScore;
  if (newScore % 10 == 0) {
    speedUp();
  }
}

// Aumenta la velocidad de las filas en movimiento
function speedUp() {
  speed += 2;
  if (speed == 20) {
    alert("Velocidad increíble!");
  }
}

En este paso, has implementado el sistema de puntuación del juego y agregado una característica para aumentar la velocidad de las filas en movimiento a medida que aumenta la puntuación del jugador. Esto no solo proporciona retroalimentación al jugador sobre su rendimiento, sino que también aumenta progresivamente la dificultad del juego. El mecanismo de puntuación recompensa a los jugadores por evitar con éxito los ladrillos blancos, y la velocidad creciente desafía los tiempos de reacción del jugador, haciendo que el juego sea más atractivo y competitivo.

✨ Revisar Solución y Practicar

Manejo de interacciones de usuario

Implementa la lógica para manejar los clics de usuario en los ladrillos. Los jugadores deben obtener puntos al hacer clic en los ladrillos negros y perder al hacer clic en los ladrillos blancos.

// Continúa en index.js

// Juega la acción del jugador
function judge(ev) {
  ev = ev || event;
  if (ev.target.className.indexOf("black") !== -1) {
    ev.target.className = "cell";
    ev.target.parentNode.passed = 1;
    score();
  } else if (ev.target.className.indexOf("cell") !== -1) {
    fail();
  }
}

En este paso, has implementado la función judge para manejar los clics de usuario dentro del juego. Cuando un jugador hace clic en un ladrillo, la función determina si el ladrillo es negro o no. Si el ladrillo es negro (movimiento correcto), se convierte en una celda regular y la puntuación se actualiza. Si el ladrillo no es negro (movimiento incorrecto), se activa la secuencia de fin de juego. Esta función es crucial para la interactividad del juego, permitiendo que los jugadores interactúen con el juego al hacer clic en los ladrillos y recibiendo retroalimentación inmediata sobre sus acciones.

✨ Revisar Solución y Practicar

Creación y eliminación de filas

Desarrolla funciones para crear dinámicamente nuevas filas de ladrillos y eliminar la fila más antigua cuando ya no es visible para mantener el juego en funcionamiento de manera fluida.

// Continúa en index.js

// Asigna aleatoriamente la celda negra en una fila
function createCell() {
  var temp = ["cell", "cell", "cell", "cell"];
  var i = Math.floor(Math.random() * 4);
  temp[i] = "cell black";
  return temp;
}

// Crea una nueva fila de ladrillos
function createRow() {
  var con = $("con");
  var row = createDiv("row");
  var arr = createCell();
  for (var i = 0; i < 4; i++) {
    row.appendChild(createDiv(arr[i]));
  }
  if (con.firstChild == null) {
    con.appendChild(row);
  } else {
    con.insertBefore(row, con.firstChild);
  }
}

// Elimina la última fila si hay más de 5 filas
function deleteRow() {
  var con = $("con");
  if (con.childNodes.length == 6) {
    con.removeChild(con.lastChild);
  }
}

Has agregado la función createRow para generar dinámicamente filas de ladrillos con un ladrillo negro en una posición aleatoria, lo que aumenta la imprevisibilidad y el desafío del juego. La función deleteRow elimina la fila más antigua que ya no es visible, optimizando el rendimiento del juego y asegurando que el área del juego no se desborde con elementos no utilizados. Estas funciones trabajan juntas para mantener un flujo continuo de ladrillos con los que los jugadores pueden interactuar.

✨ Revisar Solución y Practicar

Implementando la lógica de fin de juego

Define las condiciones bajo las cuales el juego terminará, como hacer clic en un ladrillo blanco o dejar pasar un ladrillo negro. Muestra la puntuación final del jugador y ofrece una opción para reiniciar el juego.

// Continúa en index.js

// Termina el juego
function fail() {
  clearInterval(clock);
  gameStarted = false;
  confirm("Tu puntuación final es " + parseInt($("score").innerHTML));
  window.location.reload();
}

Al definir la función fail, has establecido las condiciones bajo las cuales el juego termina. Esta función se llama cuando el jugador realiza un movimiento incorrecto o deja pasar un ladrillo negro. Detiene el bucle del juego, muestra la puntuación final del jugador y recarga la página para un nuevo comienzo. Este paso es vital para brindar una experiencia de juego completa, incluyendo el desafío de evitar errores y la finalidad del final del juego.

✨ Revisar Solución y Practicar

Iniciando el bucle principal del juego

Configura el bucle principal del juego que mantiene los ladrillos moviéndose hacia abajo por la pantalla. Ajusta la velocidad de movimiento en función de la puntuación del jugador para aumentar la dificultad.

// Continúa en index.js

// Inicia el bucle principal del juego
function start() {
  if (!gameStarted) {
    init();
    clock = setInterval("move()", 30);
  }
}

Has configurado el bucle principal del juego con la función move, que mueve continuamente las filas hacia abajo por la pantalla, simulando la progresión del juego. La velocidad de movimiento aumenta a medida que sube la puntuación del jugador, aumentando la dificultad del juego. Este bucle es el corazón del juego, impulsando la dinámica del juego y desafiando al jugador a mantener el ritmo creciente.

✨ Revisar Solución y Practicar

Agregando un oyente de eventos

Adjunta un oyente de eventos al área del juego para detectar y responder a las acciones del jugador, como hacer clic en los ladrillos.

// Continúa en index.js

// Agrega un oyente de eventos para el contenedor principal del juego
$("main").onclick = function (ev) {
  judge(ev);
};

En este paso, has adjuntado un oyente de eventos al área principal del juego, lo que le permite responder a los clics del jugador. Esta funcionalidad es esencial para capturar las interacciones del usuario, lo que permite al juego procesar los movimientos del jugador y actualizar el estado del juego en consecuencia. Es lo que hace que el juego sea interactivo y responda a las acciones del jugador.

Para ver los siguientes efectos, haz clic en el botón Go Live en la esquina inferior derecha de WebIDE y cambia a la pestaña "Web 8080".

✨ Revisar Solución y Practicar

Resumen

Al completar este proyecto, has creado un juego basado en la web funcional titulado "No pisar el ladrillo blanco". Este proyecto no solo mejora tu comprensión de cómo HTML, CSS y JavaScript trabajan juntos para crear contenido web interactivo, sino que también proporciona una base para crear juegos basados en la web más complejos en el futuro. Experimenta con diferentes estilos, características y funcionalidades para hacer que el juego sea único tuyo. ¡Que la codificación te divierta!