Gambar Permainan

Dengan menekan tombol dapat memindahkan wajah senyum:

Bagaimana cara menggunakan gambar?

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

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

instans

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

Pada fungsi konstruktur komponen, kita menguji apakah komponen termasuk tipe "image", dan menggunakan fungsi konstruktur objek "new Image()" untuk membuat objek gambar.

instans

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

Coba Sendiri

更改图像

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

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

instans

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

Coba Sendiri

背景图片

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

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

Coba Sendiri

移动背景

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

instans

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

Coba Sendiri

Latar belakang berulang

Untuk membuat latar belakang yang sama berulang-ulang selamanya, kita harus menggunakan teknologi khusus.

pertama-tama beritahu constructor komponen ini adalah latar belakang. kemudian, constructor komponen akan menambahkan gambar dua kali, dengan gambar kedua segera ditempatkan setelah gambar pertama.

pada newPos() di dalam method, periksa apakah posisi x komponen sudah mencapai akhir gambar, jika sudah, maka atur komponen x Posisi diatur 0:

instans

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" || 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;
    jika (this.type == "background") {
      if (this.x == -(this.width)) {
        this.x = 0;
      }
    }
  }
}

Coba Sendiri