Spil Billeder

按下按钮可移动笑脸：

如何使用图像？

如需在画布上添加图像，请使用 getContext("2d") 对象内置的图像属性和方法。

在我们的游戏中，如需将游戏件创建为图像，请使用组件构造函数，但您必须引用图像的 url，而不是引用颜色。并且必须告诉构造函数该组件的类型为 "image"：

instans

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

I komponentens konstruktør测试组件是否属于 "image" 类型，并使用内置的 "new Image()" 对象构造函数创建一个图像对象。在我们准备绘制图像时，我们使用的是 drawImage 方法而不是 fillRect 方法：

instans

function component(width, height, color, x, y, type) {
  this.type = type;
  hvis (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;
    hvis (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);
    }
  }
}

Prøv Selv

ændre billede

Du kan altid ændre billedet ved at ændre komponentens image objektets src egenskab for at ændre billedet.

Hvis du vil ændre smiley ved hver bevægelse, ændr billedkilden, når brugeren klikker på knappen, og gendan normalt, når knappen ikke klikkes:

instans

function move(dir) {
  myGamePiece.image.src = "angry.gif";
  hvis (dir == "up") {myGamePiece.speedY = -1; }
  hvis (dir == "down") {myGamePiece.speedY = 1; }
  hvis (dir == "left") {myGamePiece.speedX = -1; }
  hvis (dir == "right") {myGamePiece.speedX = 1; }
}
function clearmove() {
  myGamePiece.image.src = "smiley.gif";
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}

Prøv Selv

Baggrundsbillede

Ved at tilføje baggrundsbilledet som en komponent, kan det tilføjes til spilområdet og opdateres i hver frame:

instans

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

Prøv Selv

flytte baggrunden

Ændre baggrundskomponenten speedX Egenskaben gør det muligt at flytte baggrunden:

instans

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

Prøv Selv

Baggrundsgentagelse

For at lade denne baggrund gentage sig uendeligt, skal vi bruge specifikke teknologier.

Først fortæller komponentens konstruktør, at dette er baggrund. Derefter tilføjer komponentens konstruktør billedet to gange, og placerer det andet billede med det samme efter det første billede.

i newPos() metoden, tjek om komponentens x-position allerede er nået til bunden af billedet, hvis ja, så sæt komponentens x Positioner indstillet til 0:

instans

function component(width, height, color, x, y, type) {
  this.type = type;
  hvis (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;
    hvis (type == "image" || type == "background") {
      ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
      hvis (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;
    hvis (this.type == "background") {
      if (this.x == -(this.width)) {
        this.x = 0;
      }
    }
  }
}

Prøv Selv