javascript sự kiện linux gui html5 canvas hoạt ảnh động cơ trò chơi trình chỉnh sửa trò chơi 2d 2d-game-engine trò chơi 2d
- Cập nhậtNgày 11 tháng 9 năm 2021
- JavaScript
euske / euskit
Sao 16
- Mã số
- Vấn đề
- Yêu cầu kéo
Công cụ trò chơi được thiết kế cho kẹt trò chơi. Thích hợp để tạo mẫu nhanh các trò chơi 2D
TypeScript html5 công cụ trò chơi 2d-game
- Cập nhật ngày 3 tháng 3 năm 2022
- bản đánh máy
Mupa1 / rpg-game-bắn-game
Sao 9
- Mã số
- Vấn đề
- Yêu cầu kéo
Dự án này là một trò chơi bắn súng RPG được xây dựng với Phaser 3, một khung trò chơi JavaScript được thiết kế để tạo trò chơi 2D
phaser3 2d-game rpg-game bắn súng-javascript-game-framework
- Cập nhật 24/11/2020
- JavaScript
Zeyu-Li / Unity-Tutorial-2D
Nhà tài trợ
Sao 5
- Mã số
- Vấn đề
- Yêu cầu kéo
- thảo luận
Hướng dẫn thống nhất cho trò chơi 2D🎮. Hoạt động như một mẫu cho nền tảng 2D
hướng dẫn unity-hướng dẫn unity-2d Trò chơi 2d nền tảng trò chơi unity-mẫu
- Cập nhật ngày 1 tháng 1 năm 2021
- C#
Fredkiss3 / kg
Sao 5
- Mã số
- Vấn đề
- Yêu cầu kéo
Công cụ trò chơi được viết bằng Python
python-game-engine pyglet 2d-games python-game-engine python-game-developpers
- Cập nhật 22/11/2022
- con trăn
c0mput3r5c13nt15t / trò chơi godot
Sao 3
- Mã số
- Vấn đề
- Yêu cầu kéo
Đây là mã cho tất cả các trò chơi tôi đã tạo bằng công cụ trò chơi GODOT. Hầu hết chúng chưa được đánh bóng hoặc thậm chí chưa hoàn thiện nhưng nếu bạn muốn sử dụng mã, vui lòng làm như vậy
Trong bài học này, bạn sẽ học cách tạo trò chơi của riêng mình bằng mã JavaScript và HTML. Trò chơi liên quan đến một người chơi [anh hùng] bắt kẻ thù [quái vật] nhiều lần nhất có thể trong thời hạn 30 giây. Phiên bản trò chơi này đã được sửa đổi từ hướng dẫn tại Lost Decade Games, những người đã chia sẻ mã và khuyến khích người dùng sửa đổi và chia sẻ mã đó
Tất cả mã JavaScript bên dưới đều chứa các nhận xét giải thích chức năng của từng phần mã và cách thức hoạt động của nó. Đảm bảo rằng bạn đã đọc các nhận xét để hiểu mã và trước khi thay đổi bất kỳ mã nào. Tất cả các nhận xét trong mã bên dưới bắt đầu bằng hai dấu gạch chéo về phía trước, vd. // đây là một bình luận
Để bắt đầu, bạn sẽ cần tạo hai tệp mới trong trình chỉnh sửa mã của mình
Một tệp HTML [ví dụ:. mục lục. html]
Một tệp JavaScript [ví dụ:. trò chơi. js]
Bạn cũng sẽ cần tạo một thư mục hình ảnh với ba hình ảnh [cuộn xuống để xem các hình ảnh ví dụ]
bối cảnh
người chơi sprite, và
ma quỷ của kẻ thù
Mã đầy đủ
Đây là mã HTML và JavaScript cho trò chơi. Đừng quên thay đổi thuộc tính 'src' cho các tệp hình ảnh bgImage [hình nền], playerImage và playerImage thành hình ảnh của riêng bạn trong thư mục của riêng bạn. Cuộn xuống để xem các hình ảnh được sử dụng trong ví dụ
Trong hướng dẫn từng bước này, chúng tôi tạo một trò chơi MDN Breakout đơn giản được viết hoàn toàn bằng JavaScript thuần túy và được hiển thị trên HTML
Mỗi bước đều có các mẫu trực tiếp, có thể chỉnh sửa để bạn có thể xem các giai đoạn trung gian sẽ trông như thế nào. Bạn sẽ tìm hiểu kiến thức cơ bản về cách sử dụng yếu tố để triển khai cơ chế trò chơi cơ bản như hiển thị và chuyển động hình ảnh, phát hiện va chạm, cơ chế điều khiển và trạng thái thắng và thua
Để tận dụng tối đa loạt bài viết này, bạn nên có kiến thức JavaScript từ cơ bản đến trung cấp. Sau khi hoàn thành hướng dẫn này, bạn sẽ có thể xây dựng các trò chơi Web đơn giản của riêng mình
Tất cả các bài học — và các phiên bản khác nhau của trò chơi MDN Breakout mà chúng ta đang cùng nhau xây dựng — đều có sẵn trên GitHub
- Tạo Canvas và vẽ trên đó
- Di chuyển quả bóng
- Thoát ra khỏi các bức tường
- Paddle và điều khiển bàn phím
- Trò chơi kết thúc
- Xây dựng cánh đồng gạch
- phát hiện va chạm
- Theo dõi điểm số và giành chiến thắng
- điều khiển chuột
- kết thúc lên
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 web game. Sau đó, bạn có thể chọn bất kỳ khung nào bạn thích và sử dụng nó cho các dự án của mình. Các khung chỉ là các công cụ được xây dựng bằng ngôn ngữ JavaScript; . Các khung tăng tốc thời gian phát triển và giúp xử lý các phần nhàm chán của trò chơi, nhưng nếu có điều gì đó không hoạt động như mong đợi, bạn luôn có thể thử gỡ lỗi điều đó hoặc chỉ cần viết các giải pháp của riêng mình bằng JavaScript thuần túy
Ghi chú. Nếu bạn quan tâm đến việc tìm hiểu về phát triển trò chơi web 2D bằng thư viện trò chơi, hãy tham khảo đối tác của loạt bài này, trò chơi đột phá 2D bằng Phaser
Ghi chú. Loạt bài viết này có thể được sử dụng làm tài liệu cho các hội thảo thực hành về phát triển trò chơi. Bạn cũng có thể sử dụng Bộ nội dung Canvas của Gamedev dựa trên hướng dẫn này nếu bạn muốn nói về phát triển trò chơi nói chung