گیم کنٹرولر

با فشار دادن دکمه‌ها، مربع قرمز را حرکت دهید:

تمام چیزها را کنترل کنید

حالا می‌خواهیم قرمز مربع را کنترل کنیم.

چهار دکمه را اضافه کنید: بالا، پایین، چپ، راست.

برای هر دکمه یک فنکشن بنویسید تا اجزا را در مسیر انتخاب شده حرکت دهد.

در}} کونپن دو ویژگی جدید در فنکشن سازنده ایجاد کنید و نامگذاری کنید speedX اور speedYاین ویژگی‌ها به عنوان میدان‌نشانگر سرعت استفاده می‌شوند.

در}} کونپن یک نام به عنوان 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 객체의 키 속성 설정됨 키 코드. 키를 떼었을 때, 키 속성 설정됨 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، وہ یہ ہے کونپن ایک کانست رکٹر کا ایک طریقہ، جس میں معلوم کیا جاتا ہے کہ کونپن کو کلک کیا گیا ہے یا نہیں。

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

خود کا تجربہ کریں