Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Mobile Car Game</title>
<style>
body { margin: 0; overflow: hidden; background: #333; font-family: Arial; }
canvas { display: block; background: #555; margin: 0 auto; }
#score { position: absolute; top: 10px; left: 10px; color: white; font-size: 20px; }
</style>
</head>
<body>
<div id="score">Score: 0</div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const scoreElement = document.getElementById("score");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let score = 0;
let car = { x: canvas.width / 2 - 25, y: canvas.height - 100, w: 50, h: 80 };
let obstacles = [];
let speed = 5;
// Mobile Touch Controls
window.addEventListener("touchstart", (e) => {
let touchX = e.touches[0].clientX;
if (touchX < canvas.width / 2) car.x -= 40;
else car.x += 40;
});
function createObstacle() {
let x = Math.random() * (canvas.width - 50);
obstacles.push({ x: x, y: -100, w: 50, h: 80 });
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw Player Car (Yellow)
ctx.fillStyle = "yellow";
ctx.fillRect(car.x, car.y, car.w, car.h);
// Obstacles logic
for (let i = 0; i < obstacles.length; i++) {
let o = obstacles[i];
o.y += speed;
ctx.fillStyle = "red";
ctx.fillRect(o.x, o.y, o.w, o.h);
// Collision
if (car.x < o.x + o.w && car.x + car.w > o.x && car.y < o.y + o.h && car.y + car.h > o.y) {
alert("Game Over! Score: " + score);
location.reload();
}
if (o.y > canvas.height) {
obstacles.splice(i, 1);
score++;
scoreElement.innerText = "Score: " + score;
speed += 0.1;
}
}
if (Math.random() < 0.02) createObstacle();
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>1
1
3KB
3KB
121.0ms
188.0ms
121.0ms