Jeux en canvas et javascript

**mOscar007** · 15/12/2014, 14h18

Bonjour,
Je travaille sur un jeu qui s'appelle Space Invaders que vs connaissez probablement. Mon objectif est de dessiner des "Aliens" en utilisant canvas et Javascript. Je m'aimerai animer ces aliens dans un rectangle canvas pour qu'ils se d�placent verticalement de haut en bas. Un fois que les aliens disparaissent en bas, ils r�apparaissent automatiquement en haut et continuent leurs mouvements.

J'ai r�ussit � le faire avec un seul "Alien", mais je n'arrive pas � le faire avec plusieurs "Aliens" que j'ai cr�e dans un tableau en JS avec leurs coordonn�es (x,y).

Je travaille en HTML5 et Javascript. Je n'utilise pas de framework. Je travaille sur le navigateur "Google Chrome" et j'utilise "Mozila" pour pour faire des tests.

Je montre mes codes dans les deux cas de figures, en esp�rant que quelqu'un pourrait me donner un astuce. Merci!

Code canvas et Js avec un seul "Alien":

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
 
<body onload="initialisations();"> 
 
<canvas id="canvas"></canvas> 
<script> 
var largeur = 600; 
var hauteur = 400; 
var canvas; 
var context; 
var x = 100; 
var y = 100; 
var unit = 7; 
var bras_en_bas = true; 
 
function affiche_alien () { 
 
if (bras_en_bas) { 
context.fillRect(x, y+4*unit, unit, 3*unit); 
context.fillRect(x+10*unit, y+4*unit, unit, 3*unit); 
bras_en_bas = false; 
} else { 
context.fillRect(x, y+1*unit, unit, 3*unit); 
context.fillRect(x+10*unit, y+1*unit, unit, 3*unit); 
bras_en_bas = true; 
} 
 
context.fillRect(x+2*unit, y+2*unit, 7*unit, unit); 
 
context.fillRect(x+1*unit, y+3*unit, unit, 2*unit); 
context.fillRect(x+9*unit, y+3*unit, unit, 2*unit); 
 
context.fillRect(x+2*unit, y, unit, unit); 
context.fillRect(x+8*unit, y, unit, unit); 
 
context.fillRect(x+2*unit, y+2*unit, unit, 5*unit); 
context.fillRect(x+8*unit, y+2*unit, unit, 5*unit); 
 
context.fillRect(x+3*unit, y+1*unit, unit, 2*unit); 
context.fillRect(x+7*unit, y+1*unit, unit, 2*unit); 
 
context.fillRect(x+4*unit, y+2*unit, 3*unit, 2*unit); 
 
context.fillRect(x+3*unit, y+4*unit, 5*unit, 2*unit); 
 
context.fillRect(x+3*unit, y+7*unit, 2*unit, unit); 
context.fillRect(x+6*unit, y+7*unit, 2*unit, unit); 
 
} 
 
function efface_alien () { 
context.clearRect(x, y, 11*unit, 8*unit); 
} 
 
function animate () { 
efface_alien(); 
 
y = y + 11*unit; 
 
if (y > hauteur) { 
y = 0; 
} 
 
affiche_alien(); 
} 
function initialisations () { 
canvas = document.getElementById('canvas'); 
// Définition taille canvas 
canvas.setAttribute('width', largeur); 
canvas.setAttribute('height', hauteur); 
 
context = canvas.getContext('2d'); 
 
var verticale = setInterval('animate();', 200); 
} 
</script> 
</body> 
 
Code canvas et Js pour pour afficher plusieur "Aliens": 
 
<body onload="initialisations();"> 
 
<canvas id="canvas"></canvas> 
<script> 
var largeur = 600; 
var hauteur = 400; 
var canvas; 
var context; 
var x = [28,127,222,300]; 
var y = [28,127,222]; 
var unit = 5; 
var bras_en_bas = true; 
 
function affiche_alien () { 
for (var i = 0; i < x.length; i++) { 
for (var j = 0; j < y.length; j++) { 
 
if (bras_en_bas) { 
context.fillRect(x[i], y[j] + 4*unit, unit, 3*unit); // Premier bras 
context.fillRect(x[i] + 10*unit, y[j] + 4*unit, unit, 3*unit); // Deuxieme bras 
bras_en_bas = false; 
} else { 
context.fillRect(x[i], y[j] + 1*unit, unit, 3*unit); // Premier pas 
context.fillRect(x[i] + 10*unit, y[j] + 1*unit, unit, 3*unit); // bras 2 
bras_en_bas = true; 
} 
 
context.fillRect(x[i] + 2*unit, y[j] + 2*unit, 7*unit, unit); 
 
context.fillRect(x[i] + 1*unit, y[j] + 3*unit, unit, 2*unit); 
context.fillRect(x[i] + 9*unit, y[j] + 3*unit, unit, 2*unit); 
 
context.fillRect(x[i] + 2*unit, y[j], unit, unit); 
context.fillRect(x[i] + 8*unit, y[j], unit, unit); 
 
context.fillRect(x[i] + 2*unit, y[j] + 2*unit, unit, 5*unit); 
context.fillRect(x[i] + 8*unit, y[j] + 2*unit, unit, 5*unit); 
 
context.fillRect(x[i] + 3*unit, y[j] + 1*unit, unit, 2*unit); 
context.fillRect(x[i] + 7*unit, y[j] + 1*unit, unit, 2*unit); 
 
context.fillRect(x[i] + 4*unit, y[j] + 2*unit, 3*unit, 2*unit); 
 
context.fillRect(x[i] + 3*unit, y[j] + 4*unit, 5*unit, 2*unit); 
 
context.fillRect(x[i] + 3*unit, y[j] + 7*unit, 2*unit, unit); 
context.fillRect(x[i] + 6*unit, y[j] + 7*unit, 2*unit, unit); 
} 
} 
} 
 
