Công cụ trò chơi HTML js

Mặc dù câu hỏi liệu "Javascript có chậm không?" . Nhưng tất cả là về cái gì? . Bằng cách tận dụng JavaScript API WebGL, họ hoàn toàn có thể hiển thị đồ họa 2D và 3D phức tạp mà không cần dựa vào trình cắm trình duyệt của bên thứ ba. Chúng tôi chỉ muốn nhấn mạnh rằng Javascript có thể được sử dụng để phát triển trò chơi trên web. không chỉ game 2D mà cả game 3D. Bắt đầu với JavaScript thuần túy là cách tốt nhất để có kiến ​​thức vững chắc về phát triển trò chơi trên web

Tuy nhiên, tại sao phải tạo lại bánh xe để xây dựng trò chơi của chúng tôi từ con số 0 [thiết kế bộ điều khiển, thao tác với nội dung, quan tâm đến việc tối ưu hóa và vô số vấn đề vô tận mà chúng tôi có thể mất rất nhiều thời gian để tự giải quyết] nếu chúng tôi có thể đẩy nhanh quá trình đó

15. Công cụ trò chơi xương sống

Github

Backbone Game Engine là một công cụ trò chơi HTML5 Canvas cơ bản được xây dựng trên Backbone. Chuyên dành cho người chơi 2D và được tối ưu hóa cho thiết bị di động. Công cụ trò chơi xương sống được viết để chạy bên trong Cocoon IS Canvas, vì vậy bạn có thể biến trò chơi HTML5 của mình thành một ứng dụng gốc trên iOS hoặc Android

• Được xây dựng trên xương sống. Sự kiện, mô hình, bộ sưu tập, kế thừa và tính bền vững của RESTful. Tại sao phải phát minh lại bánh xe?
• Chỉ canvas HTML5. Không có jQuery, càng ít thao tác DOM càng tốt
• tối ưu hóa cho thiết bị di động. Xây dựng để chạy trên thiết bị di động có hỗ trợ chế độ xem và cảm ứng trong suốt. Mọi thứ đều được tối ưu hóa để đạt được khung hình tối đa trên giây [FPS]

14. Em yêuJS

Github

DarlingJS là một công cụ trò chơi javascript dựa trên thành phần và thực thể với các nội dung tiêm phụ thuộc và kiến ​​trúc mô-đun. Người thân yêu. js không tốn một xu. Mã được cấp phép theo Giấy phép BSD Đơn giản hóa. Bạn chỉ cần ghi nguồn là bạn đã sử dụng Darling. js. Và tôi sẽ rất vui nếu bạn cho tôi biết rằng bạn đang sử dụng động cơ trong dự án của mình.  

Tiêm phụ thuộc trong Darling. js cho phép bạn khai báo mô tả ứng dụng của bạn được kết nối như thế nào. Và bất kỳ thành phần nào không phù hợp với nhu cầu của bạn đều có thể dễ dàng thay thế. Tách chức năng và dữ liệu thành các Hệ thống và Thành phần riêng lẻ hầu như độc lập với nhau. Vì vậy, thành phần được sử dụng thay vì thừa kế. Cũng nhóm các thành phần và hệ thống trong các Mô-đun có thể được cắm vào ứng dụng trò chơi

13. HàmJS

Github

Hàm là một thư viện trò chơi 2D được hỗ trợ bởi HTML5. Ban đầu, nó chỉ thực hiện canvas nhưng hiện tại cũng đang hỗ trợ các họa tiết dựa trên DOM thông thường thông qua cùng một API

Jaws rất phù hợp với các trò chơi cuộn bên/trên cùng “cổ điển” [dựa trên ô xếp hoặc không], nơi bạn có một số họa tiết hoạt hình dạng trang tính. Jaws đi kèm với tính năng phát hiện va chạm rect-vs-rect/circle-vs-circle cơ bản hoạt động tốt trong hầu hết các trường hợp. Nếu bạn có hàng tấn sprite [ví dụ: một viên đạn địa ngục], bạn có thể muốn sử dụng phòng thí nghiệm vật lý như Box2D hoặc băm không gian như cây tứ giác để tăng tốc mọi thứ. Hàm sử dụng canvas làm cho pixel va chạm hoàn hảo và địa hình kiểu giun tương đối dễ phát triển. Nếu trò chơi của bạn nặng về GUI, bạn có thể muốn trò chơi của mình dựa trên các phần tử HTML thuần túy thay vì canvas-sprites

