Xử lý tương tác người dùng trong các trò chơi
HTML5 dựa trên Canvas
Giới thiệu
Các nhà phát triển đã từng làm việc với Flash hay Silverlight thường ngạc nhiên rằng các ứng
dụng được viết cho HTML5 Canvas không cung cấp tiện nghi đặc biệt nào về xử lý dữ liệu đầu
vào của người dùng. Về cơ bản, đầu vào từ người dùng của HTML liên quan đến việc sử dụng
một hệ thống xử lý sự kiện được xây dựng trong các trình duyệt kể từ những ngày đầu tiên mà
trình duyệt hỗ trợ JavaScript; không có gì đặc trưng cho HTML5 để phát hiện và xử lý dữ liệu
đầu vào từ người dùng. Ví dụ như khả năng cung cấp thông tin phản hồi mức thấp để chỉ ra tọa
độ (x, y) mà người dùng đã nhấn chuột vào.
Các từ viết tắt thông dụng
 CSS: Cascading Style Sheets (Bản định kiểu xếp chồng)
 DOM: Document Object Model (Mô hình đối tượng tài liệu)
 HTML: HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản)
Việc xử lý tương tác của người dùng không có gì khác so với những kiến trúc trò chơi khác.
Không có những sự trừu tượng hóa dựng sẵn nào để thông báo cho bạn khi người dùng đã tương
tác với một đối tượng cụ thể được biểu thị trên Canvas. Điều này tạo ra một phạm vi rất lớn về
kiểm soát mức thấp về cách bạn muốn xử lý các sự kiện đó ra sao. Miễn là bạn có thể không
chọn hoặc chọn sai khai báo kiểu tài liệu (DOCTYPE) của trình duyệt khác nhau, thì cuối cùng
bạn có thể điều chỉnh việc xử lý các sự kiện để đạt được hiệu quả tối đa theo một ứng dụng duy
nhất—chứ không bị gắn chặt vào một cách triển khai thực hiện cụ thể.
Trong bài này, hãy tìm hiểu các kỹ thuật để xử lý tương tác người dùng trong các trò chơi dựa
trên HTML Canvas. Các ví dụ minh họa cách xử lý các sự kiện bàn phím, chuột và cảm ứng
chạm. Các chiến lược để gửi sự kiện đến các đối tượng trò chơi và khả năng tương thích với thiết
bị di động cũng được trình bày trong bài này.
Bạn có thể tải về mã nguồn cho các ví dụ.
Về đầu trang
Các loại sự kiện
Sự tương tác của người dùng được xử lý hoàn toàn bằng mô hình lắng nghe sự kiện truyền thống
của trình duyệt. Không có gì mới khi HTML5 phát hành; đó vẫn là mô hình sự kiện tương tự như
đã được sử dụng từ những ngày đầu của Netscape Navigator.

break;

// key code for right arrow
case 39:
console.log('right arrow key pressed!');
break;
}
});

Nếu ứng dụng của bạn diễn ra trong môi trường của một trình duyệt web, điều quan trọng là luôn
để tâm đến các tổ hợp bàn phím nhạy cảm. Trong khi, về kỹ thuật, có thể định nghĩa các hành vi
đối với các tổ hợp phím phổ biến nào đó sẽ ghi đè lên các hành vi trình duyệt mặc định của
chúng (chẳng hạn như tổ hợp phím CTRL-R), bạn cần tránh điều này.
Về đầu trang
Các sự kiện chuột
Các sự kiện chuột phức tạp hơn nhiều so với các sự kiện bàn phím. Bạn phải nhận biết về vị trí
của phần tử Canvas bên trong cửa sổ trình duyệt cũng như vị trí con trỏ của người dùng.
Lắng nghe các sự kiện chuột
Thật dễ dàng để có được vị trí của chuột tương đối so với toàn bộ cửa sổ trình duyệt bằng cách
sử dụng các thuộc tính e.pageX và e.pageY. Trong trường hợp này, gốc (0,0) sẽ được đặt ở góc
trên cùng bên trái của toàn bộ cửa sổ trình duyệt.
Bạn thường không quan tâm quá nhiều về dữ liệu đầu vào của người dùng khi con trỏ của người
dùng không đặt trong vùng Canvas. Vì vậy, sẽ tốt hơn nếu coi gốc (0,0) được đặt ở góc trên bên
trái của phần tử Canvas. Lý tưởng nhất là bạn cần hoạt động bên trong hệ tọa độ cục bộ tương
đối so với vùng Canvas chứ không phải là một hệ thống tọa độ chung (global) liên quan đến toàn
bộ cửa sổ trình duyệt.
Các chiến lược về sự kiện chuột
Sử dụng các bước sau đây để chuyển đổi các tọa độ cửa sổ chung sang các tọa độ Canvas cục bộ.
1. Tính toán vị trí (x, y) của phần tử DOM của Canvas trên trang web.
2. Xác định vị trí chung của chuột liên quan đến toàn bộ tài liệu.


