Crea un divertido juego web de evasión de bloques | HTML, CSS, JavaScript

Introducción

En este proyecto, construiremos un juego divertido y sencillo de evitar bloques utilizando HTML, CSS y JavaScript. Este juego implica mover bloques donde el jugador debe hacer clic en los bloques negros para obtener puntos y evitar hacer clic en los bloques blancos. ¡Comencemos a construirlo paso a paso!

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderá:

Cómo diseñar el diseño del juego utilizando HTML
Cómo agregar estilo al juego utilizando CSS
Cómo implementar la lógica básica del juego utilizando JavaScript
Cómo inicializar el juego y crear el conjunto inicial de bloques
Cómo implementar la funcionalidad del juego, incluyendo la detección de clic en bloques, escenarios de fin de juego, creación y movimiento de bloques
Cómo finalizar la puntuación del juego y la gestión de la velocidad

🏆 Logros

Después de completar este proyecto, podrá:

Diseñar diseños web utilizando HTML
Aplicar técnicas de estilo utilizando CSS
Implementar la lógica del juego utilizando JavaScript
Manipular el Modelo de Objeto del Documento (DOM)
Manejar eventos e interacciones de usuario
Crear y gestionar variables de estado del juego
Modificar y actualizar dinámicamente la pantalla del juego
Probar y depurar la implementación del juego

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") 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") subgraph Lab Skills javascript/variables -.-> lab-445707{{"Construyendo un juego web de evasión de bloques"}} javascript/arith_ops -.-> lab-445707{{"Construyendo un juego web de evasión de bloques"}} javascript/cond_stmts -.-> lab-445707{{"Construyendo un juego web de evasión de bloques"}} javascript/loops -.-> lab-445707{{"Construyendo un juego web de evasión de bloques"}} javascript/functions -.-> lab-445707{{"Construyendo un juego web de evasión de bloques"}} javascript/dom_select -.-> lab-445707{{"Construyendo un juego web de evasión de bloques"}} javascript/dom_manip -.-> lab-445707{{"Construyendo un juego web de evasión de bloques"}} javascript/event_handle -.-> lab-445707{{"Construyendo un juego web de evasión de bloques"}} end

Diseñando el diseño del juego con HTML

Requisitos:

Abra el archivo index.html.
Conocimiento de las etiquetas y estructura de HTML.

Funcionalidad:

Diseñar el contenedor principal del juego.
Mostrar la puntuación del juego.
Proporcionar un botón de inicio para iniciar el juego.

Pasos:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Evita el bloque blanco</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h2>puntuación</h2>
    <h2 id="score">0</h2>
    <div id="main">
      <div id="con"></div>
      <!-- Contenedor del juego -->
    </div>
    <div class="btn">
      <button class="start" onclick="start()">Iniciar</button>
      <!-- Botón de inicio -->
    </div>
  </body>
  <script src="script.js"></script>
</html>

En el código anterior, hemos creado una estructura básica de HTML para nuestro juego. Tenemos un div con id="main" que será nuestro contenedor de juego. Dentro del contenedor de juego, tenemos otro div con id="con" que será nuestro jugador. También hemos creado un botón con class="start" que se utilizará para iniciar el juego.

✨ Revisar Solución y Practicar

Agregar estilo al juego

Requisitos:

Abra el archivo styles.css.
Conocimientos básicos de propiedades y selectores de CSS.
Comprensión de técnicas de estilo para diseños responsivos.

Funcionalidad:

Mejorar la apariencia visual del juego.
Hacer que la interfaz del juego sea responsiva a diferentes tamaños de pantalla.

Pasos:

