AI game creator

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

No:12817

108

←

Prev Next

→

Billiards
Developer User5580｜Date and time 23/8/23 22:10:50
Build time 43.25 sec｜Game capacity 3.303KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      #canvas {
        background-color: #232323;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="600"></canvas>
    <script>
      // Constantes du jeu
      const BALL_RADIUS = 15;
      const TABLE_WIDTH = 400;
      const TABLE_HEIGHT = 600;
      const BALL_SPEED = 3;

// Obtention du canvas et de son contexte
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

// Objet de la balle
      const ball = {
        x: TABLE_WIDTH / 2, // Position x initiale de la balle
        y: TABLE_HEIGHT / 2, // Position y initiale de la balle
        dx: BALL_SPEED, // Vitesse horizontale de la balle
        dy: -BALL_SPEED, // Vitesse verticale de la balle
        color: "white", // Couleur de la balle
        
        // Fonction de dessin de la balle
        draw: function() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, BALL_RADIUS, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();
          ctx.closePath();
        },
        
        // Fonction de mise à jour de la position de la balle
        updatePosition: function() {
          this.x += this.dx;
          this.y += this.dy;

// Vérification des collisions avec les bords du canvas
          if (this.x + BALL_RADIUS > TABLE_WIDTH || this.x - BALL_RADIUS < 0) {
            this.dx = -this.dx; // Inversion de la vitesse horizontale
          }
          if (this.y - BALL_RADIUS < 0) {
            this.dy = -this.dy; // Inversion de la vitesse verticale
          }
          if (this.y + BALL_RADIUS > TABLE_HEIGHT) {
            // La balle est tombée dans un trou, jeu terminé
            alert("Perdu !");
            this.reset();
          }
        },
        
        // Fonction de réinitialisation de la balle
        reset: function() {
          this.x = TABLE_WIDTH / 2;
          this.y = TABLE_HEIGHT / 2;
          this.dx = BALL_SPEED;
          this.dy = -BALL_SPEED;
        }
      };

// Fonction de dessin du tableau de billard
      function drawTable() {
        ctx.fillStyle = "#2f4f4f";
        ctx.fillRect(0, 0, TABLE_WIDTH, TABLE_HEIGHT);
        ctx.fillStyle = "#8b4513";
        ctx.fillRect(40, 20, TABLE_WIDTH - 80, TABLE_HEIGHT - 40);
        
        // Dessin des trous
        drawHole(40, 20);
        drawHole(TABLE_WIDTH / 2 - 10, 10);
        drawHole(TABLE_WIDTH - 50, 20);
        drawHole(40, TABLE_HEIGHT - 30);
        drawHole(TABLE_WIDTH / 2 - 10, TABLE_HEIGHT - 20);
        drawHole(TABLE_WIDTH - 50, TABLE_HEIGHT - 30);
      }

// Fonction de dessin d'un trou
      function drawHole(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, BALL_RADIUS, 0, Math.PI * 2);
        ctx.fillStyle = "#000";
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = "white";
        ctx.stroke();
        ctx.closePath();
      }

// Fonction de mise à jour du jeu
      function updateGame() {
        ctx.clearRect(0, 0, TABLE_WIDTH, TABLE_HEIGHT);
        drawTable();
        ball.updatePosition();
        ball.draw();
        requestAnimationFrame(updateGame);
      }

// Démarrage du jeu
      updateGame();
    </script>
  </body>
</html>