Partage des scrripts pour avoir un billard animé sur son site

Partage de ces 2 fichiers

Coller ce code dans un élément HTML

<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_ngkuz1ow.json"  background="transparent"  speed="1"  style="width: 350px; height: 250x;"  loop autoplay></lottie-player>

Coller ce code dans l'onglet CSS de l'élément HTML

/* Rotation Ecrans Lg/Md/Sm */
                                                .$ {display: flex; justify-content: center; align-items: center; rotate: 90deg;}
                                                /* Pas de rotation Ecran XS */
                                                @media only screen and (max-width: 421px) {.$ {rotate: 0deg;}}

Et celui-ci dans les propriétés de la page, dans le bloc Head du code HTML personnalisé

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

Merci à AlbertX et Mary pour leurs aides

Coller ce code dans un élément HTML

<!-- 🎱 BILLARD FRANÇAIS AUTONOME POUR WEBACAPPELLA -->
                                    <div class="billard-container">
                                      <div id="table">
                                        <div class="craie"></div>
                                      </div>
                                    </div>
                                    
                                    
                                    <script>
                                    (function() {
                                      var table = document.getElementById('table');
                                      var craie = table.querySelector('.craie');
                                      var billes = [];
                                    
                                      // 🎱 Couleurs officielles du billard français
                                      var couleurs = ['#ffffff', '#f3d20b', '#d00e1d'];
                                    
                                      var W = table.clientWidth;
                                      var H = table.clientHeight;
                                    
                                      // Position initiale de la craie (sur la bande)
                                      craie.style.left = (W - 80) + "px";
                                      craie.style.top = "-25px";
                                    
                                      // === CRÉATION DES 3 BILLES ===
                                      for (var i = 0; i < 3; i++) {
                                        var bille = document.createElement('div');
                                        bille.className = 'bille';
                                    
                                        var size = 22;
                                        var x = Math.random() * (W - size);
                                        var y = Math.random() * (H - size);
                                        var vx = (Math.random() - 0.5) * 8;
                                        var vy = (Math.random() - 0.5) * 8;
                                    
                                        bille.style.width = size + 'px';
                                        bille.style.height = size + 'px';
                                        bille.style.left = x + 'px';
                                        bille.style.top = y + 'px';
                                        bille.style.backgroundColor = couleurs[i];
                                    
                                        // point rouge central
                                        var point = document.createElement('div');
                                        point.className = 'point';
                                        bille.appendChild(point);
                                    
                                        table.appendChild(bille);
                                        billes.push({ element: bille, x, y, vx, vy, size, masse: size });
                                      }
                                    
                                      // === COLLISIONS ENTRE BILLES ===
                                      function gererCollision(b1, b2) {
                                        var dx = b2.x - b1.x;
                                        var dy = b2.y - b1.y;
                                        var distance = Math.sqrt(dx * dx + dy * dy);
                                    
                                        if (distance < (b1.size + b2.size) / 2) {
                                          var angle = Math.atan2(dy, dx);
                                          var v1 = Math.sqrt(b1.vx*b1.vx + b1.vy*b1.vy);
                                          var v2 = Math.sqrt(b2.vx*b2.vx + b2.vy*b2.vy);
                                          var dir1 = Math.atan2(b1.vy, b1.vx);
                                          var dir2 = Math.atan2(b2.vy, b2.vx);
                                    
                                          var v1x = v1 * Math.cos(dir1 - angle);
                                          var v1y = v1 * Math.sin(dir1 - angle);
                                          var v2x = v2 * Math.cos(dir2 - angle);
                                          var v2y = v2 * Math.sin(dir2 - angle);
                                    
                                          var v1xFinal = ((b1.masse - b2.masse)*v1x + 2*b2.masse*v2x) / (b1.masse + b2.masse);
                                          var v2xFinal = ((b2.masse - b1.masse)*v2x + 2*b1.masse*v1x) / (b1.masse + b2.masse);
                                    
                                          b1.vx = v1xFinal * Math.cos(angle) - v1y * Math.sin(angle);
                                          b1.vy = v1xFinal * Math.sin(angle) + v1y * Math.cos(angle);
                                          b2.vx = v2xFinal * Math.cos(angle) - v2y * Math.sin(angle);
                                          b2.vy = v2xFinal * Math.sin(angle) + v2y * Math.cos(angle);
                                    
                                          // 💥 Vibration de la craie si impact fort
                                          var impact = Math.abs(v1xFinal - v2xFinal);
                                          if (impact > 1.5) {
                                            craie.style.transform = "translate(1px, -1px) rotate(-8deg)";
                                            setTimeout(() => craie.style.transform = "rotate(-10deg)", 80);
                                          }
                                        }
                                      }
                                    
                                      // === ANIMATION DES BILLES ===
                                      function animate() {
                                        billes.forEach(b => {
                                          b.x += b.vx;
                                          b.y += b.vy;
                                          if (b.x <= 0 || b.x + b.size >= W) b.vx *= -1;
                                          if (b.y <= 0 || b.y + b.size >= H) b.vy *= -1;
                                        });
                                    
                                        for (var i = 0; i < billes.length; i++)
                                          for (var j = i + 1; j < billes.length; j++)
                                            gererCollision(billes[i], billes[j]);
                                    
                                        billes.forEach(b => {
                                          b.element.style.left = b.x + 'px';
                                          b.element.style.top = b.y + 'px';
                                        });
                                    
                                        requestAnimationFrame(animate);
                                      }
                                      animate();
                                    
                                      // === DÉPLACEMENT MANUEL DE LA CRAIE ===
                                      var isDragging = false, offsetX, offsetY;
                                      craie.addEventListener("mousedown", e => {
                                        isDragging = true;
                                        craie.style.cursor = "grabbing";
                                        offsetX = e.clientX - craie.offsetLeft;
                                        offsetY = e.clientY - craie.offsetTop;
                                      });
                                    
                                      document.addEventListener("mousemove", e => {
                                        if (!isDragging) return;
                                        craie.style.left = (e.clientX - offsetX) + "px";
                                        craie.style.top = (e.clientY - offsetY) + "px";
                                      });
                                    
                                      document.addEventListener("mouseup", () => {
                                        isDragging = false;
                                        craie.style.cursor = "grab";
                                      });
                                    })();
                                    </script>

