a race track with 4 maps first map is a water city second is a school with bananas in it tree is a city with cars fourt is a shop in the aparment's game

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

No:18553

←

Prev Next

→

a race track with 4 maps first map is a water city..ALL
Developer User8197｜Date and time 23/9/29 21:53:22
Build time 45.304 sec｜Game capacity 4.001KB｜

Script

Sure! Here's a simple game implemented as a single HTML file using JavaScript. It is a racing game with four different maps: a water city, a school with bananas, a city with cars, and a shop in an apartment. The game is designed to be played on smartphones and uses pictograms for visualization.

In this implementation, the four different maps are represented as `div` elements with unique IDs. Each map has a corresponding CSS class, and the active map is displayed while the rest are hidden. When the game starts, the `startGame()` function is called to hide the start button and begin showing the maps one after the other. The `showNextMap()` function switches between the maps with a delay of 3 seconds before hiding the current map and showing the next one. The game continues until all maps have been displayed, at which point the `endGame()` function is called to display a game over message and show the start button again.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Racing Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
        }

#game-container {
            position: relative;
            width: 100%;
            height: 400px;
            background-color: #f3f3f3;
        }

.map {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 400px;
            display: none;
        }

.map.active {
            display: block;
        }

#water-city {
            background-image: url('water_city_pictogram.png');
        }

#school-with-bananas {
            background-image: url('school_bananas_pictogram.png');
        }

#city-with-cars {
            background-image: url('city_cars_pictogram.png');
        }

#shop-in-apartment {
            background-image: url('shop_apartment_pictogram.png');
        }

#start-button {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            font-size: 20px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="water-city" class="map"></div>
        <div id="school-with-bananas" class="map"></div>
        <div id="city-with-cars" class="map"></div>
        <div id="shop-in-apartment" class="map"></div>
    </div>
    <button id="start-button">Start Game</button>

var startButton = document.getElementById('start-button');
        startButton.addEventListener('click', function() {
            startGame();
        });

function startGame() {
            startButton.style.display = 'none';
            showNextMap();
        }

function hideCurrentMap() {
            var mapId = maps[currentMapIndex];
            var map = document.getElementById(mapId);
            map.classList.remove('active');
            setTimeout(function() {
                showNextMap();
            }, 1000); // 1 second delay before showing the next map
        }

function endGame() {
            alert('Game Over!');
            startButton.style.display = 'block';
            currentMapIndex = -1;
        }
    </script>
</body>
</html>
```