[JS] Projet GuitarHero, on continue!

Version imprimable

Rebonjour,
voilà j'avais déjà posté un message concernant mon projet en JS d'un Guitar hero. J'ai relativement avancé ( je trouve) pour mon niveau mais j'ai plusieurs problèmes qui subsistent:

Voici le code:

Code:

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Projet_image/projet_fin</title>
        <style type="text/css">
            #zone_jeu
            {
            height:605px;
            width:448px;
            }
        </style>
        <script type="text/javascript">
            var compteur_bouton=1;
            var bouts;
            bouts= new Array();
 
 
            function creer_bouton()
        {
                //choix de la colonne
                var marge
                var random=parseInt(Math.random()*4.99);
                switch(random){
                    case 0:
                    marge=1
                    break
                    case 1:
                    marge=2
                    break
                    case 2:
                    marge=3
                    break
                    case 3:
                    marge=4
                    break
                    case 4:
                    marge=5
                    break
                    default:
                    marge=1
                }
                //créer image selon la colonne avec différentes couleurs
                var image;
                image = document.createElement('img');
                image.setAttribute('id',compteur_bouton)
                switch(marge){
                    case 1:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_vert_100%25.svg/200px-Cercle_vert_100%25.svg.png')
                    break
                    case 2:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_rouge_100%25.svg/200px-Cercle_rouge_100%25.svg.png')
                    break
                    case 3:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_jaune_100%25.svg/200px-Cercle_jaune_100%25.svg.png')
                    break
                    case 4:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_bleu_100%25.svg/200px-Cercle_bleu_100%25.svg.png')
                    break
                    case 5:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_noir_100%25.svg/200px-Cercle_noir_100%25.svg.png')
                    break
                    default:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_vert_100%25.svg/200px-Cercle_vert_100%25.svg.png')
                }
                var marge=marge*75;
                image.setAttribute('height','40px')
                image.setAttribute('style','position:absolute')
                document.getElementById('zone_jeu').appendChild(image)
                document.getElementById(compteur_bouton).style.left=marge+'px';
                document.getElementById(compteur_bouton).style.top='40px';
                compteur_bouton++;
                bouts.push(image); // on met l'image dans le tableau
 
            }
 
            function bouger()
            {
            for(var i=0;i<bouts.length;i++)
                {
                bouts[i].style.top += 2+'px'; // VOICI MON PROBEME (1)
                if (bouts[i].style.top>600+'px')
                    {
                    document.getElementById('zone_jeu').removeChild(bouts[i].image); //PROBLEME (2)
                    }
                }
 
            }
 
            function aleatoire() // on fait un test pour savoir aléatoirement si l'on crée ou non un bouton
        {
                var random=parseInt(Math.random()*100.99);
                if( random==1)
            {
                    creer_bouton()
                }
            }
            function run()
        {
                aleatoire();
                bouger();
                setTimeout("run()",1);
            }
        </script>
    </head>
    <body>
        <button onclick='run()'>Lancer le jeu</button>
        <div id="zone_jeu">
        </div>
    </body>
</html>

Mon 1er problème se situe au niveau du déplacement des images. En effet, je sais pas comment faire pour ajouté 2px à la position précédente :S
Mon 2ème problème est lorsque je veux détruire l'image.

Merci beaucoup à tous ceux qui accordent de l'importance à mon projet.
BOn dimanche

Kil

21/09/2009, 11h19
DoubleU
Pour supprimer un élément du DOM, tu récupères son parent et tu supprimes l'élément. Par exemple:

Code:

image.parentNode.removeChild(image);

Pour déplacer ton image, tu étais bien parti , sauf que bouts[i].style.top te renverra "40px". Il te faut supprimer le "px" et convertir le résultat en entier avant de faire ton addition :
Code:

