Spiel-Bilder

Drücken Sie die Schaltfläche, um das Lächeln zu bewegen:

Wie verwendet man Bilder?

Um ein Bild auf der Leinwand hinzuzufügen, verwenden Sie die internen Bildattribute und Methoden des getContext("2d")-Objekts.

Um ein Spielteil als Bild zu erstellen, verwenden Sie den Komponentenkonstruktor in unserem Spiel, aber Sie müssen die URL des Bildes referenzieren, nicht die Farbe. Und Sie müssen dem Konstruktor mitteilen, dass der Typ der Komponente "image" ist:

function component(width, height, color, x, y, type) {

function startGame() {
  myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
  myGameArea.start();
}

Im Konstruktor des Komponentenobjekts testen wir, ob das Komponentenobjekt dem "image"-Typ angehört, und verwenden den Konstruktor des internen "new Image()"-Objekts, um ein Bildobjekt zu erstellen. Wenn wir das Bild zeichnen vorbereiten, verwenden wir die drawImage-Methode anstatt der fillRect-Methode:

function component(width, height, color, x, y, type) {

this.type = type;
  if (type == "image" ||
  if (type == "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") {
    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);
    }
  }
}

Selbst ausprobieren

Bild ändern

Sie können jederzeit durch Ändern des Komponenten image des src Eigenschaft, um das Bild zu ändern.

Wenn Sie möchten, dass das Lächeln bei jedem Verschieben geändert wird, ändern Sie den Bildquellcode beim Klicken auf die Schaltfläche und kehren Sie ihn beim Nichtklicken zurück zur Normalität:

function component(width, height, color, x, y, type) {

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;
}

Selbst ausprobieren

Hintergrundbild

Durch Hinzufügen des Hintergrundbildes als Komponente kann es zum Spielbereich hinzugefügt und im jedem Frame aktualisiert werden:

function component(width, height, color, x, y, type) {

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();
}

Selbst ausprobieren

Bewegen Sie den Hintergrund

Ändern Sie die Bewegung des Hintergrundkomponenten speedX Die Eigenschaft ermöglicht die Bewegung des Hintergrunds:

function component(width, height, color, x, y, type) {

function updateGameArea() {
  myGameArea.clear();
  myBackground.speedX = -1;
  myBackground.newPos();
  myBackground.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

Selbst ausprobieren

Hintergrundwiederholung

Um dieses gleiche Hintergrundbild immer wieder zu wiederholen, müssen wir spezielle Techniken verwenden.

Zunächst wird dem Konstruktor des Komponenten mitgeteilt, dass es sich um einen Hintergrund handelt. Dann fügt der Konstruktor des Komponenten das Bild zweimal hinzu und platziert das zweite Bild sofort hinter dem ersten.

newPos() In der Methode wird überprüft, ob die x-Position des Komponenten bereits am Ende des Bildes angelangt ist, wenn ja, wird die Position des Komponenten x Position auf 0 gesetzt: 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;
      }
    }
  }
}

Selbst ausprobieren