12. mê hoặc. js

Github

Khung JavaScript đơn giản để tạo trò chơi và ứng dụng với các tính năng sau

• là một khuôn khổ để phát triển các trò chơi và ứng dụng đơn giản trong HTML5 + JavaScript
• được phát hành vào năm 2011, nhưng đã có hơn 1.000 trò chơi và ứng dụng được xuất bản
• là nguồn mở [giấy phép MIT] và do đó miễn phí sử dụng
• có nhiều tài liệu hỗ trợ. Tài liệu APIã»Ấn phẩmã»Trang hướng dẫn
• có thể được tăng cường với các plugin khác nhau để tăng chức năng
• được liên tục phát triển và duy trì bởi các thành viên của Trung tâm Nghiên cứu Akihabara tại UEI

11. ngũ sắc

Github

Quintus là một công cụ trò chơi JavaScript HTML5 dễ học, vui nhộn dành cho thiết bị di động, máy tính để bàn và hơn thế nữa

Công cụ Quintus là một công cụ trò chơi HTML5 được thiết kế theo mô-đun và nhẹ, với cú pháp thân thiện với JavaScript ngắn gọn. Thay vì cố gắng biến cấu trúc công cụ trò chơi OOP tiêu chuẩn thành công cụ JavaScript HTML5, Quintus lấy một số gợi ý từ jQuery và cung cấp các plugin, sự kiện và cú pháp bộ chọn. Thay vì mô hình chỉ kế thừa đơn sâu sắc, Quintus cung cấp mô hình thành phần linh hoạt bên cạnh kế thừa truyền thống để giúp sử dụng lại chức năng và chia sẻ chức năng đó giữa các trò chơi và đối tượng dễ dàng hơn

10. Động cơ gấu trúc

Github. ví dụ

Panda Engine là một công cụ trò chơi HTML5 miễn phí dành cho thiết bị di động và máy tính để bàn với kết xuất Canvas và WebGL, nó sử dụng Pixi. js để kết xuất với tốc độ siêu nhanh

Với Panda Engine, bạn có thể theo dõi các sự kiện Google Analytics bên trong trò chơi của mình và các tính năng thú vị khác như

9. Xảo trá

Github

Crafty là thư viện trò chơi JavaScript có thể giúp bạn tạo trò chơi theo cách có cấu trúc với các tính năng sau

• Thực thể & Thành phần - Một cách rõ ràng và tách rời để tổ chức các yếu tố trò chơi. Không cần thừa kế
• Eventbinding - Hệ thống sự kiện cho các sự kiện tùy chỉnh có thể được kích hoạt bất cứ khi nào, bất cứ điều gì và bị ràng buộc một cách dễ dàng
• Không cần thao tác dom hoặc thói quen vẽ tùy chỉnh

Quà tặng khác

• Cộng đồng thịnh vượng - Trợ giúp có sẵn trong diễn đàn
• Mô-đun cộng đồng - Bộ sưu tập mã do người dùng tạo ngày càng tăng mà bạn có thể sử dụng
• JavaScript thuần túy - Không có phép thuật. Hoạt động trong tất cả các trình duyệt chính và có thể được kết hợp với thư viện js yêu thích của bạn

8. Sân khấu. js

Github. ví dụ

Sân khấu. js là một thư viện JavaScript HTML5 2D để phát triển trò chơi đa nền tảng, nhẹ, nhanh và mã nguồn mở

Sân khấu. js cung cấp mô hình dữ liệu dạng cây giống như DOM để soạn thảo ứng dụng của bạn và quản lý nội bộ các chu trình kết xuất và bản vẽ của ứng dụng của bạn, nó cũng xử lý và phân phối các sự kiện chuột và chạm tới các nút cây được nhắm mục tiêu

Một sân khấu. ứng dụng js bao gồm một cây các nút. Mỗi nút được ghim [được chuyển đổi] vào nút gốc của nó và không có, một hoặc nhiều họa tiết hình ảnh. Mỗi chu kỳ kết xuất bao gồm đánh dấu và vẽ các nút cây. Khi đánh dấu các nút tự điều chỉnh theo các bản cập nhật gần đây và sau đó khi vẽ, mỗi nút sẽ biến đổi theo cách ghim của nó và vẽ kết cấu của nó. Kết xuất được giữ lại và bị tạm dừng khi không có thay đổi

