A game where you have to jump in a box's game

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

No:31532

←

Prev Next

→

A game where you have to jump in a box
Developer User15159｜Date and time 23/12/27 9:36:54
Build time 18.722 sec｜Game capacity 3.04KB｜

Script

Sure! Below is an example of a simple jumping game implemented as a single HTML file using JavaScript. It will be designed for smartphone operation and will use pictograms for visual elements. Please note that for better user experience, it is recommended to run the code snippet in a separate HTML file rather than the browser console.

In the above code, the game consists of a player (represented by a pictogram/icon) and a box. To jump, the player needs to touch/click on the screen. When the jumping motion starts, the player moves up and then comes back down to the original position. Please note that the actual URL for the player icon image needs to be provided in the code (replace `'emozi_all/player.png'` with the correct URL). Also, make sure to take care of hosting the image. Feel free to modify the code and add more features to enhance the game experience according to your requirements.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #player {
        width: 50px;
        height: 50px;
        background-image: url('https://example.com/player-icon.png');
        background-size: contain;
        position: absolute;
        bottom: 0;
      }
      
      #box {
        width: 100%;
        height: 100px;
        background-color: #000;
        position: absolute;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <div id="player"></div>
    <div id="box"></div>
    
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var player = document.getElementById('player');
        var box = document.getElementById('box');
        var isJumping = false;
      
        // Function to handle jumping
        function jump() {
          if (!isJumping) {
            isJumping = true;
            
            // Move the player upwards
            var upInterval = setInterval(function() {
              var bottomPos = parseInt(window.getComputedStyle(player).getPropertyValue('bottom'));
              player.style.bottom = (bottomPos + 10) + 'px';
              
              // Stop the jumping motion after reaching a certain height
              if (bottomPos > 150) {
                clearInterval(upInterval);
                
                // Move the player downwards
                var downInterval = setInterval(function() {
                  var bottomPos = parseInt(window.getComputedStyle(player).getPropertyValue('bottom'));
                  player.style.bottom = (bottomPos - 10) + 'px';
                  
                  // Stop the jumping motion at the original position
                  if (bottomPos <= 0) {
                    clearInterval(downInterval);
                    isJumping = false;
                  }
                }, 20);
              }
            }, 20);
          }
        }
        
        // Handle touch/mouse input to initiate jumping
        document.addEventListener('touchstart', jump);
        document.addEventListener('mousedown', jump);
      });
    </script>
  </body>
</html>
```
In the above code, the game consists of a player (represented by a pictogram/icon) and a box. To jump, the player needs to touch/click on the screen. When the jumping motion starts, the player moves up and then comes back down to the original position.

Please note that the actual URL for the player icon image needs to be provided in the code (replace `'https://example.com/player-icon.png'` with the correct URL). Also, make sure to take care of hosting the image.

Feel free to modify the code and add more features to enhance the game experience according to your requirements.