Make a frogger clone game's game | AI game creator

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

No:26991

106

Make a frogger clone game
Developer User13365｜Date and time 23/12/3 21:07:36
Build time 71.381 sec｜Game capacity 4.896KB｜

Sure! Here's a simple Frogger clone game implemented as a single HTML file with JavaScript. The game can be played on a smartphone. However, please note that due to the limitations of plain text, I won't be able to include any pictograms in this response.

To play the game: 1. Copy the entire code snippet into a new HTML file (e.g., "frogger-clone.html"). 2. Open the HTML file in a web browser on your smartphone. 3. The game board will be displayed, and a green player icon will be positioned at the bottom. 4. Use the left and right arrow keys to move the player left or right. 5. The objective is to avoid colliding with the red cars moving from top to bottom. 6. The game will continue until a collision occurs, at which point an alert will appear saying "Game Over!". Please note that this is a basic implementation, and you can enhance it by adding more features, levels, or improving the graphics and gameplay.

→ 　

0　

0　

　
　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

Sure! Here's a simple Frogger clone game implemented as a single HTML file with JavaScript. The game can be played on a smartphone. However, please note that due to the limitations of plain text, I won't be able to include any pictograms in this response.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Frogger Clone</title>
    <style>
      #game-board {
        position: relative;
        width: 320px;
        height: 480px;
        border: 1px solid black;
      }
      
      .player {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
        background-color: green;
      }
      
      .car {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

<script>
      // Game Variables
      const gameBoard = document.getElementById("game-board");
      const player = document.createElement("div");
      player.className = "player";
      gameBoard.appendChild(player);
      
      let playerPosition = 0; // Initial player position
      const playerStepSize = 40; // Number of pixels to move the player
      const carSpeed = 5; // Speed of the cars
      const carInterval = 1000; // Time interval to generate new cars
      
      let cars = []; // Array to store car elements
      let gameRunning = false; // Game state
      
      // Function to move the player
      function movePlayer(direction) {
        if (!gameRunning) return;
        
        let newPosition = playerPosition + direction * playerStepSize;
        if (newPosition >= 0 && newPosition <= 240) {
          player.style.left = newPosition + "px";
          playerPosition = newPosition;
          checkCollision();
        }
      }
      
      // Function to generate new cars at the top
      function generateCar() {
        if (!gameRunning) return;
        
        const car = document.createElement("div");
        car.className = "car";
        car.style.top = "-40px";
        car.style.left = Math.floor(Math.random() * 280) + "px";
        gameBoard.appendChild(car);
        cars.push(car);
        
        // Move the car down
        car.timerId = setInterval(() => {
          const carTop = parseInt(car.style.top);
          
          if (carTop > 480) {
            clearInterval(car.timerId);
            car.remove();
            cars = cars.filter((c) => c !== car);
          } else {
            car.style.top = carTop + carSpeed + "px";
          }
          
          checkCollision();
        }, 20);
      }
      
      // Function to check collision between cars and player
      function checkCollision() {
        const playerRect = player.getBoundingClientRect();
        
        for (const car of cars) {
          const carRect = car.getBoundingClientRect();
          const collision = !(
            playerRect.top > carRect.bottom ||
            playerRect.bottom < carRect.top ||
            playerRect.right < carRect.left ||
            playerRect.left > carRect.right
          );
          
          if (collision) {
            gameOver();
            return;
          }
        }
      }
      
      // Function to start the game
      function startGame() {
        if (gameRunning) return;
        
        playerPosition = 0;
        player.style.left = "160px";
        
        cars.forEach((car) => car.remove());
        cars = [];
        
        gameRunning = true;
        
        window.addEventListener("keydown", handleKeyPress);
        
        setInterval(generateCar, carInterval);
      }
      
      // Function to handle key press events
      function handleKeyPress(event) {
        if (event.key === "ArrowLeft") {
          movePlayer(-1);
        } else if (event.key === "ArrowRight") {
          movePlayer(1);
        }
      }
      
      // Function to end the game
      function gameOver() {
        gameRunning = false;
        
        window.removeEventListener("keydown", handleKeyPress);
        
        alert("Game Over!");
      }
      
      // Start the game
      startGame();
    </script>
  </body>
</html>
```

To play the game:

1. Copy the entire code snippet into a new HTML file (e.g., "frogger-clone.html").
2. Open the HTML file in a web browser on your smartphone.
3. The game board will be displayed, and a green player icon will be positioned at the bottom.
4. Use the left and right arrow keys to move the player left or right.
5. The objective is to avoid colliding with the red cars moving from top to bottom.
6. The game will continue until a collision occurs, at which point an alert will appear saying "Game Over!".

Please note that this is a basic implementation, and you can enhance it by adding more features, levels, or improving the graphics and gameplay.