Images de jeu

Appuyez sur le bouton pour déplacer le sourire :

Comment utiliser l'image ?

Pour ajouter une image sur le canevas, utilisez les propriétés et méthodes intégrées de l'objet getContext("2d") de l'image.

Dans notre jeu, si vous souhaitez créer un composant de jeu en image, utilisez le constructeur de composant, mais vous devez référencer l'URL de l'image, pas la couleur. Et vous devez informer le constructeur que le type du composant est "image" :

实例

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

Dans le constructeur de composant, nous testons si le composant appartient au type "image", et utilisons le constructeur de fonction intégré "new Image()" pour créer un objet d'image. Lorsque nous nous préparons à dessiner l'image, nous utilisons la méthode drawImage plutôt que la méthode fillRect :

实例

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

Essayez-le vous-même

更改图像

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

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

实例

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

Essayez-le vous-même

背景图片

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

实例

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

Essayez-le vous-même

移动背景

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

实例

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

Essayez-le vous-même

背景循环

为了让这幅相同的背景永远循环，我们必须使用特定的技术。

首先告诉组件构造函数这是背景。然后，组件构造函数将添加图像两次，将第二个图像立即放置在第一个图像之后。

在 newPos() 方法中，检查组件的 x 位置是否已到达图像的末尾，如果已到达，则将组件的 x 位置设置为 0：

实例

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

Essayez-le vous-même