Xử lý tương tác người dùng trong các trò chơi HTML5 dựa trên Canvas pptx

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ợ JavaSc

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

Về cơ bản, hãy suy nghĩ về một ứng dụng hoặc trò chơi tương tác như là một gắn kết giữa mô hình sự kiện trình duyệt dành cho dữ liệu đầu vào của người dùng và Canvas dành cho đồ họa đầu ra Không có sự kết nối logic nào giữa hai thứ đó trừ khi bạn tự mình xây dựng nó

Bạn sẽ tận dụng được lợi thế là những trình lắng nghe sự kiện có thể được gắn kèm với chính phần tử <canvas> Vì phần tử <canvas> chỉ đơn giản là một phần tử mức-khối (block-level), về phần trình duyệt điều này không có gì khác hơn việc gắn kèm các trình nghe sự kiện vào một

<div> hoặc bất kỳ phần tử mức-khối nào khác

Về đầu trang

Các sự kiện bàn phím

Các loại sự kiện đơn giản nhất để nghe và xử lý là các sự kiện bàn phím Chúng không phụ thuộc vào phần tử Canvas hoặc vị trí con trỏ của người dùng Các sự kiện bàn phím chỉ yêu cầu bạn nghe các sự kiện phím xuống, phím lên và nhấn phím ở mức tài liệu

Nghe các sự kiện bàn phím

Mô hình trình nghe sự kiện có thể khác nhau tùy thuộc vào việc thực hiện của trình duyệt, do đó, cách nhanh nhất để dựng lên và chạy là sử dụng một thư viện để chuẩn hóa việc xử lý các sự kiện Các ví dụ sau sử dụng jQuery để kết buộc các sự kiện Đây thường là cách dễ nhất để bắt đầu, nhưng để tương thích với các trình duyệt cũ, hiệu năng có thể bị ảnh hưởng do mức mã dư thừa hoặc mã viết kém có liên quan đến nỗ lực của jQuery Một thư viện phổ biến khác, được viết riêng để xử lý sự kiện bàn phím nhanh chóng giữa các trình duyệt, là Kibo (xem phần Tài nguyên)

Liệt kê 1 minh họa việc nghe các sự kiện nhấn phím và có hành động thích hợp dựa trên việc nhấn phím nào

Liệt kê 1 Xử lý các sự kiện bàn phím

$(document.body).on('keydown', function(e) {

switch (e.which) {

// key code for left arrow

case 37:

console.log('left arrow key pressed!');

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

3 Để xác định vị trí gốc (0,0) ở góc trên bên trái của phần tử Canvas và chuyển đổi hiệu quả các tọa độ chung thành các tọa độ tương đối, hãy lấy hiệu số giữa vị trí chuột chung được tính ở bước 2 và vị trí Canvas được tính ở bước 1

Hình 1 cho thấy một ví dụ về thông tin mà bạn cần nắm bắt về mặt hệ tọa độ chung của trang web

Hình 1 Vị trí chuột, các tọa độ chung

Hình 2 cho thấy kết quả sau khi chuyển đổi vị trí chuột sang các tọa độ cục bộ

Hình 2 Vị trí chuột sau khi chuyển đổi sang các tọa độ cục bộ

Liệt kê 2 cho thấy phương thức xác định các tọa độ chuột cục bộ Giả định rằng bạn đã định nghĩa một phần tử Canvas theo cách đánh dấu, như sau: <canvas id="my_canvas"></canvas>

Liệt kê 2 Xử lý các sự kiện chuột

var canvas = $('#my_canvas');

// calculate position of the canvas DOM element on the page

var canvasPosition = {

x: canvas.offset().left,

y: canvas.offset().top

};

canvas.on('click', function(e) {

// use pageX and pageY to get the mouse position

// relative to the browser window

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

canvas.on('click', function(e) {

e.preventDefault();

var mouse = {

x: e.pageX - canvasPosition.x,

y: e.pageY - canvasPosition.y

}

//do something with mouse position here

return false;

});

Ngay cả với mã trong Liệt kê 3, bạn vẫn có thể gặp phải một số tác dụng phụ không mong muốn khi người dùng bắt đầu một sự kiện kéo trên một phần tử DOM, chẳng hạn như sự xuất hiện của con trỏ dạng I (I-beam), sự lựa chọn văn bản và v.v Theo truyền thống, vấn đề sự kiện kéo phổ biến hơn với các hình ảnh, nhưng để áp dụng nó cho phần tử Canvas để ngăn chặn việc kéo và chọn là một ý tưởng tốt Liệt kê 4 cho thấy một quy tắc CSS để ngăn chặn các tác dụng phụ của thao tác chọn bằng cách thêm một chút CSS

Liệt kê 4 Các kiểu dáng nên dùng để ngăn chặn thao tác chọn

image, canvas {

user-select: none;

-ms-user-select: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-webkit-touch-callout: none;

-webkit-user-drag: none;

}

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 thiết bị di động đối với các cử chỉ cảm ứng chạm)

Bạn có thể ngăn chặn hành vi phóng đại bằng cách thêm user-scalable=no vào siêu thẻ

viewport Ví dụ:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />

Để vô hiệu hóa tất cả các chuyển động của tài liệu hoặc cửa sổ khi có các cử chỉ chạm, hãy đính kèm các trình nghe sự kiện trong Liệt kê 6 vào tệp document.body Về cơ bản, điều này sẽ hủy

bỏ tất cả các hành vi trình duyệt mặc định nếu người dùng tình cờ chạm nhẹ vào bất cứ chỗ nào bên ngoài vùng Canvas hoặc vùng trò chơi

Liệt kê 6 Hủy chuyển động cửa sổ trên thiết bị di động

document.body.ontouchstart = function(e) {

if (e && e.preventDefault) { e.preventDefault(); }

if (e && e.stopPropagation) { e.stopPropagation(); }

return false;

}

document.body.ontouchmove = function(e) {

if (e && e.preventDefault) { e.preventDefault(); }

if (e && e.stopPropagation) { e.stopPropagation(); }

return false;

}

Về đầu trang

Phát quảng bá tới các đối tượng trò chơi

Bạn cần đính kèm chỉ một trình nghe sự kiện vào Canvas cho mỗi kiểu sự kiện mà bạn muốn bắt giữ Ví dụ, nếu bạn cần bắt giữ các sự kiện nhấn chuột và di chuyển chuột (mousemove), thì chỉ cần đính kèm một trình nghe sự kiện nhấn chuột duy nhất và một trình nghe sự kiện di chuyển 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

// at various positions on the screen using

// new gameObject(x, y, width, height)

var gameObjectArray = [

new gameObject(0, 0, 200, 200),

new gameObject(50, 50, 200, 200),

new gameObject(500, 50, 100, 100)

];

canvas.on('click', function(e) {

var mouse = {

x: e.pageX - canvasPosition.x,

y: e.pageY - canvasPosition.y

}

// iterate through all game objects

// and call the onclick handler of each

for (var i=0; i < gameObjectArray.length; i++) {

gameObjectArray[i].handleClick(mouse);

}

});

Bước tiếp theo là bảo đảm rằng mỗi đối tượng trò chơi có thể thực hiện kiểm tra nhấn chuột để xác định xem tọa độ chuột có va chạm bên trong khu vực hộp giới hạn của các đối tượng trò chơi không Hình 4 cho thấy một ví dụ về một lần kiểm tra nhấn chuột không thành công

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

Hình 5 cho thấy một kiểm tra nhấn chuột thành công

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;