Immagine di gioco

Premere il pulsante per muovere il sorriso:

Come utilizzare l'immagine?

Per aggiungere un'immagine alla lavagna, utilizzare le proprietà e i metodi integrati dell'oggetto getContext("2d") dell'immagine.

Nel nostro gioco, se si desidera creare un pezzo di gioco come immagine, utilizzare il costruttore del componente, ma è necessario referenziare l'URL dell'immagine invece di referenziare il colore. E deve essere detto al costruttore che il tipo del componente è "image":

istanza

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

Nel costruttore del componente, testiamo se il componente appartiene al tipo "image" e utilizziamo il costruttore del costruttore di oggetti "new Image()" per creare un oggetto immagine. Quando ci prepariamo a disegnare l'immagine, utilizziamo il metodo drawImage invece del metodo fillRect:

istanza

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

Prova da solo

更改图像

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

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

istanza

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 da solo

背景图片

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

istanza

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 da solo

移动背景

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

istanza

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

Prova da solo

ciclo di sfondo

Per far sì che lo stesso sfondo si ripeta perpetuamente, dobbiamo utilizzare tecniche specifiche.

prima di tutto, informare il costruttore del componente che questo è uno sfondo. Poi, il costruttore del componente aggiungerà l'immagine due volte, posizionando la seconda immagine immediatamente dopo la prima.

in newPos() nel metodo, verificare se la posizione x del componente è giunta alla fine dell'immagine, se sì, spostare il componente alla posizione x impostazione della posizione a 0:

istanza

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

Prova da solo