neon-dash/ │ ├── index.html ├── style.css ├── game.js ├── ui.js ├── manifest.json ├── sw.js └── icon.png Neon Dash

Score: 0

Level: 1

Energy: 0

body { margin:0; background:black; font-family: Arial; overflow:hidden; } canvas { display:block; } /* HUD */ #hud { position:fixed; top:10px; left:10px; color:#00ffff; font-size:14px; text-shadow:0 0 10px #00ffff; } #xpBar { width:200px; height:10px; border:1px solid #00ffff; margin-top:5px; } #xpFill { height:100%; width:0%; background:#00ffff; } /* Buttons */ button { position:fixed; padding:10px; background:#00ffff; border:none; font-weight:bold; } #shopBtn { top:10px; right:10px; } #missionBtn { top:60px; right:10px; } /* Panels */ .panel { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); color:white; display:none; text-align:center; padding-top:50px; }const canvas = document.getElementById("game"); const ctx = canvas.getContext("2d"); canvas.width = innerWidth; canvas.height = innerHeight; const lanes = [canvas.width*0.25, canvas.width*0.5, canvas.width*0.75]; // ===== STATE ===== let state = { lane: 1, score: 0, energy: 0, xp: 0, xpNeed: 100, level: 1, speed: 6, shield: 0, magnet: false }; let objects = []; // ===== INPUT ===== document.addEventListener("keydown",e=>{ if(e.key==="ArrowLeft") state.lane=Math.max(0,state.lane-1); if(e.key==="ArrowRight") state.lane=Math.min(2,state.lane+1); }); // ===== SPAWN ===== function spawn(){ objects.push({ lane:Math.floor(Math.random()*3), y:-50, type:Math.random()<0.7?"obs":"orb" }); } // ===== XP SYSTEM ===== function xpGain(x){ state.xp += x; if(state.xp >= state.xpNeed){ state.xp = 0; state.level++; state.xpNeed *= 1.2; state.speed += 0.5; } } // ===== UPDATE ===== function update(){ state.score++; xpGain(1); if(Math.random()<0.05) spawn(); objects.forEach(o=>o.y+=state.speed); objects.forEach(o=>{ if(o.lane===state.lane && o.y>canvas.height-150){ if(o.type==="obs"){ if(state.shield>0) state.shield--; else state.score=0; } else { state.energy++; xpGain(5); } o.y=canvas.height+100; } }); objects = objects.filter(o=>o.y{ ctx.fillStyle=o.type==="obs"?"#ff0044":"#00ff88"; ctx.fillRect(lanes[o.lane]-15,o.y,30,30); }); } // ===== LOOP ===== function loop(){ update(); draw(); requestAnimationFrame(loop); } loop();function updateUI(){ document.getElementById("score").innerText = state.score; document.getElementById("level").innerText = state.level; document.getElementById("energy").innerText = state.energy; let percent = (state.xp/state.xpNeed)*100; document.getElementById("xpFill").style.width = percent + "%"; } // ===== SHOP ===== document.getElementById("shopBtn").onclick = () => { let p = document.getElementById("shopPanel"); p.style.display = "block"; p.innerHTML = `

SHOP

`; }; function closeShop(){ document.getElementById("shopPanel").style.display="none"; } function buyShield(){ if(state.energy>=20){state.energy-=20; state.shield++;} } function buyMagnet(){ if(state.energy>=25){state.energy-=25; state.magnet=true;} } function buySpeed(){ if(state.energy>=20){state.energy-=20; state.speed+=1;} } // ===== MISSIONS ===== let missions = [ {text:"Score 1000",type:"score",target:1000,done:false}, {text:"Collect 20 energy",type:"energy",target:20,done:false}, {text:"Reach level 3",type:"level",target:3,done:false} ]; document.getElementById("missionBtn").onclick = () => { let p = document.getElementById("missionPanel"); p.style.display = "block"; p.innerHTML = "

MISSIONS

" + missions.map(m => { let v = state[m.type]; if(!m.done && v>=m.target){ m.done=true; state.energy += 20; } return (m.done?"✅ ":"⬜ ") + m.text; }).join("
") + "
"; }; function closeM(){ document.getElementById("missionPanel").style.display="none"; }{ "name": "Neon Dash", "short_name": "NeonDash", "start_url": "./index.html", "display": "standalone", "background_color": "#000000", "theme_color": "#00ffff", "icons": [ { "src": "icon.png", "sizes": "192x192", "type": "image/png" }, { "src": "icon.png", "sizes": "512x512", "type": "image/png" } ] }self.addEventListener("install", e=>{ e.waitUntil( caches.open("neon").then(c=>c.addAll([ "./", "./index.html", "./style.css", "./game.js", "./ui.js" ])) ); }); self.addEventListener("fetch", e=>{ e.respondWith( caches.match(e.request).then(r=>r||fetch(e.request)) ); });

Plasmarift

Neon Dash

Inspired by Plasmarift?