<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Game Balap Mobil</title>
<style>
body{
margin:0;
background:#222;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
overflow:hidden;
}
canvas{
background:#555;
border:5px solid white;
}
</style>
</head>
<body>
<canvas id="game" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const roadWidth = 400;
const laneWidth = roadWidth/3;
// posisi jalur
const lanes = [35,170,305];
let score = 0;
//==================
// Mobil pemain
//==================
const player = {
lane:1,
x:lanes[1],
y:500,
w:60,
h:90
};
//==================
// Mobil musuh
//==================
const enemy = {
lane:Math.floor(Math.random()*3),
x:0,
y:-120,
w:60,
h:90,
speed:6
};
enemy.x = lanes[enemy.lane];
//==================
let left=false;
let right=false;
document.addEventListener("keydown",e=>{
if(e.key=="ArrowLeft") left=true;
if(e.key=="ArrowRight") right=true;
});
document.addEventListener("keyup",e=>{
if(e.key=="ArrowLeft") left=false;
if(e.key=="ArrowRight") right=false;
});
//==================
// gambar jalan
//==================
let line=0;
function drawRoad(){
ctx.fillStyle="#555";
ctx.fillRect(0,0,400,600);
ctx.strokeStyle="white";
ctx.lineWidth=4;
for(let y=-40;y<600;y+=60){
ctx.beginPath();
ctx.moveTo(133,y+line);
ctx.lineTo(133,y+30+line);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(266,y+line);
ctx.lineTo(266,y+30+line);
ctx.stroke();
}
line+=8;
if(line>60) line=0;
}
//==================
// gambar mobil
//==================
function drawCar(x,y,color){
ctx.fillStyle=color;
ctx.fillRect(x,y,60,90);
ctx.fillStyle="skyblue";
ctx.fillRect(x+10,y+10,40,20);
ctx.fillStyle="black";
ctx.beginPath();
ctx.arc(x+5,y+20,5,0,6.28);
ctx.arc(x+55,y+20,5,0,6.28);
ctx.arc(x+5,y+70,5,0,6.28);
ctx.arc(x+55,y+70,5,0,6.28);
ctx.fill();
}
//==================
function update(){
if(left){
player.lane--;
if(player.lane<0)
player.lane=0;
player.x=lanes[player.lane];
left=false;
}
if(right){
player.lane++;
if(player.lane>2)
player.lane=2;
player.x=lanes[player.lane];
right=false;
}
enemy.y += enemy.speed;
if(enemy.y>620){
enemy.y=-120;
enemy.lane=Math.floor(Math.random()*3);
enemy.x=lanes[enemy.lane];
score++;
enemy.speed+=0.2;
}
}
//==================
function collision(){
return (
player.x < enemy.x+enemy.w &&
player.x+player.w > enemy.x &&
player.y < enemy.y+enemy.h &&
player.y+player.h > enemy.y
);
}
//==================
function game(){
drawRoad();
update();
drawCar(player.x,player.y,"deepskyblue");
drawCar(enemy.x,enemy.y,"red");
ctx.fillStyle="white";
ctx.font="24px Arial";
ctx.fillText("Score : "+score,10,30);
if(collision()){
alert("GAME OVER\nScore : "+score);
location.reload();
return;
}
requestAnimationFrame(game);
}
game();
</script>
</body>
</html>
0 Komentar