Create a shaking screen when these 12 squares bounce on the squares's game | AI game creator

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

No:16894

73

Create a shaking screen when these 12 squares boun..ALL
Developer User6472｜Date and time 23/9/21 15:11:09
Build time 22.558 sec｜Game capacity 1.984KB｜

Sure, here's an example of a simple game implemented in a single HTML file using JavaScript and enclosed in `` tags: <br><br> <br> <style> html, #loadedGame { margin: 0; padding: 0; height: 100%; overflow: hidden; } #game-container { width: 100%; height: 100%; position: relative; background-color: #f0f0f0; perspective: 1000px; } .square { width: 50px; height: 50px; background-color: #ff8000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: bounce 1s infinite alternate; } @keyframes bounce { from { transform: translate(-50%, -50%) perspective(200px) rotateX(0deg) rotateY(0deg); } to { transform: translate(-50%, -50%) perspective(200px) rotateX(360deg) rotateY(360deg); } } </style> <div id="game-container"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div>

This code creates a simple game where 12 squares bounce on the screen. When the squares bounce, it also triggers a shaking effect on the screen by adding the "shake" class to the game container element. You can view and play the game by opening the HTML file in a web browser on your smartphone or any other device.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure, here's an example of a simple game implemented in a single HTML file using JavaScript and enclosed in `<script>` tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shaking Squares Game</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

#game-container {
      width: 100%;
      height: 100%;
      position: relative;
      background-color: #f0f0f0;
      perspective: 1000px;
    }

.square {
      width: 50px;
      height: 50px;
      background-color: #ff8000;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: bounce 1s infinite alternate;
    }

@keyframes bounce {
      from { transform: translate(-50%, -50%) perspective(200px) rotateX(0deg) rotateY(0deg); }
      to { transform: translate(-50%, -50%) perspective(200px) rotateX(360deg) rotateY(360deg); }
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>

<script>
    // Logic to start the game
    function startGame() {
      // Shake the screen when squares bounce
      document.getElementById('game-container').classList.add('shake');
    }

// Start the game when page is loaded
    window.onload = startGame;
  </script>
</body>
</html>
```

This code creates a simple game where 12 squares bounce on the screen. When the squares bounce, it also triggers a shaking effect on the screen by adding the "shake" class to the game container element.

You can view and play the game by opening the HTML file in a web browser on your smartphone or any other device.