Imagem do Jogo

Pressione o botão para mover o sorriso:

Como usar imagens?

Para adicionar uma imagem na tela, use as propriedades e métodos integrados do objeto getContext("2d") de imagem.

No nosso jogo, se precisar criar um componente de imagem, use o construtor do componente, mas você deve referenciar a url da imagem, não a cor. E você deve informar ao construtor que o tipo do componente é "image":

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

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

No construtor do componente, testamos se o componente pertence ao tipo "image" e usamos o construtor de objeto embutido "new Image()" para criar um objeto de imagem. Quando estamos prontos para desenhar a imagem, usamos o método drawImage em vez do método fillRect:

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

Experimente Sozinho

alterando a imagem

Você pode alterar a imagem do componente a qualquer momento image do objeto src propriedade para alterar a imagem.

Se você quiser mudar o sorriso em cada movimento, altere a fonte da imagem ao clicar no botão e restaure ao normal quando não clicar no botão:

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

Experimente Sozinho

imagem de fundo

Ao adicionar a imagem de fundo como componente, você pode adicioná-la à área do jogo e atualizá-la em cada frame:

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.newPos();
  myGamePiece.update();
}

Experimente Sozinho

movimento do fundo

Altere o componente de fundo speedX A propriedade permite que o fundo se mova:

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

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

Experimente Sozinho

Ciclo de fundo

Para que este mesmo fundo ciclique para sempre, devemos usar técnicas específicas.

primeiro informar ao construtor do componente que é fundo. Em seguida, o construtor do componente adicionará a imagem duas vezes, colocando a segunda imagem imediatamente após a primeira.

newPos() no método, verificar se a posição x do componente já atingiu o final da imagem, se sim, ajustar a posição do componente x posicionamento definido como 0: instância

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

Experimente Sozinho