গেম ইমেজ

বটন ক্লিক করলে হাস্যরসাত্মক মুখটি সরতে পারে:

ছবি কিভাবে ব্যবহার করা যায়?

কাভাসে ছবি যোগ করার জন্য, "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;
  if (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;
    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 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;
  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);
        else {
      }
    }
      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;
      }
    }
  }
}

আপনার হাতে পরীক্ষা করুন