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