Throw a dart at balloon's game

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

No:6244

1065

←

Prev Next

→

Throw a dart at balloon
Developer User3874｜Date and time 23/7/1 23:22:22
Build time 34.615 sec｜Game capacity 3.737KB｜

Script

Sure! Here's a simple game implemented as a single HTML file using JavaScript. You can play it on a smartphone by tapping/clicking on the screen to throw a dart at a moving balloon. Note that pictograms are not available in the text-based format, so I'll provide you with a playable sample game instead:

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Throwing Darts Game</title>
  <style>
    #game-container {
      width: 100%;
      height: 400px;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: crosshair;
      position: relative;
    }
    
    #dart {
      width: 20px;
      height: 40px;
      background-color: #ff0000;
      position: absolute;
      bottom: 0;
      transform-origin: bottom center;
      transform: translateY(100%);
      transition: transform 1s linear;
    }
    
    .balloon {
      position: absolute;
      top: 40%;
      left: 100%;
      transform: translateX(-100%);
      font-size: 32px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="dart"></div>
  </div>

intervalId = setInterval(moveBalloons, 100);
      }
    
      function moveBalloons() {
        const balloon = balloons[Math.floor(Math.random() * balloons.length)];
        const balloonElement = document.createElement('div');
        balloonElement.className = 'balloon';
        balloonElement.innerHTML = balloon;
        gameContainer.appendChild(balloonElement);
    
        const balloonRect = balloonElement.getBoundingClientRect();
        const balloonWidth = balloonRect.width;
        const speed = 5;
    
        function balloonAnimation() {
          requestAnimationFrame(balloonAnimation);
    
          if (balloonRect.left + balloonWidth < 0) {
            balloonElement.remove();
            if (!dartHit && dartRect.left >= balloonRect.left + balloonWidth) {
              score++;
            }
            return;
          }
    
          balloonRect.left -= speed;
          balloonElement.style.left = balloonRect.left + 'px';
    
          const dartRect = dart.getBoundingClientRect();
          const dartHit = checkCollision(balloonRect, dartRect);
    
          if (dartHit) {
            clearInterval(intervalId);
            balloonElement.remove();
            score++;
            dart.style.transform = 'translateY(0)';
            setTimeout(() => {
              intervalId = setInterval(moveBalloons, 1000);
            }, 1000);
          }
        }
    
        balloonAnimation();
      }
    
      function checkCollision(rect1, rect2) {
        return !(rect1.right < rect2.left || 
                 rect1.left > rect2.right || 
                 rect1.bottom < rect2.top || 
                 rect1.top > rect2.bottom);
      }
    });
  </script>
</body>
</html>
```