Tower Blocks Game es un emocionante juego de arcade en el que el jugador debe construir una torre colocando bloques uno encima del otro. El objetivo es colocar los bloques con la mayor precisión posible para que la torre permanezca estable.
En este tutorial, crearemos Tower Blocks Game usando HTML, CSS y JavaScript. Usaremos Three.js para visualización 3D y GSAP para animaciones fluidas. El juego incluye:
Animación de bloques que se mueven y se detienen.
Cambio de tamaño y posición de los bloques en función de la precisión de la colocación.
Puntuación e interfaz del juego.
Descripción del juego
Tower Blocks Game - es un juego en el que tienes que construir una torre colocando bloques en movimiento. Cuanto más preciso sea al colocar los bloques, más alta será la torre. Si el bloque se sale de los límites del anterior, se corta una parte del bloque. El juego termina si los bloques pasan completamente por fuera de la torre.
Características:
Control cómodo (clic o espacio).
Coloridos gráficos en 3D.
Juego que se complica gradualmente.
Etapas de creación del juego
1. Creación de una estructura HTML
Añadir los elementos básicos: el contenedor para el juego, bloques para la interfaz (cuenta, instrucciones, pantalla de fin del juego).
Conecta estilos y scripts: Three.js, GSAP, y el archivo JavaScript principal.
2. Estilizar con CSS
Utiliza estilos para centrar el contenedor del juego.
Crea animaciones de elementos de la interfaz.
Configura la adaptabilidad de la interfaz para diferentes pantallas.
3. La lógica del juego en JavaScript
Clase Stage: configuración de la escena, la cámara y la iluminación.
Clase de bloque: gestión de bloques individuales (dimensiones, movimiento, colocación).
Clase Game: control del proceso del juego (adición de bloques, puntuación, estado del juego).
4. Implementación de la mecánica de bloques
Movimiento del bloque a lo largo del eje.
Determinación del punto de contacto con el bloque anterior.
Recorte del bloque si se sale de los límites.
5. Configuración de control
Reacciona a las pulsaciones de teclas y clics del ratón para colocar bloques.
6. Puntuación y finalización del juego
Aumenta la puntuación por cada bloque colocado correctamente.
Termina el juego si el bloque falla.
7. Pruebas y optimización
Asegúrate de que el juego funciona en todos los dispositivos y pantallas.
Comprueba que las transiciones entre los estados del juego son suaves.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Tower Blocks Game</title>
<link rel="stylesheet" href="style.css"> <!-- Подключение стилей -->
</head>
<body>
<div id="container">
<!-- Основная область игры -->
<div id="game"></div>
<!-- Счет игры -->
<div id="score">0</div>
<!-- Инструкции -->
<div id="instructions">Кликните, чтобы разместить блок</div>
<!-- Экран окончания игры -->
<div class="game-over">
<h2>Игра окончена</h2>
<p>Вы отлично справились, вы лучший.</p>
<p>Кликните, чтобы начать заново</p>
</div>
<!-- Экран готовности к началу игры -->
<div class="game-ready">
<div id="start-button">Начать</div>
</div>
</div>
<!-- Подключение скриптов -->
<script src="https:// codepen.io/steveg3003/pen/zBVakw.js"></script> <!- Biblioteca para funciones auxiliares ->
<script src="https:// cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js "> </ script> <!-- Three.js para trabajar con 3D ->
<script src="https:// cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <! -- GSAP para animación -- >
<script src="script.js"></script> <!-- Основная логика игры -->
</body>
</html>
¿Qué hacemos en este HTML?
Añadimos la estructura del juego:
Creamos un contenedor con
id="container", que será el área principal del juego.Dentro del contenedor colocamos:
#game— área para dibujar gráficos 3D usando Three.js.#score— la puntuación del juego, que se actualiza en tiempo real.#instructions— una pista para el jugador que se muestra al comienzo del juego..game-over— pantalla que aparece cuando el juego se completa..game-ready— pantalla con un botón para iniciar el juego.
Conectamos los estilos:
Usamos
<link>para conectar el archivostyle.css, que establece la apariencia del juego y estiliza la interfaz.
Conectamos bibliotecas y scripts:
Three.js— biblioteca para crear y trabajar con gráficos 3D.GSAP— biblioteca para una animación fluida de elementos.script.js— archivo principal con la lógica del juego.
Añadimos metaetiquetas:
<meta charset="UTF-8">— establece la codificación UTF-8 para mostrar correctamente el texto en ruso.<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">— proporciona adaptabilidad de la interfaz del juego en dispositivos móviles.
Escenarios de interacción:
Los scripts conectados implementan la mecánica del juego:
#start-buttoncomienza el juego.La interacción con
#instructionsse produce al inicio del juego.La pantalla
.game-overaparece si el jugador comete un error.
Añadiremos estilos CSS
Para estilizar Tower Blocks Game utilizamos CSS para crear una interfaz agradable y cómoda que admite adaptabilidad y animaciones.
Elementos básicos y sus estilos
1. Configuración básica
Desactivamos las sangrías y el desplazamiento estándar para que el juego ocupe toda la pantalla:
html, body {
margin: 0;
overflow: hidden;
height: 100%;
width: 100%;
font-family: "Comfortaa", cursive;
}2. Contenedor de juego
El contenedor ocupa toda la pantalla y sirve como el área principal para el juego:
#container {
width: 100%;
height: 100%;
}3. Cuenta
La puntuación del juego se muestra en la parte superior de la pantalla, tiene un tamaño grande y una animación suave de aparición:
#container #score {
position: absolute;
top: 20px;
width: 100%;
text-align: center;
font-size: 10vh;
color: #333344;
transition: transform 0.5s ease;
}4. Gráficos del juego
El área #game está diseñada para mostrar gráficos 3D usando Three.js y ocupa toda la pantalla:
#container #game {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}5. Pantallas de finalización e inicio del juego
Las pantallas .game-over y .game-ready aparecen en el centro de la pantalla con una animación:
#container .game-over, #container .game-ready {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}¿Dónde puedo encontrar el código completo?
El código CSS completo está disponible en la aplicación Kodik o en Proyecto GitHub. Esto le permitirá estudiar todo el estilo y, si es necesario, personalizar la apariencia según sus necesidades.
Descripción de la lógica del juego Tower Blocks Game (JavaScript)
JavaScript es la base para la aplicación de toda la lógica de juego de Tower Blocks Game. Es responsable de la gestión de la escena 3D, el movimiento de los bloques, la puntuación y la interacción con el jugador.
Elementos básicos de JavaScript y su funcionalidad
1. Creación de escenas en 3D
Para trabajar con gráficos 3D, utilizamos la biblioteca Three.js. Con la ayuda de la clase Stage se crea una escena, una cámara y una iluminación:
class Stage {
constructor() {
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.scene = new THREE.Scene();
this.camera = new THREE.OrthographicCamera(...);
this.light = new THREE.DirectionalLight(0xffffff, 0.5);
this.scene.add(this.light);
}
}Qué hacemos:
Configuramos la cámara para la proyección ortográfica (adecuada para juegos con "vista superior").
Añadimos iluminación para crear volumen visual.
2. Creación de bloques
La clase Block controla bloques individuales, sus tamaños, movimiento y ubicación:
class Block {
constructor(previousBlock) {
this.dimension = { width: 10, height: 2, depth: 10 };
this.position = { x: 0, y: ..., z: 0 };
this.mesh = new THREE.Mesh(new THREE.BoxGeometry(...), new THREE.MeshToonMaterial(...));
}
tick() {
// Controla el movimiento del bloque
this.position[this.workingPlane] += this.direction;
}
place() {
// Lógica de recorte de bloques cuando no coincide con el anterior
}
}Qué hacemos:
Establecemos las dimensiones y las posiciones iniciales de los bloques.
Implementamos el movimiento de bloques y su parada al presionar.
3. Control del juego
La clase Game combina la lógica del juego, la gestión de estados, la adición de nuevos bloques y la puntuación:
class Game {
constructor() {
this.blocks = [];
this.stage = new Stage();
this.state = 'READY';
this.score = 0;
}
addBlock() {
// Añade un nuevo bloque a la torre
}
placeBlock() {
// Coloca el bloque actual y comprueba la finalización del juego
}
restartGame() {
// Restablece el juego al final
}
}Qué hacemos:
Procesamos los estados del juego: inicio, juego, finalización, reinicio.
Gestionamos la adición de nuevos bloques y la actualización de la escena.
Contamos los puntos por bloques colocados correctamente.
4. Interacción con el jugador
El juego reacciona a las acciones del usuario: presionar la barra espaciadora o hacer clic con el ratón para colocar bloques:
document.addEventListener('click', () => game.onAction());
document.addEventListener('keydown', (e) => {
if (e.keyCode === 32) game.onAction(); // Pulsar la barra espaciadora
});5. Animaciones
Con la ayuda de la biblioteca GSAP implementamos un movimiento suave de la cámara y animación de bloques:
TweenLite.to(this.camera.position, 0.3, { y: newY });
TweenLite.to(block.position, 1, { x: ... });Qué hacemos:
La cámara se eleva suavemente hacia arriba, siguiendo los bloques.
Los bloques que no coinciden se alejan y desaparecen.
¿Dónde puedo encontrar el código completo?
El código JavaScript completo está disponible en la aplicación Kodik o en Proyecto GitHub. Podrás estudiarlo con más detalle y, si es necesario, adaptarlo a tus necesidades.
Conclusión
Creación del juego Tower Blocks Game es un proceso fascinante que combina el trabajo con gráficos 3D, animaciones y mecánicas de juego. Hemos revisado los puntos clave del desarrollo: configuración de la escena, gestión de bloques, implementación de interacciones y estilización de la interfaz.
¿Dónde jugar y aprender a crear un juego?
Jugar en Tower Blocks Game y puedes estudiar el código en detalle en la aplicación Kodik. Esta es una gran oportunidad no solo para disfrutar del juego, sino también para aprender a desarrollar tus propios proyectos, estudiando un ejemplo en la práctica. También el código fuente completo está disponible en Proyecto GitHub, donde puedes descargarlo y adaptarlo a tus necesidades.
Intenta crear un juego tú mismo, experimenta con la configuración y mejóralo: ¡esa es la magia de la programación! 🚀