151 lines
3.3 KiB
HTML
151 lines
3.3 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);
|
|
});
|
|
}
|
|
|
|
// Función para dibujar los marcianos
|
|
function dibujarMarcianos() {
|
|
marcianos.forEach(marcian => {
|
|
ctx.fillStyle = 'red';
|
|
ctx.fillRect(marcian.x, marcian.y, marcian.ancho, marcian.alto);
|
|
});
|
|
}
|
|
|
|
// 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) { // Probabilidad de crear un marciano
|
|
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);
|
|
|
|
// Eliminar disparos que salen de la pantalla
|
|
nave.disparos = nave.disparos.filter(disparo => disparo.x + 5 > 0);
|
|
|
|
// Dibujar todo
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpia el canvas
|
|
dibujarNave();
|
|
dibujarMarcianos();
|
|
dibujarDisparos();
|
|
|
|
// Verificar colisiones
|
|
colisionar();
|
|
}
|
|
|
|
// Función para verificar colisiones
|
|
function colisionar() {
|
|
// Colisiones entre la nave y los marcianos
|
|
marcianos.forEach(marcian => {
|
|
if (
|
|
nave.x < marcian.x + marcian.ancho &&
|
|
nave.x + 30 > marcian.x &&
|
|
nave.y < marcian.y + marcian.alto &&
|
|
nave.y + 30 > marcian.y
|
|
) {
|
|
alert("¡Te ha alcanzado un marciano!");
|
|
location.reload(); // Recarga la página para reiniciar el juego
|
|
}
|
|
});
|
|
}
|
|
|
|
// 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); // Ajustar este valor para controlar la velocidad del juego
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|