Coller ce code dans l'onglet CSS de l'élément HTML

.$ 
                                    /* === CONTENEUR GÉNÉRAL (ne perturbe pas le reste du site) === */
                                    .billard-container {
                                      display: inline-block;
                                      position: relative;
                                      background: transparent;
                                    }
                                    
                                    /* === TABLE DE BILLARD ===
                                       ↳ Pour changer la taille : modifier width / height */
                                    #table {
                                      position: relative;
                                      width: 300px;  /* ← largeur du billard */
                                      height: 150px; /* ← hauteur du billard */
                                      background: #1e61a8;  /* tapis bleu français */
                                      border: 15px solid #7a4b27; /* bois */
                                      border-radius: 20px;
                                      box-shadow: 0 0 15px rgba(0,0,0,0.5);
                                      overflow: visible; /*  permet de voir la craie dépasser */
                                    }
                                    
                                    /* === BILLES === */
                                    .bille {
                                      position: absolute;
                                      border-radius: 50%;
                                    }
                                    
                                    /* Point rouge central (1 visible, 4 sur la vraie bille) */
                                    .point {
                                      position: absolute;
                                      background: #d00e1d;
                                      width: 4px;
                                      height: 4px;
                                      border-radius: 50%;
                                      left: 50%;
                                      top: 50%;
                                      transform: translate(-50%, -50%);
                                    }
                                    
                                    /* === CRAIE BLEUE === */
                                    .craie {
                                      position: absolute;
                                      width: 20px;
                                      height: 20px;
                                      background: #3fa8ff;
                                      border-radius: 4px;
                                      box-shadow:
                                        inset 0 0 4px rgba(0,0,0,0.5),
                                        0 2px 8px rgba(0,0,0,0.6),
                                        0 3px 6px rgba(0,0,0,0.4); /* effet posé sur le bois */
                                      cursor: grab;
                                      transform: rotate(-10deg);
                                      z-index: 10;   /*  toujours au-dessus du bois */
                                      top: -25px;    /*  visible sur la bande */
                                    }
                                    
                                    /* Trou d'usure sur la craie */
                                    .craie::before {
                                      content: "";
                                      position: absolute;
                                      left: 50%;
                                      top: 50%;
                                      width: 12px;
                                      height: 12px;
                                      transform: translate(-50%, -50%);
                                      background: #2c6ca8;
                                      border-radius: 3px;
                                      box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
                                    }

Bonus:

Effet: vous pouvez déplacer le bleu sur la table où bon vous semble sur la page, et lors de fort choc des billes, la craie bleu (appelé: le bleu) se met à vibrer !!

Retour aux archives