Imej Permainan

Tekan tombol untuk memindahkan wajah senyum:

Bagaimana cara menggunakan gambar?

Untuk menambahkan gambar ke atas kanvas, gunakan properti dan metode gambar yang terdapat di dalam objek getContext("2d").

Dalam permainan kami, jika Anda ingin membuat komponen permainan sebagai gambar, gunakan fungsi konstruktur komponen, tetapi Anda harus merujuk alamat URL gambar, bukan warna. Dan Anda harus memberitahu fungsi konstruktur bahwa jenis komponen adalah "image":

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

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

Dalam fungsi konstruktur komponen, kami menguji apakah komponen termasuk jenis "image", dan menggunakan fungsi konstruktur objek "new Image()" untuk membuat objek gambar.

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

Cuba Sendiri

更改图像

您可以随时通过更改组件的 image 对象的 src 属性来更改图像。

如果您想在每次移动时更改笑脸，请在用户单击按钮时更改图像源，并在未单击按钮时恢复正常：

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

Cuba Sendiri

背景图片

通过将背景图像添加为组件，可将其添加到游戏区域，并在每个帧中更新背景：

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.update();
  背景循环
}

Cuba Sendiri

移动背景

更改背景组件的 speedX 属性可使背景移动：

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

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

Cuba Sendiri

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

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

在

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

Cuba Sendiri