تصاویر بازی

با فشار دادن دکمه، می‌توانید صورت خندان را حرکت دهید:

چگونه از تصویر استفاده کنیم؟

برای اضافه کردن تصویر به کانواس، از ویژگی‌ها و روش‌های موجود در توابع ساختاری "getContext("2d")" استفاده کنید.

در بازی ما، برای ایجاد یک قطعه بازی به عنوان تصویر، از توابع ساختاری component استفاده کنید، اما باید آدرس URL تصویر را ذکر کنید، نه رنگ. و باید به توابع ساختاری بگویید که نوع این قطعه "image" است:

مثال

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

در توابع ساختاری component، ما بررسی می‌کنیم که آیا جزء نوع "image" است و از توابع ساختاری موجود در "new Image()" برای ایجاد یک شیء تصویر استفاده می‌کنیم. در حالی که آماده رندر کردن تصویر هستیم، ما از روش drawImage استفاده می‌کنیم نه روش fillRect:

مثال

function component(width, height, color, x, y, type) {
  این.type = type;
  if (type == "image") {}}
    این.image = new Image();
    این.image.src = color;
  }
  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);
    }
  }
}

آزمایش کنید

تصویر را تغییر دهید

می‌توانید در هر زمان با تغییر جزء 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) {
  این.type = type;
  if (type == "image" || type == "background") {
    این.image = new Image();
    این.image.src = color;
  }
  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);
    }
  }
  این.newPos = function() {
    این.x += این.speedX;
    این.y += این.speedY;
    اگر (این.type == "background") {
      if (this.x == -(this.width)) {
        this.x = 0;
      }
    }
  }
}

آزمایش کنید