Bonsoir,

Dans un canvas, je suis censé créer des formes qui se déplacent aléatoirement.

J'ai le code suivant, la fonction go() se lance au chargement de ma page :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
var
        gr,
        ctx,        
        vmax = 20,
        w = "650",
        h = "500",
        nbformes = 0,
        tabObjets= new Array(),
        tabTimers= new Array();
 
function initObjet(objet) {
    objet.x = Math.round(Math.random() * (gr.width - 2 * objet.rayon) + objet.rayon);
    objet.y = Math.round(Math.random() * (gr.height - 2 * objet.rayon) + objet.rayon);
    objet.vx = Math.round((Math.random() - 0.5) * vmax);
    objet.vy = Math.round((Math.random() - 0.5) * vmax);
}
 
function getRandomIntegerBorne(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function affichage(objet) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,255,255,0.6)";
    ctx.fillRect(0, 0, gr.width, gr.height);
    ctx.strokeStyle = objet.color;
    ctx.arc(objet.x, objet.y, objet.rayon, 0, 2 * Math.PI);
    ctx.stroke();
    if ((objet.x + objet.vx) <= objet.rayon) {
        objet.vx *= -1;
    } else {
        objet.x += objet.vx
    }
    if ((objet.y + objet.vy) <= objet.rayon) {
        objet.vy *= -1;
    } else {
        objet.y += objet.vy
    }
    if ((objet.x + objet.vx) >= (gr.width - objet.rayon)) {
        objet.vx *= -1;
    } else {
        objet.x += objet.vx
    }
    if ((objet.y + objet.vy) >= (gr.height - objet.rayon)) {
        objet.vy *= -1;
    } else {
        objet.y += objet.vy
    }
}
 
function go() {
    document.body.innerHTML += "<canvas id='canvas' width=" + w + " height=" + h + " ></canvas>";
    gr = document.getElementById("canvas");
    ctx = gr.getContext("2d");   
    nbformes = getRandomIntegerBorne(2, 10);
    nbformes=5;    
    for (i = 0; i < nbformes; i++) {
        tabObjets[i] = {x: 0, y: 0, vx: 0, vy: 0, rayon: 15, couleur: "red"},
        initObjet(tabObjets[i]);
        z=50+(10*i);
        tabTimers[i] = setInterval(function(){ affichage(tabObjets[i]); }, z);        
    }
}
Le problème est que je passe bien dans la boucle, dans la fonction affichage, mais que rien ne se passe.
Si je fais qq chose comme ça en dur, ça marche ...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
tabTimers[0] = setInterval(function() { affichage(tabObjets[0]); }, 50);
    tabTimers[1] = setInterval(function() { affichage(tabObjets[1]); }, 60);
    tabTimers[2] = setInterval(function() { affichage(tabObjets[2]); }, 70);
    tabTimers[3] = setInterval(function() { affichage(tabObjets[3]); }, 80);
:
Help, je ne vois pas mon erreur !!!

De plus, y a-t-il une fonction capable de détecter la superposition des objets.

Merci beaucoup