Premere i pulsanti per spostare il smiley:
Come utilizzare immagini?
Per aggiungere le immagini su una tela, il getContext("2d") oggetto è dotato di proprietà e metodi di immagine.
Nel nostro gioco, per creare la gamepiece come immagine, utilizzare il costruttore componente, ma invece di fare riferimento a un colore, è necessario fare riferimento alla URL dell'immagine. E si deve 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 componente testiamo se il componente è di tipo "image" , e creare un oggetto immagine utilizzando il built-in "nuova Image() " costruttore dell'oggetto. Quando siamo pronti per disegnare l'immagine, usiamo il metodo drawImage anziché il 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);
}
}
}
Prova tu stesso " Modificare Immagini
È possibile cambiare l'immagine in qualsiasi momento modificando la src proprietà della image oggetto del componente.
Se si desidera modificare il ogni smiley si muove, cambia la fonte dell'immagine quando l'utente fa clic su un pulsante, e tornare alla normalità quando il pulsante non si fa clic:
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;
}
Prova tu stesso " immagini di sfondo
Aggiungere un'immagine di sfondo per l'area di gioco con l'aggiunta di esso come un componente, e aggiornare 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();
}
Prova tu stesso " sfondo in movimento
Modificare il componente di fondo speedX proprietà per fare la mossa di fondo:
Esempio
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Prova tu stesso " Background loop
Per rendere lo stesso loop sfondo per sempre, dobbiamo usare una tecnica specifica.
Inizia raccontando il costruttore componente che si tratta di uno sfondo. Il costruttore componente quindi aggiungere l'immagine due volte, posizionando la seconda immagine immediatamente dopo la prima immagine.
Nelle newPos() metodo, controlla se la x posizione del componente è raggiungere la fine dell'immagine, se ha, impostare la x posizione del componente a 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;
}
}
}
}
Prova tu stesso "