Game where you need to tap falling logs so they don't hit the people at the bottom, if 3 logs hit the people, it is game over, logs spawn randomly.'s game

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

No:43326

←

Prev Next

→

Game where you need to tap falling logs so they do..ALL
Developer User19162｜Date and time 24/2/15 6:40:21
Build time 11.274 sec｜Game capacity 3.612KB｜

Script

Sure! Here's an example of a simple game where you need to tap falling logs to prevent them from hitting the people at the bottom. If three logs hit the people, it's game over. The logs spawn randomly. To play this game on your smartphone, you can open a text editor and save the following code as an HTML file. Then, open the HTML file in your smartphone's web browser.

🚶‍♂️

Game Over

Once you open the HTML file on your smartphone, you'll see falling logs represented by tree pictograms. You need to tap on the logs to make them disappear before they hit the people at the bottom of the screen. If three logs hit the people, the game will end, and a "Game Over" message will be displayed. Note: This is a simple example, and the game can be further improved with more features, animations, and visuals.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

To play this game on your smartphone, you can open a text editor and save the following code as an HTML file. Then, open the HTML file in your smartphone's web browser.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

#game-container {
      width: 100%;
      height: 100%;
      position: relative;
    }

.log {
      position: absolute;
      font-size: 100px;
      user-select: none;
    }

.person {
      font-size: 100px;
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }

.game-over {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 48px;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div class="person">🚶‍♂️</div>
    <div class="game-over">Game Over</div>
  </div>

// Maximum logs that can hit the people before game over
    var maxLogsHit = 3;

// Array to store all the falling logs
    var logs = [];

// Reference to the game container
    var gameContainer = document.getElementById('game-container');

// Reference to the game over element
    var gameOverElement = document.querySelector('.game-over');
    gameOverElement.style.display = 'none';

// Function to create a new log element
    function createLog() {
      var log = document.createElement('div');
      log.classList.add('log');
      log.innerText = '🌲';
      log.style.left = Math.floor(Math.random() * (window.innerWidth - 100)) + 'px';
      
      log.addEventListener('click', function() {
        log.style.display = 'none';
      });

gameContainer.appendChild(log);
      logs.push(log);
    }

// Function to update the game state
    function updateGameState() {
      // Check if logs hit the people
      var person = document.querySelector('.person').getBoundingClientRect();

logs.forEach(function(log) {
        var logRect = log.getBoundingClientRect();

if (logRect.bottom > person.top && logRect.left < person.right && logRect.right > person.left) {
          logsHitCount++;
          log.style.display = 'none';

if (logsHitCount >= maxLogsHit) {
            gameOverElement.style.display = 'block';
          }
        }
      });

// Remove logs that are out of the screen
      logs = logs.filter(function(log) {
        var logRect = log.getBoundingClientRect();

if (logRect.top > window.innerHeight) {
          log.parentElement.removeChild(log);
          return false;
        }

return true;
      });

// Create new log
      if (logs.length < 5) {
        createLog();
      }
    }

// Function to start the game loop
    function startGame() {
      setInterval(updateGameState, 100);
    }

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

Note: This is a simple example, and the game can be further improved with more features, animations, and visuals.