Moving balls making a sound's game

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

No:37513

←

Prev Next

→

Moving balls making a sound
Developer User17064｜Date and time 24/1/21 4:49:01
Build time 10.178 sec｜Game capacity 2.937KB｜

Script

Sure, here's an example of a simple game where moving balls make a sound. It uses HTML, CSS, and JavaScript and can be played on a smartphone.

In this game, three balls of different sizes and colors will move around the canvas. When a ball hits the edges of the canvas, a sound will play. To use pictograms, you can replace the color names ("red", "blue", "green") with appropriate pictogram representations if you have them available. Make sure to replace the filenames `ball_sound.mp3` with your own sound file appropriately.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple game where moving balls make a sound. It uses HTML, CSS, and JavaScript and can be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Moving Balls Game</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Initialize the game
    function startGame() {
      // Get the canvas element
      var canvas = document.getElementById("gameCanvas");
      var context = canvas.getContext("2d");

// Ball object
      function Ball(x, y, dx, dy, radius, color, sound) {
        this.x = x;
        this.y = y;
        this.dx = dx;
        this.dy = dy;
        this.radius = radius;
        this.color = color;
        this.sound = sound;
      }

// Array to hold the balls
      var balls = [];

// Create three balls with random positions and velocities
      balls.push(new Ball(50, 50, 2, 2, 20, "red", new Audio('ball_sound.mp3')));
      balls.push(new Ball(150, 150, -1, 3, 30, "blue", new Audio('ball_sound.mp3')));
      balls.push(new Ball(250, 250, 3, -2, 25, "green", new Audio('ball_sound.mp3')));

// Update function to move and draw the balls
      function update() {
        // Clear the canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

// Move and draw each ball
        balls.forEach(function(ball) {
          // Update position
          ball.x += ball.dx;
          ball.y += ball.dy;

// Check boundaries and change direction if needed
          if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
            ball.dx *= -1;
            ball.sound.play(); // Play sound when ball hits the canvas edges
          }
          if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
            ball.dy *= -1;
            ball.sound.play(); // Play sound when ball hits the canvas edges
          }

// Draw the ball
          context.beginPath();
          context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
          context.fillStyle = ball.color;
          context.fill();
          context.closePath();
        });

// Call update function recursively
        requestAnimationFrame(update);
      }

// Start the game loop
      update();
    }

// Start the game when the document is ready
    document.addEventListener("DOMContentLoaded", function(event) {
      startGame();
    });
  </script>
</body>
</html>
```