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

No:7961

1759

←

Prev Next

→

Catch the falling bananas
Developer User4110｜Date and time 23/7/11 12:14:16
Build time 12.024 sec｜Game capacity 2.42KB｜

Script

Sure! Here's an example of a simple game where you need to catch the falling bananas using JavaScript within an HTML file:

Catch the Falling Bananas!

To play the game: 1. Save the HTML code into an HTML file (e.g., `catch-the-bananas.html`). 2. Replace the `background-image` property in the CSS selector `.banana` with the path to your banana pictogram. 3. Open the HTML file in a web browser. 4. You will see the game board with falling bananas. Click on the bananas as they fall to catch them and increase your score. Note: This example code assumes you have a banana pictogram that can be displayed using the CSS property `background-image`. If you do not have a banana pictogram, you can replace it with any other image or character of your choice.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's an example of a simple game where you need to catch the falling bananas using JavaScript within an HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Catch the Falling Bananas!</title>
  <style>
    #game-board {
      width: 200px;
      height: 400px;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
    }
    
    .banana {
      position: absolute;
      bottom: 0;
      width: 50px;
      height: 50px;
      background-image: url('banana.png'); /* Replace with your banana pictogram */
      background-size: contain;
    }
  </style>
</head>
<body>
  <h1>Catch the Falling Bananas!</h1>
  <div id="game-board"></div>

function createBanana() {
        const banana = document.createElement('div');
        banana.className = 'banana';
        banana.style.left = Math.floor(Math.random() * (gameBoard.offsetWidth - 50)) + 'px';
        banana.addEventListener('click', () => {
          gameBoard.removeChild(banana);
          score++;
        });
        gameBoard.appendChild(banana);
      }

setInterval(createBanana, 1000);

setInterval(() => {
        const bananas = document.querySelectorAll('.banana');
        bananas.forEach(banana => {
          const topPosition = parseInt(banana.style.top);
          if (topPosition >= gameBoard.offsetHeight) {
            gameBoard.removeChild(banana);
          } else {
            banana.style.top = topPosition + 10 + 'px';
          }
        });
      }, 100);

setInterval(() => {
        document.getElementById('score').innerText = `Score: ${score}`;
      }, 100);
    }

startGame();
  </script>
</body>
</html>
```

To play the game:

1. Save the HTML code into an HTML file (e.g., `catch-the-bananas.html`).
2. Replace the `background-image` property in the CSS selector `.banana` with the path to your banana pictogram.
3. Open the HTML file in a web browser.
4. You will see the game board with falling bananas. Click on the bananas as they fall to catch them and increase your score.

Note: This example code assumes you have a banana pictogram that can be displayed using the CSS property `background-image`. If you do not have a banana pictogram, you can replace it with any other image or character of your choice.