Untitled

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Runner Game</title>
<style>
body{
background:#111;
color:white;
text-align:center;
font-family:Arial;
}

canvas{
background:#222;
border:3px solid #555;
margin-top:20px;
}
</style>
</head>

<body>

<h1>Runner Game</h1>
<p>Sterowanie: ← → zmiana toru | ↑ skok</p>

<canvas id="game" width="480" height="640"></canvas>

<script>

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

const lanes = [120,240,360];

let player = {
lane:1,
y:520,
vy:0,
jump:false
};

let obstacles=[];
let score=0;
let speed=4;
let gameOver=false;

function spawnObstacle(){

let lane=Math.floor(Math.random()*3);

obstacles.push({
lane:lane,
y:-40
});

}

setInterval(spawnObstacle,1200);

document.addEventListener("keydown",e=>{

if(e.key==="ArrowLeft" && player.lane>0){
player.lane--;
}

if(e.key==="ArrowRight" && player.lane<2){
player.lane++;
}

if(e.key==="ArrowUp" && !player.jump){
player.vy=-12;
player.jump=true;
}

});

function update(){

if(gameOver) return;

player.y+=player.vy;
player.vy+=0.6;

if(player.y>=520){
player.y=520;
player.vy=0;
player.jump=false;
}

for(let o of obstacles){
o.y+=speed;
}

obstacles=obstacles.filter(o=>o.y<700);

for(let o of obstacles){

if(o.lane===player.lane && Math.abs(o.y-player.y)<40){

if(!player.jump){
gameOver=true;
}

}

}

score++;

}

function draw(){

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

ctx.fillStyle="#444";

for(let x of lanes){
ctx.fillRect(x-5,0,10,640);
}

ctx.fillStyle="cyan";
ctx.fillRect(lanes[player.lane]-15,player.y-30,30,30);

ctx.fillStyle="red";

for(let o of obstacles){
ctx.fillRect(lanes[o.lane]-15,o.y-30,30,30);
}

ctx.fillStyle="white";
ctx.font="20px Arial";
ctx.fillText("Score: "+score,10,30);

if(gameOver){
ctx.font="40px Arial";
ctx.fillText("GAME OVER",120,320);
}

}

function loop(){
update();
draw();
requestAnimationFrame(loop);
}

loop();

</script>

</body>
</html>