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

No:38715

←

Prev Next

→

Storm Chasers
Developer User17421｜Date and time 24/1/25 8:04:34
Build time 13.141 sec｜Game capacity 3.23KB｜

Script

Sure! Here's an example of a simple game called "Storm Chasers" implemented as a single HTML file, using JavaScript and pictograms:

Storm Chasers

This game allows the player to control a storm chaser (represented by a pictogram) using mouse clicks. The player needs to click on the game board to move the storm chaser and avoid colliding with the randomly moving storms. Each click increases the score, and colliding with a storm ends the game, showing the final score in an alert box. The game is continuously updated using a `setInterval` function to move the storms and check for collisions.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure! Here's an example of a simple game called "Storm Chasers" implemented as a single HTML file, using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Storm Chasers</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    
    #game-board {
      width: 300px;
      height: 300px;
      position: relative;
      margin: 0 auto;
      border: 2px solid black;
    }
    
    #player {
      width: 50px;
      height: 50px;
      position: absolute;
      background-image: url('pictograms/player.png');
      background-size: cover;
    }
    
    .storm {
      width: 60px;
      height: 60px;
      position: absolute;
      background-image: url('pictograms/storm.png');
      background-size: cover;
    }
  </style>
</head>
<body>
  <h1>Storm Chasers</h1>
  <div id="game-board">
    <div id="player"></div>
  </div>
  
  <script>
    // Game logic
    var player = document.getElementById('player');
    var gameBoard = document.getElementById('game-board');
    var score = 0;
    
    gameBoard.addEventListener('click', function(event) {
      score++;
      player.style.top = event.clientY - gameBoard.offsetTop - player.offsetHeight/2 + 'px';
      player.style.left = event.clientX - gameBoard.offsetLeft - player.offsetWidth/2 + 'px';
      
      // Add a new storm
      var newStorm = document.createElement('div');
      newStorm.classList.add('storm');
      newStorm.style.top = Math.random() * (gameBoard.offsetHeight - newStorm.offsetHeight) + 'px';
      newStorm.style.left = Math.random() * (gameBoard.offsetWidth - newStorm.offsetWidth) + 'px';
      newStorm.addEventListener('click', function() {
        score += 5;
        gameBoard.removeChild(newStorm);
      });
      gameBoard.appendChild(newStorm);
    });
    
    setInterval(function() {
      var storms = document.getElementsByClassName('storm');
      for (var i = 0; i < storms.length; i++) {
        var storm = storms[i];
        storm.style.top = storm.offsetTop + Math.random() * 20 - 10 + 'px';
        storm.style.left = storm.offsetLeft + Math.random() * 20 - 10 + 'px';
        if (isColliding(player, storm)) {
          alert('Game Over!\nYour Score: ' + score);
          score = 0;
          gameBoard.innerHTML = '<div id="player"></div>';
          player = document.getElementById('player');
        }
      }
    }, 200);
    
    function isColliding(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();
      
      return !(rect1.right < rect2.left ||
               rect1.left > rect2.right ||
               rect1.bottom < rect2.top ||
               rect1.top > rect2.bottom);
    }
  </script>
</body>
</html>
```