Neon Cube Run – juego de plataformas de ritmo en HTML5

27 0 CodeExpert Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Neon Cube Run – juego de plataformas de ritmo en HTML5

Recomendado

25 August 2024

Exploración de productos de animación de interfaz de usuario

16 September 2025

Transmisión de datos de animación de corazón HTML

2 June 2025

Un código de alejandrokundrah

HTML

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #07021a; color: #fff; font-family: "Arial Black", "Segoe UI", system-ui, sans-serif; touch-action: manipulation; user-select: none; }
canvas { display: block; width: 100%; height: 100%; }
#hud { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: min(520px, 80vw); text-align: center; }
#bar { height: 12px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; border: 2px solid rgba(255,255,255,.4); }
#prog { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #00f0ff, #ff00e5); }
#att { display: block; margin-top: 6px; font-size: .9rem; opacity: .75; }
.overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: rgba(7,2,26,.7); padding: 20px; }
.overlay.hide { display: none; }
h1 { font-size: clamp(2.6rem, 10vw, 5.5rem); line-height: .95; color: #fff; text-shadow: 0 0 12px #00f0ff, 0 0 32px #ff00e5; }
.keys { opacity: .6; font-family: system-ui, sans-serif; }
#best { color: #00f0ff; min-height: 1.2em; }
#play { font: inherit; font-size: 1.5rem; padding: 14px 50px; border: 3px solid #fff; border-radius: 14px; background: #ff00e5; color: #fff; cursor: pointer; box-shadow: 0 0 24px #ff00e5; }

// NEON CUBE RUN — original auto-runner rhythm platformer (HTML5 canvas)
var cv = document.getElementById('c'), ctx = cv.getContext('2d'), W, H, S; // S = tile size
function resize() { var d = window.devicePixelRatio || 1; W = innerWidth; H = innerHeight; cv.width = W * d; cv.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); S = Math.max(34, Math.min(56, H / 11)); }
addEventListener('resize', resize); resize();

var SPEED = 8.6;            // tiles per second
var GRAV = 86, JUMP = 23.5; // tiles/s^2, tiles/s
var LEN = 420;              // level length in tiles

// --- deterministic level generator: list of {x, y, type} in tile units (y = height above ground)
var level = [];
function rng(seed) { return function () { seed = (seed * 16807) % 2147483647; return (seed - 1) / 2147483646; }; }
function build() {
  level = []; var r = rng(7), x = 14;
  var patterns = [
    function () { add(x, 0, 's'); x += 7; },
    function () { add(x, 0, 's'); add(x + 1, 0, 's'); x += 8; },
    function () { add(x, 0, 's'); add(x + 1, 0, 's'); add(x + 2, 0, 's'); x += 9; },
    function () { add(x, 0, 'b'); add(x + 1, 0, 'b'); add(x + 2, 0, 'b'); add(x + 3, 0, 's'); add(x + 4, 0, 's'); x += 10; },
    function () { for (var i = 0; i < 3; i++) { add(x + i * 4, i, 'b'); for (var k = 0; k < i; k++) add(x + i * 4, k, 'b'); } x += 15; },
    function () { add(x, 0, 'b'); add(x, 1, 'b'); add(x + 1, 0, 's'); add(x + 2, 0, 's'); add(x + 3, 0, 's'); add(x + 4, 0, 'b'); x += 10; },
    function () { add(x, 0, 'p'); add(x + 2, 0, 's'); add(x + 3, 0, 's'); add(x + 4, 0, 's'); x += 11; },
    function () { add(x, 0, 's'); x += 4; add(x, 0, 's'); x += 4; add(x, 0, 's'); x += 7; }
  ];
  function add(px, py, t) { level.push({ x: px, y: py, t: t }); }
  while (x < LEN - 10) { var lvl = Math.min(patterns.length, 3 + Math.floor(x / 60)); patterns[Math.floor(r() * lvl)](); }
}
build();

var p, camX, running = false, dead = false, deadT = 0, holding = false, attempt = 0, parts = [], beat = 0;
var best = 0; try { best = +localStorage.getItem('neoncube-best') || 0; } catch (e) {}
function reset() { p = { x: 2, y: 0, vy: 0, rot: 0, ground: true }; camX = 0; dead = false; parts = []; attempt++; document.getElementById('att').textContent = 'Attempt ' + attempt; }

Comments 0

…