Canvas vs SVG cho các trò chơi đơn giản

Question

Nếu tôi muốn xây dựng một trò chơi đơn giản (rắn, cờ, pacman hoặc bất cứ thứ gì) thì cách tiếp cận nào tốt hơn - SVG hoặc Canvas?

Những điều tôi mong muốn:

1. Dễ thực hiện (đường cong học tập của Canvas vs SVG). Ví dụ: nếu SVG có hướng dẫn ít hơn đáng kể và hỗ trợ cộng đồng rất quan trọng đối với tôi.

2. Performance (không quan trọng với tôi nhưng vẫn quan trọng)

Và cũng có thể, trong lĩnh vực chơi game, đang có trò chơi cụ thể mà SVG là phù hợp hơn cho hơn Canvas (hoặc ngược lại?)

Answer 1

Các trò chơi đòi hỏi nhiều tương tác chuột và không có nhiều hoạt hình liên tục (như cờ hoặc cờ, hoặc bất kỳ trò chơi trên bàn nào cho vấn đề đó) phù hợp hơn với SVG vì bạn làm việc với các phần tử dom. Cân nhắc việc di chuột qua nút đơn giản, trong SVG, bạn có thể thêm trình xử lý sự kiện hoặc thậm chí chỉ cần đặt g.button:hover path {fill: blue;} vào CSS của mình và nó sẽ hoạt động. Canvas, mặt khác, đòi hỏi phải theo dõi các khu vực hit và vẽ tất cả mọi thứ trong Javascript.

Rắn và Pacman sẽ phù hợp hơn với canvas, bạn điều khiển mọi thứ bằng bàn phím và vẽ lên canvas sẽ rẻ hơn so với các yếu tố di chuyển xung quanh trong SVG. Có các thư viện trò chơi tuyệt vời cho canvas, impact.js là một trong số đó.

Phát biểu điểm của bạn:

Dễ sử dụng: nếu bạn đã quen thuộc với javascript tinh khiết DOM thao tác SVG là một khoe. Nếu bạn là trống đá tôi muốn nói rằng vải dễ nắm bắt hơn, như bạn chỉ vẽ trên đó.

Hỗ trợ cộng đồng: cho canvas trò chơi thắng tay. Có một cộng đồng SVG mạnh nhưng không có trong khu vực chơi game.

Hiệu suất: Hỗn hợp. Cả canvas và SVG đều có thể chậm nếu bạn không thực hiện một số thủ thuật. Ví dụ: di chuyển một ô vuông từ trái sang phải có thể bị giật trong canvas nếu bạn vẽ lại toàn bộ màn hình trên mỗi khung hình. Nếu bạn chỉ vẽ lại khu vực đã thay đổi thì nó trơn tru. SVG sẽ xử lý trường hợp này mà không bị cản trở. Nhưng mặt khác, nếu bạn muốn tạo hiệu ứng hàng ngàn hình chữ nhật cùng một lúc, canvas sẽ xử lý trơn tru và SVG bogs xuống nếu bạn không quấn các rects trong một nhóm và di chuyển nhóm xung quanh.

Tất cả trong tất cả, nếu bạn muốn khám phá chơi game trong javascript có lẽ Canvas là một lựa chọn tốt hơn. Tôi đã thực hiện ba trò chơi trong SVG, phiên bản mới nhất là http://color.method.ac, nhưng tôi đã dabbled trong vải và tôi nghĩ rằng nó phù hợp hơn cho chơi game.