Appuyez sur les boutons pour déplacer le smiley:
Comment faire pour utiliser les images?
Pour ajouter des images sur une toile, le getContext("2d") objet a intégré propriétés et méthodes image.
Dans notre jeu, pour créer le gamepiece comme une image, utilisez le constructeur composant, mais au lieu de se référer à 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 du composant , nous testons si le composant est de type "image" , et de créer un objet d'image en utilisant le built-in "nouvelle Image() " constructeur de l' objet. 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);
}
}
}
Essayez - le vous - même » Changer Images
Vous pouvez changer l'image chaque fois que vous le souhaitez en changeant la src propriété de l' image de l' objet de votre composant.
Si vous voulez changer le smiley à chaque fois qu'il se déplace, changer la source d'image lorsque l'utilisateur clique sur un bouton, et revenir à la normale lorsque le bouton est 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;
}
Essayez - le vous - même » Contexte Images
Ajouter une image de fond à votre zone de jeu en ajoutant comme un composant, et mettre à jour également l'arrière-plan dans chaque image:
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();
}
Essayez - le vous - même » Contexte Déménagement
Changer de la composante de fond speedX la propriété pour faire bouger de fond:
Exemple
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Essayez - le vous - même » Contexte boucle
Pour faire la même boucle de fond pour toujours, nous devons utiliser une technique spécifique.
Commencez par dire le constructeur composant que ce soit un fond. Le constructeur de composant puis ajouter l'image à deux reprises, en plaçant immédiatement la deuxième image après la première image.
Dans les newPos() méthode, vérifier si la x position du composant a atteint la fin de l'image, si elle a, régler la x position 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;
}
}
}
}
Essayez - le vous - même »