Salto Estelar - VideojuCan
by CosmicCobra59411 lines14.0 KB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Salto Estelar - VideojuCan</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #0a0a2e;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Courier New', monospace;
overflow: hidden;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
}
#gameContainer {
position: relative;
width: 400px;
height: 600px;
background: linear-gradient(180deg, #0a0a2e 0%, #1a1a4e 100%);
border: 3px solid #f1c40f;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 0 30px rgba(241,196,15,0.3);
}
canvas {
display: block;
width: 100%;
height: 100%;
}
#ui {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
color: #f1c40f;
font-size: 16px;
font-weight: bold;
text-shadow: 2px 2px 0 #000;
pointer-events: none;
}
#gameOverScreen {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
}
#gameOverScreen h1 {
color: #f1c40f;
font-size: 36px;
margin-bottom: 10px;
}
#gameOverScreen p {
font-size: 18px;
margin-bottom: 20px;
}
#gameOverScreen button {
font-family: 'Courier New', monospace;
font-size: 20px;
padding: 10px 30px;
background: #f1c40f;
color: #000;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
}
#gameOverScreen button:hover {
background: #ffaa00;
}
.instruction {
position: absolute;
bottom: 10px;
left: 10px;
color: rgba(255,255,255,0.5);
font-size: 12px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="gameContainer">
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="ui">
<span>🪙 <span id="score">0</span></span>
<span>🪐 <span id="planets">1</span></span>
</div>
<div id="gameOverScreen">
<h1>¡Has caído!</h1>
<p>Planetas visitados: <span id="finalPlanets">0</span></p>
<p>Puntuación: <span id="finalScore">0</span></p>
<button onclick="restartGame()">🚀 Lanzar de nuevo</button>
</div>
<div class="instruction">Mantén pulsado para cargar, suelta para saltar</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const W = 400, H = 600;
// ========== ESTRELLAS DE FONDO ==========
let stars = [];
for (let i = 0; i < 60; i++) {
stars.push({
x: Math.random() * W,
y: Math.random() * H,
r: Math.random() * 2 + 0.5,
twinkle: Math.random() * Math.PI * 2
});
}
// ========== PLANETAS ==========
let planets = [];
let currentPlanetIndex = 0;
function generatePlanet(x, y, r) {
const colors = ['#e74c3c', '#3498db', '#2ecc71', '#9b59b6', '#f39c12', '#1abc9c', '#e67e22'];
return {
x: x,
y: y,
r: r,
color: colors[Math.floor(Math.random() * colors.length)],
hasRing: Math.random() < 0.2,
craters: Math.floor(Math.random() * 4)
};
}
function initPlanets() {
planets = [];
// Primer planeta (donde empieza el jugador)
planets.push(generatePlanet(W / 2, H - 80, 45));
// Generar planetas hacia arriba
for (let i = 1; i < 8; i++) {
let x = Math.random() * (W - 100) + 50;
let y = H - 80 - i * 75 + (Math.random() - 0.5) * 30;
let r = 25 + Math.random() * 30;
planets.push(generatePlanet(x, y, r));
}
currentPlanetIndex = 0;
}
// ========== JUGADOR (ASTRONAUTA) ==========
let player = {
x: W / 2,
y: H - 80 - 45,
vx: 0,
vy: 0,
r: 10,
onPlanet: true,
charging: false,
chargePower: 0,
trail: []
};
// ========== ESTADO DEL JUEGO ==========
let score = 0;
let gameOver = false;
let mouseDown = false;
let chargeAngle = 0;
// ========== CONTROLES ==========
canvas.addEventListener('mousedown', (e) => { if (!gameOver) mouseDown = true; });
canvas.addEventListener('mouseup', (e) => { if (!gameOver && mouseDown) launch(); mouseDown = false; });
canvas.addEventListener('mouseleave', () => { mouseDown = false; });
canvas.addEventListener('touchstart', (e) => { e.preventDefault(); if (!gameOver) mouseDown = true; });
canvas.addEventListener('touchend', (e) => { e.preventDefault(); if (!gameOver && mouseDown) launch();
mouseDown = false; });
document.addEventListener('mousemove', (e) => {
if (!mouseDown || gameOver) return;
const rect = canvas.getBoundingClientRect();
const mx = (e.clientX - rect.left) * (W / rect.width);
const my = (e.clientY - rect.top) * (H / rect.height);
chargeAngle = Math.atan2(my - player.y, mx - player.x);
});
document.addEventListener('touchmove', (e) => {
e.preventDefault();
if (!mouseDown || gameOver) return;
const rect = canvas.getBoundingClientRect();
const mx = (e.touches[0].clientX - rect.left) * (W / rect.width);
const my = (e.touches[0].clientY - rect.top) * (H / rect.height);
chargeAngle = Math.atan2(my - player.y, mx - player.x);
});
function launch() {
if (!player.onPlanet || gameOver) return;
const power = Math.min(player.chargePower / 60 * 8, 8);
player.vx = Math.cos(chargeAngle) * power;
player.vy = Math.sin(chargeAngle) * power;
player.onPlanet = false;
player.chargePower = 0;
}
// ========== ACTUALIZACIÓN ==========
function update() {
if (gameOver) return;
// Cargar salto
if (mouseDown && player.onPlanet) {
player.chargePower = Math.min(player.chargePower + 1, 60);
}
// Gravedad
if (!player.onPlanet) {
player.vy += 0.12;
player.x += player.vx;
player.y += player.vy;
// Rastro
player.trail.push({ x: player.x, y: player.y, life: 15 });
}
// Mantener rastro
for (let i = player.trail.length - 1; i >= 0; i--) {
player.trail[i].life--;
if (player.trail[i].life <= 0) player.trail.splice(i, 1);
}
// Colisión con planetas
for (let i = 0; i < planets.length; i++) {
const p = planets[i];
const dx = player.x - p.x;
const dy = player.y - p.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < p.r + player.r && !player.onPlanet && player.vy > 0) {
// Aterrizar
player.onPlanet = true;
player.vx = 0;
player.vy = 0;
player.x = p.x + (dx / dist) * (p.r + player.r);
player.y = p.y + (dy / dist) * (p.r + player.r);
if (i !== currentPlanetIndex) {
currentPlanetIndex = i;
score += 10;
}
}
}
// ¿Cayó al vacío?
if (player.y > H + 50 || player.x < -50 || player.x > W + 50) {
endGame();
}
// Actualizar UI
document.getElementById('score').textContent = score;
document.getElementById('planets').textContent = currentPlanetIndex + 1;
// Mover estrellas
for (let s of stars) {
s.twinkle += 0.02;
if (s.twinkle > Math.PI * 2) s.twinkle -= Math.PI * 2;
}
}
function endGame() {
gameOver = true;
document.getElementById('finalPlanets').textContent = currentPlanetIndex + 1;
document.getElementById('finalScore').textContent = score;
document.getElementById('gameOverScreen').style.display = 'flex';
}
// ========== RENDERIZADO ==========
function draw() {
ctx.clearRect(0, 0, W, H);
// Estrellas
for (let s of stars) {
const alpha = 0.5 + 0.5 * Math.sin(s.twinkle);
ctx.fillStyle = `rgba(255,255,255,${alpha})`;
ctx.beginPath();
ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
ctx.fill();
}
// Rastro del jugador
for (let t of player.trail) {
const alpha = t.life / 15;
ctx.fillStyle = `rgba(241,196,15,${alpha * 0.5})`;
ctx.beginPath();
ctx.arc(t.x, t.y, 3, 0, Math.PI * 2);
ctx.fill();
}
// Planetas
for (let i = planets.length - 1; i >= 0; i--) {
const p = planets[i];
// Sombra
ctx.fillStyle = 'rgba(0,0,0,0.3)';
ctx.beginPath();
ctx.arc(p.x + 2, p.y + 2, p.r, 0, Math.PI * 2);
ctx.fill();
// Planeta
ctx.fillStyle = p.color;
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fill();
// Cráteres
ctx.fillStyle = 'rgba(0,0,0,0.2)';
for (let c = 0; c < p.craters; c++) {
const angle = (c / p.craters) * Math.PI * 2 + i;
const cr = p.r * 0.15;
const cx = p.x + Math.cos(angle) * p.r * 0.5;
const cy = p.y + Math.sin(angle) * p.r * 0.4;
ctx.beginPath();
ctx.arc(cx, cy, cr, 0, Math.PI * 2);
ctx.fill();
}
// Anillo
if (p.hasRing) {
ctx.strokeStyle = 'rgba(255,255,255,0.4)';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.ellipse(p.x, p.y, p.r * 1.5, p.r * 0.3, 0.2, 0, Math.PI * 2);
ctx.stroke();
}
}
// Jugador (Astronauta)
if (!gameOver) {
ctx.save();
ctx.translate(player.x, player.y);
// Flecha de dirección al cargar
if (mouseDown && player.onPlanet) {
const power = player.chargePower / 60;
const arrowLen = 15 + power * 30;
ctx.strokeStyle = `rgba(241,196,15,${0.5 + power * 0.5})`;
ctx.lineWidth = 2 + power * 2;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(Math.cos(chargeAngle) * arrowLen, Math.sin(chargeAngle) * arrowLen);
ctx.stroke();
// Círculo de carga
ctx.strokeStyle = '#f1c40f';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(0, 0, 18, 0, Math.PI * 2 * power);
ctx.stroke();
}
// Cuerpo
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(0, 0, player.r, 0, Math.PI * 2);
ctx.fill();
// Casco
ctx.fillStyle = '#f1c40f';
ctx.beginPath();
ctx.arc(0, -2, player.r + 2, Math.PI, 0);
ctx.fill();
// Visor
ctx.fillStyle = '#3498db';
ctx.beginPath();
ctx.arc(0, -2, player.r - 2, Math.PI, 0);
ctx.fill();
ctx.restore();
}
}
function restartGame() {
score = 0;
gameOver = false;
mouseDown = false;
chargeAngle = 0;
player.trail = [];
initPlanets();
player.x = planets[0].x;
player.y = planets[0].y - planets[0].r - player.r;
player.vx = 0;
player.vy = 0;
player.onPlanet = true;
player.chargePower = 0;
currentPlanetIndex = 0;
document.getElementById('gameOverScreen').style.display = 'none';
document.getElementById('score').textContent = '0';
document.getElementById('planets').textContent = '1';
}
// ========== BUCLE PRINCIPAL ==========
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
initPlanets();
player.x = planets[0].x;
player.y = planets[0].y - planets[0].r - player.r;
gameLoop();
</script>
</body>
</html>Game Source: Salto Estelar - VideojuCan
Creator: CosmicCobra59
Libraries: none
Complexity: complex (411 lines, 14.0 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: salto-estelar-videojucan-cosmiccobra59" to link back to the original. Then publish at arcadelab.ai/publish.