A car game having a road background and trees at the sides moves with the help of joystick with many cars in the background if the car touches the other car the game will be over the whole game will run the more you protect from the cars the more is the points the camera follows behind the car and it is a 2d game full superb background a superhero named batman will come and touch like a boss suddenly we have to get protected from him in background there is city and nature's game

Click here for free DL of the app version that can save data.

No:49948

←

Prev Next

→

A car game having a road background and trees at t..ALL
Developer User21169｜Date and time 24/3/7 0:39:24
Build time 14.509 sec｜Game capacity 3.503KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Road Car Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

const car = {
            x: 400,
            y: 500,
            width: 50,
            height: 100,
            speed: 5
        };

const joystick = {
            x: 0,
            y: 0,
            radius: 30
        };

let cars = [
            { x: 200, y: 0, width: 50, height: 100, speed: 3 },
            { x: 600, y: -100, width: 50, height: 100, speed: 2 },
            // Add more cars here
        ];

let score = 0;
        let gameover = false;

const handleJoystick = (event) => {
            const rect = canvas.getBoundingClientRect();
            joystick.x = event.clientX - rect.left;
            joystick.y = event.clientY - rect.top;
        };

const checkCollision = (car1, car2) => {
            return car1.x < car2.x + car2.width &&
                   car1.x + car1.width > car2.x &&
                   car1.y < car2.y + car2.height &&
                   car1.y + car1.height > car2.y;
        };

const draw = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw background
            ctx.fillStyle = 'lightblue';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw road
            ctx.fillStyle = 'gray';
            ctx.fillRect(150, 0, 500, canvas.height);

// Draw trees
            ctx.fillStyle = 'green';
            ctx.fillRect(0, 0, 150, canvas.height);
            ctx.fillRect(650, 0, 150, canvas.height);

// Draw cars
            cars.forEach((car) => {
                ctx.fillStyle = 'red';
                ctx.fillRect(car.x, car.y, car.width, car.height);
            });

// Draw car
            ctx.fillStyle = 'blue';
            ctx.fillRect(car.x, car.y, car.width, car.height);

// Draw joystick
            ctx.fillStyle = 'yellow';
            ctx.beginPath();
            ctx.arc(joystick.x, joystick.y, joystick.radius, 0, 2 * Math.PI);
            ctx.fill();

// Draw score
            ctx.fillStyle = 'black';
            ctx.font = '20px Arial';
            ctx.fillText(`Score: ${score}`, 10, 30);
        };

const update = () => {
            if (!gameover) {
                // Move cars
                cars.forEach((car) => {
                    car.y += car.speed;
                    if (car.y > canvas.height) {
                        car.y = -100;
                        car.x = Math.random() * 700;
                        score++;
                    }

if (checkCollision(car, car)) {
                        gameover = true;
                    }
                });

// Move car with joystick
                if (joystick.x < car.x && car.x > 150) {
                    car.x -= car.speed;
                } else if (joystick.x > car.x && car.x + car.width < 650) {
                    car.x += car.speed;
                }

draw();
                requestAnimationFrame(update);
            }
        };

canvas.addEventListener('mousemove', handleJoystick);
        update();
    </script>
</body>
</html>
```