var mouse = {
x: e.pageX - canvasPosition.x,
y: e.pageY - canvasPosition.y
}

// now you have local coordinates,
// which consider a (0,0) origin at the
// top-left of canvas element
});

Về đầu trang
Các hành vi trình duyệt không mong muốn
Trong một trò chơi máy tính, bạn thường không muốn bất kỳ hành vi trình duyệt mặc định nào
can thiệp vào các hành động của mình. Ví dụ, bạn không muốn kéo chuột để thực hiện chọn văn
bản, một lần nhấn phím chuột phải để mở trình đơn ngữ cảnh hoặc cuộn bánh xe chuột để di
chuyển lên và xuống trang.
Hình 3 cho thấy một ví dụ về những gì có thể xảy ra nếu người dùng nhấn phím chuột và kéo
một hình ảnh trong trình duyệt. Mặc dù hành vi trình duyệt mặc định hoàn toàn có nghĩa đối với
các ứng dụng kéo và thả, những nó không phải là một hành vi mà bạn muốn có trong trò chơi của
mình.

Hình 3. Hành vi trình duyệt mặc định khi kéo một hình ảnh

Trong tất cả các trình xử lý sự kiện, hãy thêm một dòng preventDefault() và trả về false (sai)
từ hàm đó. Mã trong Liệt kê 3 sẽ thực hiện thủ thuật theo cách ngăn chặn cả hành động mặc định
lẫn sự kiện xảy ra.

Liệt kê 3. Ngăn chặn hành vi mặc định


}

Ghi đè lên các hành vi máy tính để bàn
Nói chung, ghi đè lên các sự kiện kéo và chọn là một ý tưởng tốt để đảm bảo rằng hành vi kéo và
chọn mặc định của trình duyệt không ngóc đầu dậy.
Mã trong Liệt kê 5 cố ý không sử dụng jQuery để gắn kèm các sự kiện. jQuery không xử lý đúng
đắn các sự kiện ondragstart và onselectstart (nếu được gắn kèm bằng cách sử dụng jQuery,
thì các trình xử lý sự kiện có thể không bao giờ bắt đầu được).

Liệt kê 5. Hủy bỏ các sự kiện kéo và chọn

var canvasElement = document.getElementById('my_canvas');

// do nothing in the event handler except canceling the event
canvasElement.ondragstart = function(e) {
if (e && e.preventDefault) { e.preventDefault(); }
if (e && e.stopPropagation) { e.stopPropagation(); }
return false;
}

// do nothing in the event handler except canceling the event
canvasElement.onselectstart = function(e) {
if (e && e.preventDefault) { e.preventDefault(); }
if (e && e.stopPropagation) { e.stopPropagation(); }
return false;
}

