Trò chơi Canvas
Phần tử HTML <canvas>
được hiển thị dưới dạng đối tượng hình chữ nhật trên trang web:
Canvas HTML
Phần tử <canvas>
hoàn hảo để tạo trò chơi bằng HTML.
Phần tử <canvas>
cung cấp tất cả chức năng bạn cần để tạo trò chơi.
Sử dụng JavaScript để vẽ, viết, chèn hình ảnh, v.v. vào <canvas>
.
.getContext("2d")
Phần tử <canvas>
có một đối tượng dựng sẵn, được gọi là đối tượng getContext("2d")
, với các phương thức và thuộc tính để vẽ.
Bạn có thể tìm hiểu thêm về phần tử <canvas>
và đối tượng getContext("2d")
trong Hướng dẫn Canvas của chúng tôi.
Bắt đầu
Để tạo trò chơi, hãy bắt đầu bằng cách tạo khu vực chơi trò chơi và chuẩn bị sẵn sàng để vẽ:
Ví dụ
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]);
}
}
Hãy tự mình thử » Đối tượng myGameArea
sẽ có nhiều thuộc tính và phương thức hơn trong hướng dẫn này.
Hàm startGame()
gọi phương thức start()
của đối tượng myGameArea
.
Phương thức start()
tạo phần tử <canvas>
và chèn nó làm nút con đầu tiên của phần tử <body>
.