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