Thành phần trò chơi
Thêm một hình vuông màu đỏ vào khu vực trò chơi:
Thêm một thành phần
Tạo một phương thức khởi tạo thành phần, cho phép bạn thêm các thành phần vào gamearea.
Phương thức khởi tạo đối tượng được gọi
componentvà chúng tôi tạo thành phần đầu tiên, được gọi là myGamePiece:
Thí dụ
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);
}
Các thành phần có các thuộc tính và phương pháp để kiểm soát sự xuất hiện và chuyển động của chúng.
Khung
Để giúp trò chơi sẵn sàng hành động, chúng tôi sẽ cập nhật màn hình hiển thị 50 lần mỗi giây, giống như khung hình trong phim.
Đầu tiên, tạo một hàm mới được gọi là updateGameArea().
Trong myGameAreađối tượng, thêm một khoảng thời gian sẽ chạy updateGameArea()hàm sau mỗi 20 mili giây (50 lần mỗi giây). Ngoài ra, hãy thêm một chức năng được gọi là clear(), chức năng này sẽ xóa toàn bộ khung vẽ.
Trong hàm componenttạo, hãy thêm một hàm được gọi
update(), để xử lý bản vẽ của thành phần.
Hàm updateGameArea()gọi phương thức clear()và update().
Kết quả là thành phần được vẽ và xóa 50 lần mỗi giây:
Thí dụ
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();
}
Hãy làm nó di chuyển đi
Để chứng minh rằng hình vuông màu đỏ đang được vẽ 50 lần mỗi giây, chúng tôi sẽ thay đổi vị trí x (ngang) một pixel mỗi khi chúng tôi cập nhật khu vực trò chơi:
Thí dụ
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Tại sao lại xóa khu vực trò chơi?
Có vẻ như không cần thiết phải xóa khu vực trò chơi ở mỗi bản cập nhật. Tuy nhiên, nếu chúng ta bỏ qua
clear()phương pháp này, tất cả các chuyển động của thành phần sẽ để lại dấu vết về vị trí của nó trong khung hình cuối cùng:
Thí dụ
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Thay đổi kích thước
Bạn có thể kiểm soát chiều rộng và chiều cao của thành phần:
Thí dụ
Tạo hình chữ nhật 10x140 pixel:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
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í dụ
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
Bạn cũng có thể sử dụng các giá trị màu khác như hex, rgb hoặc rgba:
Thí dụ
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Thay đổi vị trí
Chúng tôi sử dụng tọa độ x và y để định vị các thành phần trên khu vực trò chơi.
Góc trên bên trái của canvas có tọa độ (0,0)
Di chuột qua khu vực trò chơi bên dưới để xem tọa độ x và y của nó:
Bạn có thể định vị các thành phần ở bất cứ đâu bạn muốn trên khu vực trò chơi:
Thí dụ
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
Nhiều thành phần
Bạn có thể đặt bao nhiêu thành phần tùy thích vào khu vực trò chơi:
Thí dụ
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();
}
Các thành phần chuyển động
Làm cho cả ba thành phần di chuyển theo các hướng khác nhau:
Thí dụ
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();
}