Bonjour à tous,
je suis nouvelle sur ce forum et je débute en javascript.
Afin de m'exercer je voudrais faire défiler plusieurs images horizontalement à la suite avec canvas.
Pour ce faire j'ai deux fichiers, le premier index.html et le second game.js.

Je pense que les fonctions que j'ai créées fonctionnent excepté la méthode draw où l'image ne s'affiche pas avec la fonction drawImage.

Merci de m'éclairer si possible

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
	<head>
		<title>Butterfly</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/game.js"></script>
	</head>
	<body>
		<canvas id="canvas" width="800px" height="600px"></canvas>
 
	</body>
</html>

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
var butterflyArray = [];
 var ctx;
 
 
window.addEventListener('load', function () {
 
ctx = document.getElementById("canvas"); 
 
  var line1 = new line({nb:1, 
                              posX : 30,
			      posY: 30,  
                              direction : -1, 
                              minspace : 32, 
                              maxspace : 96, 
                              speed : 2});
 
  for(var i=0;i<7;i++)
  {
    var butterfly = new animal(line1, 64);
    butterflyArray.push(butterfly);
    ctx.appendChild(butterfly.image);
 
  }
 
 
}, false);
 
function line(elements)
{
  this.nb = elements.nb;
  this.direction = elements.direction;
  this.minspace = elements.minspace;
  this.maxspace = elements.maxspace;
  this.speed = elements.speed;
  this.posX = elements.posX;
  this.posY = elements.posY;
  this.lastanimal;
 
  this.getNextPosX = function(animal)
  {
    var space = Math.floor(Math.random()*(this.maxspace-this.minspace)) + this.minspace;
    var lastPosX = 0;
    if (this.lastanimal)
    {
      lastPosX = this.direction == -1? this.lastanimal.posX + this.lastanimal.width + space : this.lastanimal.posX - space - animal.width;
    }
    else
    {
      lastPosX = this.posX;
    }
    this.lastanimal = animal;
 
    return lastPosX;
  }
}
 
function animal(myLine, width)
{
 
  this.width = width;
  this.myLine = myLine; 
  this.posY = this.myLine.posY;
  this.posX = this.myLine.getNextPosX(this);
 
 
  this.move = function()
  {
    this.posX = this.myLine.direction == 1? this.posX + this.myLine.speed : this.posX -  this.myLine.speed;
    if ((this.myLine.direction == 1 && this.posX >= 800) || (this.myLine.direction == -1 && this.posX < (-this.width)))
    {
      this.posX = this.myLine.getNextPosX(this);
    }
  }
  this.draw = function()
  {
	this.image = new Image()		
	this.image.src = 'images/butterfly.png';
   ctx.drawImage(this.image, this.posX, this.posY);
  }
}   
 
 
setInterval(function(){for (var e=0; e < butterflyArray.length;e++){butterflyArray[e].move(); butterflyArray[e].draw();}}, 80);