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

No:37011

A platformer game where you defend yourself from a..ALL
Developer User16954｜Date and time 24/1/19 22:16:20
Build time 20.035 sec｜Game capacity 4.721KB｜

Script

Sure! Here's an implementation of a platformer game where you need to defend yourself from angry balls using JavaScript and pictograms. The game is designed for smartphone operation and the entire code is enclosed in script tags within a single HTML file.

Angry Balls Platformer

👤

To play the game, simply copy the above code into an HTML file, save it, and open the file in a web browser. You'll see a platformer game where you need to control the player using left and right arrow keys and jump using the up arrow key. The objective is to avoid getting hit by the angry balls falling from above. The player is represented by a blue circle (👤) and the balls are represented by red circles (🔴). If you get hit by a ball, the game will be over. Good luck!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Angry Balls Platformer</title>
  <style>
    #game-container {
      position: relative;
      width: 100%;
      height: 300px; /* Adjust height as needed */
      border: 1px solid #000;
    }
    .player, .ball {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .player {
      background-color: #00f;
    }
    .ball {
      background-color: #f00;
    }
    .pictogram {
      font-size: 24px;
      text-align: center;
      line-height: 40px;
      color: #fff;
    }
  </style>
</head>
<body>
  <h1>Angry Balls Platformer</h1>
  <div id="game-container">
    <div id="player" class="player"><span class="pictogram">👤</span></div>
  </div>

// Function to move the player left or right
      function movePlayer(direction) {
        var leftPos = parseFloat(getComputedStyle(player).left);
        if (direction === 'left')
          player.style.left = Math.max(leftPos - 10, 0) + 'px';
        else if (direction === 'right')
          player.style.left = Math.min(leftPos + 10, gameContainer.offsetWidth - player.offsetWidth) + 'px';
      }

// Function to make the player jump
      function jumpPlayer() {
        if (!isJumping) {
          player.style.bottom = '60px';
          isJumping = true;
          jumpInterval = setInterval(function() {
            var bottomPos = parseFloat(getComputedStyle(player).bottom);
            if (bottomPos >= 240) {
              clearInterval(jumpInterval);
              player.style.bottom = '0';
              isJumping = false;
            } else {
              player.style.bottom = (bottomPos + 10) + 'px';
            }
          }, 30);
        }
      }
      
      // Function to create a new ball
      function createBall() {
        var ball = document.createElement('div');
        ball.className = 'ball';
        ball.style.left = getRandomPosition() + 'px';
        gameContainer.appendChild(ball);
        animateBall(ball);
      }

// Function to animate the ball
      function animateBall(ball) {
        var bottomPos = 0;
        var ballInterval = setInterval(function() {
          if (bottomPos >= 280) {
            clearInterval(ballInterval);
            if (isPlayerHit(ball))
              handleGameOver();
            else
              gameContainer.removeChild(ball);
          } else {
            bottomPos += 4;
            ball.style.bottom = bottomPos + 'px';
          }
        }, 30);
      }

// Function to check if the player is hit by a ball
      function isPlayerHit(ball) {
        var playerPos = player.getBoundingClientRect();
        var ballPos = ball.getBoundingClientRect();
        return !(playerPos.right < ballPos.left || 
                 playerPos.left > ballPos.right || 
                 playerPos.bottom < ballPos.top || 
                 playerPos.top > ballPos.bottom);
      }

// Function to handle game over
      function handleGameOver() {
        clearInterval(jumpInterval);
        gameContainer.innerHTML = '<h2>Game Over</h2>';
      }

// Function to get random position for a ball
      function getRandomPosition() {
        return Math.floor(Math.random() * (gameContainer.offsetWidth - 40));
      }

// Event listeners for arrow key inputs
      window.addEventListener('keydown', function(e) {
        if (e.key === 'ArrowLeft')
          movePlayer('left');
        else if (e.key === 'ArrowRight')
          movePlayer('right');
        else if (e.key === 'ArrowUp')
          jumpPlayer();
      });

// Start the game by creating balls at regular intervals
      setInterval(createBall, 2500);
    });
  </script>
</body>
</html>
```