body {
  background-color: #f0f0f0;
  font-family: "Arial", sans-serif;
}
h2 {
  text-align: center;
  color: #333;
  margin-bottom: 8px;
}
#main {
  width: 408px;
  height: 408px;
  background: white;
  border: 8px solid #ccc;
  border-radius: 10px;
  /* Se agregó un borde redondeado para un aspecto más suave */
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  /* Se agregó una posición relativa para la colocación de los elementos hijos */
}
#con {
  width: 100%;
  height: 400px;
  position: absolute;
  /* Cambiado a absoluto */
  top: -408px;
}
.row {
  height: 100px;
  width: 100%;
}
.cell {
  height: 100px;
  width: 100px;
  float: left;
  border-bottom: rgb(200, 200, 200) 1px solid;
  /* Color de borde más claro */
}
.black {
  background: #444;
  /* Gris oscuro en lugar de negro para un aspecto más suave */
}
.btn {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.start {
  margin: 20px auto;
  width: 150px;
  height: 50px;
  border-radius: 25px;
  /* Se aumentó el radio del borde para un aspecto de pastilla */
  background: #4caf50;
  /* Botón verde */
  color: #fff;
  font-size: 16px;
  /* Se aumentó el tamaño de la fuente */
  border: none;
  /* Se eliminó el borde predeterminado */
  cursor: pointer;
  /* Efecto del cursor */
  transition: background 0.3s;
  /* Efecto de transición */
}
.start:hover {
  background: #45a049;
  /* Verde más oscuro al pasar el cursor */
}

En el código anterior, hemos agregado algunos estilos básicos a nuestro juego. Hemos agregado un color de fondo al body y una familia de fuentes al texto. También hemos agregado un radio de borde al contenedor del juego para que tenga un aspecto más suave. También hemos agregado una position: relative al contenedor del juego y position: absolute al jugador. Esto nos permitirá posicionar al jugador dentro del contenedor del juego. También hemos agregado un efecto de transición al botón de inicio.

✨ Revisar Solución y Practicar

Implementar la lógica básica del juego

Requisitos:

Abra el archivo script.js.
Comprensión preliminar de los conceptos básicos de JavaScript.
Comprender el concepto del Modelo de Objeto del Documento (DOM).

Funcionalidad:

Establecer funciones de utilidad esenciales.
Inicializar variables cruciales del estado del juego.

Pasos:

// Funciones de utilidad y configuración inicial de variables
// Obtener un elemento por su id
function $(id) {
  return document.getElementById(id);
}

// Crear un elemento div con un nombre de clase dado
function creatediv(className) {
  var div = document.createElement("div");
  div.className = className;
  return div;
}
// Establecer el id del intervalo como nulo inicialmente
var clock = null;
// Estado del juego (0 significa detenido y 1 significa iniciado)
var state = 0;
// Velocidad del movimiento de los bloques del juego
var speed = 6;
// Banderita para comprobar si el juego ha comenzado o no
var flag = false;

En el código anterior, hemos creado dos funciones de utilidad. La primera función $(id) se utiliza para obtener un elemento por su id. La segunda función creatediv(className) se utiliza para crear un elemento div con un nombre de clase dado. También hemos inicializado algunas variables que se utilizarán más adelante en el juego.

✨ Revisar Solución y Practicar

Inicializar el juego

Requisitos:

Capacidad para crear funciones de JavaScript.
Conocimiento de los oyentes de eventos de JavaScript.

Funcionalidad:

Preparar el juego para que esté listo para ser lanzado.
Crear el conjunto inicial de bloques del juego.

Pasos:

// Hacer clic en el botón de inicio del juego para comenzar el juego
function start() {
  if (!flag) {
    init();
  } else {
    alert("El juego ya ha comenzado! No es necesario hacer clic nuevamente!");
  }
}

// Función de inicialización (init)
function init() {
  flag = true;
  for (var i = 0; i < 4; i++) {
    createrow();
  }

  // Agregar oyentes de eventos con addEventListener
  $("main").addEventListener("click", function (ev) {
    judge(ev);
  });

  // Llamar a move() cada 30 milisegundos con un temporizador
  clock = setInterval(move, 30);
}

En el código anterior, hemos creado una función start() que se llamará cuando se haga clic en el botón de inicio. Dentro de la función start(), hemos llamado a la función init() que inicializará el juego. Dentro de la función init(), hemos establecido la variable flag en true que se utilizará para comprobar si el juego ha comenzado o no. También hemos creado cuatro filas de bloques utilizando la función createrow(). También hemos agregado un oyente de eventos al contenedor del juego que se utilizará para detectar el evento de clic en el contenedor del juego. También hemos establecido un temporizador que llamará a la función move() cada 30 milisegundos.

✨ Revisar Solución y Practicar

Implementar la funcionalidad del juego

Requisitos:

Dominio de los bucles y condiciones de JavaScript.
Saber manipular el DOM utilizando JavaScript.

Funcionalidad:

Crear la dinámica central del juego.
Diseñar escenarios de fin de juego.
Implementar mecanismos de creación y movimiento de bloques.

Pasos:

Verificar si el jugador ha hecho clic en un bloque negro o blanco. Actualizar el estado del juego según el clic del jugador.

// Determinar si se hace clic en un bloque negro o blanco
function judge(ev) {
  if (
    ev.target.className.indexOf("black") == -1 &&
    ev.target.className.indexOf("cell") !== -1
  ) {
    ev.target.parentNode.pass1 = 1; // Define el atributo pass, que indica que se ha hecho clic en el bloque blanco de esta fila
  }

  if (ev.target.className.indexOf("black") !== -1) {
    // Hacer clic en un objetivo con "black" en el nombre de la clase es un bloque negro
    ev.target.className = "cell";
    ev.target.parentNode.pass = 1; // Define el atributo pass, indicando que se ha hecho clic en el bloque negro de esta fila
    score();
  }
}

Determinar cuándo el juego ha terminado basado en las interacciones del jugador. Disparar acciones de finalización del juego cuando el juego ha terminado.

// Comprobar si el juego ha terminado
function over() {
  var rows = con.childNodes;
  if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {
    fail();
  }
  for (let i = 0; i < rows.length; i++) {
    if (rows[i].pass1 == 1) {
      fail();
    }
  }
}

// Fin del juego
function fail() {
  clearInterval(clock);
  flag = false;
  confirm("La puntuación final es " + parseInt($("score").innerHTML));
  var con = $("con");
  con.innerHTML = "";
  $("score").innerHTML = 0;
  con.style.top = "-408px";
}

Generar filas de bloques para el juego. Posicionar aleatoriamente el bloque "negro" entre los demás.

// Crear un <div class="row"> con cuatro hijos <div class="cell">
function createrow() {
  var con = $("con");
  var row = creatediv("row"); // Crear div: className=row
  var arr = createcell(); // Definir el nombre de la clase del div cell, uno de los cuales es cell black

  con.appendChild(row); // Agregar nodo hijo con row como con

  for (var i = 0; i < 4; i++) {
    row.appendChild(creatediv(arr[i])); // Agregar nodos hijos de row cell
  }

  if (con.firstChild == null) {
    con.appendChild(row);
  } else {
    con.insertBefore(row, con.firstChild);
  }
}

// Crear una matriz de nombres de clases; uno de ellos es "cell black", los demás son "cell"
function createcell() {
  var temp = ["cell", "cell", "cell", "cell"];
  var i = Math.floor(Math.random() * 4); // Generar aleatoriamente la posición del bloque negro Math.random() función de parámetros 0~1 número aleatorio
  temp[i] = "cell black";
  return temp;
}

Hacer que los bloques se muevan hacia abajo continuamente. Eliminar las filas antiguas a medida que salen de vista.

// Mover los bloques negros 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"; // Continuar moviendo el valor de la parte superior para que se mueva
  over();
  if (top == 0) {
    createrow();
    con.style.top = "-102px";
    delrow();
  }
}

