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

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

掌控一切

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

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

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

ใน 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 ฝากลงในตัวแปร keys ของตัวแปร array และสร้างอันใหม่เพื่อใช้เข้าถึงค่าของปุ่มที่กด 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();
}

ทดลองด้วยตัวเอง

ควบคุมบนกระดานวาด

เราสามารถวาดปุ่มของตัวเองบนกระดานวาดและใช้เป็นควบคุม:

ตัวอย่าง

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

ทดลองด้วยตัวเอง