Spielbilder
Drücken Sie die Tasten, um den Smiley zu bewegen:
Wie verwende ich Bilder?
Um Bilder auf einer Leinwand hinzuzufügen, verfügt das getContext("2d")-Objekt über integrierte Bildeigenschaften und -methoden.
Um in unserem Spiel das Gamepiece als Bild zu erstellen, verwenden Sie den Komponentenkonstruktor, aber anstatt auf eine Farbe zu verweisen, müssen Sie auf die URL des Bildes verweisen. Und Sie müssen dem Konstruktor mitteilen, dass diese Komponente vom Typ "image" ist:
Beispiel
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
Im Komponentenkonstruktor testen wir, ob die Komponente vom Typ "Bild" ist, und erstellen ein Bildobjekt, indem wir den eingebauten "new Image()"-Objektkonstruktor verwenden. Wenn wir bereit sind, das Bild zu zeichnen, verwenden wir die Methode drawImage anstelle der Methode fillRect:
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);
}
}
}
Bilder ändern
Sie können das Bild jederzeit ändern, indem Sie die srcEigenschaft des imageObjekts Ihrer Komponente ändern.
Wenn Sie den Smiley jedes Mal ändern möchten, wenn er sich bewegt, ändern Sie die Bildquelle, wenn der Benutzer auf eine Schaltfläche klickt, und kehren Sie zum Normalzustand zurück, wenn die Schaltfläche nicht angeklickt 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;
}
Hintergrundbilder
Fügen Sie Ihrem Spielbereich ein Hintergrundbild hinzu, indem Sie es als 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();
}
Bewegter Hintergrund
Ändern Sie die speedXEigenschaft der Hintergrundkomponente, damit sich der Hintergrund bewegt:
Beispiel
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Hintergrundschleife
Um für immer dieselbe Hintergrundschleife zu erstellen, müssen wir eine bestimmte Technik verwenden.
Beginnen Sie damit, dem Komponentenkonstruktor mitzuteilen, dass dies ein Hintergrund ist . Der Komponentenkonstruktor fügt das Bild dann zweimal hinzu und platziert das zweite Bild direkt hinter dem ersten Bild.
Überprüfen Sie in der newPos()Methode, ob die xPosition der Komponente das Ende des Bildes erreicht hat. Wenn dies der Fall ist, setzen Sie die xPosition der Komponente 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;
}
}
}
}