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

No:29387

←

Prev Next

→

Survive the spider
Developer User12051｜Date and time 23/12/17 7:13:04
Build time 32.347 sec｜Game capacity 3.396KB｜

Script

Sure, here's a simple game called "Survive the Spider" implemented as a single HTML file with JavaScript using pictograms:

Survive the Spider

In this game, you control the player (represented by a pictogram) using the left and right arrow keys on your smartphone. The objective is to avoid getting caught by the spider (also represented by a pictogram) that moves randomly on the gameboard. If the player collides with the spider, the game is over and an alert message will be displayed. You can then restart the game by tapping the OK button in the alert message. Note: You would need to replace the image file paths "emozi_all/player.png" and "emozi_all/spider.png" with the actual paths to your chosen pictogram images.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure, here's a simple game called "Survive the Spider" implemented as a single HTML file with JavaScript using pictograms:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Survive the Spider</title>
    <style>
      body {
        text-align: center;
        font-family: Arial, sans-serif;
      }

#gameboard {
        margin-top: 50px;
      }

.pictogram {
        width: 50px;
        height: 50px;
        display: inline-block;
        margin: 2px;
      }
    </style>
  </head>
  <body>
    <h1>Survive the Spider</h1>
    <div id="gameboard">
      <div class="pictogram"><img id="player" src="player.png" alt="Player"></div>
      <div class="pictogram"><img id="spider" src="spider.png" alt="Spider"></div>
    </div>

// Keycode constants
      var KEY_LEFT = 37;
      var KEY_RIGHT = 39;

// Gameboard elements
      var playerElement = document.getElementById('player');
      var spiderElement = document.getElementById('spider');

// Function to start the game
      function startGame() {
        document.addEventListener('keydown', handleKeyPress);
        gameRunning = true;
        moveSpider();
      }

// Function to handle key press
      function handleKeyPress(event) {
        if (event.keyCode === KEY_LEFT) {
          movePlayer(-1);
        } else if (event.keyCode === KEY_RIGHT) {
          movePlayer(1);
        }
      }

// Function to move the player
      function movePlayer(direction) {
        playerPosition += direction;
        if (playerPosition < 0) {
          playerPosition = 0;
        } else if (playerPosition > 9) {
          playerPosition = 9;
        }
        playerElement.style.marginLeft = playerPosition * 54 + 'px';
        checkCollision();
      }

// Function to move the spider randomly
      function moveSpider() {
        var randomPosition = Math.floor(Math.random() * 10);
        spiderPosition = randomPosition;
        spiderElement.style.marginLeft = spiderPosition * 54 + 'px';
        if (gameRunning) {
          setTimeout(moveSpider, 1000);
        }
      }

// Function to check collision
      function checkCollision() {
        if (playerPosition === spiderPosition) {
          gameRunning = false;
          alert('Game Over! The spider caught you!');
          resetGame();
        }
      }

// Function to reset the game
      function resetGame() {
        playerPosition = 0;
        spiderPosition = 0;
        playerElement.style.marginLeft = '0px';
        spiderElement.style.marginLeft = '0px';
        gameRunning = false;
      }

// Start the game on page load
      window.onload = startGame;
    </script>
  </body>
</html>
```

Note: You would need to replace the image file paths "player.png" and "spider.png" with the actual paths to your chosen pictogram images.