[JS] Projet GuitarHero, on continue!

**kilou_style** · 20/09/2009, 11h27

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 :

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
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

**DoubleU** · 21/09/2009, 11h19

Pour supprimer un élément du DOM, tu récupères son parent et tu supprimes l'élément. Par exemple:

Code :

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

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 :

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

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

**kilou_style** · 21/09/2009, 18h44

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 :

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
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

**DoubleU** · 22/09/2009, 09h58

Code :

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

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.

**kilou_style** · 22/09/2009, 11h07

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

Code :

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

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

**DoubleU** · 22/09/2009, 14h40

Pourquoi tu veux supprimer ton image en fait, je ne suis pas sur d'avoir compris?

[JS] Projet GuitarHero, on continue!

JavaScript

Vue hybride

Discussions similaires

Partager

Partager