গেম রোটেশন

লাল বাক্সটি ঘুর্ণান করা যায়:

রোটেশন কম্পোনেন্ট

এই টিউটোরিয়ালের আগের অংশে, লাল বাক্স গেম এলাকাতে চলতে পারত, কিন্তু ঘুর্ণান করা বা ঘুর্ণান করা পারত না।

কম্পোনেন্টটিকে ঘুর্ণান করতে, আমরা কম্পোনেন্টটিকে আঁকার পদ্ধতিকে পরিবর্তন করতে হবে।

কার্টেজ ইলেমেন্টটির একমাত্র বৈধ ঘুর্ণান মথডটি সমগ্র কার্টেজকে ঘুর্ণান করবে:

আপনি কার্টেজে আঁকা অন্য সবকিছুই ঘুর্ণান হবে, কেবল নির্দিষ্ট কম্পোনেন্টটি নয়।

এইজন্য আমরা update() মথডটিতে করতে হবে: update() মথডটিতে কিছু পরিবর্তন করা হয়:

প্রথমে, আমরা বর্তমান কার্টেজ কনটেক্স্ট অবজেক্টটিকে সংরক্ষণ করি:

ctx.save();

তারপর আমরা translate মথডটি ব্যবহার করে সমগ্র কার্টেজকে নির্দিষ্ট কম্পোনেন্টের কেন্দ্রে সরিয়ে দিতে চাই:

ctx.translate(x, y);

তারপর আমরা rotate() মথডটি ব্যবহার করে চাইতে ঘুর্ণান করব:

ctx.rotate(angle);

এখন আমরা কম্পোনেন্টটিকে কার্টেজে আঁকতে প্রস্তুত হচ্ছি, কিন্তু এখন আমরা পরিবর্তিত (এবং ঘুর্ণান) কার্টেজের কেন্দ্রস্থলকে 0,0 অবস্থানে আঁকতে চাই:

ctx.fillRect(width / -2, height / -2, width, height);

কাজ সমাপ্ত হলে, আমরা restore মথডটি ব্যবহার করে এই কনটেক্স্ট অবজেক্টটিকে সংরক্ষিত অবস্থানে ফিরিয়ে দিতে হবে:

ctx.restore();

এই কম্পোনেন্টটি একমাত্র ঘুর্ণান করা কিছু:

কম্পোনেন্ট কনস্ট্রাকটর

নতুন প্রকৃতি কনস্ট্রাকটরটিতে রয়েছে angle এটি কম্পোনেন্টের ঘুর্ণান দেখানোর একক একক সংখ্যা।

নতুন প্রকৃতি কনস্ট্রাকটরের update মেথড হলো কম্পোনেন্টটি আঁকার স্থান, এখানে আপনি কম্পোনেন্টটির পার্থক্য ঘুর্ণান দেখতে পাবেন:

ইনস্ট্যান্স

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.angle += 1 * Math.PI / 180;
  myGamePiece.update();
}

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