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ữ...
Nội dung trích xuất từ tài liệu:
Xử lý tương tác người dùng trong các trò chơi HTML5 dựa trên Canvas 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ử . Vì phần tử 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 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 t ...