Bonjour tous le monde,

Je suis mené à faire un travail qui comporte plusieurs phases, dont voici l'essentiel :
1. Création d'un canvas (le dessiner) qui contient un alien
2. faire défiler cet alien verticalement, le faire disparaître une fois arrivé en bas de mon canvas et le faire réapparaître en haut du canvas
3. On généralise les étapes précédentes pour obtenir plusieurs aliens qui descendent et bouclent verticalement.
4.Il s'agit à cette étape de repérer le leader chez les aliens, en l'occurrence l'alien le plus proche du sol. Une fois identifié, cet alien doit être différencié, par exemple en le faisant apparaître d'une couleur différente des autres.
5.Dessiner le sol de la planète. Un alien ne doit plus boucler verticalement mais s'arrêter lorsqu'il touche le sol. À cet instant, le jeu doit prendre fin, en particulier tous les aliens doivent s'immobiliser.
6.Utilisation de la souris par le joueur afin de détruire les liens qui défilent, cela fait le disparaître et en même temps un autre identique apparaît en haut.

Jusqu'à maintenant, j'ai réussi à faire les deux premières étapes, mais je n'arrive pas à faire les autres étapes c'est-à-dire à partir de la 3ème étape.
Voici le code des deux premières étapes :
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Alien</title>
<script>
/*Défition des variables pour le canvas */
var context;
var canvas;
var unit =10;
var x = 100;
var y = 10; 
 
 
function efface_alien () {
	context.clearRect(x,y,11*unit,8*unit);
}
 
/*Fonction qui affiche l'alien dans le canevas */
function affiche_alien () {
 
	context.fillRect(x+2*unit,y,unit,unit);
	context.fillRect(x+3*unit,y+1*unit,unit,unit);
	context.fillRect(x+7*unit,y+1*unit,unit,unit);
	context.fillRect(x+2*unit,y+2*unit,7*unit,unit,unit);
	context.fillRect(x+1*unit,y+3*unit,unit,unit);
	context.fillRect(x+2*unit,y+3*unit,unit,unit);
	context.fillRect(x+4*unit,y+3*unit,unit,unit);
	context.fillRect(x+5*unit,y+3*unit,unit,unit);
	context.fillRect(x+6*unit,y+3*unit,unit,unit);
	context.fillRect(x+8*unit,y+3*unit,unit,unit);
	context.fillRect(x+9*unit,y+3*unit,unit,unit);
	context.fillRect(x+0*unit,y+5*unit,unit,unit);
	context.fillRect(x+0*unit,y+6*unit,unit,unit);
	context.fillRect(x+2*unit,y+5*unit,unit,unit);
	context.fillRect(x+2*unit,y+6*unit,unit,unit);
	context.fillRect(x+8*unit,y+5*unit,unit,unit);
	context.fillRect(x+8*unit,y+6*unit,unit,unit);
	context.fillRect(x+8*unit,y,unit,unit);
	context.fillRect(x,y+4*unit,11*unit,unit);
	context.fillRect(x+10*unit,y+6*unit,unit,unit);
	context.fillRect(x+10*unit,y+5*unit,unit,unit);
 
}
 
/*Affichage de l'alien qui bouge verticalement */
function bouge_alien () {
  efface_alien();
 
	y = y + 20;
	if (y > 600) {
		y=10;
	}
 
	affiche_alien();
}
 
function initialisations () {
	canvas = document.getElementById('world');
	context = canvas.getContext ("2d");
 
	setInterval('bouge_alien();',100);
}
 
</script>
</head>
 
<body onload="initialisations();">
 
<canvas id="world" width="600" height="400" style="border: 1px solid #000">
 
</canvas>
</body>
</html>
Merci pour votre aide et vos explications qui seront les bienvenues !
A très bientôt