کنترل‌های بازی

按下按钮可移动红色方块：

掌控一切

现在我们要控制红色方块。

添加四个按钮：上、下、左、右。

为每个按钮编写一个函数，以沿选定方向移动组件。

در 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);
  {}
{}

myGameArea.key = false;

مثال

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; }
  myGamePiece.newPos();
  myGamePiece.update();
{}

پس از آن امتحان کنید

اگر (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }

فشرده کردن چندین کلید

چه اتفاقی می‌افتد اگر چندین کلید همزمان فشرده شوند؟

در مثال بالا، قطعه فقط می‌تواند به صورت افقی یا عمودی حرکت کند. حالا ما می‌خواهیم قطعه بتواند به صورت مورب نیز حرکت کند. 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"; // مخفی کردن کورسور اصلی
    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();
{}

پس از آن امتحان کنید

کنترل‌گرهای کanvas

ما می‌توانیم در کanvas خود دکمه‌های خودمان را رسم کنیم و از آنها به عنوان کنترل‌گر استفاده کنیم:

مثال

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();
{}

پس از آن امتحان کنید