JSFiddle - React, Tailwind, and code Playground

by Amatewasu

HTML

<!DOCTYPE html>
<HTML>

<HEAD>
    <meta charset="utf-8" />
    <title>Test du programme "Balles rebondissantes.js"</title>
    <style type="text/css">
        *
        {
            -moz-transition : opacity .5s ease-in, color .5s ease, box-shadow .2s ease-out, background-color .3s ease;
            -o-transition : opacity .5s ease-in, color .5s ease, box-shadow .2s ease-out, background-color .3s ease;
            -webkit-transition : opacity .5s ease-in, color .5s ease, box-shadow .2s ease-out, background-color .3s ease;
            transition : opacity .5s ease-in, color .5s ease, box-shadow .2s ease-out, background-color .3s ease;
        }
        .can
        {
            border : 1px solid rgb(150,150,150);
            background : rgb(230,230,230);
        }
        .can:hover
        {
            background : rgb(250,250,250);
            box-shadow : 0px 0px 10px rgba(0,0,0, 0.5);
        }
    </style>
</HEAD>

<BODY>
    
    <p>Il y a <span id="nbBalles">0</span> balles en jeu.</p>
    <canvas class="can" id="ballesRebondissantes" width="400" height="400" />
    

</BODY>

</HTML>

JavaScript

/*
  * Mauvaise gestion de rebonds entre plusieurs balles en même temps.
  * Parfois, certaines balles se superposent et restent accrochées
  * Je comprend pourquoi elles restent accrochées, masi pas pourquoi elles se superposent...
  * Ce bug est surtout visible avec des grosses balles (50 de diamètre).
  * Bien sûr, si vous ajoutez une balle par dessus une autre, c'est normal qu'elles soient accrochées.
  * J'ai bien eu une idée pour gérer ce bug, mais elle ne me plait pas trop :
  * Tester avec les collisions si deux balles s'intersectent. Si oui, alors leur appliquer une force pour les faire sortir.
  * Ça pourait peut-être fonctionner, mais il y aurait des frames où les balles se coupent, et ça ne règlerait pas vraiment le problème.
  * Le bug est surtout présent avec de la gravitée (touches dirrectionneles pour en ajouter).
  * Ce bug diminue en plus les perrformances du programme : il provoque plein de collisions inutiles entre les deux balles accrochées.
  * Je viens d'avoir une nouvelle idée :
  * À la place de résoudre l'équation 'DIST ENTRE LES BALLES = RAYON"
  * Je devrais faire 'DIST ENTRE LES BALLES <= RAYON"
  * Mais ça ne m'aiderait pas à comprendre le bug... (je sais, parfois, on ne comprend jamais)
  * 
  * Peut-être des commentaires superflus...
  * Je mélange le français et l'anglais, mais je pense que ça reste lisible.
  * Attention à ne pas surcharger le programme et de ne pas changer d'onglet quand il est lancé, ça le fait bugger, et le navigateur aussi du coup.
  * */

var WIDTH = window.innerWidth-15; // Dimensions du programme
var HEIGHT = window.innerHeight-100;

var can = document.getElementById('ballesRebondissantes');
can.width = WIDTH;
can.height = HEIGHT;
var ctx = can.getContext('2d');

// Pour afficher le nombre de balles en jeu.
var affNbBalles = document.getElementById('nbBalles');

// LIBRAIRIE GRAPHIQUE ET MATHÉMATIQUE

// Vecteur 2 dimensions.
function Vect2(x, y)
{
    if (x == null)
        x = 0;
    if (y == null)
     ...