صور اللعبة

بالضغط على الزر يمكن تحريك الوجه المبتسم:

كيفية استخدام الصور؟

لإضافة صورة إلى لوحة الرسم، استخدم خصائص وطرق الصورة المدمجة في مكون "getContext("2d")".

في لعبتنا، إذا كنت ترغب في إنشاء قطعة لعبة كصورة، استخدم بناء المكون، لكن يجب عليك استدعاء عنوان الصورة، وليس اللون. ويجب أن تخبر بناء المكون أن نوع المكون هو "image":

المثال

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;
  إذا كان نوعه "صورة" {}}
    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;
    إذا كان نوعه "صورة" {}}
      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 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;
}

تجربة بنفسك

背景图片

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

المثال

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

تجربة بنفسك

移动背景

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

المثال

function updateGameArea() {
  myGameArea.clear();
  myBackground.speedX = -1;
  myBackground.newPos();
  myBackground.update();
  myGamePiece.newPos();
  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;
      }
    }
  }
}

تجربة بنفسك