AI game creator

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

No:15165

104

←

Prev Next

→

F1 game
Developer User6541｜Date and time 23/9/6 20:32:53
Build time 73.331 sec｜Game capacity 5.386KB｜

Script

Sure! Here's a simple F1 racing game implemented as a single HTML file using JavaScript. The game can be played on a smartphone and uses pictograms for the graphics. Please note that this is a basic implementation and can be expanded upon to add more features and complexity. Also, the game might not be fully optimized for different screen sizes.

Score: 0

Game Over!

Your score: 0

You will also need to provide the `emozi_all/car.png` and `emozi_chicken.png` image files in the same directory as the HTML file to use them as pictograms.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>F1 Racing Game</title>
    <style>
        #game {
            position: relative;
            height: 400px;
            width: 300px;
            border: 1px solid black;
        }

#car {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            height: 80px;
            width: 40px;
            background-image: url('car.png');
            background-size: cover;
        }

.obstacle {
            position: absolute;
            height: 30px;
            width: 30px;
            background-image: url('obstacle.png');
            background-size: cover;
        }

#score {
            text-align: right;
        }

#gameOver {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            padding: 10px;
            color: white;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="car"></div>
        <div id="score">Score: 0</div>
    </div>

<div id="gameOver">
        <h2>Game Over!</h2>
        <p>Your score: <span id="finalScore">0</span></p>
        <button onclick="restartGame()">Play Again</button>
    </div>

// Start the game
        function startGame() {
            car.style.bottom = '10px';
            currentScore = 0;
            game.style.pointerEvents = 'auto';
            gameInterval = setInterval(moveCar, 50);
            obstacleInterval = setInterval(createObstacle, 2000);
        }

// Move the car left or right
        function moveCar(e) {
            var key = e.keyCode;
            if (key === 37) { // Left arrow
                car.style.left = (parseInt(car.style.left) - carSpeed) + 'px';
            } else if (key === 39) { // Right arrow
                car.style.left = (parseInt(car.style.left) + carSpeed) + 'px';
            }
        }

// Create new obstacle
        function createObstacle() {
            var obstacle = document.createElement('div');
            obstacle.className = 'obstacle';
            obstacle.style.left = getRandomPosition() + 'px';
            game.appendChild(obstacle);
            moveObstacle(obstacle);
        }

// Move obstacle downwards
        function moveObstacle(obstacle) {
            var interval = setInterval(function() {
                var bottom = parseInt(obstacle.style.bottom);
                if (bottom <= 400) {
                    obstacle.style.bottom = (bottom + obstacleSpeed) + 'px';
                } else {
                    clearInterval(interval);
                    game.removeChild(obstacle);
                }
                
                var carLeft = parseInt(car.style.left);
                var carBottom = parseInt(car.style.bottom);
                var obstacleLeft = parseInt(obstacle.style.left);
                var obstacleBottom = parseInt(obstacle.style.bottom);
                
                if (carBottom > obstacleBottom - 30 && carLeft < obstacleLeft + 30 && carLeft + 40 > obstacleLeft) {
                    gameOverGame();
                }
            }, 20);
        }

// Get random position for obstacle
        function getRandomPosition() {
            var min = 10;
            var max = 260;
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

// Game over logic
        function gameOverGame() {
            clearInterval(gameInterval);
            clearInterval(obstacleInterval);
            game.style.pointerEvents = 'none';
            gameOver.style.display = 'block';
            finalScore.innerText = currentScore;
        }

// Restart the game
        function restartGame() {
            gameOver.style.display = 'none';
            var obstacles = document.getElementsByClassName('obstacle');
            while (obstacles.length > 0) {
                obstacles[0].parentNode.removeChild(obstacles[0]);
            }
            startGame();
        }

// Start the game when the page loads
        document.body.onload = startGame;

// Event listener
        document.addEventListener('keydown', moveCar);
    </script>
</body>
</html>
```

You will also need to provide the `car.png` and `obstacle.png` image files in the same directory as the HTML file to use them as pictograms.