Immagini di gioco
Premi i pulsanti per spostare lo smile:
Come utilizzare le immagini?
Per aggiungere immagini su una tela, l'oggetto getContext("2d") dispone di proprietà e metodi dell'immagine incorporati.
Nel nostro gioco, per creare il gamepiece come immagine, usa il costruttore del componente, ma invece di fare riferimento a un colore, devi fare riferimento all'url dell'immagine. E devi dire al costruttore che questo componente è di tipo "image":
Esempio
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
Nel costruttore del componente testiamo se il componente è di tipo "image" e creiamo un oggetto immagine utilizzando il costruttore di oggetti integrato "new Image()". Quando siamo pronti per disegnare l'immagine, utilizziamo il metodo drawImage invece del metodo fillRect:
Esempio
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);
}
}
}
Cambia immagini
Puoi cambiare l'immagine quando vuoi modificando le srcproprietà imagedell'oggetto del tuo componente.
Se vuoi cambiare la faccina ogni volta che si muove, cambia l'origine dell'immagine quando l'utente fa clic su un pulsante e torna alla normalità quando il pulsante non viene cliccato:
Esempio
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;
}
Immagini di sfondo
Aggiungi un'immagine di sfondo alla tua area di gioco aggiungendola come componente e aggiorna anche lo sfondo in ogni fotogramma:
Esempio
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();
}
Sfondo in movimento
Modificare la speedXproprietà del componente di sfondo per spostare lo sfondo:
Esempio
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Ciclo di sfondo
Per creare lo stesso loop di sfondo per sempre, dobbiamo usare una tecnica specifica.
Inizia dicendo al costruttore del componente che si tratta di uno sfondo . Il costruttore del componente aggiungerà quindi l'immagine due volte, posizionando la seconda immagine immediatamente dopo la prima immagine.
Nel newPos()metodo, controlla se la xposizione del componente ha raggiunto la fine dell'immagine, in tal caso, imposta la xposizione del componente su 0:
Esempio
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;
}
}
}
}