My App

{"/styles.css":{"code":".app {\n font-family: system-ui, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n}\n\nh1 {\n color: #333;\n}"},"/App.js":{"code":"import { useEffect, useState, useRef } from \"react\";\n\nexport default function App() {\n const [level, setLevel] = useState(0);\n\n const levels = [\n {\n platforms: [\n { x: 0, y: 350, w: 400, h: 20 },\n { x: 120, y: 280, w: 100, h: 20 },\n { x: 260, y: 220, w: 100, h: 20 },\n ],\n lava: [{ x: 0, y: 380, w: 600, h: 20 }],\n boosts: [{ x: 200, y: 330, w: 30, h: 20 }],\n moving: [{ x: 350, y: 180, w: 100, h: 20, dir: 1 }],\n goal: { x: 500, y: 120, w: 30, h: 30 },\n },\n {\n platforms: [\n { x: 0, y: 350, w: 200, h: 20 },\n { x: 250, y: 300, w: 100, h: 20 },\n { x: 400, y: 250, w: 100, h: 20 },\n ],\n lava: [{ x: 0, y: 380, w: 600, h: 20 }],\n boosts: [{ x: 260, y: 280, w: 30, h: 20 }],\n moving: [{ x: 150, y: 200, w: 100, h: 20, dir: -1 }],\n goal: { x: 500, y: 200, w: 30, h: 30 },\n },\n ];\n\n const [player, setPlayer] = useState({\n x: 50,\n y: 300,\n vy: 0,\n speed: 5,\n onGround: false,\n });\n\n const gravity = 0.5;\n const jumpSound = useRef(null);\n const winSound = useRef(null);\n\n // controls\n useEffect(() => {\n const handleKey = (e) => {\n setPlayer((prev) => {\n let newX = prev.x;\n let newVy = prev.vy;\n\n if (e.key === \"ArrowRight\") newX += prev.speed;\n if (e.key === \"ArrowLeft\") newX -= prev.speed;\n if (e.key === \" \" && prev.onGround) {\n newVy = -10;\n jumpSound.current?.play();\n }\n\n return { ...prev, x: newX, vy: newVy };\n });\n };\n\n window.addEventListener(\"keydown\", handleKey);\n return () => window.removeEventListener(\"keydown\", handleKey);\n }, []);\n\n // game loop\n useEffect(() => {\n const interval = setInterval(() => {\n setPlayer((prev) => {\n const lvl = levels[level];\n\n let newY = prev.y + prev.vy;\n let newVy = prev.vy + gravity;\n let onGround = false;\n let speed = 5;\n\n // moving platforms update\n lvl.moving.forEach((m) => {\n m.x += m.dir * 2;\n if (m.x < 0 || m.x > 500) m.dir *= -1;\n });\n\n const allPlatforms = [...lvl.platforms, ...lvl.moving];\n\n // collision with platforms\n allPlatforms.forEach((p) => {\n if (\n prev.x + 20 > p.x &&\n prev.x < p.x + p.w &&\n prev.y + 20 <= p.y &&\n newY + 20 >= p.y\n ) {\n newY = p.y - 20;\n newVy = 0;\n onGround = true;\n }\n });\n\n // lava collision\n for (let lava of lvl.lava) {\n if (\n prev.x < lava.x + lava.w &&\n prev.x + 20 > lava.x &&\n prev.y < lava.y + lava.h &&\n prev.y + 20 > lava.y\n ) {\n return { x: 50, y: 300, vy: 0, speed: 5, onGround: false };\n }\n }\n\n // boost pads\n lvl.boosts.forEach((b) => {\n if (\n prev.x < b.x + b.w &&\n prev.x + 20 > b.x &&\n prev.y < b.y + b.h &&\n prev.y + 20 > b.y\n ) {\n speed = 10;\n }\n });\n\n // goal\n const g = lvl.goal;\n const reached =\n prev.x < g.x + g.w &&\n prev.x + 20 > g.x &&\n prev.y < g.y + g.h &&\n prev.y + 20 > g.y;\n\n if (reached) {\n winSound.current?.play();\n setLevel((l) => (l + 1) % levels.length);\n return { x: 50, y: 300, vy: 0, speed: 5, onGround: false };\n }\n\n // fall reset\n if (newY > 400) {\n return { x: 50, y: 300, vy: 0, speed: 5, onGround: false };\n }\n\n return { ...prev, y: newY, vy: newVy, onGround, speed };\n });\n }, 20);\n\n return () => clearInterval(interval);\n }, [level]);\n\n const lvl = levels[level];\n\n return (\n

\n\n {/* Player */}\n \n\n {/* Platforms */}\n {[...lvl.platforms, ...lvl.moving].map((p, i) => (\n \n ))}\n\n {/* Lava */}\n {lvl.lava.map((l, i) => (\n \n ))}\n\n {/* Boosts */}\n {lvl.boosts.map((b, i) => (\n \n ))}\n\n {/* Goal */}\n \n\n {/* Level UI */}\n

\n Level {level + 1}\n

\n\n {/* Sounds */}\n

\n );\n}"},"/index.js":{"code":"import React, { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n \n \n \n);"},"/public/index.html":{"code":"\n\n\n \n \n My App\n\n\n

\n\n"}}

Cool game multiple levels by starlight (zuri)