Drücken Sie die Tasten in den Smiley, sich zu bewegen:
Wie Sie Bilder verwenden?
So fügen Sie Bilder auf einer Leinwand, die getContext("2d") hat Objekt eingebaute Bild Eigenschaften und Methoden.
In unserem Spiel die gamepiece als ein Bild zu erstellen, verwenden Sie den Komponentenbauer, sondern zu einer Farbe bezieht, müssen Sie auf die URL des Bildes beziehen. Und Sie müssen den Konstruktor sagen , dass diese Komponente vom Typ "image" :
Beispiel
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif" ,
10, 120, "image" );
myGameArea.start();
}In der Komponente Konstruktor testen wir , ob die Komponente vom Typ "image" , und erstellen Sie ein Bildobjekt durch die eingebaute "neue Verwendung Image() " Objektkonstruktor. Wenn wir bereit sind, das Bild zu zeichnen, verwenden wir die drawImage Methode anstelle der fillRect Methode:
Beispiel
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);
}
}
}
Versuch es selber " ändern Images
Sie können das Bild zu ändern , wenn Sie durch Ändern der wie src - Eigenschaft des image Objekt Ihrer Komponente.
Wenn Sie den Smiley, jedes Mal ändern wollen es sich bewegt, ändern Sie die Bildquelle, wenn der Benutzer auf eine Schaltfläche klickt, und wieder normal, wenn die Schaltfläche nicht geklickt wird:
Beispiel
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;
}
Versuch es selber " background Images
Fügen Sie ein Hintergrundbild auf Ihrem Spielbereich, indem sie es als eine Komponente hinzufügen, und aktualisieren Sie auch den Hintergrund in jedem Frame:
Beispiel
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();
}
Versuch es selber " bewegenden Hintergrund
Ändern Sie den Hintergrund des Komponente speedX Eigentum in den Hintergrund zu machen:
Beispiel
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Versuch es selber " Hintergrundschleife
Um den gleichen Hintergrund Schleife machen für immer, müssen wir eine spezielle Technik verwenden.
Beginnen Sie mit der Komponente Konstruktor zu sagen , dass dies ein Hintergrund ist. Die Komponente Konstruktor fügt dann das Bild zweimal, das zweite Bild unmittelbar nach dem ersten Bild platzieren.
In den newPos() Methode, überprüfen , ob die x Position des Bauteils , das Ende des Bildes hat sich erreichen, wenn er die hat, stellen x Position des Bauteils auf 0:
Beispiel
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;
}
}
}
}
Versuch es selber "