Images du jeu
Appuyez sur les boutons pour déplacer le smiley :
Comment utiliser les images ?
Pour ajouter des images sur un canevas, l'objet getContext("2d") possède des propriétés et des méthodes d'image intégrées.
Dans notre jeu, pour créer la pièce de jeu en tant qu'image, utilisez le constructeur du composant, mais au lieu de faire référence à une couleur, vous devez vous référer à l'url de l'image. Et vous devez dire au constructeur que ce composant est de type "image":
Exemple
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
Dans le constructeur de composant, nous testons si le composant est de type "image" et créons un objet image en utilisant le constructeur d'objet intégré "new Image()". Lorsque nous sommes prêts à dessiner l'image, nous utilisons la méthode drawImage au lieu de la méthode fillRect :
Exemple
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
}
Modifier les images
Vous pouvez changer l'image quand vous le souhaitez en changeant la srcpropriété de l' imageobjet de votre composant.
Si vous voulez changer le smiley à chaque fois qu'il se déplace, changez la source de l'image lorsque l'utilisateur clique sur un bouton, et revenez à la normale lorsque le bouton n'est pas cliqué :
Exemple
function move(dir) {
myGamePiece.image.src = "angry.gif";
if (dir == "up") {myGamePiece.speedY = -1; }
if (dir == "down") {myGamePiece.speedY = 1; }
if (dir == "left") {myGamePiece.speedX = -1; }
if (dir == "right") {myGamePiece.speedX = 1; }
}
function clearmove() {
myGamePiece.image.src = "smiley.gif";
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
Images d'arrière-plan
Ajoutez une image d'arrière-plan à votre zone de jeu en l'ajoutant en tant que composant, et mettez également à jour l'arrière-plan dans chaque cadre :
Exemple
var myGamePiece;
var myBackground;
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myBackground = new component(656, 270, "citymarket.jpg", 0, 0, "image");
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Arrière-plan mobile
Modifiez la speedXpropriété du composant d'arrière-plan pour faire bouger l'arrière-plan :
Exemple
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Boucle de fond
Pour faire indéfiniment la même boucle de fond, il faut utiliser une technique spécifique.
Commencez par dire au constructeur du composant qu'il s'agit d'un background . Le constructeur du composant ajoutera alors l'image deux fois, en plaçant la deuxième image immédiatement après la première image.
Dans la newPos()méthode, vérifiez si la xposition du composant a atteint la fin de l'image, si c'est le cas, réglez la xposition du composant à 0 :
Exemple
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image" || type == "background") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image" || type == "background") {
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
if (type == "background") {
ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
}
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
if (this.type == "background") {
if (this.x == -(this.width)) {
this.x = 0;
}
}
}
}