Hình ảnh game

Nhấn nút để di chuyển hình ảnh cười:

Làm thế nào để sử dụng hình ảnh?

Để thêm hình ảnh vào canvas, hãy sử dụng thuộc tính và phương thức hình ảnh của đối tượng getContext("2d").

Trong trò chơi của chúng ta, nếu cần tạo thành phần là hình ảnh, hãy sử dụng hàm tạo thành phần, nhưng bạn phải tham chiếu đến URL của hình ảnh,而不是 tham chiếu đến màu sắc. Và bạn phải thông báo cho hàm tạo rằng loại của thành phần là "image":

thực thể

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

Trong hàm tạo thành phần, chúng ta kiểm tra thành phần có phải là loại "image" hay không, và sử dụng hàm tạo đối tượng "new Image()" để tạo đối tượng hình ảnh. Khi chúng ta chuẩn bị vẽ hình ảnh, chúng ta sử dụng phương thức drawImage thay vì phương thức fillRect:

thực thể

function component(width, height, color, x, y, type) {
  this.type = type;
  if (type == "image") {}}
    this.image = new Image();
    this.image.src = color;
  this.x = 0;
  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);
    this.x = 0; else {
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    this.x = 0;
  this.x = 0;
this.x = 0;

}

更改图像

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

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

thực thể

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; }
this.x = 0;
function clearmove() {
  myGamePiece.image.src = "smiley.gif";
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
this.x = 0;

}

背景图片

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

thực thể

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();
this.x = 0;
function updateGameArea() {
  myGameArea.clear();
  myBackground.newPos();
  myBackground.update();
  myGamePiece.newPos();
  myGamePiece.update();
this.x = 0;

}

移动背景

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

thực thể

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

}

lặp lại nền

Để cho nền này lặp lại mãi mãi, chúng ta phải sử dụng kỹ thuật đặc biệt.

trước tiên thông báo cho hàm cấu hình thành phần rằng đó là nền. Sau đó, hàm cấu hình thành phần sẽ thêm hình ảnh hai lần, đặt hình ảnh thứ hai ngay sau hình ảnh thứ nhất.

trong newPos() trong phương pháp, kiểm tra vị trí x của thành phần có đã đến cuối của hình ảnh hay chưa, nếu đã đến, thì sẽ đặt vị trí của thành phần x đặt vị trí 0:

thực thể

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.x = 0;
  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);
      this.x = 0;
    }
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    this.x = 0;
  this.x = 0;
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.type == "background") {
      if (this.x == -(this.width)) {
        if (this.x == -(this.width)) {
      this.x = 0;
    this.x = 0;
  this.x = 0;
this.x = 0;

}