تصویر بازی

بٹن پر دباؤ دینے سے چمکدار چهرہ موٹا جائے گا:

تصویر کا استعمال کیسے کیا جاتا ہے؟

تصویر کو کینواس پر شامل کرنے کے لئے،.getContext("2d") آئی کونٹرکٹر کی داخلی تصویر کی خاصیت اور طریقو استعمال کریں۔

میرے گیم پیسیز کو تصویر کے طور پر بنانے کے لئے، کامپوننت کانستکشن کا استعمال کریں، لیکن آپ کو تصویر کا url مراجع نہیں کریں، بلکہ رنگ کا مراجع نہیں کریں۔ اور آپ کو کامپوننت کا نوعیت "image" کی اطلاع فراہم کرنی ہوگی:

مثال

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

کامپوننت کانستکشن میں، ہم کامپوننت کو "image" نوعیت کا ہونے کا امتحان کرتے ہیں، اور داخلی "new Image()" آئی کونٹرکٹر کانستکشن کا استعمال کرکے ایک تصویر آئی کونٹرکٹر بناتے ہیں۔ جب ہم تصویر بناکر تیار ہوتے ہیں تو، ہم "drawImage" طریقہ استعمال کرتے ہیں، نہ کہ "fillRect" طریقہ استعمال کرتے ہیں:

مثال

فنکشن component(width, height, color, x, y, type) {
  این.type = type;
  اگر (type == "image") {}}
    این.image = new Image();
    این.image.src = color;
  }
  این.width = width;
  این.height = height;
  این.speedX = 0;
  این.speedY = 0;
  این.x = x;
  این.y = y;
  این.update = function() {
    ctx = myGameArea.context;
    اگر (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";
  اگر (dir == "up") {myGamePiece.speedY = -1; }
  اگر (dir == "down") {myGamePiece.speedY = 1; }
  اگر (dir == "left") {myGamePiece.speedX = -1; }
  اگر (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:

مثال

فنکشن component(width, height, color, x, y, type) {
  این.type = type;
  اگر (type == "image" یا type == "background") {
    این.image = new Image();
    این.image.src = color;
  }
  این.width = width;
  این.height = height;
  این.speedX = 0;
  این.speedY = 0;
  این.x = x;
  این.y = y;
  این.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);
    }
  }
  این.newPos = function() {
    این.x += این.speedX;
    این.y += این.speedY;
    اگر (این نوع == "background") {
      اگر (this.x == -(this.width)) {
        this.x = 0;
      }
    }
  }
}

آزمایش کنید