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