7. qiciengine

Github. ví dụ

Qiciengine là thư viện công cụ trò chơi JavaScript miễn phí với bộ công cụ toàn diện dựa trên web để tạo trò chơi HTML5. QICI Engine dựa trên Phaser khung trò chơi HTML5 mã nguồn mở và miễn phí, sử dụng Pixi. js để hiển thị WebGL và Canvas trên trình duyệt web trên máy tính để bàn và thiết bị di động

Với QICI Engine, việc tạo Trò chơi HTML5 cũng dễ dàng như phát triển trang web, sử dụng trình chỉnh sửa mã yêu thích của bạn, sử dụng trình duyệt web yêu thích của bạn, tận dụng ngôn ngữ JavaScript và tất cả các công cụ phát triển web tốt nhất. QICI Engine xử lý sự phức tạp của các công nghệ cơ bản, vì vậy bạn chỉ cần tập trung vào những gì quan trọng, tạo ra trò chơi của bạn

QICI Engine được tạo thành từ ba phần. QICI Core, QICI Widget and QICI Editor

• QICI Core. Thư viện JavaScript Game Engine dựa trên Phaser
• QICI Widget. Thư viện giao diện người dùng JavaScript để tạo ứng dụng phong phú
• QICI Editor. Trình chỉnh sửa dựa trên web có Nút. js để tăng tốc phát triển trò chơi HTML5

6. Quả kiwi. js

Github. ví dụ

Quả kiwi. js là một Công cụ trò chơi HTML5 mã nguồn mở thú vị và thân thiện, một số người gọi nó là WordPress của công cụ trò chơi HTML5

Quả kiwi. js là khung trò chơi HTML5 mã nguồn mở dễ sử dụng nhất thế giới để tạo trò chơi trình duyệt HTML5 cho cả thiết bị di động và máy tính để bàn. Trọng tâm của họ là kết xuất WebGL cực nhanh và các công cụ bổ sung để tạo ra các trò chơi nghiêm túc với chất lượng chuyên nghiệp. Họ sử dụng CocoonJS để phát hành trò chơi và tạo ứng dụng

Trò chơi của bạn có thể nhắm mục tiêu cả canvas và WebGL. Sử dụng canvas cho các trình duyệt cũ hơn và hầu hết các trình duyệt dành cho thiết bị di động. Sử dụng WebGL cho các trình duyệt mới nhất và kết hợp với Cocoon. js để xây dựng các ứng dụng di động gốc nhanh. Bạn có thể tạo trò chơi cho Ứng dụng iOS, Android và Chrome một cách dễ dàng và hiệu quả bằng cách sử dụng các nền tảng như CocoonJS và Cửa hàng Chrome trực tuyến

5. MelonJS

Github. Thí dụ

MelonJS là một khung HTML5 nhẹ nhưng mạnh mẽ được thiết kế từ đầu để cung cấp một thư viện định hướng chơi game 'viết một lần, chạy mọi nơi' không có plugin thực sự. MelonJS là một dự án mã nguồn mở và được hỗ trợ bởi cộng đồng những người đam mê. Melon JS hỗ trợ các tính năng hiện tại