Ghi đè lên các hành vi trên thiết bị di động
Trên các thiết bị di động, điều rất quan trọng là bạn ngăn chặn người dùng phóng đại và mở rộng
cửa sổ trình duyệt (việc phóng đại và mở rộng thường là hành vi mặc định của trình duyệt cho

chuột duy nhất vào Canvas. Các trình nghe sự kiện chỉ cần được đính kèm một lần, vì thế, thông
thường là đính kèm các sự kiện này trong lúc khởi tạo ứng dụng.
Nếu bạn cần các trình nghe sự kiện bắt giữ bất kỳ thông tin có ích nào lan truyền xuống tới các
đối tượng được biểu hiện trên Canvas, bạn phải xây dựng logic riêng của mình cho hệ thống.
Trong ví dụ này, một hệ thống như vậy sẽ chịu trách nhiệm phát quảng bá sự kiện nhấn chuột
hoặc di chuyển chuột tới tất cả các đối tượng trò chơi liên quan đến việc xử lý một trong những
sự kiện đó.
Khi mỗi đối tượng trò chơi học một trong những sự kiện này, đầu tiên đối tượng trò chơi sẽ cần
nhận biết xem sự kiện nhấn chuột hoặc di chuyển chuột có liên quan đến chúng không. Nếu có,
thì đối tượng trò chơi đó cần xác định xem các tọa độ chuột có vị trí ở bên trong các ranh giới
riêng của nó hay không.
Các chiến lược phát quảng bá
Chiến lược chính xác của bạn sẽ khác nhau dựa trên các kiểu trò chơi. Ví dụ, một bộ các hình
ảnh nhỏ hơn dùng trong 2D (2D tileset) có thể có một chiến lược khác so với một thế giới 3D.
Các bước sau đây phác thảo một cách triển khai thực hiện đơn giản có thể làm việc tốt với một
ứng dụng 2D đơn giản.
1. Phát hiện các tọa độ nhấn chuột của người dùng trong vùng Canvas.
2. Thông báo cho tất cả các đối tượng trò chơi rằng một sự kiện nhấn chuột đã xảy ra tại tập
hợp các tọa độ cụ thể.
3. Đối với mỗi đối tượng trò chơi, thực hiện phép kiểm tra nhấn chuột giữa các tọa độ chuột
và hộp giới hạn chứa đối tượng trò chơi để xác định xem các tọa độ chuột có va chạm với
đối tượng đó không.
Ví dụ phát quảng bá đơn giản
Trình xử lý sự kiện nhấn chuột có thể trông giống như Liệt kê 7. Ví dụ này giả định rằng bạn đã
thiết lập một kiểu cấu trúc nào đó để theo dõi tất cả các đối tượng trò chơi trên thế giới. Vị trí và
các chiều của tất cả các đối tượng trò chơi được lưu trữ trong một biến gọi là gameObjectArray.

Liệt kê 7. Phát quảng bá trình xử lý sự kiện nhấn chuột cho các đối tượng trò chơi

// initialize an array of game objects


Hình 5. Nhấn chuột trong vùng giới hạn - kiểm tra nhấn chuột thành công

Bạn có thể định nghĩa một lớp cho các đối tượng trò chơi, như trong Liệt kê 8. Một phép kiểm
tra nhấn chuột được thực hiện theo hàm onclick(), hàm này kiểm tra sự va chạm giữa hộp giới
hạn của đối tượng đó và các tọa độ chuột được chuyển vào làm một tham số.

Liệt kê 8. Lớp đối tượng trò chơi và kiểm tra nhấn chuột

function gameObject(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;

// mouse parameter holds the mouse coordinates
this.handleClick = function(mouse) {

// perform hit test between bounding box
// and mouse coordinates

if (this.x < mouse.x &&
this.x + this.width > mouse.x &&
this.y < mouse.y &&
this.y + this.height > mouse.y) {

// hit test succeeded, handle the click event!
return true;
}



Như hiển thị trong Liệt kê 10, lớp đối tượng trò chơi cũng được sửa đổi. Thay vì định nghĩa một
hàm onclick, chỉ cần nghe sự kiện handleClick. Bất cứ khi nào khởi động sự kiện
handleClick bất kỳ các đối tượng trò chơi nào đang nghe sự kiện đó sẽ bắt đầu các trình xử lý
sự kiện tương ứng của chúng.

Liệt kê 10. Xử lý một sự kiện tùy chỉnh

function gameObject(x, y, width, height) {
var self = this;
this.x = x;
this.y = y;
this.width = width;
this.height = height;

$(canvas).on('handleClick', function(e, mouse) {

// perform hit test between bounding box
// and mouse coordinates

if (self.x < mouse.x &&
self.x + self.width > mouse.x &&
self.y < mouse.y &&
self.y + self.height > mouse.y) {

// hit test succeeded, handle the click event!

}
});
}


Liệt kê 12. Sắp xếp mảng đối tượng trò chơi

// sort in order such that highest z-index occurs first
var sortedGameObjectArray = gameObjectArray.sort(function(gameObject1,
gameObject2) {
if (gameObject1.zIndex < gameObject2.zIndex) return true;
else return false;
})

Cuối cùng, trong hàm click, hãy thay đổi mọi thứ để lặp qua tất cả các đối tượng trò chơi trong
mảng đã sắp xếp.
Ngay sau khi bạn nhận được một kết quả đúng từ việc kiểm tra nhấn chuột của một đối tượng trò
chơi, hãy ngừng ngay lập tức, không cho việc nhấn chuột tiếp tục lan truyền. Nếu bạn không
dừng ngay việc kiểm tra này, như trong Liệt kê 13, thì hành vi không mong muốn của các đối
tượng trò chơi với việc xử lý sự kiện click (nhấn chuột) ở độ sâu hơn sẽ vẫn tiếp tục.

Liệt kê 13. Ngừng ngay việc kiểm tra nhấn chuột thành công

canvas.on('click', function(e) {
var mouse = {
x: e.pageX - canvasPosition.x,
y: e.pageY - canvasPosition.y
}

for (var i=0; i < sortedGameObjectArray.length; i++) {
var hitTest = sortedGameObjectArray[i].onclick(mouse);

// stop as soon as one hit test succeeds
if (hitTest) {


$(canvas).on('handleClick', function(e, mouse) {

// first, define polygonal bounding area as a path
context.save();
context.beginPath();
context.moveTo(0,0);
context.lineTo(0,100);
context.lineTo(100,100);
context.closePath();

// do not actually fill() or stroke() the path because
// the path only exists for purposes of hit testing
// context.fill();

// perform hit test between irregular bounding area
// and mouse coordinates
if (context.isPointInPath(mouse.x, mouse.y)) {
// hit test succeeded, handle the click event!

}
context.restore();
});

Mặc dù để viết các thuật toán va chạm của chính bạn thường có hiệu quả hơn chứ không phải
bằng cách sử dụng hàm IsPointInPath(), nó có thể là một công cụ tốt để tạo nguyên mẫu và
phát triển nhanh chóng.
Về đầu trang
Tương thích với thiết bị di động
Để làm cho trò chơi ví dụ tương thích với các thiết bị di động, bạn sẽ cần làm việc với các sự

}

Để phát hiện sự hỗ trợ cảm ứng chạm, ví dụ này sử dụng thư viện Modernizr (xem phần Tài
nguyên). Thư viện Modernizr làm cho việc phát hiện sự hỗ trợ cảm ứng chạm chỉ đơn giản là
vấn đề kiểm tra biến Modernizr.touch, biến này trả về giá trị là đúng nếu thiết bị hỗ trợ các sự
kiện cảm ứng chạm.
Trình xử lý sự kiện không biết rõ về thiết bị
Trong quá trình khởi tạo ứng dụng, bạn có thể thay thế mã trước đây để định nghĩa các trình
nghe sự kiện bằng một nhánh riêng dùng cho dữ liệu đầu vào của các thiết bị hỗ trợ cảm ứng
chạm và chuột. Khá đơn giản để ánh xạ các sự kiện chuột tới một sự kiện cảm ứng chạm tương
đương. Ví dụ, mousedown được thay thế bằng touchstart và mouseup được thay thế bằng
touchend.
Liệt kê 16 cho thấy một ví dụ về sử dụng Modernizr để ánh xạ các sự kiện chuột/cảm ứng chạm
tương đương. Nó cũng sử dụng hàm getPosition() được định nghĩa trong Liệt kê 15.

Liệt kê 16. Sử dụng các sự kiện chuột/cảm ứng chạm đã chuẩn hóa

var eventName = Modernizr.touch ? 'touchstart' : 'click';

canvas.on(eventName, function(e) {
e.preventDefault();

var position = getPosition(e);
//do something with position here

return false;
});

Trừ khi bạn cần xử lý các hành động nâng cao hơn, chẳng hạn như dùng hai ngón tay để kéo, đẩy
(pinch) và vuốt (swipe), phương thức này thường hoạt động tốt khi dùng một cổng trực tiếp cho