ORBIT - VideojuCan
by CosmicCobra59224 lines6.3 KB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>ORBIT - VideojuCan</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body {
background:#000; overflow:hidden;
font-family:'Courier New',monospace;
touch-action:manipulation;
user-select:none; -webkit-user-select:none;
height:100vh; display:flex;
justify-content:center; align-items:center;
}
#game {
position:relative; width:100vw; height:100vh;
max-width:600px; max-height:800px;
background:#0a0a1a; overflow:hidden;
border:3px solid #333;
}
canvas { display:block; width:100%; height:100%; }
#ui {
position:absolute; top:10px; left:10px;
background:rgba(0,0,0,0.6); color:#fff;
padding:8px 12px; border-radius:8px;
font-size:13px; pointer-events:none;
text-align:center;
}
#score {
font-size:2rem; font-weight:bold;
color:#f1c40f;
}
#hint {
position:absolute; bottom:30px; left:50%;
transform:translateX(-50%);
color:rgba(255,255,255,0.5); font-size:12px;
pointer-events:none; text-align:center;
}
</style>
</head>
<body>
<div id="game">
<canvas id="c"></canvas>
<div id="ui">
☀️ ORBIT<br>
<span id="score">0</span><br>
<small>toques</small>
</div>
<div id="hint">
⬆️⬇️ desliza para cambiar órbita<br>
🔥 demasiado cerca = quemado<br>
❄️ demasiado lejos = congelado
</div>
</div>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let W, H;
let sun = { x:0, y:0, r:50 };
let planet = { angle:0, orbitRadius:150, r:15, speed:0.02 };
let score = 0;
let gameOver = false;
let particles = [];
function resize() {
const g = document.getElementById('game');
W = g.clientWidth; H = g.clientHeight;
canvas.width = W; canvas.height = H;
sun.x = W/2;
sun.y = H/2;
planet.orbitRadius = H * 0.3;
}
window.addEventListener('resize', resize);
// Control táctil
let touchStartY = 0;
canvas.addEventListener('pointerdown', e => {
touchStartY = e.clientY;
});
canvas.addEventListener('pointermove', e => {
if (gameOver) return;
const dy = e.clientY - touchStartY;
planet.orbitRadius += dy * 0.5;
touchStartY = e.clientY;
// Límites
planet.orbitRadius = Math.max(sun.r + 30, Math.min(H/2 - 20, planet.orbitRadius));
});
function spawnParticle(color) {
particles.push({
x: planet.x, y: planet.y,
vx:(Math.random()-0.5)*3, vy:(Math.random()-0.5)*3,
life:30, color
});
}
function update() {
if (gameOver) return;
planet.angle += planet.speed;
planet.x = sun.x + Math.cos(planet.angle) * planet.orbitRadius;
planet.y = sun.y + Math.sin(planet.angle) * planet.orbitRadius;
// Comprobar temperatura
const dist = planet.orbitRadius - sun.r;
if (dist < 20) {
// Demasiado cerca = quemado
spawnParticle('#f80');
if (Math.random() < 0.05) {
gameOver = true;
document.getElementById('score').textContent = score + ' 💀';
}
} else if (dist > H/2 - 50) {
// Demasiado lejos = congelado
spawnParticle('#8cf');
if (Math.random() < 0.05) {
gameOver = true;
document.getElementById('score').textContent = score + ' ❄️';
}
} else {
// En la zona segura
score++;
document.getElementById('score').textContent = score;
}
// Partículas
particles.forEach(p => { p.x += p.vx; p.y += p.vy; p.life--; });
particles = particles.filter(p => p.life > 0);
}
function draw() {
// Fondo
ctx.fillStyle = '#0a0a1a';
ctx.fillRect(0, 0, W, H);
// Estrellas
ctx.fillStyle = '#fff';
for (let i = 0; i < 50; i++) {
const x = (i * 137) % W;
const y = (i * 89) % H;
ctx.globalAlpha = 0.3 + Math.sin(Date.now()/1000 + i) * 0.2;
ctx.fillRect(x, y, 2, 2);
}
ctx.globalAlpha = 1;
// Órbita
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
ctx.setLineDash([5,5]);
ctx.beginPath();
ctx.arc(sun.x, sun.y, planet.orbitRadius, 0, Math.PI*2);
ctx.stroke();
ctx.setLineDash([]);
// Zona segura
ctx.strokeStyle = 'rgba(46,204,113,0.3)';
ctx.lineWidth = 8;
ctx.beginPath();
ctx.arc(sun.x, sun.y, sun.r + 40, 0, Math.PI*2);
ctx.stroke();
ctx.beginPath();
ctx.arc(sun.x, sun.y, H/2 - 80, 0, Math.PI*2);
ctx.stroke();
ctx.lineWidth = 1;
// Sol
const sunGlow = ctx.createRadialGradient(sun.x, sun.y, 10, sun.x, sun.y, sun.r * 2);
sunGlow.addColorStop(0, '#fff');
sunGlow.addColorStop(0.3, '#ff8');
sunGlow.addColorStop(1, 'transparent');
ctx.fillStyle = sunGlow;
ctx.fillRect(sun.x - sun.r*2, sun.y - sun.r*2, sun.r*4, sun.r*4);
ctx.fillStyle = '#f80';
ctx.beginPath(); ctx.arc(sun.x, sun.y, sun.r, 0, Math.PI*2); ctx.fill();
// Planeta
ctx.fillStyle = '#4af';
ctx.beginPath(); ctx.arc(planet.x, planet.y, planet.r, 0, Math.PI*2); ctx.fill();
ctx.fillStyle = '#2a8';
ctx.beginPath(); ctx.arc(planet.x - 3, planet.y - 3, planet.r/3, 0, Math.PI*2); ctx.fill();
// Partículas
particles.forEach(p => {
ctx.fillStyle = p.color;
ctx.globalAlpha = p.life / 30;
ctx.beginPath(); ctx.arc(p.x, p.y, 3, 0, Math.PI*2); ctx.fill();
});
ctx.globalAlpha = 1;
if (gameOver) {
ctx.fillStyle = 'rgba(0,0,0,0.7)';
ctx.fillRect(0, 0, W, H);
ctx.fillStyle = '#f1c40f';
ctx.font = 'bold 30px Courier New';
ctx.textAlign = 'center';
ctx.fillText('GAME OVER', W/2, H/2);
ctx.font = '20px Courier New';
ctx.fillText('Toca para reiniciar', W/2, H/2 + 40);
}
}
canvas.addEventListener('click', () => {
if (gameOver) {
gameOver = false;
score = 0;
planet.orbitRadius = H * 0.3;
particles = [];
}
});
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
resize();
loop();
</script>
</body>
</html>Game Source: ORBIT - VideojuCan
Creator: CosmicCobra59
Libraries: none
Complexity: complex (224 lines, 6.3 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: orbit-videojucan-cosmiccobra59" to link back to the original. Then publish at arcadelab.ai/publish.