Este es un código HTML5 y JavaScript que implementa un juego simple de naves.
Analicemos línea por
línea y paso por paso:
HTML Section:
htmlCopy code
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de Naves</title>
<style>
/* Estilos CSS para el cuerpo de la página */
body {
margin: 0;
overflow: hidden;
background-color: #000;
color: #FFF;
font-family: 'Arial', sans-serif;
}
/* Estilos CSS para el canvas */
canvas {
display: block;
margin: auto;
background-color: #111;
border: 2px solid #FFF;
}
/* Estilos CSS para la sección de información */
#info {
text-align: center;
margin-top: 10px;
}
#info ul {
list-style: none;
padding: 0;
}
#info li {
display: inline-block;
margin-right: 10px;
}
/* Estilos CSS para la sección del menú */
#menu {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 20px;
display: block;
width: 300px;
}
#menu label {
display: block;
margin-bottom: 10px;
}
#startButton {
padding: 10px 20px;
font-size: 16px;
}
/* Estilos CSS para la tabla de puntuaciones */
#scoreTable {
margin: 20px auto;
border-collapse: collapse;
width: 80%;
display: none;
}
#scoreTable th, #scoreTable td {
border: 1px solid #FFF;
padding: 8px;
text-align: center;
}
</style></head><body>
<!-- Canvas donde se renderizará el juego -->
<canvas id="gameCanvas" width="800" height="600"></canvas>
<!-- Información sobre el juego -->
<div id="info">
<p>¡Mueve la nave con las teclas de dirección y dispara con la barra espaciadora!</p>
<ul id="score"></ul>
</div>
<!-- Menú de configuración del juego -->
<div id="menu">
<label for="playerName">Nombre de Jugador:</label>
<input type="text" id="playerName">
<br>
<label for="numEnemies">Número de naves enemigas:</label>
<input type="number" id="numEnemies" min="1" value="5">
<br>
<label for="difficulty">Dificultad:</label>
<select id="difficulty">
<option value="easy">Fácil</option>
<option value="medium">Medio</option>
<option value="hard">Difícil</option>
</select>
<br>
<button id="startButton">Empezar Juego</button>
</div>
<!-- Tabla de puntuaciones -->
<table id="scoreTable">
<thead>
<tr>
<th>Posición</th>
<th>Nombre</th>
<th>Puntuación</th>
</tr>
</thead>
<tbody id="scoreBody">
</tbody>
</table>
<!-- Script de JavaScript -->
<script>
// JavaScript comienza aquí
[Link]("DOMContentLoaded", function () {
// ... (Código JavaScript continúa)
});
</script></body></html>
Explicación HTML:
<!DOCTYPE html>: Define el tipo de documento como HTML5.
<html lang="en">: Inicia el elemento HTML con el atributo de idioma en inglés.
<head>: Contiene metadatos y enlaces a recursos externos.
<meta charset="UTF-8">: Especifica la codificación de caracteres como UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura la visualización
en dispositivos móviles.
<title>Juego de Naves</title>: Establece el título de la página.
<style>: Contiene estilos CSS internos para la página.
Estilos para el cuerpo, canvas, información, menú y tabla de puntuaciones.
Continuaré explicando el resto del código en respuestas adicionales.
<script>
[Link]("DOMContentLoaded", function () {
// Obtener el canvas y su contexto
const canvas = [Link]("gameCanvas");
const ctx = [Link]("2d");
// Definir el objeto jugador
const player = {
x: [Link] / 2 - 25,
y: [Link] - 80,
width: 50,
height: 50,
color: "#00F",
speed: 7,
dx: 0,
dy: 0
};
// Arrays para almacenar balas y enemigos
const bullets = [];
const enemies = [];
// Variables para velocidad de enemigos, nombre del jugador y puntuación
let enemySpeed;
let playerName;
let score;
// Función para generar enemigos aleatorios
function generateEnemies(numEnemies) {
for (let i = 0; i < numEnemies; i++) {
[Link]({
x: [Link]() * ([Link] - 30),
y: [Link]() * ([Link] - 30),
width: 30,
height: 30,
color: "#F00",
speedX: [Link]() * (enemySpeed / 2) + 1,
speedY: [Link]() * (enemySpeed / 2) + 1
});
}
}
// Función para dibujar al jugador en el canvas
function drawPlayer() {
[Link] = [Link];
[Link](player.x, player.y, [Link], [Link]);
}
// Función para dibujar una bala en el canvas
function drawBullet(bullet) {
[Link] = "#FFF";
[Link](bullet.x, bullet.y, [Link], [Link]);
}
// Función para dibujar a los enemigos en el canvas
function drawEnemies() {
[Link](enemy => {
[Link] = [Link];
[Link](enemy.x, enemy.y, [Link], [Link]);
});
}
// Función para mover al jugador
function movePlayer() {
player.x += [Link];
player.y += [Link];
// Limitar el movimiento dentro del canvas
player.x = [Link](0, [Link]([Link] - [Link], player.x));
player.y = [Link](0, [Link]([Link] - [Link], player.y));
}
// Función para mover las balas
function moveBullets() {
[Link](bullet => {
bullet.y -= 5;
[Link]((enemy, index) => {
// Verificar colisión de balas con enemigos
if (
bullet.x < enemy.x + [Link] &&
bullet.x + [Link] > enemy.x &&
bullet.y < enemy.y + [Link] &&
bullet.y + [Link] > enemy.y
){
[Link]([Link](bullet), 1);
[Link](index, 1);
updateScore();
if ([Link] === 0) {
// Si no hay enemigos, reiniciar el juego
restartGame();
}
}
});
// Eliminar balas que salen del canvas
if (bullet.y < 0) {
[Link]([Link](bullet), 1);
}
});
}
// Función para mover a los enemigos
function moveEnemies() {
[Link](enemy => {
enemy.x += [Link];
enemy.y += [Link];
// Cambiar dirección de los enemigos al alcanzar los bordes del canvas
if (enemy.x < 0 || enemy.x + [Link] > [Link]) {
[Link] *= -1;
}
if (enemy.y < 0 || enemy.y + [Link] > [Link]) {
[Link] *= -1;
}
// Verificar colisión de jugador con enemigos
if (
player.x < enemy.x + [Link] &&
player.x + [Link] > enemy.x &&
player.y < enemy.y + [Link] &&
player.y + [Link] > enemy.y
){
endGame();
}
});
}
// Función para dibujar elementos en el canvas
function draw() {
[Link](0, 0, [Link], [Link]);
drawPlayer();
drawEnemies();
[Link](drawBullet);
}
// Función para actualizar el área de juego
function updateGameArea() {
movePlayer();
moveBullets();
moveEnemies();
draw();
requestAnimationFrame(updateGameArea);
}
// Función para actualizar la puntuación
function updateScore() {
const scoreElement = [Link]("score");
[Link] = "";
[Link] += "<li>Puntuación: " + (score++) + "</li>";
}
// Función para actualizar la tabla de puntuaciones
function updateScoreTable() {
const scoreList = [Link]([Link]("scoreList")) || [];
const scoreTable = [Link]("scoreBody");
[Link] = "";
for (let i = 0; i < [Link](5, [Link]); i++) {
const row = [Link]();
[Link] = `<td>${i + 1}</td><td>${scoreList[i].name}</td><td>${scoreList[i].score}</td>`;
}
}
// Función para iniciar el juego
function startGame() {
playerName = [Link]("playerName").[Link]();
if (!playerName) {
alert("Por favor, ingresa tu nombre antes de comenzar el juego.");
return;
}
score = 0;
const numEnemies = parseInt([Link]("numEnemies").value);
const difficulty = [Link]("difficulty").value;
if (isNaN(numEnemies) || numEnemies < 1) {
alert("Por favor, ingresa un número válido mayor a cero.");
return;
}
// Configurar la velocidad de los enemigos según la dificultad
switch (difficulty) {
case "easy":
enemySpeed = 2;
break;
case "medium":
enemySpeed = 4;
break;
case "hard":
enemySpeed = 6;
break;
default:
enemySpeed = 2;
break;
}
// Generar enemigos y actualizar la puntuación
generateEnemies(numEnemies);
updateScore();
// Ocultar el menú y la tabla de puntuaciones
[Link]("menu").[Link] = "none";
[Link]("scoreTable").[Link] = "none";
// Agregar eventos de teclado
[Link]("keydown", keyDownHandler);
[Link]("keyup", keyUpHandler);
// Iniciar el bucle de actualización del juego
updateGameArea();
}
// Función para reiniciar el juego
function restartGame() {
// Al reiniciar, se considera como una nueva sesión
score = 0;
updateScore();
[Link] = 0;
[Link] = 0;
const numEnemies = parseInt([Link]("numEnemies").value);
generateEnemies(numEnemies);
}
// Función para finalizar el juego
function endGame() {
// Agregar la puntuación a la lista de mejores puntuaciones
const scoreList = [Link]([Link]("scoreList")) || [];
[Link]({ name: playerName, score: score });
[Link]((a, b) => [Link] - [Link]);
[Link]("scoreList", [Link](scoreList));
// Actualizar la tabla después de un breve retraso
setTimeout(() => {
updateScoreTable();
const scoreTable = [Link]("scoreTable");
[Link] = "block";
[Link]("menu").[Link] = "block";
[Link]("scoreTable").[Link] = "block";
// Detener la escucha de eventos
[Link]("keydown", keyDownHandler);
[Link]("keyup", keyUpHandler);
}, 100);
}
// Manejador para teclas presionadas
function keyDownHandler(e) {
if ([Link] === "ArrowLeft") {
[Link] = -[Link];
} else if ([Link] === "ArrowRight") {
[Link] = [Link];
}
if ([Link] === "ArrowUp") {
[Link] = -[Link];
} else if ([Link] === "ArrowDown") {
[Link] = [Link];
}
}
// Manejador para teclas liberadas
function keyUpHandler(e) {
if ([Link] === "ArrowLeft" || [Link] === "ArrowRight") {
[Link] = 0;
}
if ([Link] === "ArrowUp" || [Link] === "ArrowDown") {
[Link] = 0;
}
if ([Link] === " ") {
// Barra espaciadora para disparar
[Link]({
x: player.x + [Link] / 2 - 5,
y: player.y,
width: 10,
height: 20
});
}
}
// Agregar evento de clic al botón de inicio
[Link]("startButton").addEventListener("click", startGame);
});
</script>
Explicación JavaScript:
[Link]("DOMContentLoaded", function () { ... });: Este evento se dispara cuando
el documento HTML ha sido completamente cargado y parseado. Aquí se inicia la ejecución del código
JavaScript.
Se obtiene el canvas y su contexto 2D, y se define el objeto player con las propiedades del jugador,
como posición, tamaño, color y velocidad.
Se crean arrays bullets y enemies para almacenar balas y enemigos respectivamente.
generateEnemies(numEnemies): Función para generar enemigos aleatorios en posiciones y
velocidades iniciales.
Funciones drawPlayer(), drawBullet(bullet), y drawEnemies(): Dibujan al jugador, balas y enemigos en
el canvas.
movePlayer(): Actualiza la posición del jugador en función de su velocidad y asegura que no se salga
del canvas.
moveBullets(): Mueve las balas hacia arriba y verifica si han colisionado con algún enemigo. En ese
caso, se eliminan tanto la bala como el enemigo.
moveEnemies(): Mueve a los enemigos y verifica si han colisionado con el jugador. En caso de colisión,
se termina el juego.
draw(): Limpia el canvas y llama a las funciones de dibujo.
updateGameArea(): Función principal que mueve al jugador, balas y enemigos, dibuja en el canvas y
solicita la siguiente actualización mediante requestAnimationFrame.
updateScore(): Actualiza la puntuación mostrada en la interfaz.
updateScoreTable(): Actualiza la tabla de puntuaciones en función de la lista de puntuaciones
almacenada en el almacenamiento local.
startGame(): Inicia el juego, obteniendo el nombre del jugador, configurando la velocidad de los
enemigos según la dificultad, generando enemigos y ocultando el menú.
restartGame(): Reinicia el juego generando nuevos enemigos y reiniciando la puntuación.
endGame(): Finaliza el juego, agrega la puntuación a la lista de mejores puntuaciones, ordena la lista y
actualiza la tabla de puntuaciones.
Eventos de teclado (keyDownHandler y keyUpHandler): Manejan las teclas presionadas y liberadas
para mover al jugador y disparar.
[Link]("startButton").addEventListener("click", startGame);: Agrega un evento de
clic al botón de inicio para comenzar el juego.
Este código implementa un juego básico de naves donde el jugador puede moverse, disparar y
colisionar con enemigos. La puntuación se muestra durante el juego y se actualiza en una tabla de
puntuaciones al finalizar el juego.
Explicación HTML y CSS:
El código HTML define la estructura de la página web y utiliza CSS para el diseño y estilo. Algunas de
las características clave son:
Background y Colores: Se establece un fondo negro (#000) para el cuerpo (body) y un color blanco
(#FFF) para el texto. El fondo del canvas es de color negro (#111).
Estilos del Canvas: El canvas se centra en la página y tiene un borde blanco. El menú y la tabla de
puntuaciones están estilizados con opacidad y bordes redondeados.
Formulario y Controles: Se proporciona un formulario para ingresar el nombre del jugador y ajustar la
configuración del juego, como el número de enemigos y la dificultad.
Explicación JavaScript:
javascriptCopy code
[Link]("DOMContentLoaded", function () { ... });
Este evento se ejecuta cuando el documento HTML ha sido completamente cargado y parseado. Aquí
comienza la ejecución del código JavaScript.
Obtención de Elementos: Se obtiene el canvas y su contexto 2D. Se define el objeto player con
propiedades del jugador.
Arrays y Variables: Se crean arrays bullets y enemies para almacenar balas y enemigos
respectivamente. Se declaran variables para la velocidad de los enemigos, el nombre del jugador y la
puntuación.
Funciones de Generación y Dibujo: Varias funciones como generateEnemies(numEnemies),
drawPlayer(), drawBullet(bullet), y drawEnemies() se encargan de generar enemigos y dibujar
elementos en el canvas.
Movimiento y Colisiones: Funciones como movePlayer(), moveBullets(), y moveEnemies() gestionan el
movimiento del jugador, balas y enemigos. Se verifican colisiones y se ejecutan acciones
correspondientes.
Funciones Principales: draw() limpia el canvas y dibuja los elementos. updateGameArea() mueve los
elementos y solicita la siguiente actualización.
Actualización de Puntuación: updateScore() actualiza la puntuación en la interfaz. updateScoreTable()
actualiza la tabla de puntuaciones desde el almacenamiento local.
Inicio, Reinicio y Fin del Juego: Funciones como startGame(), restartGame(), y endGame() gestionan el
inicio, reinicio y fin del juego.
Manejo de Teclas: Los eventos de teclado (keyDownHandler y keyUpHandler) controlan las acciones
del jugador al presionar y liberar teclas.
Evento de Clic en el Botón de Inicio:
[Link]("startButton").addEventListener("click", startGame); agrega un evento de
clic al botón de inicio para comenzar el juego.
Este código implementa un juego básico de naves donde el jugador puede moverse, disparar y
colisionar con enemigos. La puntuación se muestra durante el juego y se actualiza en una tabla de
puntuaciones al finalizar el juego.
En el código proporcionado, el canvas es un elemento HTML utilizado para crear
gráficos dinámicos mediante el uso de JavaScript. Aquí hay una descripción más
detallada:
htmlCopy code
<canvas id="gameCanvas" width="800" height="600"></canvas>
<canvas>: Este es el elemento HTML utilizado para dibujar gráficos. Puede ser manipulado mediante
JavaScript y es donde se renderiza el juego.
id="gameCanvas": Asigna al canvas un identificador único, "gameCanvas", que se utiliza para
referenciar este elemento en el código JavaScript.
width="800" height="600": Establece las dimensiones del canvas en píxeles. En este caso, el canvas
tiene un ancho de 800 píxeles y una altura de 600 píxeles.
En el código JavaScript, se obtiene el canvas y su contexto 2D de la siguiente manera:
javascriptCopy code
const canvas = [Link]("gameCanvas");const ctx = [Link]("2d");
[Link]("gameCanvas"): Obtiene el elemento canvas del HTML utilizando su
identificador.
[Link]("2d"): Obtiene el contexto 2D del canvas, que es necesario para realizar
operaciones de dibujo en el canvas.
A lo largo del código JavaScript, se utilizan funciones para dibujar elementos en el canvas, como la
nave del jugador, las balas, los enemigos, etc. El canvas es esencial en juegos y aplicaciones web que
requieren gráficos interactivos y animaciones.
Este código es un juego simple de naves implementado en HTML, CSS y
JavaScript. A continuación, se proporciona una explicación línea por
línea de lo que hace cada parte del código:
<!DOCTYPE html>: Declara la versión de HTML que se está utilizando.
<html lang="en">: Inicia la etiqueta HTML y especifica que el idioma principal es inglés.
<head>: Contiene metadatos y enlaces a recursos externos.
<meta charset="UTF-8">: Especifica la codificación de caracteres como UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura la escala inicial y
el ancho del viewport para dispositivos móviles.
<title>Juego de Naves</title>: Establece el título de la página.
<style>: Contiene reglas de estilo CSS.
body: Inicia el cuerpo de la página.
Estilos generales para el cuerpo, como eliminar márgenes, ocultar el desbordamiento y establecer el
fondo y el color del texto.
canvas: Es el elemento donde se dibujará el juego.
Estilos para el canvas, como centrarlo, establecer su color de fondo y agregar un borde.
info: Una sección de información que contiene un mensaje y una lista para mostrar la puntuación.
menu: Un menú de configuración antes de comenzar el juego.
Campos para ingresar el nombre del jugador, el número de naves enemigas y seleccionar la dificultad.
scoreTable: Una tabla que mostrará las mejores puntuaciones.
<script>: Inicia la sección de script donde se encuentra el código JavaScript.
DOMContentLoaded: Evento que se dispara cuando el HTML ha sido completamente cargado y
parseado.
Se obtiene el canvas y su contexto 2D para realizar operaciones de dibujo.
Se definen objetos para representar al jugador, las balas, los enemigos y algunas variables
relacionadas con el juego.
Funciones para generar enemigos, dibujar elementos en el canvas, manejar el movimiento y
colisiones, y actualizar la puntuación.
Funciones para iniciar, reiniciar y finalizar el juego.
Manejadores de eventos para las teclas y el botón de inicio.
Al final, se agrega un event listener para el evento "DOMContentLoaded" que inicia el juego cuando la
página está completamente cargada.
