Crear un juego cl谩sico como Space Invaders utilizando HTML, CSS y JavaScript es una excelente manera de mejorar tus habilidades en desarrollo web. En esta gu铆a paso a paso, aprender谩s c贸mo implementar el c贸digo necesario para desarrollar tu propio juego de Space Invaders desde cero.
Contenido
- Requisitos Previos
- Estructura del Proyecto
- HTML: Creando la Base del Juego
- CSS: Estilizando el Juego
- JavaScript: L贸gica del Juego
- Conclusi贸n
Requisitos Previos
Antes de comenzar, aseg煤rate de tener conocimientos b谩sicos de HTML, CSS y JavaScript. Adem谩s, necesitar谩s un editor de texto (como Visual Studio Code) y un navegador web para probar tu juego.
Estructura del Proyecto
Crea una carpeta para tu proyecto y dentro de ella, tres archivos:
index.htmlstyles.cssscript.js
HTML: Creando la Base del Juego
El archivo HTML ser谩 la estructura principal de nuestro juego. Crea un archivo llamado index.html y agrega el siguiente c贸digo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Invaders</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<div id="player"></div>
<div id="invaders"></div>
<div id="bullets"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: Estilizando el Juego
El archivo CSS se encargar谩 de darle estilo a los elementos de nuestro juego. Crea un archivo llamado styles.css y agrega el siguiente c贸digo:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
.game-container {
position: relative;
width: 600px;
height: 400px;
border: 2px solid #fff;
overflow: hidden;
}
#player {
position: absolute;
bottom: 10px;
left: 50%;
width: 40px;
height: 20px;
background-color: #0f0;
transform: translateX(-50%);
}
#invaders {
position: absolute;
top: 10px;
left: 10px;
width: 580px;
height: 150px;
}
.invader {
position: absolute;
width: 40px;
height: 20px;
background-color: #f00;
}
#bullets {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JavaScript: L贸gica del Juego
El archivo JavaScript contendr谩 la l贸gica del juego, incluyendo el movimiento del jugador, la creaci贸n de los invasores y la detecci贸n de colisiones. Crea un archivo llamado script.js y agrega el siguiente c贸digo:
document.addEventListener('DOMContentLoaded', () => {
const player = document.getElementById('player');
const invadersContainer = document.getElementById('invaders');
const bulletsContainer = document.getElementById('bullets');
const gameContainer = document.querySelector('.game-container');
let playerPosition = gameContainer.offsetWidth / 2 - player.offsetWidth / 2;
let bulletArray = [];
let invaderArray = [];
// Crear invasores
function createInvaders() {
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 11; j++) {
const invader = document.createElement('div');
invader.classList.add('invader');
invader.style.left = `${j * 50}px`;
invader.style.top = `${i * 30}px`;
invadersContainer.appendChild(invader);
invaderArray.push(invader);
}
}
}
// Mover jugador
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft' && playerPosition > 0) {
playerPosition -= 10;
player.style.left = `${playerPosition}px`;
} else if (e.key === 'ArrowRight' && playerPosition < gameContainer.offsetWidth - player.offsetWidth) {
playerPosition += 10;
player.style.left = `${playerPosition}px`;
} else if (e.key === ' ') {
shoot();
}
});
// Disparar balas
function shoot() {
const bullet = document.createElement('div');
bullet.classList.add('bullet');
bullet.style.left = `${playerPosition + player.offsetWidth / 2 - 2}px`;
bullet.style.bottom = '30px';
bulletsContainer.appendChild(bullet);
bulletArray.push(bullet);
moveBullet(bullet);
}
// Mover balas
function moveBullet(bullet) {
const bulletInterval = setInterval(() => {
bullet.style.bottom = `${parseInt(bullet.style.bottom) + 10}px`;
if (parseInt(bullet.style.bottom) > gameContainer.offsetHeight) {
bullet.remove();
clearInterval(bulletInterval);
}
checkCollision(bullet, bulletInterval);
}, 30);
}
// Verificar colisi贸n
function checkCollision(bullet, bulletInterval) {
invaderArray.forEach((invader, index) => {
const invaderRect = invader.getBoundingClientRect();
const bulletRect = bullet.getBoundingClientRect();
if (
bulletRect.left < invaderRect.right &&
bulletRect.right > invaderRect.left &&
bulletRect.top < invaderRect.bottom &&
bulletRect.bottom > invaderRect.top
) {
invader.remove();
bullet.remove();
invaderArray.splice(index, 1);
clearInterval(bulletInterval);
}
});
}
createInvaders();
});
OBSERVA EL FUNCIONAMIENTO DEL MISMO JUEGO AQU脥
Conclusi贸n
隆Felicidades! Ahora tienes tu propio juego de Space Invaders creado con HTML, CSS y JavaScript. Este proyecto no solo te ayudar谩 a entender mejor c贸mo interact煤an estos lenguajes, sino que tambi茅n te dar谩 una base s贸lida para crear proyectos m谩s complejos en el futuro.