function efface_alien () { 
context.clearRect(x, y, 11*unit, 8*unit); 
} 
 
function animate () { 
efface_alien(); 
 
y[j] = y[j] + 11*unit; 
if (y[j] > hauteur) { 
y[j] = 0; 
} 
affiche_alien(); 
} 
 
function initialisations () { 
canvas = document.getElementById('canvas'); 
// Définition taille canvas 
canvas.setAttribute('width', largeur); 
canvas.setAttribute('height', hauteur); 
 
context = canvas.getContext('2d'); 
 
setInterval('animate();', 200); 
 
} 
</script> 
</body>

**lysandro** · 15/12/2014, 17h21

En partant du code "un seul alien" et pour d�marrer, une proposition :

Code javascript :

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
...
// à la place des tableaux x[] et y[].
// j'ai supposé que la position des bras était propre à l'alien
var aliens = [ 
    { x:28,  y:28,  bras_en_bas:true },
    { x:127, y:127, bras_en_bas:true },
    ...
];
...
// var bras_en_bas = true; // n'est plus utilisé (cf plus haut)
...
 
// ajout
// affiche tous les aliens connus, le contenu du tableau aliens[]
function affiche_aliens () { 
    for ( var i = 0; i < aliens.length; ++i ) {
        affiche_alien(aliens[i]);
    }
}
 
// modification
// affiche un seul alien, celui passé en argument de la fonction 'affiche_alien'
function affiche_alien ( alien ) {
    if (alien == null || typeof alien != "object") {
        alert("affiche_alien : alien n'est pas un objet");
        return;
    }
 
    if (alien.bras_en_bas) { 
        context.fillRect(alien.x, alien.y + 4*unit, unit, 3*unit); // Premier bras 
        ...
        alien.bras_en_bas = false;
    } else {
        ...
        alien.bras_en_bas = true;
    }
    ...
}
...

**mOscar007** · 17/12/2014, 15h13

Bonjour Lysandro,

Je te remercie de la r�ponse apport�e � mon sujet.
J'ai pris en compte le code que tu m'as propos�, je suis encours de modification.
Je reviendrai d�s que possible en cas de dysfonctionnement ou erreurs quelconque.

Merci encore du temps consacr�!

**mOscar007** · 18/12/2014, 13h50

Bonjour Lysandro,

J'ai test� avec ton code mais c'est toujours le statu quo. Je n'ai pas trouv� la solution � mon probl�me, les "aliens" ne bougent pas.
Ton code m'a permis de voir un peu plus clair dans le mien. Il m'a permis mtn de modifier ind�pendamment mes "aliens". Maintenant, j'ai
besoin qu'ils descendent et bouclent verticalement. S'ils touchent le bord bas, ils r�apparaissent automatiquement en haut et continuent leur
mouvement.

Voil� le code de ma fonction (animate()) modifi�:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
function animate () {
	efface_aliens();
	aliens.y =  aliens.y + 11*unit;
        if (aliens.y > hauteur) {
	      aliens.y = 0;
	} 
}

**lysandro** · 18/12/2014, 14h14

J'aurais du m'expliquer un peu plus. C'�tait une proposition de mod�le.
Puisque ton code � un seul alien fonctionne, pour passer � un code plusieurs aliens :
- tu r��cris tes fonctions pour un seul alien en leur passant en argument, l'alien : l'exemple de la fonction 'affiche_alien(alien)'
- puis, tu �cris de nouvelles fonctions qui s'occupent d'appeler les fonctions pour un seul alien sur tous les aliens connus : 'affiche_aliens()'.

Donc ta fonction 'animate', aurait du devenir deux fonctions : 'animate_aliens()', pour tous les aliens, et 'animate_alien(alien)', pour un seul alien, sur le m�me mod�le.

Si ce n'est pas clair, je te donnerais un exemple avec ton code.

Si la notion d'objets (ou de prototypes) te parle, on peut aussi le programmer autrement.

**mOscar007** · 18/12/2014, 17h56

Oui, je pr�f�re avec un exemple.
Je n'ai pas tr�s bien compris.
Je ne ma�trise pas bcp la notion d'objets.
Merci!

Jeux en canvas et javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager