AI game creator

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

No:27763

109

←

Prev Next

→

Create difting game
Developer User13759｜Date and time 23/12/8 23:00:42
Build time 44.578 sec｜Game capacity 4.672KB｜

Script

Sure! Here's a simple drifting game implemented in a single HTML file using JavaScript and pictograms. This game can be played on a smartphone.

To play the game, you need to create the following pictogram images and put them in the same folder as the HTML file: 1. car.png - representing the player's car 2. road.png - representing the road 3. obstacle.png - representing an obstacle to avoid You can customize the images according to your preferences to make the game more visually appealing. Good luck drifting!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple drifting game implemented in a single HTML file using JavaScript and pictograms. This game can be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Drifting Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            background: #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Initialize game elements
        function init() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

carImage = new Image();
            carImage.src = "car.png";
            carWidth = 64;
            carHeight = 128;

roadImage = new Image();
            roadImage.src = "road.png";
            roadWidth = 400;
            roadHeight = canvas.height;

obstacleImage = new Image();
            obstacleImage.src = "obstacle.png";
            obstacleWidth = 64;
            obstacleHeight = 64;

score = 0;
            isGameOver = false;

car = {
                x: (canvas.width - carWidth) / 2,
                y: canvas.height - carHeight - 20,
                speed: 5
            };

road = {
                x: (canvas.width - roadWidth) / 2,
                y: 0,
                speed: car.speed
            };

obstacle = {
                x: Math.random() * (canvas.width - obstacleWidth),
                y: -obstacleHeight,
                speed: car.speed * 0.5
            };

// Controls
            document.addEventListener("keydown", function(event) {
                if (event.key === "ArrowLeft" || event.key === "Left") {
                    car.x -= car.speed;
                } else if (event.key === "ArrowRight" || event.key === "Right") {
                    car.x += car.speed;
                }
            });
        }

// Update game elements
        function update() {
            if (!isGameOver) {
                road.y += road.speed;
                obstacle.y += obstacle.speed;

if (road.y > canvas.height) {
                    road.y = -roadHeight;
                    score++;
                }

if (obstacle.y > canvas.height) {
                    obstacle.x = Math.random() * (canvas.width - obstacleWidth);
                    obstacle.y = -obstacleHeight;
                }

// Check collision
                if (
                    car.x < obstacle.x + obstacleWidth &&
                    car.x + carWidth > obstacle.x &&
                    car.y < obstacle.y + obstacleHeight &&
                    car.y + carHeight > obstacle.y
                ) {
                    gameOver();
                }
            }
        }

// Game over
        function gameOver() {
            isGameOver = true;
            alert("Game Over! Your Score: " + score);
            location.reload(); // Restart the game
        }

// Draw game elements
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(roadImage, road.x, road.y, roadWidth, roadHeight);
            ctx.drawImage(carImage, car.x, car.y, carWidth, carHeight);
            ctx.drawImage(
                obstacleImage,
                obstacle.x,
                obstacle.y,
                obstacleWidth,
                obstacleHeight
            );

ctx.fillStyle = "white";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);
        }

// Game loop
        function gameLoop() {
            update();
            draw();

if (!isGameOver) {
                requestAnimationFrame(gameLoop);
            }
        }

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

To play the game, you need to create the following pictogram images and put them in the same folder as the HTML file:

1. car.png - representing the player's car
2. road.png - representing the road
3. obstacle.png - representing an obstacle to avoid

You can customize the images according to your preferences to make the game more visually appealing. Good luck drifting!