Discussion :

[loustalet]

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

[mh-cbon]

Bonjour,

As tu effectué l'appel de la fonction go ?

Peux tu mettre à jour ton code ainsi et nous dire si tout est bon pour toi :

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
 
 
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=950+(10*i);
// changement ici
        tabTimers[i] = setInterval(function(){
        console.log(i);
        affichage(tabObjets[i]); }, z);
// changement ici
    }
}

http://stackoverflow.com/questions/1...ous-loop-issue

[mh-cbon]

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

Non. Il faut que tu fasses des calculs de colllisions à chaque itération de la boucle d'affichage pour savoir si tel objet en surperpose un autre.

Du coup, ca vaut le coup d'utiliser des frameworks dédiés pour ce genre de tâche.

[loustalet]

Merci pour les réponses, effectivement dans la console j'ai ceci :



En fait, il n'accède pas aux propriétés de l'objet objet dans affichage quand je suis dans la boucle !
Y a-t-il un mécanisme de mappage ? ça pourrait venir de là ! (object)objet ?

Merci pour votre aide

[loustalet]

effectivement je pense qu'un framework ferait ça très bien !
Merci

[loustalet]

J'ai rogressé, mais je ne comprends pas ce qui se passe
Voici le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
for (i = 0; i < nbformes; i++) {
        z = 50 + 10 * i;
        unObj=tabObjets[i];
        tabTimers[i] = setInterval(function() { affichage(unObj); }, 50);
        unObj=null;
    }
    i=0;
    unObj=tabObjets[i];
    tabTimers[i] = setInterval(function() { affichage(unObj); }, 50);

En fait quand je suis dans la boucle, il n'appelle pas la fonction affiche, qund je suis sorti de la boucle, sur la partie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
i=0;
    unObj=tabObjets[i];
    tabTimers[i] = setInterval(function() { affichage(unObj); }, 50);

Il rentre dans la boucle !
Et pourtant copier/coller de l'instruction setInterval !!!
Merci pour les explications je ne comprends pas ce qu'il se passe !!!