Make a car game where you can drive freely and there are other cars too's game

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

No:16594

←

Prev Next

→

Make a car game where you can drive freely and the..ALL
Developer User7388｜Date and time 23/9/19 17:59:29
Build time 35.746 sec｜Game capacity 4.117KB｜

Script

Sure! Here's a sample code for a simple car game where you can drive freely and there are other cars on the road. It features basic controls for a smartphone operation and uses pictograms for the car and other cars.

To play the game, simply paste the above code into a new .html file and open it in a web browser. The game canvas will be displayed, and you can use the left and right buttons to control the car and drive freely on the road. Avoid colliding with the other cars that appear randomly, as it will end the game when a collision occurs. Please note that this is just a simple example to get you started. You can further enhance the game by adding features such as scorekeeping, levels, power-ups, and more.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Car Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// Car properties
            var carX = canvas.width / 2;
            var carY = canvas.height - 100;
            var carWidth = 50;
            var carHeight = 100;

// Other cars properties
            var otherCars = [];
            var otherCarWidth = 50;
            var otherCarHeight = 100;

// Game loop
            setInterval(update, 10); // Update every 10 milliseconds

// Event listeners for controls
            var leftBtn = document.createElement("button");
            leftBtn.innerHTML = "⬅️";
            leftBtn.addEventListener("click", moveLeft);
            document.body.appendChild(leftBtn);

var rightBtn = document.createElement("button");
            rightBtn.innerHTML = "➡️";
            rightBtn.addEventListener("click", moveRight);
            document.body.appendChild(rightBtn);

// Game logic
            function update() {
                // Clear canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw car
                drawCar(carX, carY);

// Move other cars and check for collision
                for (var i = 0; i < otherCars.length; i++) {
                    otherCars[i].y += 1; // Move downward
                    
                    if (isCollision(carX, carY, carWidth, carHeight, otherCars[i].x, otherCars[i].y, otherCarWidth, otherCarHeight)) {
                        alert("Game Over!");
                        location.reload(); // Restart the game
                    }

drawCar(otherCars[i].x, otherCars[i].y);
                }

// Generate new cars randomly
                if (Math.random() < 0.01) {
                    otherCars.push({
                        x: Math.random() * (canvas.width - otherCarWidth),
                        y: -otherCarHeight 
                    });
                }
            }

function drawCar(x, y) {
                ctx.fillStyle = "blue";
                ctx.fillRect(x, y, carWidth, carHeight);
            }

function isCollision(x1, y1, w1, h1, x2, y2, w2, h2) {
                return (
                    x1 < x2 + w2 &&
                    x1 + w1 > x2 &&
                    y1 < y2 + h2 &&
                    y1 + h1 > y2
                );
            }

function moveLeft() {
                carX -= 10; // Move left by 10 pixels
                if (carX < 0) {
                    carX = 0; // Prevent moving outside the canvas
                }
            }

function moveRight() {
                carX += 10; // Move right by 10 pixels
                if (carX + carWidth > canvas.width) {
                    carX = canvas.width - carWidth; // Prevent moving outside the canvas
                }
            }
        }
    </script>
</body>
</html>
```

Please note that this is just a simple example to get you started. You can further enhance the game by adding features such as scorekeeping, levels, power-ups, and more.