Trò chơi HTML5, canvas hoặc div?

Question

Tôi đang lên kế hoạch tạo trò chơi platformer nhiều người chơi trong thời gian thực bằng HTML5 bằng javascript. Sau khi tìm kiếm khoảng 4 giờ trên web, tôi không thể tìm thấy câu trả lời cập nhật về câu hỏi đời đời: hiển thị trò chơi của tôi với DOM sẽ nhanh hơn hiển thị trong canvas? Trò chơi sẽ là toàn bộ tài liệu. 2/4 người chơi sẽ nhảy trên bản đồ và bắn nhau, bom sẽ nổ tung. Vì thế? Nó sẽ là gì. Tôi nhớ tôi đã thực hiện cách đây 2 năm một ứng dụng vẽ với DOM và nó hoạt động tốt, nhưng tôi đoán tốc độ khung hình ngày nay tốt hơn? Cảm ơn các bạn.

P.S. Tôi cũng nghĩ đến việc sử dụng Dart.

Answer 1

Tôi sử dụng canvas và sẽ nói để thực hiện tương tự vì đó là chế độ vẽ trực tiếp. Tuy nhiên, bạn hoàn toàn chắc chắn rằng nó bị buộc phải tăng tốc phần cứng bất cứ khi nào có thể. Bạn thực hiện việc này bằng cách đặt kiểu dáng của thành phần <canvas> thành transform:translateZ(0); (hoặc các cách giải thích khác về trình duyệt đó, ví dụ: -webkit-transform:translateZ(0);). Thao tác với DOM có thể chậm ngay bây giờ khi canvas gần hơn và gần gũi hơn với mã gốc, đặc biệt là với các phương thức đơn giản để có được hiệu suất cao nhất từ ​​nó.

Trò chơi của tôi dường như hoạt động tốt trên các nền tảng khác nhau - không phổ biến trên mọi nền tảng (hệ điều hành Android cũ tụt hậu, nhưng động cơ hiển thị trình duyệt JS & không nhanh như vậy), nhưng khá tốt trên nhiều nền tảng.

Answer 2

Canvas là lựa chọn tốt nhất cho loại trò chơi bạn mô tả, nhưng một số yếu tố DOM vẫn rất hữu ích ngay cả khi sử dụng canvas, ví dụ như yêu cầu tên người chơi hoặc tạo phần hồ sơ hoặc cá nhân bên trong trò chơi. Bạn có thể hiển thị div với vị trí tuyệt đối trên canvas của bạn khi bạn cần hiển thị các phần tử DOM và thực hiện tất cả "công cụ trò chơi" như vẽ và tạo hình động trong phần tử canvas.

Lý do Canvas là lựa chọn tốt nhất rất đơn giản. Tôi khá chắc chắn rằng bạn có thể không hoặc nó sẽ thực sự khó có thể làm những việc như thế này mà không có sự yếu tố canvas:

http://galloman.github.io/ss2d/samples/skeletons2.html

thêm tại: http://ss2d.wordpress.com/support/