Moving balls making a hit sound's game

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

No:37514

←

Prev Next

→

Moving balls making a hit sound
Developer User17064｜Date and time 24/1/21 4:49:45
Build time 9.603 sec｜Game capacity 3.03KB｜

Script

Sure! Here's an example of a simple game where you can move balls on a smartphone screen and hear a hit sound when they collide. The game is implemented in a single HTML file using JavaScript and enclosed in script tags:

In this game, there are five balls moving randomly on the canvas. When any ball reaches the edges of the canvas, it reverses its direction and plays a hit sound. You would need to provide your own `hit_sound.mp3` file and make sure it's placed in the same directory as the HTML file. To play the game, open the HTML file on a smartphone browser. The balls will move automatically, and you will hear a hit sound whenever they collide with the edges.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Moving Balls Game</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

update() {
          this.x += this.speedX;
          this.y += this.speedY;

// Reverse direction if the ball reaches the edges of the canvas
          if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
            this.speedX *= -1;
            playHitSound(); // Play hit sound
          }
          if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
            this.speedY *= -1;
            playHitSound(); // Play hit sound
          }
        }

draw(context) {
          context.beginPath();
          context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
          context.fillStyle = 'blue';
          context.fill();
          context.lineWidth = 2;
          context.strokeStyle = 'black';
          context.stroke();
        }
      }

// Canvas setup
      const canvas = document.getElementById('gameCanvas');
      const context = canvas.getContext('2d');

// Create balls
      let balls = [];
      for (let i = 0; i < 5; i++) {
        const x = Math.random() * (canvas.width - 2 * 25) + 25; // Random x position within canvas
        const y = Math.random() * (canvas.height - 2 * 25) + 25; // Random y position within canvas
        balls.push(new Ball(x, y));
      }

// Play hit sound function
      function playHitSound() {
        const audio = new Audio('hit_sound.mp3');
        audio.play();
      }

// Game loop
      function gameLoop() {
        // Clear canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw balls
        balls.forEach((ball) => {
          ball.update();
          ball.draw(context);
        });

// Request next frame
        requestAnimationFrame(gameLoop);
      }

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

To play the game, open the HTML file on a smartphone browser. The balls will move automatically, and you will hear a hit sound whenever they collide with the edges.