游戏组件

গেম অঞ্চলে একটি লাল কক্ষ যোগ করুন:

কম্পোনেন্ট যোগ করুন

একটি কম্পোনেন্ট নির্মাণকারী ফাংশন তৈরি করুন, যা আপনাকে কম্পোনেন্টকে গেম অঞ্চলে যোগ করার অনুমতি দেবে。

এই অবজেক্ট নির্মাণকারী ফাংশনটি হলকম্পোনেন্ট (component)আমরা প্রথম কম্পোনেন্ট তৈরি করেছি, নাম " myGamePiece:

প্রকল্প

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}

亲自试一试

এই কম্পোনেন্টগুলির অপেক্ষা করে তাদের দেখবেগুলি এবং চলবেগুলির বৈশিষ্ট্য ও পদ্ধতি রয়েছে。

ফ্রেম

গেমটির অভিনয়ের প্রস্তুতি করার জন্য, আমরা প্রতি সেকেন্ডে ৫০বার প্রদর্শন অপদান করব, যা ফিল্মের ফ্রেমের মতো।

首先，创建一个名为 updateGameArea() প্রথমে, একটি নামকরণকৃত

এর ফাংশন যা সমগ্র কার্টেজকে পরিষ্কার করে。 নতুন ফাংশন myGameArea updateGameArea() অবজেক্টে, একটি ইন্টারভ্যাল যা ২০ মিলিসেকেন্ড প্রতি চলে যায় clear() ফাংশন (প্রতি সেকেন্ডে ৫০বার)। একটি নামকরণকৃত

এর ফাংশন যা সমগ্র কার্টেজকে পরিষ্কার করে。 component কন্সট্রাকটরে, একটি নামকরণকৃত update() ফাংশনটি অংশগুলির ড্রাইংকে পরিচালনা করে。

updateGameArea() ফাংশন ক্লিক clear() এবং update() পদ্ধতি。

ফলাফল হল যে, অংশগুলি প্রতি সেকেন্ডে ৫০বার ড্রাইং এবং পরিষ্কার করা হয়:

প্রকল্প

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.update = function(){
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
}

亲自试一试

তাকে চলতে দিন

লাল বাক্সটি প্রতি সেকেন্ডে ৫০বার ড্রাইং করা হয় এবং প্রতি গেম অঞ্চল অপদাতে প্রতিরূপ করার জন্য আমরা প্রতি সেকেন্ডে x অবস্থান (অনুভূমিক) একটি পিক্সেল পরিবর্তন করব:

প্রকল্প

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

亲自试一试

গেম অঞ্চলকে পরিষ্কার করার কী কারণ?

এটা হয়তো প্রত্যেক অপদাতে গেম অঞ্চলকে পরিষ্কার করার প্রয়োজন নেই। কিন্তু যদি আমরা তা ছেড়ে দিই clear() পদ্ধতি, অংশগুলির সকল সরণকে এটা তার শেষ ফ্রেমের অবস্থানের ট্র্যাক রেখে যায়:

প্রকল্প

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

亲自试一试

মাপ পরিবর্তন

আপনি উপাদানের প্রশস্ততা এবং উচ্চতা নিয়ন্ত্রণ করতে পারেন:

প্রকল্প

10x140 পিক্সেলের চতুর্ভুজ তৈরি করুন:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
}

亲自试一试

রঙ পরিবর্তন

আপনি উপাদানের রঙ নিয়ন্ত্রণ করতে পারেন:

প্রকল্প

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

亲自试一试

আপনি অন্যান্য রঙের মানও ব্যবহার করতে পারেন, যেমন হেক্সাডেসিমাল, rgb অথবা rgba:

প্রকল্প

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

亲自试一试

অবস্থান পরিবর্তন

আমরা x এবং y কোণাটি ব্যবহার করে উপাদানকে গেম এলাকায় অবস্থান দিই。

ক্যানভাসের ডানদিকের উপরিন্ত কোণাটির কোণাটি (0,0)।

মাউসকে নিচের গেম এলাকায় নিয়ে যাওয়ার ফলে x এবং y কোণাটি দেখা যাবে:

গেম এলাকাতে কোনও জায়গাতে উপাদান স্থাপন করতে পারেন:

প্রকল্প

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

亲自试一试

বহুবহু উপাদান

গেম এলাকাতে কোনও সংখ্যক উপাদান স্থাপন করতে পারেন:

প্রকল্প

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

亲自试一试

সরণকারী উপাদান

তিনটি উপাদানকে ভিন্ন দিকে সরিয়ে নিতে হবে:

প্রকল্প

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

亲自试一试