Peli-kuvat

Painamalla nappia voit siirtää hymyilevää naamaa:

Kuinka käyttää kuvia?

Jos haluat lisätä kuvan taulukkoon, käytä getContext("2d")-olion sisäänrakennettuja kuvan ominaisuuksia ja menetelmiä.

Jos haluat luoda pelielementin kuvana pelissämme, käytä komponentin rakentajafunktiota, mutta sinun täytyy viitata kuvan url:iin eikä väriin. Ja sinun täytyy kertoa rakentajafunktiolle, että komponentin tyyppi on "image":

esimerkki

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

Komponentin rakentajafunktiossa testataan, onko komponentti "image"-tyyppiä, ja luodaan sisäänrakennetulla "new Image()"-olion rakentajafunktiolla kuvat object. Kun olemme valmiita piirtämään kuvaa, käytämme drawImage-metodia fillRect-metodia sijaan:

esimerkki

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

Kokeile itse

更改图像

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

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

esimerkki

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

Kokeile itse

背景图片

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

esimerkki

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

Kokeile itse

移动背景

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

esimerkki

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

Kokeile itse

Taustatoisto

Jotta tämä sama tausta toistuisi loputtomasti, meidän on käytettävä tiettyjä teknikoita.

Ensiksi kertoomme komponentin rakentajafunktiolle, että tämä on tausta. Sitten komponentin rakentajafunktiolle lisätään kuva kahdesti, ja toinen kuva asetetaan välittömästi ensimmäisen kuvan jälkeen.

newPos() menetelmässä tarkistetaan, onko komponentin x-sijainti saavuttanut kuvan lopun, jos on, aseta komponentin x Aseta sijainti 0:

esimerkki

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

Kokeile itse