Kontrol Permainan

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

掌控一切

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

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

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

pada component 构造函数中创建两个新属性，并将它们命名为 speedX dan speedY。这些属性被用作速度指示器。

pada component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX dan speedY 属性来更改组件的位置。

在绘制组件之前，从 updateGameArea 函数调用 newPos 函数：

contoh

<script>
fungsi 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;
  }
}
fungsi 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()">Atas</button>
<button onclick="movedown()">Bawah</button>
<button onclick="moveleft()">KIRI</button>
<button onclick="moveright()">KANAN</button>

Coba Sendiri

Hentikan gerakan

Jika diperlukan, Anda dapat menghentikan blok merah saat tombol dilepas.

Tambahkan function untuk mengatur indikator kecepatan menjadi 0.

Untuk menyesuaikan layar biasa dan layar sentuh, kami akan menambahkan kode untuk kedua perangkat ini:

contoh

function stopMove() {
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">Atas</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">Bawah</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">KIRI</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">KANAN</button>

Coba Sendiri

papan ketik sebagai pengendali

kami juga dapat mengendalikan blok merah dengan tombol arah papan ketik.

buat method untuk memeriksa apakah tombol yang di tekan, dan lakukan myGameArea objek key atur properti kode tombol. Saat tombol dilepas, akan key atur properti false：

contoh

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

Dengan cara ini, jika tombol arah yang satu ditekan, kita dapat gerakkan blok merah:

contoh

fungsi updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  jika (myGameArea.key dan myGameArea.key == 37) {myGamePiece.speedX = -1; }
  jika (myGameArea.key dan myGameArea.key == 39) {myGamePiece.speedX = 1; }
  jika (myGameArea.key dan myGameArea.key == 38) {myGamePiece.speedY = -1; }
  jika (myGameArea.key dan myGameArea.key == 40) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

Coba Sendiri

Menekan beberapa tombol

Bagaimana jika beberapa tombol ditekan secara bersamaan?

dalam contoh di atas, komponen hanya dapat bergerak secara horizontal atau vertikal. Sekarang kami ingin komponen dapat bergerak sepanjang diagonal juga.

untuk myGameArea membuat objek keys array, dan masukkan elemen untuk setiap tombol yang ditekan, dan memberikan nilai true，nilai ini tetap true sampai tombol tidak ditekan lagi, nilai ini di keyup fungsi pemantau peristiwa berubah menjadi false：

contoh

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);
  }
}
 fungsi updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  jika (myGameArea.keys dan myGameArea.keys[37]) {myGamePiece.speedX = -1; }
  jika (myGameArea.keys dan myGameArea.keys[39]) {myGamePiece.speedX = 1; }
  jika (myGameArea.keys dan myGameArea.keys[38]) {myGamePiece.speedY = -1; }
  if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

Coba Sendiri

gunakan kursor mouse sebagai pengawal

jika Anda ingin menggunakan kursor mouse untuk mengawal blok merah, silakan myGameArea tambahkan sebuah metode ke objek untuk memperbarui koordinat x dan y kursor mouse:

contoh

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.canvas.style.cursor = "none"; //menyembunyikan kursor asli
    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);
  }
}

Lalu kami dapat menggunakan kursor mouse untuk gerakkan blok merah:

contoh

fungsi updateGameArea() {
  myGameArea.clear();
  jika (myGameArea.x && myGameArea.y) {
    myGamePiece.x = myGameArea.x;
    myGamePiece.y = myGameArea.y;
  }
  myGamePiece.update();
}

Coba Sendiri

Sentuh layar untuk mengawal permainan

kami dapat mengawal blok merah di layar sentuh.

pada myGameArea tambahkan sebuah metode ke objek, metode ini menggunakan koordinat x dan y lokasi sentuh layar:

contoh

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

Lalu, saat pengguna sentuh layar, kami dapat menggunakan kode yang sama seperti kursor mouse untuk gerakkan blok merah:

contoh

fungsi updateGameArea() {
  myGameArea.clear();
  jika (myGameArea.x && myGameArea.y) {
    myGamePiece.x = myGameArea.x;
    myGamePiece.y = myGameArea.y;
  }
  myGamePiece.update();
}

Coba Sendiri

Pengawal di atas kanvas

kami dapat menggambar tombol sendiri di atas kanvas dan menggunakannya sebagai pengawal:

contoh

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

Tambahkan fungsi baru untuk menentukan apakah komponen tertentu (dalam kasus ini adalah tombol) sudah diklik.

Pertama-tama, tambahkan penjaga acara untuk memeriksa apakah tombol mouse diklik (mousedown dan mouseup）。Untuk menangani layar sentuh, perlu menambahkan penjaga acara untuk memeriksa apakah layar sudah diklik (touchstart dan touchend）：

contoh

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

Sekarang myGameArea Objek memiliki properti yang dapat memberitahu kami koordinat x dan y klik. Kita menggunakan properti ini untuk memeriksa apakah klik dilakukan di salah satu tombol biru kami.

Metode baru ini disebut clickedyang adalah component Sebuah metode constructor, yang memeriksa apakah komponen sudah diklik.

pada updateGameArea dalam fungsi, jika salah satu tombol biru di klik, kita akan melaksanakan operasi yang diperlukan:

contoh

fungsi 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;
    jika ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
      clicked = false;
    }
    kembalikan clicked;
  }
}
fungsi updateGameArea() {
  myGameArea.clear();
  jika (myGameArea.x && myGameArea.y) {
    jika (myUpBtn.clicked()) {
      myGamePiece.y -= 1;
    }
    jika (myDownBtn.clicked()) {
      myGamePiece.y += 1;
    }
    jika (myLeftBtn.clicked()) {
      myGamePiece.x += -1;
    }
    jika (myRightBtn.clicked()) {
      myGamePiece.x += 1;
    }
  }
  myUpBtn.update();
  myDownBtn.update();
  myLeftBtn.update();
  myRightBtn.update();
  myGamePiece.update();
}

Coba Sendiri