• Một công cụ dựa trên sprite 2D mới và nhẹ
• Thư viện độc lập [không dựa vào bất kỳ thứ gì khác, ngoại trừ trình duyệt có khả năng HTML5]
• Tương thích với hầu hết các trình duyệt chính [Chrome, Safari, Firefox, Opera, IE] và thiết bị di động
• Hỗ trợ chuyển động và gia tốc của thiết bị
• DPI cao & tự động mở rộng quy mô
• Hỗ trợ âm thanh HTML5 đa kênh và Âm thanh web trên các thiết bị được hỗ trợ
• Triển khai vật lý nhẹ để đảm bảo yêu cầu cpu thấp
• Thuật toán va chạm dựa trên đa giác [SAT] để phát hiện và phản hồi chính xác
• Phát hiện va chạm pha rộng nhanh bằng cách sử dụng phân vùng không gian
• Các công cụ của bên thứ 3 hỗ trợ định nghĩa cơ thể vật lý [Physics Editor, Physic Body Editor]
• API toán học nâng cao cho Vector và Ma trận
• hiệu ứng mười hai
• hiệu ứng chuyển tiếp
• Một tập hợp các Thực thể Đối tượng cơ bản [sẽ được mở rộng]
• Tổng hợp đối tượng
• Hệ thống hạt cơ bản
• Quản lý hoạt hình cơ bản
• Hỗ trợ spritesheet tiêu chuẩn và Texture đóng gói [Texture Packer, ShoeBox]
• Trình quản lý trạng thái [để dễ dàng quản lý tải, menu, tùy chọn, trạng thái trong trò chơi]
• Phiên bản định dạng bản đồ lát gạch +0. 9. tích hợp x cho thiết kế cấp độ dễ dàng
  • Tải sơ đồ ô vuông XML được mã hóa Base64, Base64, CSV và JSON không nén
  • Hỗ trợ sơ đồ ô trực giao, Isometric và Perspective
  • Nhiều lớp [nhiều lớp nền/tiền cảnh, xung đột và lớp Hình ảnh]
  • Hỗ trợ nhiều Tileset
  • Cài đặt Độ trong suốt của Tileset
  • Cài đặt Lớp Alpha
  • Hỗ trợ các đối tượng Hình chữ nhật, Hình elip, Đa giác và Đa tuyến
  • đối tượng lát gạch
  • Lật và xoay gạch
  • Thứ tự Lớp động và Đối tượng/Nhóm
  • Đang tải thực thể động
  • Hỗ trợ va chạm Ngói dựa trên hình dạng
• Phông chữ hệ thống & bitmap
• Hỗ trợ chuột và thiết bị cảm ứng [có mô phỏng chuột]
• Hỗ trợ tích hợp cho CocoonJS và Ejecta
• Hỗ trợ nhắn tin không đồng bộ [minPubSub]
• Bao gồm các yếu tố GUI cơ bản
• trình tải tùy chỉnh

4. tỳ hưu. js

Github. ví dụ

Pixi. js là công cụ kết xuất 2D HTML 5 siêu nhanh sử dụng webGL với dự phòng canvas. Mục đích của dự án này là cung cấp thư viện 2D nhẹ, nhanh, hoạt động trên tất cả các thiết bị. Trình kết xuất Pixi cho phép mọi người tận hưởng sức mạnh tăng tốc phần cứng mà không cần biết trước về WebGL. Ngoài ra, nó nhanh. Rất nhanh.

tỳ hưu. js có hỗ trợ WebGL đầy đủ và liên tục quay trở lại canvas của HTML5 nếu cần. Là một khuôn khổ, Pixi. js là một công cụ tuyệt vời để tạo nội dung tương tác, đặc biệt là với việc loại bỏ Adobe Flash trong những năm gần đây. Sử dụng nó cho các trang web, ứng dụng và trò chơi HTML5 giàu đồ họa, tương tác của bạn. Khả năng tương thích đa nền tảng vượt trội và khả năng xuống cấp nhẹ nhàng có nghĩa là bạn có ít việc phải làm hơn và có nhiều niềm vui hơn khi làm việc đó. Nếu bạn muốn tạo trải nghiệm bóng bẩy và tinh tế tương đối nhanh chóng, mà không cần đào sâu vào mã cấp thấp, dày đặc, đồng thời tránh phải đau đầu vì sự không nhất quán của trình duyệt, thì hãy rắc rắc dự án tiếp theo của bạn với một số Pixi. ma thuật js

3. Công cụ trò chơi PlayCanvas WebGL

Github. ví dụ

PlayCanvas là một công cụ trò chơi mã nguồn mở. Nó sử dụng HTML5 và WebGL để chạy trò chơi và nội dung 3D tương tác khác trong tất cả các trình duyệt hiện đại mà không cần plugin

• đồ họa
  • Trình kết xuất 3D dựa trên WebGL
  • Hiển thị dựa trên vật lý [PBR]
  • Đèn định hướng, điểm và điểm [tất cả đều có thể đổ bóng]
  • Thời gian chạy Lightmap nướng
  • Lưới tĩnh và da
  • Công cụ hạt GPU với trình chỉnh sửa
  • Thư viện PostFX. nở hoa, phát hiện cạnh, FXAA, họa tiết, v.v.
  • Hỗ trợ tài liệu mặc định liền mạch từ Maya, 3DS Max, Blender, v.v.
  • Quy trình xuất mô hình đầy đủ từ Maya, 3DS Max, Blender, v.v. qua Hướng dẫn sử dụng nội dung
