Make me a game about speed and cars's game

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

No:35330

←

Prev Next

→

Make me a game about speed and cars
Developer User16513｜Date and time 24/1/14 4:10:01
Build time 14.103 sec｜Game capacity 4.651KB｜

Script

Sure! Here's a simple game about speed and cars implemented as a single HTML file. The game will involve controlling a car and avoiding obstacles to see how far you can go before crashing. The game is designed for smartphone operation and uses pictograms.

Please note that for the game to work properly, you need to have `emozi_all/game.png` and `emozi_chicken.png` images in the same directory as the HTML file. Feel free to replace them with your own pictograms or images. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Speedy Cars Game</title>
    <style>
        #game-container {
            position: relative;
            width: 300px;
            height: 500px;
            border: 1px solid #000;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 50px;
        }
        
        #car {
            position: absolute;
            left: 135px;
            bottom: 10px;
            width: 30px;
            height: 60px;
            background-image: url('car.png');
            background-size: cover;
        }
        
        .obstacle {
            position: absolute;
            width: 30px;
            height: 30px;
            background-image: url('obstacle.png');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="car"></div>
    </div>

// Start game
        function startGame() {
            isPlaying = true;
            score = 0;
            speed = 3;
            obstacles = [];
            car.style.bottom = "10px";
            gameContainer.innerHTML = '<div id="car"></div>';
            gameInterval = setInterval(updateGame, 20);
        }

// Update game
        function updateGame() {
            // Update car position
            car.style.bottom = parseInt(car.style.bottom) + speed + "px";

// Check collision with obstacles
            for (var i = 0; i < obstacles.length; i++) {
                var obstacle = obstacles[i];
                if (isCollision(obstacle)) {
                    endGame();
                    return;
                }

// Remove obstacles when out of screen
                if (parseInt(obstacle.style.bottom) > gameContainer.offsetHeight) {
                    gameContainer.removeChild(obstacle);
                    obstacles.splice(i, 1);
                    score++;
                }
            }

// Add new obstacles
            if (score % 10 === 0) {
                var obstacle = createObstacle();
                obstacles.push(obstacle);
                gameContainer.appendChild(obstacle);
            }
        }

// Create obstacle
        function createObstacle() {
            var obstacle = document.createElement("div");
            obstacle.className = "obstacle";
            obstacle.style.left = Math.floor(Math.random() * (gameContainer.offsetWidth - 30)) + "px";
            obstacle.style.bottom = "-30px";
            return obstacle;
        }

// Check collision with car
        function isCollision(obstacle) {
            var carRect = car.getBoundingClientRect();
            var obstacleRect = obstacle.getBoundingClientRect();
            return carRect.left < obstacleRect.left + obstacleRect.width &&
                carRect.left + carRect.width > obstacleRect.left &&
                carRect.top < obstacleRect.top + obstacleRect.height &&
                carRect.top + carRect.height > obstacleRect.top;
        }

// End game
        function endGame() {
            isPlaying = false;
            clearInterval(gameInterval);
            alert("Game Over! Your score: " + score);
        }

// Handle touch events
        gameContainer.addEventListener("touchstart", function (event) {
            event.preventDefault();
            if (!isPlaying) {
                startGame();
            }
            else {
                var carX = parseInt(car.style.left);
                var touchX = event.touches[0].pageX;
                if (touchX < carX) {
                    car.style.left = (carX - 30) + "px";
                }
                else {
                    car.style.left = (carX + 30) + "px";
                }
            }
        });

// Start game on page load
        startGame();
    </script>
</body>
</html>
```

Please note that for the game to work properly, you need to have `car.png` and `obstacle.png` images in the same directory as the HTML file. Feel free to replace them with your own pictograms or images. Enjoy the game!