Spel bild

Tryck på knappen för att flytta leenden:

Hur använder man bilder?

För att lägga till bilder på canvas använd den inbyggda bildegenskapen och metoderna i objektet getContext("2d").

För att skapa spelkomponenter som bilder i vårt spel använder du komponentkonstruktören, men du måste referera till bildens url, inte till färg. Och du måste informera konstruktören att komponentens typ är "image":

exempel

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

I komponentens konstruktör testar vi om komponenten tillhör typen "image", och använder den inbyggda konstruktören "new Image()" för att skapa ett bildobjekt. När vi är klara att rita bilden använder vi metoden drawImage istället för metoden fillRect:

exempel

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

Prova själv

更改图像

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

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

exempel

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

Prova själv

背景图片

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

exempel

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

Prova själv

移动背景

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

exempel

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

Prova själv

Bakgrundscykling

För att denna bakgrund ska kunna upprepas för evigt, måste vi använda specifika tekniker.

Först berättar vi för komponentens konstruktör att detta är bakgrund. Därefter lägger komponentens konstruktör till bilden två gånger, och placerar den andra bilden omedelbart efter den första.

i newPos() i metoden, kontrollera om komponentens x-position har nått änden av bilden, om det är fallet, sätt komponentens x Position sätts till 0:

exempel

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

Prova själv