Game Images

Druk op de knop om de lachende gezicht te verplaatsen:

Hoe gebruik je afbeeldingen?

Om een afbeelding toe te voegen aan het canvas, gebruik de ingebouwde eigenschappen en methoden van het object getContext("2d") voor afbeeldingen.

Om een spelstuk als afbeelding te maken in ons spel, gebruik dan de constructor van het component, maar je moet de url van het beeld verwijzen in plaats van de kleur. En je moet de constructor vertellen dat het type van dit component "image" is:

实例

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

In de constructor van het component, testen we of het component van het type "image" is en gebruiken we de ingebouwde constructor van het object "new Image()" om een afbeeldingsobject te construeren. Bij het voorbereiden van het tekenen van het beeld gebruiken we de methode drawImage in plaats van fillRect:

实例

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

Try It Yourself

Wijzig het beeld

Je kunt altijd het beeld wijzigen door het component te wijzigen: image van het object src Eigenschap om het beeld te wijzigen.

Als je de lachende gezicht wilt veranderen bij elke verplaatsing, verander dan de bron van het beeld bij het klikken op de knop en herstel het normaal bij het niet klikken op de knop:

实例

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

Try It Yourself

Achtergrondbeeld

Door het achtergrondbeeld als component toe te voegen, kan het worden toegevoegd aan het spelgebied en bij elke frame worden bijgewerkt:

实例

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

Try It Yourself

Verplaats de achtergrond

Wijzig de component van de achtergrond: speedX Eigenschap maakt het mogelijk om de achtergrond te verplaatsen:

实例

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

Try It Yourself

背景循环

为了让这幅相同的背景永远循环，我们必须使用特定的技术。

首先告诉组件构造函数这是背景。然后，组件构造函数将添加图像两次，将第二个图像立即放置在第一个图像之后。

在 newPos() 方法中，检查组件的 x 位置是否已到达图像的末尾，如果已到达，则将组件的 x 位置设置为 0：

实例

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

Try It Yourself