1 2 3 4 var nb = bouts[i].style.top; nb = parseInt(nb.replace("px",""); nb+=2; bouts[i].style.top = nb + "px";

Salut, merci beaucoup DoubleU,
Ca m'a vraiment aider, je comprenais pas comment enlever le px... ouf la tu me soulages d'un énorme poids !!!
Juste encore un petit problème... si ca te dérange pas de m'aider encore un tout petit peu:

Code:

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Projet_image/projet_fin</title>
        <style type="text/css">
            #zone_jeu
            {
            height:700px;
            width:448px;
            background:url('Projet_fond.jpg') no-repeat;
            margin-left:37px;
            }
        </style>
        <script type="text/javascript">
            var point=0;
            var compteur_bouton=1;
            var bouts;
            bouts= new Array();
 
            function creer_bouton() // CREER UN BOUTON
        {
                //choix de la colonne
                var marge
                var random=parseInt(Math.random()*4.99);
                switch(random){
                    case 0:
                    marge=1
                    break
                    case 1:
                    marge=2
                    break
                    case 2:
                    marge=3
                    break
                    case 3:
                    marge=4
                    break
                    case 4:
                    marge=5
                    break
                    default:
                    marge=1
                }
                //créer image
                var image;
                image = document.createElement('img');
                image.setAttribute('id',compteur_bouton)
                switch(marge){
                    case 1:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_vert_100%25.svg/200px-Cercle_vert_100%25.svg.png')
                    break
                    case 2:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_rouge_100%25.svg/200px-Cercle_rouge_100%25.svg.png')
                    break
                    case 3:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_jaune_100%25.svg/200px-Cercle_jaune_100%25.svg.png')
                    break
                    case 4:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_bleu_100%25.svg/200px-Cercle_bleu_100%25.svg.png')
                    break
                    case 5:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_noir_100%25.svg/200px-Cercle_noir_100%25.svg.png')
                    break
                    default:
                    image.setAttribute('src','http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cercle_vert_100%25.svg/200px-Cercle_vert_100%25.svg.png')
                }
                var marge=marge*75;
                image.setAttribute('height','40px')
                image.setAttribute('style','position:absolute')
                document.getElementById('zone_jeu').appendChild(image)
                document.getElementById(compteur_bouton).style.left=marge+'px';
                document.getElementById(compteur_bouton).style.top='39px';
                compteur_bouton++;
                bouts.push(image);
            }
 
            function bouger() // BOUGER LES TOUCHES
            {
                for(var i=0;i<bouts.length;i++)
                {
                    var nb=bouts[i].style.top;
                    nb=parseInt(nb.replace("px",""));
                    nb+=2;
                    bouts[i].style.top=nb+'px';
                    if (nb>625)
                    {
                    }
                }
            }
            // FONCTIONS ALEATOIRES D APPARITION
            function aleatoire_expert()
        {
                var random=parseInt(Math.random()*25.99);
                if( random==1)
            {
                    creer_bouton()
                }
            }
            function aleatoire_debut()
        {
                var random=parseInt(Math.random()*100.99);
                if( random==1)
            {
                    creer_bouton()
                }
            }
            function aleatoire_medium()
        {
                var random=parseInt(Math.random()*75.99);
                if( random==1)
            {
                    creer_bouton()
                }
            }
            function aleatoire_dur()
        {
                var random=parseInt(Math.random()*50.99);
                if( random==1)
            {
                    creer_bouton()
                }
            }
            //FONCTION DEPART SELON LA DIFFICULTE
            function run_debut()
        {
                aleatoire_debut();
                bouger();
                setTimeout("run_debut()",1);
            }
            function run_medium()
        {
                aleatoire_medium();
                bouger();
                setTimeout("run_medium()",1);
            }
            function run_dur()
        {
                aleatoire_dur();
                bouger();
                setTimeout("run_dur()",1);
            }
            function run_expert()
        {
                aleatoire_expert();
                bouger();
                document.getElementById('point').innerHTML=point;
                setTimeout("run_expert()",1);
            }
 
            //VALIDATION DES TOUCHES
             function valid(event)
        {
                var touchKeyPress = (window.Event)?event.which:event.keyPress;
                var touche = String.fromCharCode(touchKeyPress);
                if(touche == 'a')
                {
                    for(var i=0;i<bouts.length;i++)
                    {
                        var haut=bouts[i].style.top;
                        haut=parseInt(haut.replace("px",""));
                        var gauche=bouts[i].style.left;
                        gauche=parseInt(gauche.replace("px",""));
                        if( gauche==75 && haut>595 && haut<625)
                         {
                            point++;
                          }
                    }
                }
                if(touche == 's')
                {
                for(var i=0;i<bouts.length;i++)
                    {
                        var haut=bouts[i].style.top;
                        haut=parseInt(haut.replace("px",""));
                        var gauche=bouts[i].style.left;
                        gauche=parseInt(gauche.replace("px",""));
                        if( gauche==150 && haut>595 && haut<625)
                         {
                            point++;
                          }
                    }
                }
                if(touche == 'd')
                {
                for(var i=0;i<bouts.length;i++)
                    {
                        var haut=bouts[i].style.top;
                        haut=parseInt(haut.replace("px",""));
                        var gauche=bouts[i].style.left;
                        gauche=parseInt(gauche.replace("px",""));
                        if( gauche==225 && haut>595 && haut<625)
                         {
                            point++;
                          }
                    }
                }
                if(touche == 'f')
                {
                for(var i=0;i<bouts.length;i++)
                    {
                        var haut=bouts[i].style.top;
                        haut=parseInt(haut.replace("px",""));
                        var gauche=bouts[i].style.left;
                        gauche=parseInt(gauche.replace("px",""));
                        if( gauche==300 && haut>595 && haut<625)
                         {
                            point++;
                          }
                    }
                }
                if(touche == 'g')
                {
                for(var i=0;i<bouts.length;i++)
                    {
                        var haut=bouts[i].style.top;
                        haut=parseInt(haut.replace("px",""));
                        var gauche=bouts[i].style.left;
                        gauche=parseInt(gauche.replace("px",""));
                        if( gauche==375 && haut>595 && haut<625)
                         {
                            point++;
                          }
                    }
                }
            }
        </script>
    </head>
    <body onKeyPress="valid(event)">
        Lancer le jeu en mode : 
<button onclick="run_debut()">Débutant</button>
<button onclick="run_medium()">Moyen</button>
<button onclick="run_dur()">Difficile</button>
<button onclick="run_expert()">Expert</button>
 
        <div id="zone_jeu">
        </div>
        Vous avez:
        <div id="point">
        0
        </div>
    </body>
</html>

J'ai toujours un petit problème, je comprend pas trop comment marche la fonction pour supprimer l'élément... si tu pouvais juste m'éclairer sur ce point je t en serais vraiment reconnaissant...
merci beaucoup pour ce que tu as fait :)