• Va chạm & Vật lý
  • Tích hợp đầy đủ với đạn động cơ vật lý thân cứng 3D. js
• âm thanh
  • Âm thanh định vị 3D qua Web Audio API
• Đang tải tài nguyên
  • Tải tài nguyên đơn giản và mạnh mẽ
  • Truyền trực tuyến nội dung cá nhân
  • Biến thể nội dung - tải kết cấu nén [DXT, PVR, ETC1] dựa trên hỗ trợ nền tảng
• Thực thể / Hệ thống thành phần
  • Các thành phần tích hợp. mô hình, âm thanh, hoạt hình, máy ảnh, va chạm, ánh sáng, vật cứng, kịch bản, hệ thống hạt
• hệ thống kịch bản
  • Viết hành vi trò chơi bằng cách đính kèm JavaScript vào thực thể trò chơi
  • Trao đổi mã trực tiếp cho phép lặp lại nhanh chóng
• Đầu vào
  • Chuột, Bàn phím, Cảm ứng, Hỗ trợ gamepad, VR

2. Ba-by-lôn. js

Github. hướng dẫn

Ba-by-lôn. js là một khung JavaScript nguồn mở mà qua đó bạn có thể xây dựng và kết xuất trò chơi 3D trong trình duyệt, với sự trợ giúp của WebGL, HTML5 và Web Audio. Mặc dù việc vẽ một đối tượng 3D đơn giản trong WebGL thô yêu cầu bạn phải xử lý một lượng lớn mã JavaScript, nhưng Babylon. js cho phép bạn làm điều tương tự với số lượng mã tối thiểu và mức độ phức tạp rất thấp

Ba-by-lôn. js có thể được nói là "một bộ ba khác. js" do các tính năng mạnh mẽ của nó, cho phép bạn tạo ra hầu hết mọi thứ, từ các trò chơi 3D tương tác đầy đủ đến logo động, trong trình duyệt của bạn. Mặc dù khung JavaScript này hiện đang ở giai đoạn đầu, nhưng thậm chí nó còn cung cấp cho các nhà phát triển một nền tảng vững chắc để tạo ra các sáng tạo WebGL giàu tính năng có thể được sử dụng ở hầu hết mọi nơi

1. phaser. js

Github. ví dụ

Nhưng đợi một chút, Phaser. js tốt hơn Babylon. js, đây có phải là một trò đùa không? . Có thể bạn sẽ không muốn bắt đầu phát triển Trò chơi trên web bằng cách sử dụng các công nghệ tiên tiến như WebGL vì bạn sẽ sớm cảm thấy nản lòng vì việc tạo trò chơi không dễ dàng như bạn nghĩ. Và đó là nơi Phaser. js có thể sẽ là lựa chọn đầu tiên của bạn để bắt đầu với Phát triển trò chơi vì nó rất dễ sử dụng, chúng cung cấp rất nhiều ví dụ và không yêu cầu nhiều cơ sở mã để tạo trò chơi đầu tiên của bạn

Phaser là một khung trò chơi 2D thú vị, miễn phí và nhanh chóng để tạo trò chơi HTML5 cho trình duyệt web trên máy tính để bàn và thiết bị di động, hỗ trợ kết xuất Canvas và WebGL. Phaser sử dụng cả trình kết xuất Canvas và WebGL trong nội bộ và có thể tự động hoán đổi giữa chúng dựa trên sự hỗ trợ của trình duyệt. Điều này cho phép hiển thị nhanh như chớp trên Máy tính để bàn và Thiết bị di động. Phaser sử dụng và đóng góp cho Pixi xuất sắc. thư viện js để kết xuất

Phaser đã được sử dụng để tạo ra hàng trăm trò chơi, nhận được hàng triệu lượt chơi mỗi tháng. Và Phiên bản 2 là phiên bản ổn định nhất và không có lỗi. Các sự cố được giải quyết nhanh chóng và chúng tôi luôn cập nhật tình hình trình duyệt đang thay đổi

Nếu bạn nghĩ rằng chúng tôi đã quên một Công cụ trò chơi tuyệt vời khác được viết bằng Javascript, vui lòng cho chúng tôi biết và chia sẻ nó với cộng đồng trong hộp bình luận

Có công cụ trò chơi nào dành cho JavaScript không?

HTML có tốt cho việc mã hóa trò chơi không?

Tôi có thể tạo trò chơi bằng JavaScript không?