مستشعرات اللعبة

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

掌控一切

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

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

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

في 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 == 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، ويبقى هذا القيمة صحيحة حتى لا يتم الضغط على الزر بعد ذلك، ويتم حفظ هذه القيمة في 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();
}

تجربة شخصية

المستشعرات على اللوحة الرسومية

يمكننا أيضًا رسم أزرار خاصة بنا على اللوحة الرسومية واستخدامها كمستشعرات:

النموذج

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

تجربة شخصية