Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Neon Dash Fixed</title>

<style>
    body {
        margin: 0;
        overflow: hidden;
        background: black;
        font-family: Arial;
    }

    canvas {
        display: block;
        background: linear-gradient(180deg, #0b0f2a, #050510);
    }

    #ui {
        position: absolute;
        top: 10px;
        left: 10px;
        color: white;
        font-size: 22px;
        text-shadow: 0 0 10px cyan;
    }

    #msg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: white;
        font-size: 32px;
        text-align: center;
        text-shadow: 0 0 20px magenta;
    }
</style>
</head>

<body>

<div id="ui">0%</div>
<div id="msg">CLICK or SPACE to start</div>
<canvas id="c"></canvas>

<script>
const c = document.getElementById("c");
const ctx = c.getContext("2d");

c.width = innerWidth;
c.height = innerHeight;

const ground = c.height - 120;

let started = false;
let dead = false;

let cameraX = 0;
let progress = 0;

const player = {
    x: 200,
    y: ground - 50,
    w: 50,
    h: 50,
    vy: 0,
    vx: 6,        // ⭐ FIX: constant forward movement
    g: 0.8,
    jump: -15,
    grounded: true
};

let objects = [];
let particles = [];

// --------------------
// LEVEL GENERATION
// --------------------
function buildLevel(){

    for(let i=0;i<300;i++){

        let x = i * 120;

        if(i < 40){
            if(i % 5 === 0) objects.push(makeObj(x,"spike"));
        }

        else if(i < 130){
            if(i % 6 === 0) objects.push(makeObj(x,"block"));
            if(i % 10 === 0) objects.push(makeObj(x,"spike"));
        }

        else if(i < 200){
            if(i % 3 === 0) objects.push(makeObj(x,"spike"));
            if(i % 7 === 0) objects.push(makeObj(x,"block"));
        }

        else{
            if(i % 10 === 0) objects.push(makeObj(x,"block"));
        }
    }
}

function makeObj(x,type){
    return {
        x,
        y: ground - 50,
        w: 50,
        h: 50,
        type
    };
}

buildLevel();

// --------------------
// INPUT
// --------------------
function jump(){
    if(!started){
        started = true;
        document.getElementById("msg").style.display = "none";
    }

    if(player.grounded){
        player.vy = player.jump;
        player.grounded = false;
        spawnParticles(player.x, player.y);
    }
}

addEventListener("keydown",e=>{
    if(e.code==="Space") jump();
});

addEventListener("mousedown",jump);

// --------------------
// PARTICLES
// --------------------
function spawnParticles(x,y){
    for(let i=0;i<10;i++){
        particles.push({
            x,y,
            vx:(Math.random()-0.5)*6,
            vy:(Math.random()-0.5)*6,
            life:30
        });
    }
}

// --------------------
// COLLISION
// --------------------
function collide(a,b){
    return (
        a.x < b.x + b.w &&
        a.x + a.w > b.x &&
        a.y < b.y + b.h &&
        a.y + a.h > b.y
    );
}

// --------------------
// RESET
// --------------------
function reset(){
    setTimeout(()=>location.reload(),500);
}

// --------------------
// BACKGROUND
// --------------------
function drawBG(){

    const g = ctx.createLinearGradient(0,0,0,c.height);
    g.addColorStop(0,"#0b0f2a");
    g.addColorStop(1,"#050510");

    ctx.fillStyle = g;
    ctx.fillRect(0,0,c.width,c.height);

    let pulse = Math.sin(Date.now()*0.004)*60 + 120;

    ctx.fillStyle = "rgba(255,0,80,0.08)";
    ctx.fillRect(0,0,c.width,pulse);
}

// --------------------
// GAME LOOP
// --------------------
function loop(){

    ctx.clearRect(0,0,c.width,c.height);

    drawBG();

    if(started && !dead){

        // ⭐ FIX: player moves forward
        player.x += player.vx;

        // ⭐ FIX: smooth camera follow
        cameraX += (player.x - 200 - cameraX) * 0.12;
    }

    // gravity
    player.vy += player.g;
    player.y += player.vy;

    if(player.y >= ground - player.h){
        player.y = ground - player.h;
        player.vy = 0;
        player.grounded = true;
    }

    // draw player
    ctx.fillStyle = "#00ff9d";
    ctx.shadowBlur = 30;
    ctx.shadowColor = "#00ff9d";

    ctx.fillRect(player.x - cameraX, player.y, player.w, player.h);

    // draw objects
    for(let o of objects){

        ctx.save();
        ctx.translate(o.x - cameraX, o.y);

        if(o.type === "spike"){
            ctx.fillStyle = "#ff2e63";
            ctx.shadowBlur = 20;
            ctx.shadowColor = "#ff2e63";

            ctx.beginPath();
            ctx.moveTo(0,50);
            ctx.lineTo(25,0);
            ctx.lineTo(50,50);
            ctx.closePath();
            ctx.fill();
        }

        if(o.type === "block"){
            ctx.fillStyle = "#00f5ff";
            ctx.shadowBlur = 20;
            ctx.shadowColor = "#00f5ff";
            ctx.fillRect(0,0,50,50);
        }

        ctx.restore();

        if(collide(player,o)){
            reset();
        }
    }

    // particles
    for(let i=particles.length-1;i>=0;i--){
        let p = particles[i];

        p.x += p.vx;
        p.y += p.vy;
        p.life--;

        ctx.fillStyle = "cyan";
        ctx.fillRect(p.x - cameraX,p.y,4,4);

        if(p.life <= 0) particles.splice(i,1);
    }

    // progress
    progress += started ? 0.04 : 0;

    document.getElementById("ui").innerText =
        Math.min(100, Math.floor(progress)) + "%";

    requestAnimationFrame(loop);
}

loop();
</script>

</body>
</html>
Editor is loading...