// Eliminar una fila
function delrow() {
  var con = $("con");
  if (con.childNodes.length == 6) {
    con.removeChild(con.lastChild);
  }
}

✨ Revisar Solución y Practicar

Finalizar la gestión de puntuación y velocidad del juego

Requisitos:

Comprender las variables y las operaciones aritméticas de JavaScript.
Capacidad para escribir lógica compleja de juego en JavaScript.

Funcionalidad:

Establecer un sistema de recompensas.
Crear un sistema para aumentar progresivamente la dificultad del juego.

Pasos:

// Función de aceleración, aumenta la velocidad
function speedup() {
  speed += 2;
  if (speed == 20) {
    alert("Eso es genial!");
  }
}
// Puntuación
function score() {
  var newscore = parseInt($("score").innerHTML) + 1; // Punto más uno
  $("score").innerHTML = newscore; // Modificar la puntuación
  if (newscore % 10 == 0) {
    // Utilizar la función de aceleración cuando la fracción es múltiplo de 10, se va acelerando
    speedup();
  }
}

En el código anterior, hemos creado una función speedup() que se utilizará para aumentar la velocidad del juego. También hemos creado una función score() que se utilizará para aumentar la puntuación del juego. También hemos agregado una condición en la función score() que llamará a la función speedup() cuando la puntuación sea múltiplo de 10.

✨ Revisar Solución y Practicar

Prueba tu juego

Abre index.html en un navegador web.

Juega al juego, asegurándote de que todas las funcionalidades funcionen como se espera.
El efecto de la página es el siguiente:

Resumen

¡Excelente trabajo! Acabas de construir un juego sencillo pero divertido de evasión de bloques desde cero utilizando HTML, CSS y JavaScript. Este proyecto te presentó la gestión de la interacción del usuario, la lógica del juego y el estilo dinámico de CSS basado en cambios en el estado del juego. Puedes extender este juego base con más funciones como niveles, límites de tiempo o varios modos de dificultad. Disfruta experimentando con tu nuevo juego.