A platformer where you need to collect 10 hidden gems as a stickman to win's game

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

No:31439

←

Prev Next

→

A platformer where you need to collect 10 hidden g..ALL
Developer User15139｜Date and time 23/12/26 23:09:54
Build time 38.812 sec｜Game capacity 3.891KB｜

Script

Sure! Here's an example of a simple platformer game in a single HTML file using JavaScript:

In this game, you control a stickman represented by a black square. The stickman can move left and right using the left and right arrow keys on the keyboard respectively. The goal is to collect all 10 hidden gems represented by pictograms in the form of PNG images. When the stickman collects a gem, it disappears, and once the player collects all 10 gems, a congratulations message will be displayed, and the game will reset. Please note that you need to replace `emozi_cat.png` with your own image path and add more gem elements by duplicating the existing gem element and adjusting the `left` and `top` positions to hide the gems around the platform. Feel free to customize and enhance the game further according to your preferences!

←

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 platformer game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Stickman Platformer Game</title>
    <style>
      #game {
        position: relative;
        width: 400px;
        height: 300px;
        background-color: #f0f0f0;
        border: 1px solid #ddd;
        overflow: hidden;
      }

#player {
        position: absolute;
        left: 50px;
        bottom: 0;
        width: 50px;
        height: 50px;
        background-color: #000;
      }

.gem {
        position: absolute;
        width: 30px;
        height: 30px;
        background-image: url('gem.png');
        background-size: contain;
      }
    </style>
  </head>

// Initialize the game
      function init() {
        player = document.getElementById('player');
        gems = document.getElementsByClassName('gem');

// Add event listeners
        document.addEventListener('keydown', handleKeyDown);

// Start the game loop
        setInterval(gameLoop, 1000 / 60);
      }

// Game loop
      function gameLoop() {
        // Check for collision between player and gems
        for (var i = 0; i < gems.length; i++) {
          if (isColliding(player, gems[i])) {
            gems[i].style.display = 'none'; // Hide the collected gem
            collectedGems++;

// Check win condition
            if (collectedGems === 10) {
              alert('Congratulations! You collected all the gems!');
              resetGame();
            }

break;
          }
        }
      }

// Handle player movement
      function handleKeyDown(event) {
        var key = event.keyCode;
        var playerLeftPos = parseInt(player.style.left);

if (key === 37) {
          // Left arrow key (move left)
          player.style.left = playerLeftPos - 5 + 'px';
        } else if (key === 39) {
          // Right arrow key (move right)
          player.style.left = playerLeftPos + 5 + 'px';
        }
      }

// Check collision between two elements
      function isColliding(element1, element2) {
        var rect1 = element1.getBoundingClientRect();
        var rect2 = element2.getBoundingClientRect();
        return !(
          rect1.top > rect2.bottom ||
          rect1.right < rect2.left ||
          rect1.bottom < rect2.top ||
          rect1.left > rect2.right
        );
      }

// Reset the game
      function resetGame() {
        // Reset player position
        player.style.left = '50px';
        // Reset collected gems
        collectedGems = 0;
        // Show all gems
        for (var i = 0; i < gems.length; i++) {
          gems[i].style.display = 'block';
        }
      }

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

Please note that you need to replace `gem.png` with your own image path and add more gem elements by duplicating the existing gem element and adjusting the `left` and `top` positions to hide the gems around the platform.

Feel free to customize and enhance the game further according to your preferences!