Obrazy gry

Naciśnięcie przycisku umożliwia przesuwanie uśmiechniętej twarzy:

Jak używać obrazów?

Aby dodać obraz na płótno, użyj wbudowanych właściwości i metod obiektu getContext("2d").

W naszej grze, aby utworzyć element gry jako obraz, użyj konstruktora komponenty, ale musisz odnosić się do url obrazu, a nie do koloru. Musisz również poinformować konstruktora, że typ komponenty to "image":

instancja

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

W konstruktora komponenty testujemy, czy komponent należy do typu "image", i używamy wbudowanego konstruktora obiektu "new Image()" do utworzenia obiektu obrazu. Gdy przygotowujemy się do rysowania obrazu, używamy metody drawImage zamiast metody fillRect:

instancja

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

Spróbuj sam

zmieniając obraz

Możesz w każdej chwili zmienić obraz komponentu image obiektu src Atrybuty do zmiany obrazu.

Jeśli chcesz zmieniać uśmiechniętą twarz przy każdym ruchu, zmień źródło obrazu po kliknięciu przycisku i przywróć normalne po jego zwolnieniu:

instancja

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

Spróbuj sam

Obraz tła

Możesz dodać obraz tła jako komponent do obszaru gry i aktualizować go w każdym klatce:

instancja

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

Spróbuj sam

Przesuń tło

Zmień komponent tła speedX Atrybut umożliwia przesuwanie tła:

instancja

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

Spróbuj sam

powtarzanie tła

Aby to samo tło było wiecznie powtarzane, musimy użyć specjalnej techniki.

po pierwsze powiedz konstruktora komponentu, że to tło. Następnie, konstruktor komponentu doda obraz dwa razy, umieszczając drugi obraz natychmiast za pierwszym.

w newPos() w metodzie, sprawdź, czy pozycja x komponentu osiągnęła koniec obrazu, jeśli tak, to ustaw pozycję komponentu x ustawienie pozycji na 0:

instancja

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" || 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;
    jeśli (this.type == "background") {
      if (this.x == -(this.width)) {
        this.x = 0;
      }
    }
  }
}

Spróbuj sam