A Moving ball making a beep but everytime it hits a wall, another ball appears.'s game

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

No:37515

←

Prev Next

→

A Moving ball making a beep but everytime it hits ..ALL
Developer User17064｜Date and time 24/1/21 4:51:10
Build time 10.343 sec｜Game capacity 2.597KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<HTML>
  <head>
    <title>Ball Game</title>
    <style>
      #board {
        position: relative;
        width: 400px;
        height: 400px;
        border: 2px solid black;
        margin: 50px auto;
      }
      
      .ball {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: blue;
        border-radius: 50%;
      }
      
      .beep {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="board"></div>
    <script>
      // Function to create a new ball
      function createBall(x, y) {
        var ball = document.createElement('div');
        ball.className = 'ball';
        ball.style.top = y + 'px';
        ball.style.left = x + 'px';
        
        return ball;
      }
      
      // Function to play the beep sound
      function playBeep() {
        var beep = document.createElement('div');
        beep.className = 'beep';
        beep.innerHTML = "🔊";  // Pictogram of a speaker
        document.body.appendChild(beep);
        
        setTimeout(function() {
          document.body.removeChild(beep);
        }, 500);
      }
      
      // Function to handle ball movement
      function moveBall(ball, dx, dy) {
        var board = document.getElementById('board');
        var x = parseInt(ball.style.left);
        var y = parseInt(ball.style.top);
        
        // Check if the ball hits the wall
        if (x + dx < 0 || x + dx > board.offsetWidth - ball.offsetWidth) {
          playBeep();
          var newBall = createBall(parseInt(ball.style.left), parseInt(ball.style.top) + 30);
          board.appendChild(newBall);
        }
        
        if (y + dy < 0 || y + dy > board.offsetHeight - ball.offsetHeight) {
          playBeep();
          var newBall = createBall(parseInt(ball.style.left) + 30, parseInt(ball.style.top));
          board.appendChild(newBall);
        }
        
        x += dx;
        y += dy;
        
        ball.style.left = x + 'px';
        ball.style.top = y + 'px';
        
        // Move the ball after a certain delay
        setTimeout(function() {
          moveBall(ball, dx, dy);
        }, 10);
      }
      
      // Start the game
      var initialX = 180;
      var initialY = 180;
      
      var ball = createBall(initialX, initialY);
      var board = document.getElementById('board');
      board.appendChild(ball);
      
      moveBall(ball, 1, 1);
    </script>
  </body>
</HTML>