Làm cách nào để tạo trò chơi 2D bằng HTML?

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ù

Làm cách nào để tạo trò chơi 2D bằng HTML?
Làm cách nào để tạo trò chơi 2D bằng HTML?

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

Làm cách nào để tạo trò chơi 2D bằng HTML?

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

  1. Tạo Canvas và vẽ trên đó
  2. Di chuyển quả bóng
  3. Thoát ra khỏi các bức tường
  4. Paddle và điều khiển bàn phím
  5. Trò chơi kết thúc
  6. Xây dựng cánh đồng gạch
  7. phát hiện va chạm
  8. Theo dõi điểm số và giành chiến thắng
  9. điều khiển chuột
  10. 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

Làm cách nào để tạo HTML trò chơi 2D?

Cách viết mã trò chơi 2D bằng JavaScript, HTML và CSS .
Thiết lập HTML & CSS
Thiết lập JavaScript cơ bản
Lập trình hướng đối tượng với JavaScript
Tạo các đối tượng Player và Game
vòng lặp hoạt hình
đầu vào bàn phím
Tạo đường đạn
Sự kiện định kỳ

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

Phần tử . Phần tử

Mã nào được sử dụng cho trò chơi 2D?

Tùy thuộc vào loại trò chơi bạn muốn phát triển. Ví dụ: nếu bạn muốn phát triển nền tảng 2D, bạn có thể muốn sử dụng ngôn ngữ như Lua và thậm chí cả JavaScript . Nhưng nếu bạn muốn phát triển game bắn súng góc nhìn thứ nhất 3D, bạn có thể muốn sử dụng một ngôn ngữ như C++ hoặc C#.

Làm game 2D có khó không?

Nếu bạn đang muốn tạo trò chơi của riêng mình từ đầu, Trò chơi 2D dễ tạo hơn trò chơi 3D , nhưng chúng vẫn có thể .