A pinball game with a cat's game

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

No:19424

←

Prev Next

→

A pinball game with a cat
Developer User8620｜Date and time 23/10/4 0:10:08
Build time 13.02 sec｜Game capacity 2.328KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Pinball avec un Chat</title>
  <style>
    #pinball {
      position: relative;
      height: 400px;
      width: 800px;
      border: 2px solid #000;
    }
    #cat {
      position: absolute;
      top: 380px;
      left: 380px;
      width: 40px;
      height: 40px;
    }
    #ball {
      position: absolute;
      top: 100px;
      left: 390px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="pinball">
    <img id="cat" src="cat.png" alt="Cat Icon">
    <div id="ball"></div>
  </div>

// Fonction de déplacement de la balle
    function moveBall() {
      ballRect = ball.getBoundingClientRect(); // Met à jour la position de la balle

// Gestion des collisions avec les bords du pinball
      if (ballRect.right >= pinballRect.right || ballRect.left <= pinballRect.left) {
        dx = -dx; // Inverse la direction horizontale de déplacement
      }
      if (ballRect.top <= pinballRect.top) {
        dy = -dy; // Inverse la direction verticale de déplacement
      }

// Gestion des collisions avec le chat
      if (ballRect.bottom >= cat.offsetTop && ballRect.left >= cat.offsetLeft && ballRect.right <= cat.offsetLeft + cat.offsetWidth) {
        dy = -dy; // Inverse la direction verticale de déplacement
      }

// Met à jour les nouvelles positions de la balle en fonction des vitesses
      ball.style.left = (ballRect.left + dx) + "px";
      ball.style.top = (ballRect.top + dy) + "px";

// Demande au navigateur de rappeler la fonction moveBall à la prochaine frame
      requestAnimationFrame(moveBall);
    }

// Commence le jeu
    moveBall();
  </script>
</body>
</html>