Car drifting simulator's game

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

No:21975

←

Prev Next

→

Car drifting simulator
Developer User7090｜Date and time 23/10/19 15:44:39
Build time 61.546 sec｜Game capacity 2.685KB｜

Script

This is a simple car drifting simulator implemented as a single HTML file. It uses JavaScript to handle game logic and canvas API for drawing graphics. The game can be played on a smartphone by touching the screen to control the car's drift. The car drifts left or right based on the touch position relative to the car's current position. The objective is to control the car and drift it within the boundaries of the canvas.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Car Drifting Simulator</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// Define the car object
        const car = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            width: 50,
            height: 100,
            speed: 5,
            drift: 0
        };

// Function to draw the car on the canvas
        function drawCar() {
            ctx.drawImage(carImage, car.x, car.y, car.width, car.height);
        }

// Function to update the game state
        function update() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update the car position based on drift
            car.x += car.speed * car.drift;

// Check if the car goes out of bounds and adjust the position
            if (car.x < 0) {
                car.x = 0;
            } else if (car.x > canvas.width - car.width) {
                car.x = canvas.width - car.width;
            }

// Draw the car
            drawCar();

// Request the next animation frame
            requestAnimationFrame(update);
        }

// Event listener to handle touch events for drift control
        canvas.addEventListener("touchstart", function(event) {
            const touchX = event.touches[0].clientX;

// Calculate the drift based on touch position
            if (touchX < car.x) {
                car.drift = -1; // Drift left
            } else if (touchX > car.x + car.width) {
                car.drift = 1; // Drift right
            } else {
                car.drift = 0; // Stop drifting
            }
        });

// Event listener to handle touch end event and stop drifting
        canvas.addEventListener("touchend", function() {
            car.drift = 0; // Stop drifting
        });

// Load the car image
        const carImage = new Image();
        carImage.src = "car.png";

// Start the game
        update();
    </script>
</body>
</html>
```