Pizza tower's game | AI game creator

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

No:11387

86

Pizza tower
Developer User4870｜Date and time 23/8/9 13:10:26
Build time 28.444 sec｜Game capacity 4.129KB｜

Sure! Here's a simple game called "Pizza Tower" implemented as a single HTML file using JavaScript:

In the above code, the game "Pizza Tower" is implemented as a single HTML file. The game board is represented by a `<div>` element with the id "game-board" and has dimensions of 400px width and 600px height. The game includes two pizzas: the player and the topping. These are represented by two `<div>` elements with the class "pizza" and appropriate backgrounds set. The JavaScript code handles the game logic. The `init()` function initializes the game by setting up necessary variables, event listeners, and calling `dropTopping()` to start the topping dropping process. The `movePlayer()` function allows the player to move left or right using the arrow keys. The `dropTopping()` function drops the topping from a random position and checks for collision with the player or reaching the bottom of the game board. The `toppingHitsPlayer()` function checks if the player and topping collide. The `gameover()` function displays an alert with the final score and resets the game. To play the game, simply save the HTML file and open it in a web browser that supports JavaScript. The player (represented by a pizza) can be moved left and right using the arrow keys to catch the toppings falling from the top. The game ends when a topping reaches the bottom, and an alert message shows the final score.

→ 　

0　

0　

　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

Sure! Here's a simple game called "Pizza Tower" implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pizza Tower</title>
  <style>
    #game-board {
      width: 400px;
      height: 600px;
      border: 1px solid black;
      margin: 0 auto;
      position: relative;
    }
    .pizza {
      display: block;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 80px;
    }
    .player {
      background-image: url("player.png");
    }
    .topping {
      background-image: url("topping.png");
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="player" class="pizza player"></div>
    <div id="topping" class="pizza topping"></div>
  </div>

<script>
    // Game variables
    let player;
    let topping;
    let score;

// Game initialization
    function init() {
      player = document.getElementById("player");
      topping = document.getElementById("topping");
      score = 0;

document.addEventListener("keydown", movePlayer);
      dropTopping();
    }

// Move the player left or right
    function movePlayer(event) {
      if (event.key === "ArrowLeft") {
        player.style.left = parseInt(getComputedStyle(player).left) - 20 + "px";
      } else if (event.key === "ArrowRight") {
        player.style.left = parseInt(getComputedStyle(player).left) + 20 + "px";
      }
    }

// Drop the topping randomly and increase score on successful catch
    function dropTopping() {
      const gameBoard = document.getElementById("game-board");
      const gameWidth = gameBoard.offsetWidth - topping.offsetWidth;

let randomX = Math.floor(Math.random() * gameWidth);
      topping.style.left = randomX + "px";

const dropInterval = setInterval(() => {
        topping.style.top = parseInt(getComputedStyle(topping).top) + 20 + "px";

if (toppingHitsPlayer()) {
          clearInterval(dropInterval);
          score++;
          dropTopping();
        } else if (parseInt(getComputedStyle(topping).top) >= gameBoard.offsetHeight) {
          clearInterval(dropInterval);
          gameover();
        }
      }, 500);
    }

// Check if the topping hits the player
    function toppingHitsPlayer() {
      const playerRect = player.getBoundingClientRect();
      const toppingRect = topping.getBoundingClientRect();
      
      return (
        playerRect.right >= toppingRect.left &&
        playerRect.left <= toppingRect.right &&
        playerRect.bottom >= toppingRect.top &&
        playerRect.top <= toppingRect.bottom
      );
    }

// Game over logic
    function gameover() {
      alert("Game over! Your score: " + score);
      init();
    }

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

In the above code, the game "Pizza Tower" is implemented as a single HTML file. The game board is represented by a `<div>` element with the id "game-board" and has dimensions of 400px width and 600px height.

The game includes two pizzas: the player and the topping. These are represented by two `<div>` elements with the class "pizza" and appropriate backgrounds set.

The JavaScript code handles the game logic. The `init()` function initializes the game by setting up necessary variables, event listeners, and calling `dropTopping()` to start the topping dropping process.

The `movePlayer()` function allows the player to move left or right using the arrow keys. The `dropTopping()` function drops the topping from a random position and checks for collision with the player or reaching the bottom of the game board. The `toppingHitsPlayer()` function checks if the player and topping collide. The `gameover()` function displays an alert with the final score and resets the game.

To play the game, simply save the HTML file and open it in a web browser that supports JavaScript. The player (represented by a pizza) can be moved left and right using the arrow keys to catch the toppings falling from the top. The game ends when a topping reaches the bottom, and an alert message shows the final score.