ตัวควบคุมเกม

বাটন প্রেস করলে লাল বাক্সটি সরতে পারে:

সবকিছু নিয়ন্ত্রণ করুন

এখন আমরা লাল বাক্সটি নিয়ে যাই নয়াই।

চারটি বাটন যোগ করুন: উপর, নীচে, ডান, বাম。

প্রত্যেক বাটনের জন্য একটি ফাংশন লিখুন, যা কম্পোনেন্টকে নির্ধারিত দিকে সরাতে পারে。

নিচে component কনস্ট্রাকটরে দুটি নতুন প্রতিভা তৈরি করা হয়, এবং তাদের নামকরণ করা হয় speedX এবং speedYএই প্রতিভা হল গতিমাপার ইনডিকেটর হিসাবে ব্যবহৃত হয়

নিচে component কনস্ট্রাকটরে একটি নামকরণ করা হয়েছে newPos() এর ফাংশন, যা speedX এবং speedY প্রতিভা থেকে কম্পোনেন্টের অবস্থান পরিবর্তন করুন。

কম্পোনেন্টটি আবর্জন করা আগে, updateGameArea ফাংশন ব্যবহার newPos ফাংশন:

ইনস্ট্যান্স

<script>
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  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);
  }
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.newPos();
  myGamePiece.update();
}
function moveup() {
  myGamePiece.speedY -= 1;
}
function movedown() {
  myGamePiece.speedY += 1;
}
function moveleft() {
  myGamePiece.speedX -= 1;
}
function moveright() {
  myGamePiece.speedX += 1;
}
</script>
<button onclick="moveup()">UP</button>
<button onclick="movedown()">DOWN</button>
<button onclick="moveleft()">LEFT</button>
<button onclick="moveright()">RIGHT</button>

ลองเล่นด้วยตัวเอง

স্থগিত করা

যদি প্রয়োজন, তবে বুটন ছেদ করার সময় কালো বক্সকে স্থগিত করা যেতে পারে。

গতি সূচককে 0 সেট করা হবে একটি পদ্ধতি যোগ করা হয়েছে。

সাধারণ স্ক্রিন এবং টাচস্ক্রিনের জন্য, আমরা এই দুইটি ডিভাইসের জন্য কোড যোগ করবো:

ইনস্ট্যান্স