22/09/2009, 09h58
DoubleU

Code:

image.parentNode.removeChild(image);

Image représente l'objet que tu veux supprimer (que tu auras récupéré via un getElementById par exemple).
Image.parentNode représente le noeud parent de image dans le DOM.
image.parentNode.removeChild(image) retire le noeud image à son parent.

Voilà, j'ai fait ce que tu as dit:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
for(var i=0;i<bouts.length;i++)
                {
                    var nb=bouts[i].style.top;
                    nb=parseInt(nb.replace("px",""));
                    nb+=2;
                    bouts[i].style.top=nb+'px';
                    if (nb>625)
                    {
                        var image=bouts[i];
                        image.parentNode.removeChild(image);
                    }
                }

sauf que là encore, problème, la fonction s'arrête... enfin plus rien ne bouge. :/ merci

22/09/2009, 14h40
DoubleU

Pourquoi tu veux supprimer ton image en fait, je ne suis pas sur d'avoir compris?
22/09/2009, 15h18
kilou_style

Voilà, j'ai résolu le problème en utilisant :

document.getElementById('zone_jeu').removeChild(bouts[i])
bouts.splice(i,1)

J'en avais besoin afin que lorsque la note qui tombe atteigne une certaine limite, elle disparaisse et ne continue pas à l'infini. ;)

Voilà, il me reste quelques problèmes mais j'essayerai de les résoudre seul.

Merci beaucoup à toi doubleU.