const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
let car = { x: canvas.width / 2, y: canvas.height - 100, speed: 0, angle: 0 };
let road = { offset: 0, speed: 5 };
let timeLeft = 60;
let keys = {};
// Load car image
const carImg = new Image();
carImg.src = "car.png";
// Handle key events
document.addEventListener("keydown", (event) => keys[event.key] = true);
document.addEventListener("keyup", (event) => keys[event.key] = false);
function update() {
if (keys["ArrowLeft"]) car.angle -= 0.05;
if (keys["ArrowRight"]) car.angle += 0.05;
if (keys["ArrowUp"]) car.speed = Math.min(car.speed + 0.2, 5);
if (keys["ArrowDown"]) car.speed = Math.max(car.speed - 0.2, 0);
car.x += Math.sin(car.angle) * car.speed;
road.offset += car.speed;
timeLeft -= 1 / 60;
if (timeLeft <= 0) {
alert("Čas vypršal! Konec hry.");
resetGame();
}
}
function drawRoad() {
ctx.fillStyle = "gray";
ctx.fillRect(0, canvas.height / 2, canvas.width, canvas.height / 2);
ctx.fillStyle = "white";
for (let i = 0; i < canvas.width; i += 40) {
ctx.fillRect(i, (canvas.height / 2) + (road.offset % 40), 10, 20);
}
}
function drawCar() {
ctx.save();
ctx.translate(car.x, car.y);
ctx.rotate(car.angle);
ctx.drawImage(carImg, -25, -50, 50, 100);
ctx.restore();
}
function drawUI() {
ctx.fillStyle = "white";
ctx.font = "20px Arial";
ctx.fillText(`ÄŒas: ${Math.max(0, timeLeft.toFixed(1))}`, 10, 30);
}
function resetGame() {
car = { x: canvas.width / 2, y: canvas.height - 100, speed: 0, angle: 0 };
road.offset = 0;
timeLeft = 60;
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
update();
drawRoad();
drawCar();
drawUI();
requestAnimationFrame(gameLoop);
}
carImg.onload = () => gameLoop();