<!
DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Game Đua Xe 2D</title>
<style>
body {
margin: 0;
background: #222;
text-align: center;
}
canvas {
background: #555;
display: block;
margin: auto;
}
</style>
</head>
<body>
<canvas id="game" width="400" height="600"></canvas>
<!-- ÂM THANH -->
<audio id="bgm" src="sound/bg.mp3" loop></audio>
<audio id="crash" src="sound/[Link]"></audio>
<audio id="engine" src="sound/[Link]" loop></audio>
<script>
const canvas = [Link]("game");
const ctx = [Link]("2d");
// Âm thanh
const bgm = [Link]("bgm");
const crashSound = [Link]("crash");
const engineSound = [Link]("engine");
let gameOver = false;
let started = false;
// Xe người chơi
const player = {
x: 180,
y: 500,
width: 40,
height: 80,
speed: 6
};
// Xe đối thủ
let enemies = [];
// Điều khiển
let keys = {};
[Link]("keydown", e => {
keys[[Link]] = true;
// Bắt đầu nhạc khi người chơi ấn phím
if (!started) {
[Link]();
[Link]();
started = true;
}
});
[Link]("keyup", e => keys[[Link]] = false);
// Tạo xe đối thủ
function spawnEnemy() {
[Link]({
x: [Link]() * 360,
y: -100,
width: 40,
height: 80,
speed: 4
});
}
// Kiểm tra va chạm
function crash(a, b) {
return a.x < b.x + [Link] &&
a.x + [Link] > b.x &&
a.y < b.y + [Link] &&
a.y + [Link] > b.y;
}
// Vẽ xe
function drawCar(x, y, w, h, color) {
[Link] = color;
[Link](x, y, w, h);
}
// Vòng lặp game
function update() {
if (gameOver) return;
[Link](0, 0, [Link], [Link]);
// Điều khiển xe
if (keys["ArrowLeft"] && player.x > 0) player.x -= [Link];
if (keys["ArrowRight"] && player.x < [Link] - [Link])
player.x += [Link];
drawCar(player.x, player.y, [Link], [Link], "red");
[Link](e => {
e.y += [Link];
drawCar(e.x, e.y, [Link], [Link], "black");
if (crash(player, e)) {
gameOver = true;
[Link]();
[Link]();
[Link]();
setTimeout(() => {
alert("💥 GAME OVER 💥");
[Link]();
}, 300);
}
});
enemies = [Link](e => e.y < [Link] + 100);
requestAnimationFrame(update);
}
// Tạo xe đối thủ
setInterval(spawnEnemy, 1200);
update();
</script>
</body>
</html>