Trò chơi về độ gần, lấy cảm hứng từ tàu quét mìn.
Nhóm hỗ trợ squoosh.app đã trở lại! Lần này, chúng tôi đã xây dựng một trò chơi dựa trên nền tảng web có tên là PROXX (proxx.app). PROXX là một trò chơi lấy cảm hứng từ trò chơi huyền thoại Minesweeper. Trò chơi này nằm trong không gian và công việc của bạn là tìm ra các lỗ đen ở đâu. Tính năng này hoạt động trên mọi loại thiết bị, từ máy tính cho đến điện thoại phổ thông. Người dùng có thể chơi trò chơi bằng chuột, bàn phím, d-pad ngay cả với trình đọc màn hình.
Giá trị cơ sở của chúng tôi
Trước khi xây dựng trò chơi này, chúng tôi đã đặt các mục tiêu và ngân sách sau đây cho ứng dụng:
- Cùng một trải nghiệm cốt lõi: tất cả các thiết bị phải hoạt động theo cùng một cách
- Hỗ trợ tiếp cận: chuột, bàn phím, cảm ứng, d-pad, trình đọc màn hình
- Hiệu suất:
- Tải trọng ban đầu nhỏ hơn 25 kb
- Dưới 5 giây TTI (thời gian tương tác) trên mạng 3G chậm
- Ảnh động nhất quán 60 khung hình/giây
Trình chạy web
Trò chơi bao gồm 4 thực thể chính: logic trò chơi cốt lõi, dịch vụ giao diện người dùng, dịch vụ trạng thái và đồ hoạ ảnh động. Vì biết ngay từ đầu sẽ phải chạy đồ hoạ động nặng trên luồng chính, nên chúng tôi đã chuyển dịch vụ trạng thái và logic trò chơi sang trình thực thi web để giữ cho luồng chính miễn phí nhất có thể.
Kết xuất trước thời gian tạo bản dựng
Giao diện người dùng của chúng tôi được xây dựng bằng tính năng Preact, vì tính năng này cho phép chúng tôi đạt được mục tiêu linh hoạt cho tải trọng ban đầu dưới 25 kb. Để cung cấp trải nghiệm tải ban đầu tốt, chúng tôi quyết định kết xuất trước khung hiển thị đầu tiên. Chúng tôi kết xuất trước tại thời điểm dựng bằng cách sử dụng Puppeteer để truy cập vào trang trên cùng và cho phép điền trước DOM. Sau đó, DOM kết quả được chuyển đổi tuần tự sang HTML và lưu dưới dạng index.html
Canvas cho ảnh động, DOM (ẩn) Để hỗ trợ tiếp cận
Chúng tôi kết xuất đồ hoạ trò chơi trong một canvas bằng WebGL. Một canvas chịu trách nhiệm về ảnh động trong nền và một canvas khác cho lưới trò chơi ở trên cùng. Chúng tôi cũng có một bảng HTML hiển thị các nút vì lý do hỗ trợ tiếp cận, nằm ở trên cả hai canvas này nhưng được ẩn (độ mờ: 0). Mặc dù những gì bạn thấy là kết xuất canvas của trạng thái trò chơi, nhưng người chơi đang tương tác với bảng DOM vô hình, cho phép chúng ta đính kèm trình nghe sự kiện và dựa vào tính năng quản lý tiêu điểm của trình duyệt.
Bằng cách giữ phần tử DOM trong canvas, chúng tôi có thể khai thác tính năng hỗ trợ tiếp cận tích hợp trong trình duyệt. Ví dụ: bằng cách đặt role="grid" trên bảng trò chơi, trình đọc màn hình có thể thông báo hàng và cột của ô được lấy tiêu điểm mà không cần chúng ta phải triển khai.
Dữ liệu tổng hợp để nhóm và chia tách mã
Tổng kích thước của ứng dụng là 100KB. Trong số đó, 20 KB là dành cho tải trọng ban đầu (index.html). Chúng tôi sử dụng Rollup.js cho dự án này. Chúng ta đã chia sẻ các phần phụ thuộc giữa luồng chính và trình thực thi web, đồng thời Rollup có thể đặt các phần phụ thuộc được chia sẻ này vào một phần riêng mà chỉ cần tải một lần. Các gói khác như webpack sao chép các phần phụ thuộc dùng chung, dẫn đến việc tải hai lần.
Hỗ trợ điện thoại phổ thông
Các loại điện thoại phổ thông thông minh như điện thoại KaiOS đang nhanh chóng trở nên phổ biến. Đây là các thiết bị rất hạn chế về tài nguyên, nhưng phương pháp sử dụng của chúng tôi bằng cách sử dụng trình thực thi web bất cứ khi nào có thể cho phép chúng tôi tạo ra trải nghiệm phản hồi nhanh trên các điện thoại này. Vì điện thoại phổ thông có giao diện nhập khác nhau (d-pad và phím số, không có màn hình cảm ứng), nên chúng tôi cũng đã triển khai giao diện dựa trên phím.
Các bước tiếp theo
Chúng tôi đã có thời gian tuyệt vời nhưng bận rộn để xây dựng trò chơi này đúng lúc cho Google I/O 2019, vì vậy chúng tôi sẽ dành thời gian nghỉ ngơi, nhưng dự định sẽ quay lại để cung cấp thêm tài liệu chuyên sâu hơn về từng khía cạnh của trò chơi.
Cho đến lúc đó, vui lòng xem bài nói chuyện của Mariko về dự án này tại I/O.
Bạn có thể duyệt xem mã này tại kho lưu trữ github proxx.
Chúc mừng! Surma, Jake, Mariko