Neon Cube Run – Rhythm Jump Platformer in HTML5

26 0 Games CodeExpert Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Neon Cube Run – Rhythm Jump Platformer in HTML5

* { 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

…

Neon Cube Run – Rhythm Jump Platformer in HTML5

Recommended

Comments 0