function stopMove() {
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UP</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DOWN</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RIGHT</button>

ลองเล่นด้วยตัวเอง

কিবোর্ড হিসাবে নিয়ন্ত্রক

আমরা কালো বক্সকে নিয়ন্ত্রিত করতে পারি কিনা কিবোর্ডের দিকনির্দেশক কীবর্ডের দিকনির্দেশক দিকনির্দেশক দিকনির্দেশক

একটি পদ্ধতি তৈরি করা হয়েছে যাতে কোনও কী ক্লিক করা হয়েছে তা পরীক্ষা করা যায় এবং myGameArea বস্তুর key প্রতিভা সেট করা হয়েছে কী কোড।কীটি ছেদ করা হলে, key প্রতিভা সেট করা হয়েছে false：

ইনস্ট্যান্স

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);
    window.addEventListener('keydown', function (e) {
      myGameArea.key = e.keyCode;
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.key = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

এভাবে, যদি দিশাকীয় কীটির কোনোটা প্রেস করা হয়, তাহলে লাল বাক্সটি চলবে:

ইনস্ট্যান্স

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  যদি (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
  যদি (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
  যদি (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
  যদি (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

ลองเล่นด้วยตัวเอง

একাধিক কী প্রেস করা

একাধিক কী একসাথে প্রেস করা হলে কী হবে?

এই উদাহরণে, কম্পোনেন্ট শুধুমাত্র হোরিজন্টাল বা ভার্টিক্যাল গতিতে চলতে পারে। এখন আমরা চাই যে কম্পোনেন্টটি কোনার গতিতেও চলতে পারে。

জন্য myGameArea একটি keys একটি তালিকা, এবং প্রত্যেক প্রেস করা কীর জন্য একটি এলিমেন্ট যোগ করা হবে এবং তাকে true، এই মান true থাকবে পর্যন্ত কোনো কী না প্রেস করা হয়, এই মান keyup ইভেন্ট লিস্টেনার ফাংশনে হয়েছে false：

ইনস্ট্যান্স

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);
    window.addEventListener('keydown', function (e) {
      myGameArea.keys = (myGameArea.keys || []);
      myGameArea.keys[e.keyCode] = true;
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.keys[e.keyCode] = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
 function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  যদি (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
  যদি (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
  যদি (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
  if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

ลองเล่นด้วยตัวเอง

মাউস কার্সরকে কন্ট্রোলার হিসাবে ব্যবহার করো

আপনি যদি মাউস কার্সরকে লাল বাক্সকে নিয়ন্ত্রণ করতে চান, তবে myGameArea একটি পদ্ধতি যোগ করো যা মাউস কার্সরের x এবং y কোণ্ডিটি নিয়ন্ত্রণ করে:

ইনস্ট্যান্স

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.canvas.style.cursor = "none"; //hide the original cursor
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('mousemove', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

তারপর, আমরা মাউস কার্সরের সমান কোডটি ব্যবহার করে লাল বাক্সকে সরাতে পারি:

ইনস্ট্যান্স

function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    myGamePiece.x = myGameArea.x;
    myGamePiece.y = myGameArea.y;
  }
  myGamePiece.update();
}

ลองเล่นด้วยตัวเอง

স্ক্রিনকে টাপ করে গেমকে নিয়ন্ত্রণ করো

আমরা আরও টাচস্ক্রিনে লাল বাক্সকে নিয়ন্ত্রণ করতে পারি。

নিচে myGameArea একটি পদ্ধতি যোগ করো, যা স্ক্রিনের টাচপয়েন্টের x এবং y কোণ্ডিটি ব্যবহার করে:

ইনস্ট্যান্স

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);
    window.addEventListener('touchmove', function (e) {
      myGameArea.x = e.touches[0].screenX;
      myGameArea.y = e.touches[0].screenY;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

তারপর, যখন ব্যবহারকারী স্ক্রিনকে টাপ করে, আমরা মাউস কার্সরের সমান কোডটি ব্যবহার করে লাল বাক্সকে সরাতে পারি:

ইনস্ট্যান্স

function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    myGamePiece.x = myGameArea.x;
    myGamePiece.y = myGameArea.y;
  }
  myGamePiece.update();
}

ลองเล่นด้วยตัวเอง

চিত্রক্ষেত্রের কন্ট্রোলার

আমরা আমাদের নিজস্ব বাটনগুলিকে চিত্রিত করতে পারি এবং তাদের কন্ট্রোলার হিসাবে ব্যবহার করতে পারি:

ইনস্ট্যান্স

function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 120);
  myUpBtn = new component(30, 30, "blue", 50, 10);
  myDownBtn = new component(30, 30, "blue", 50, 70);
  myLeftBtn = new component(30, 30, "blue", 20, 40);
  myRightBtn = new component(30, 30, "blue", 80, 40);
  myGameArea.start();
}

একটি নতুন ফাংশন যোগ করা হয়েছে যাতে কোনও কম্পোনেন্ট (এই উদাহরণে একটি বাটন) ক্লিক করা হয়েছে কিনা না নির্ধারণ করা যায়。

প্রথমে মাউস বাটন ক্লিক করা হয়েছে কিনা পরীক্ষা করার জন্য ইভেন্ট লিস্টিনার যোগ করা হয়েছে (mousedown এবং mouseup）。টাচস্ক্রিনের জন্য প্রতিক্রিয়া দেওয়ার জন্য একটি ইভেন্ট লিস্টিনার যোগ করা হয়েছে যাতে স্ক্রিনটি ক্লিক করা হয়েছে কিনা পরীক্ষা করা যায় (touchstart এবং touchend）：

ইনস্ট্যান্স

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);
    window.addEventListener('mousedown', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
    window.addEventListener('mouseup', function (e) {
      myGameArea.x = false;
      myGameArea.y = false;
    })
    window.addEventListener('touchstart', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
    window.addEventListener('touchend', function (e) {
      myGameArea.x = false;
      myGameArea.y = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

এখন myGameArea একটি অবজেক্ট যেটি আমাদের ক্লিকের x এবং y কোণশোধনী দিয়ে থাকে। আমরা এই অবজেক্টগুলো ব্যবহার করে কোনও একটি নীল বাটনের ওপর ক্লিক করা হয়েছে কিনা পরীক্ষা করি。

এই নতুন পদ্ধতিটি হল clickedহল component কনস্ট্রাকটরের একটি পদ্ধতি যা কম্পোনেন্টটি ক্লিক করা হয়েছে কিনা পরীক্ষা করে。

নিচে updateGameArea ফাংশনে, একটি ব্লু বাটনকে ক্লিক করার সময়, আমরা প্রয়োজনীয় কাজ করবো:

ইনস্ট্যান্স

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  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);
  }
  this.clicked = function() {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var clicked = true;
    if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
      clicked = false;
    }
    return clicked;
  }
}
function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    if (myUpBtn.clicked()) {
      myGamePiece.y -= 1;
    }
    if (myDownBtn.clicked()) {
      myGamePiece.y += 1;
    }
    if (myLeftBtn.clicked()) {
      myGamePiece.x += -1;
    }
    if (myRightBtn.clicked()) {
      myGamePiece.x += 1;
    }
  }
  myUpBtn.update();
  myDownBtn.update();
  myLeftBtn.update();
  myRightBtn.update();
  myGamePiece.update();
}

ลองเล่นด้วยตัวเอง