Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html>
<head>
<title>Car Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #222;
}
canvas {
display: block;
margin: auto;
background: #555;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// Player car
let car = {
x: 180,
y: 500,
width: 40,
height: 80,
speed: 5
};
// Obstacle
let obstacle = {
x: Math.random() * 360,
y: -100,
width: 40,
height: 80,
speed: 4
};
let score = 0;
let gameOver = false;
// Controls
let keys = {};
document.addEventListener("keydown", e => keys[e.key] = true);
document.addEventListener("keyup", e => keys[e.key] = false);
// Game loop
function update() {
if (gameOver) return;
// Move car
if (keys["ArrowLeft"] && car.x > 0) car.x -= car.speed;
if (keys["ArrowRight"] && car.x < canvas.width - car.width) car.x += car.speed;
// Move obstacle
obstacle.y += obstacle.speed;
// Reset obstacle
if (obstacle.y > canvas.height) {
obstacle.y = -100;
obstacle.x = Math.random() * 360;
score++;
}
// Collision detection
if (
car.x < obstacle.x + obstacle.width &&
car.x + car.width > obstacle.x &&
car.y < obstacle.y + obstacle.height &&
car.y + car.height > obstacle.y
) {
gameOver = true;
alert("💥 Game Over! Score: " + score);
location.reload();
}
}
// Draw everything
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Road lines
ctx.fillStyle = "white";
for (let i = 0; i < canvas.height; i += 40) {
ctx.fillRect(195, i, 10, 20);
}
// Car
ctx.fillStyle = "blue";
ctx.fillRect(car.x, car.y, car.width, car.height);
// Obstacle
ctx.fillStyle = "red";
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
// Score
ctx.fillStyle = "white";
ctx.font = "20px Arial";
ctx.fillText("Score: " + score, 10, 30);
}
// Main loop
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Car Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #222;
}
canvas {
display: block;
margin: auto;
background: #555;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// Player car
let car = {
x: 180,
y: 500,
width: 40,
height: 80,
speed: 5
};
// Obstacle
let obstacle = {
x: Math.random() * 360,
y: -100,
width: 40,
height: 80,
speed: 4
};
let score = 0;
let gameOver = false;
// Controls
let keys = {};
document.addEventListener("keydown", e => keys[e.key] = true);
document.addEventListener("keyup", e => keys[e.key] = false);
// Game loop
function update() {
if (gameOver) return;
// Move car
if (keys["ArrowLeft"] && car.x > 0) car.x -= car.speed;
if (keys["ArrowRight"] && car.x < canvas.width - car.width) car.x += car.speed;
// Move obstacle
obstacle.y += obstacle.speed;
// Reset obstacle
if (obstacle.y > canvas.height) {
obstacle.y = -100;
obstacle.x = Math.random() * 360;
score++;
}
// Collision detection
if (
car.x < obstacle.x + obstacle.width &&
car.x + car.width > obstacle.x &&
car.y < obstacle.y + obstacle.height &&
car.y + car.height > obstacle.y
) {
gameOver = true;
alert("💥 Game Over! Score: " + score);
location.reload();
}
}
// Draw everything
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Road lines
ctx.fillStyle = "white";
for (let i = 0; i < canvas.height; i += 40) {
ctx.fillRect(195, i, 10, 20);
}
// Car
ctx.fillStyle = "blue";
ctx.fillRect(car.x, car.y, car.width, car.height);
// Obstacle
ctx.fillStyle = "red";
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
// Score
ctx.fillStyle = "white";
ctx.font = "20px Arial";
ctx.fillText("Score: " + score, 10, 30);
}
// Main loop
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
5KB
Transfer Size
5KB
Content Size
107.0ms
Dom Content Loaded
192.0ms
First Paint
107.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...