<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D Road with Cars</title>
<style>
canvas {
border: 1px solid black;
background-color: lightgray; /* Background color for better contrast */
}
</style>
</head>
<body>
<canvas id="roadCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('roadCanvas');
const ctx = canvas.getContext('2d');
const cars = [];
const points = [
{ x: 200, y: 300 },
{ x: 600, y: 300 },
];
// Function to draw the road
function drawRoad() {
ctx.fillStyle = 'darkgray'; // Road color
ctx.fillRect(0, 0, canvas.width, canvas.height); // Fill entire canvas
const laneWidth = 100;
const laneCount = 3; // Number of lanes
for (let i = 0; i < laneCount; i++) {
ctx.fillStyle = 'lightgray'; // Lane color
ctx.fillRect((canvas.width - (laneCount * laneWidth)) / 2 + i * laneWidth, 0, laneWidth, canvas.height);
}
ctx.strokeStyle = 'white'; // Dashed line color
ctx.lineWidth = 5; // Line width
ctx.setLineDash([15, 15]); // Dashed line pattern
for (let i = 1; i < laneCount; i++) {
const x = (canvas.width - (laneCount * laneWidth)) / 2 + i * laneWidth;
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
ctx.setLineDash([]); // Reset dashed line settings
}
// Function to draw cars
function drawCars() {
for (const car of cars) {
ctx.fillStyle = car.color;
ctx.fillRect(car.x, car.y, car.width, car.height);
}
}
// Function to update car positions
function updateCars() {
for (const car of cars) {
if (car.target) {
// Move towards the target
const dx = car.target.x - car.x;
const dy = car.target.y - car.y;
if (Math.abs(dx) > Math.abs(dy)) {
car.x += (dx > 0 ? car.speed : -car.speed);
} else {
car.y += (dy > 0 ? car.speed : -car.speed);
}
// Check if the car has reached the target
if (Math.abs(dx) < car.speed && Math.abs(dy) < car.speed) {
car.target = null; // Reset target
}
}
}
}
// Function to create a car
function createCar() {
const car = {
x: 50, // Start position
y: Math.random() * (canvas.height - 50), // Random Y position
width: 40,
height: 20,
color: 'blue',
speed: 2,
target: points[Math.floor(Math.random() * points.length)],
};
cars.push(car);
}
// Function to draw everything
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
drawRoad();
drawCars();
updateCars();
requestAnimationFrame(draw); // Loop the draw function
}
// Initialize and start the simulation
function init() {
for (let i = 0; i < 5; i++) { // Create 5 cars
createCar();
}
draw();
}
init(); // Start the simulation
</script>
</body>
</html>