Komponen Permainan

Tambahkan blok merah ke area permainan:

Tambah komponen

Buat konstruktor komponen yang memungkinkan Anda menambah komponen ke area permainan.

Konstruktor objek ini disebutkomponen (component), kami membuat komponen pertama, yang dinamai myGamePiece:

实例

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}

Coba Sendiri

Komponen ini memiliki properti dan metode untuk mengawasi penampilan dan geraknya.

bingkai

Agar siapkan gerakan permainan, kami akan memperbarui tampilan setiap detik 50 kali, yang mirip seperti bingkai film.

首先，创建一个名为 fungsi updateGameArea(), yang digunakan untuk menghandle penggambaran komponen. Pertama, buat sebuah fungsi baru bernama

yang digunakan untuk membersihkan seluruh kanvas. yang akan menjalankan fungsi baru. myGameArea fungsi updateGameArea(), yang digunakan untuk menghandle penggambaran komponen. pada objek clear() fungsi (50 kali per detik). Kemudian, tambahkan interval yang akan berjalan setiap 20 milidetik

yang digunakan untuk membersihkan seluruh kanvas. pada component update() Dalam konstruktor, ditambahkan sebuah fungsi bernama

fungsi updateGameArea(), yang digunakan untuk menghandle penggambaran komponen. panggilan fungsi clear() dan update() metode.

Hasilnya adalah komponen akan digambar dan dihapus 50 kali per detik:

实例

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);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  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);
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
}

Coba Sendiri

Biarkan nya bergerak

Untuk membuktikan bahwa kotak merah digambar 50 kali per detik, kami akan mengubah posisi x (horisontal) satu pixel setiap update area permainan:

实例

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

Coba Sendiri

Mengapa harus menghapus area permainan?

Sepertinya tidak perlu menghapus area permainan setiap update. Namun, jika kita clear() Metode, semua gerakan komponen akan meninggalkan jejak posisi terakhir frame-nya:

实例

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

Coba Sendiri

Ubah ukuran

Anda dapat mengendalikan lebar dan tinggi komponen:

实例

Buat kotak segi empat dengan ukuran 10x140 pixel:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
}

Coba Sendiri

Ubah warna

Anda dapat mengendalikan warna komponen:

实例

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "blue", 10, 120);
}

Coba Sendiri

Anda juga dapat menggunakan nilai warna lainnya, seperti heksadesimal, rgb, atau rgba:

实例

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

Coba Sendiri

Ubah lokasi

Kami menggunakan koordinat x dan y untuk menempatkan komponen di area permainan.

Koordinat kiri atas kanvas adalah (0,0).

Tahan kursor di atas area permainan untuk melihat koordinat x dan y:

Anda dapat menempatkan komponen di lokasi apapun di area permainan:

实例

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

Coba Sendiri

berbagai komponen

Anda dapat menempatkan berapa banyak komponen saja di area permainan:

实例

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

Coba Sendiri

bergerak komponen

memperkenalkan tiga komponen untuk bergerak ke arah yang berbeda:

实例

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

Coba Sendiri