135 lines
2.9 KiB
HTML
135 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Juego de Nave y Marcianos</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden; /* Oculta las barras de scroll */
|
|
}
|
|
canvas {
|
|
background-color: black;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="gameCanvas"></canvas>
|
|
<script>
|
|
const canvas = document.getElementById('gameCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Ajustar el tamaño del canvas a la ventana
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
// Variables del juego
|
|
let nave = {
|
|
x: canvas.width / 2,
|
|
y: canvas.height - 50,
|
|
velocidad: 5,
|
|
disparoIntervalo: 1000, // Intervalo en milisegundos para disparar
|
|
disparos: []
|
|
};
|
|
|
|
let marcianos = [];
|
|
let numMarcianos = 5; // Puedes cambiar este número
|
|
let intervaloMarcianos = 1500; // Intervalo en milisegundos para crear marcianos
|
|
|
|
let puntuacion = 0;
|
|
|
|
// Función para crear un marciano
|
|
function crearMarciano() {
|
|
const ancho = 30;
|
|
const alto = 20;
|
|
const x = Math.random() * (canvas.width - ancho);
|
|
const y = 0;
|
|
|
|
marcianos.push({
|
|
x: x,
|
|
y: y,
|
|
ancho: ancho,
|
|
alto: alto,
|
|
velocidad: 2
|
|
});
|
|
}
|
|
|
|
// Función para dibujar la nave
|
|
function dibujarNave() {
|
|
ctx.fillStyle = 'green';
|
|
ctx.fillRect(nave.x, nave.y, 30, 30);
|
|
}
|
|
|
|
// Función para dibujar los disparos
|
|
function dibujarDisparos() {
|
|
nave.disparos.forEach(disparo => {
|
|
ctx.fillStyle = 'red';
|
|
ctx.fillRect(disparo.x, disparo.y, 5, 10);
|
|
// Eliminar disparos que salen de la pantalla
|
|
if (disparo.x + 5 < 0) {
|
|
nave.disparos = nave.disparos.filter(d => d.x !== disparo.x); // Elimina el disparo del array
|
|
}
|
|
});
|
|
}
|
|
|
|
// Función para dibujar los marcianos
|
|
function dibujarMarcianos() {
|
|
marcianos.forEach(marcian => {
|
|
ctx.fillStyle = 'red';
|
|
ctx.fillRect(marcian.x, marcian.y, marcian.ancho, marcian.alto);
|
|
// Mover los marcianos
|
|
marcian.x += marcian.velocidad;
|
|
});
|
|
}
|
|
|
|
// Función para actualizar el juego
|
|
function actualizarJuego() {
|
|
// Mover la nave
|
|
nave.x += nave.velocidad;
|
|
|
|
// Limitar el movimiento de la nave
|
|
if (nave.x < 0) {
|
|
nave.x = 0;
|
|
}
|
|
if (nave.x > canvas.width - 30) {
|
|
nave.x = canvas.width - 30;
|
|
}
|
|
|
|
// Crear marcianos
|
|
if (Math.random() < 0.03) {
|
|
crearMarciano();
|
|
}
|
|
|
|
// Mover los marcianos
|
|
marcianos.forEach(marcian => {
|
|
marcian.x += marcian.velocidad;
|
|
});
|
|
|
|
// Eliminar marcianos que salen de la pantalla
|
|
marcianos = marcianos.filter(marcian => marcian.x + marcian.ancho > 0);
|
|
|
|
// Dibujar todo
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpia el canvas
|
|
dibujarNave();
|
|
dibujarMarcianos();
|
|
dibujarDisparos();
|
|
}
|
|
|
|
// Evento de clic para disparar
|
|
document.addEventListener('click', function() {
|
|
const disparo = {
|
|
x: nave.x + 15,
|
|
y: nave.y
|
|
};
|
|
nave.disparos.push(disparo);
|
|
});
|
|
|
|
// Llamar a actualizarJuego cada frame
|
|
setInterval(actualizarJuego, 20);
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|