Εικόνα Παιχνιδιού

Πατήστε το κουμπί για να κινήσετε το χαμόγελο:

Πώς χρησιμοποιείται η εικόνα;

Για να προσθέσετε εικόνα στο καanvas, χρησιμοποιήστε τις ιδιότητες και τα μέθοδους της εικόνας του αντικειμένου getContext("2d").

Στο παιχνίδι μας, αν θέλετε να δημιουργήσετε ένα στοιχείο ως εικόνα, χρησιμοποιήστε τη συνάρτηση κατασκευής του στοιχείου, αλλά πρέπει να αναφέρετε την url της εικόνας αντί για το χρώμα. Και πρέπει να ενημερώσετε τον κατασκευαστή ότι ο τύπος του στοιχείου είναι "image":

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

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

Στην συνάρτηση κατασκευής του στοιχείου, ελέγχουμε αν το στοιχείο ανήκει στον τύπο "image" και χρησιμοποιούμε τον κατασκευαστή του αντικειμένου "new Image()" για να δημιουργήσουμε ένα αντικείμενο εικόνας. Όταν προετοιμαζόμαστε να σχεδιάσουμε την εικόνα, χρησιμοποιούμε τον τρόπο drawImage αντί για fillRect:

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

this.type = type;
  εάν (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;
    εάν (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);
    }
  }
}

Δοκιμάστε το προσωπικά

更改图像

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

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

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

Δοκιμάστε το προσωπικά

背景图片

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

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.update();
  κύκλος φόντου
}

Δοκιμάστε το προσωπικά

移动背景

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

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

function updateGameArea() {
  myGameArea.clear();
  myBackground.speedX = -1;
  myBackground.newPos();
  myBackground.update();
  myGamePiece.update();
  κύκλος φόντου
}

Δοκιμάστε το προσωπικά

για να κάνουμε αυτό το ίδιο φόντο να επαναλαμβάνεται για πάντα, πρέπει να χρησιμοποιήσουμε συγκεκριμένες τεχνικές.

Πρώτα ενημερώνει τον κατασκευαστή του στοιχείου ότι αυτό είναι το φόντο. Στη συνέχεια, ο κατασκευαστής του στοιχείου προσθέτει την εικόνα δύο φορές, το δεύτερο εικόνα αμέσως μετά την πρώτη εικόνα.

στην

newPos() στην μεθόδο, ελέγχει αν η θέση x του στοιχείου έχει φτάσει στο τέλος της εικόνας, αν ναι, τότε μετακινεί το στοιχείο x θέσηρισμα σε 0: πρότυπο

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

this.type = type;
  εάν (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;
    εάν (type == "image" ή type == "background") {
    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
      εάν (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;
    εάν (this.type == "background") {
      if (this.x == -(this.width)) {
        this.x = 0;
      }
    }
  }
}

Δοκιμάστε το προσωπικά