游戏图像

Pindutin ang pindutan upang ilipat ang mukha na may ngiti:

Paano gamitin ang imahen?

Kapag nais mong magdagdag ng imahen sa kanvas, gamitin ang mga katangian at mga paraan ng built-in na objekto ng image sa getContext("2d"):

Sa aming laro, kapag nais mong gumawa ng komponente bilang imahen, gamitin mo ang constructor ng komponente, ngunit dapat mong ilagay ang url ng imahen sa halip ng kulay. At dapat sabihin sa constructor na ang uri ng komponente ay "image":

mga salitang pinagsusuri

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

Sa constructor ng komponente, sinusubukan naming kung ang komponente ay kabilang sa uri ng "image", at ginagawa ng constructor ng sangkap na "new Image()" upang lumikha ng isang objekto ng imahen. Sa panahon na pinaghahandaan naming i-draw ang imahen, ginagamit naming ang paraan ng drawImage sa halip ng paraan ng fillRect:

mga salitang pinagsusuri

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

亲自试一试

更改图像

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

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

mga salitang pinagsusuri

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

亲自试一试

背景图片

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

mga salitang pinagsusuri

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

亲自试一试

移动背景

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

mga salitang pinagsusuri

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

亲自试一试

Background na nag-ikot

Upang ang parehong background na ito ay patuloy na nag-ikot, kailangan gumamit ng espesyal na teknolohiya.

Una, sabihin sa constructor ng komponente na ito ay background. Pagkatapos, ang constructor ng komponente ay idadagdag ang imahe ng dalawang beses, ang ikalawang imahe ay idadagdag agad sa likod ng unang imahe.

sa newPos() sa paraan, suriin kung ang posisyon ng komponente ay naabot na ang katapusan ng imahe, kung naabot, ililipat ang komponente na x ang lokasyon ay itinakda sa 0:

mga salitang pinagsusuri

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

亲自试一试