Phần cứng game

Thêm một khối màu đỏ vào khu vực trò chơi:

Thêm thành phần

Tạo một hàm xây dựng thành phần để bạn có thể thêm thành phần vào khu vực trò chơi.

Hàm xây dựng đối tượng này được gọi làthành phần（component），chúng ta đã tạo thành phần đầu tiên, tên là myGamePiece:

thực thể

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

Thử ngay

Những thành phần này có thuộc tính và phương pháp để kiểm soát ngoại hình và di chuyển của chúng.

Khung hình

Để chuẩn bị cho trò chơi sẵn sàng动作, chúng ta sẽ cập nhật hiển thị 50 lần mỗi giây, điều này rất giống như khung hình trong phim.

首先，创建一个名为 updateGameArea() mới. Đầu tiên, tạo một hàm có tên

trong myGameArea thành phần trong updateGameArea() hàm (mỗi giây 50 lần). Thêm một hàm mới có tên clear() hàm, được sử dụng để xóa sạch toàn bộ bức tranh.

trong component Trong hàm xây dựng, thêm một hàm có tên update() hàm, được sử dụng để xử lý việc vẽ thành phần.

updateGameArea() hàm gọi clear() và update() phương pháp.

Kết quả là thành phần sẽ được vẽ và xóa sạch 50 lần mỗi giây:

thực thể

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

Thử ngay

Hãy để nó hoạt động

Để chứng minh rằng khối đỏ được vẽ 50 lần mỗi giây, mỗi lần cập nhật khu vực trò chơi, chúng ta sẽ thay đổi vị trí x (ngang) một pixel:

thực thể

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

Thử ngay

Tại sao cần làm sạch khu vực trò chơi?

Dường như không cần thiết phải làm sạch khu vực trò chơi mỗi lần cập nhật. Tuy nhiên, nếu chúng ta bỏ qua clear() Phương pháp, tất cả các di chuyển của thành phần sẽ để lại dấu vết của vị trí cuối cùng trong khung hình trước:

thực thể

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

Thử ngay

thay đổi kích thước

Bạn có thể kiểm soát độ rộng và độ cao của thành phần:

thực thể

tạo hình vuông 10x140 pixel:

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

Thử ngay

thay đổi màu sắc

Bạn có thể kiểm soát màu sắc của thành phần:

thực thể

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

Thử ngay

Bạn cũng có thể sử dụng các giá trị màu khác, chẳng hạn như hexa, rgb hoặc rgba:

thực thể

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

Thử ngay

thay đổi vị trí

Chúng ta sử dụng tọa độ x và y để định vị thành phần trong khu vực trò chơi.

Tọa độ góc trên cùng bên trái của canvas là (0,0).

Đặt con trỏ chuột lên khu vực trò chơi dưới đây để xem tọa độ x và y:

X
Y

Bạn có thể đặt thành phần ở bất kỳ vị trí nào trong khu vực trò chơi:

thực thể

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

Thử ngay

nhiều thành phần

Bạn có thể đặt bất kỳ số lượng thành phần nào trong khu vực trò chơi:

thực thể

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

Thử ngay

di chuyển thành phần

để ba thành phần di chuyển cùng lúc theo hướng khác nhau:

thực thể

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

Thử ngay