Bức tranh game

HTML <canvas> element hiển thị trên trang web như đối tượng hình vuông:

HTML Canvas

Phương thức tạo một thuộc tính rất phù hợp để phát triển trò chơi trong HTML.

Phương thức tạo một thuộc tính cung cấp tất cả các chức năng cần thiết để tạo trò chơi.

Hãy sử dụng JavaScript trong Phương thức tạo một vẽ, viết văn bản, chèn hình ảnh, v.v.

.getContext("2d")

Phương thức tạo một thuộc tính có một đối tượng tích hợp trong, được gọi là getContext("2d") đối tượng cung cấp các phương pháp và thuộc tính để vẽ.

Bạn có thể tìm thấy trong Hướng dẫn Canvas học về Phương thức tạo một thuộc tính và getContext("2d") thông tin thêm về đối tượng.

thì bắt đầu đi

Để tạo trò chơi, trước tiên hãy tạo một khu vực trò chơi và chuẩn bị để vẽ:

thực thể

function startGame() {
  myGameArea.start();
}
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]);
  }
}

thử ngay

Trong phần sau của hướng dẫn này, đối tượng myGameArea sẽ nhận được nhiều thuộc tính và phương pháp hơn.

hàm startGame() gọi myGameArea 对象的 Phương thức. Đối tượng.

Phương thức. Phương thức start() Phương thức tạo một Phần tử <canvas>, và chèn làm nút con đầu tiên vào Phần tử <body> trong phần tử.