Làm cách nào để tạo trò chơi bằng mã HTML?
|
Rắn săn mồi là một trò chơi thú vị để tạo vì nó không yêu cầu nhiều mã (dưới 100 dòng với tất cả các nhận xét đã bị xóa). Đây là cách triển khai cơ bản của trò chơi rắn, nhưng nó cố tình thiếu một số thứ và chúng sẽ để người đọc khám phá thêm. Show
 thăm dò thêm
Lưu ý quan trọng. Tôi sẽ trả lời các câu hỏi về mã nhưng sẽ không thêm nhiều tính năng hơn hoặc trả lời các câu hỏi về việc thêm nhiều tính năng hơn. Loạt bài này nhằm đưa ra một phác thảo cơ bản về trò chơi nhưng không có gì hơn Giấy phép(CC0 1. 0 Universal) Bạn có thể tự do sử dụng trò chơi và mã này trong bất kỳ dự án nào, cá nhân hoặc thương mại. Không cần phải xin phép trước khi sử dụng những. Ghi công là không bắt buộc, nhưng được đánh giá cao Các trò chơi cơ bản khác
Hỗ trợTrò chơi HTML cơ bản được thực hiện bởi những người dùng như bạn. Khi trở thành Người bảo trợ, bạn có quyền truy cập vào nhật ký phát triển hậu trường, khả năng bỏ phiếu cho trò chơi nào tôi làm tiếp theo và quyền truy cập sớm vào Trò chơi HTML cơ bản tiếp theo Mặc dù các trò chơi Flash đã rời bỏ thế giới này nhưng vẫn có nhu cầu đáng kể đối với các trò chơi dựa trên trình duyệt và đa nền tảng. Cho dù bản thân bạn có tích cực chơi chúng hay không, ngày càng có nhiều trò chơi từ các nhà phát triển chuyên nghiệp và độc lập ra mắt mỗi ngày Hiện tượng này phần lớn là nhờ các trò chơi HTML5 đã lấp đầy khoảng trống để theo kịp những game thủ háo hức này. Ngoài ra, nhờ sự tiến bộ của công nghệ và các khuôn khổ mới, quá trình phát triển trò chơi HTML5 đã đạt đến tầm cao mới, cho phép trải nghiệm nhiều người chơi, đồ họa 3D, v.v. Không phải là không khôn ngoan khi nói rằng chơi game giờ đây cũng khả thi thông qua trình duyệt cũng như trên nhiều thiết bị khác Giả sử điều này nghe có vẻ là một triển vọng thú vị đối với bạn với tư cách là nhà phát triển trò chơi, trong hướng dẫn này, chúng tôi sẽ đi sâu vào chủ đề phát triển trò chơi HTML5 và cung cấp cho bạn thông tin chi tiết về cách bạn có thể tạo trò chơi của riêng mình. Ngồi xuống, thư giãn và chuẩn bị để nâng cao kỹ năng phát triển trò chơi của bạn theo những cách hoàn toàn mới Mục lục
Chính xác thì trò chơi HTML5 là gì?Hãy bắt đầu từ tổng số không. HTML5 là gì? . Có một định nghĩa chính thức về HTML5, đơn giản là viết tắt của phiên bản mới nhất của HTML (ngôn ngữ đánh dấu được sử dụng trên toàn thế giới để xây dựng trang web) và định nghĩa cường điệu hơn (điều mà hầu hết mọi người hiểu khi nhắc đến HTML5) là tất cả Với mục đích của chúng tôi, chúng tôi sẽ sử dụng các bit của hai. HTML5 là HTML trong phiên bản mới nhất của nó, bao gồm một loạt các tính năng thú vị làm cho công nghệ web trở thành một tiêu chuẩn mở với khả năng vô tận kết hợp HTML, CSS và JavaScript Có HTML cùng với tất cả những siêu năng lực vượt xa việc tạo ra một trang web đơn giản này cho phép chúng tôi tạo ra, trong số những thứ khác, trò chơi. Đây là những trò chơi HTML5 XÂY DỰNG TRÒ CHƠI CỦA RIÊNG BẠN Nhận hơn 250 khóa học mã hóa cho $1 TÌM HIỂU THÊM CHỈ CÓ SẴN TRONG THỜI GIAN GIỚI HẠN Khu nhàCác khối xây dựng rất cơ bản của trò chơi HTML5 là các khối của web
Tương tự như những gì xảy ra với HTML5, khi mọi người nói về CSS3, họ thường đề cập đến những thứ mới đi kèm với thông số kỹ thuật mới nhất của CSS, nhưng theo cách tương tự, CSS3 chỉ đơn giản là CSS mới nhất. Bỏ qua một giây ngữ nghĩa của các định nghĩa này và nghĩ về các phiên bản cường điệu của các thuật ngữ này, chúng tôi cũng có thể cần, để tạo trò chơi HTML5
Với những điều trên, bạn có thể tạo những trò chơi tuyệt vời chạy trên các trình duyệt web hiện đại trên thiết bị di động và máy tính để bàn, nhưng một số trò chơi có thể yêu cầu nhiều tính năng hơn, do đó, bạn có thể thêm nhiều khối xây dựng hơn Chẳng hạn, bạn có thể muốn tạo trò chơi 3D. Nếu đúng như vậy thì cũng có WebGL, là API JavaScript để hiển thị đồ họa 2D và 3D trên trình duyệt, sử dụng GPU để có hiệu suất cao hơn Phía máy chủNếu bạn muốn trò chơi của mình được lưu dữ liệu từ xa, bạn sẽ cần phía máy chủ cho trò chơi của mình. Bạn có thể phát triển chương trình phụ trợ của riêng mình bằng bất kỳ ngôn ngữ phía máy chủ nào, bạn sẽ cần một máy chủ tốt trong trường hợp này
Hoặc bạn có thể sử dụng nhà cung cấp Dịch vụ phụ trợ bên thứ ba, chẳng hạn như Firebase. Một số có phiên bản miễn phí mà bạn có thể sử dụng và họ sẽ bắt đầu tính phí bạn sau khi bạn vượt qua các giới hạn nhất định. Một số nhà cung cấp này đặc biệt tập trung vào trò chơi, một số chủ yếu được hình thành cho ứng dụng dành cho thiết bị di động nhưng cũng có thể được sử dụng cho trò chơi Cách phân phối trò chơi HTML5Cách dễ nhất để phân phối HTML5 là đơn giản đưa nó ra khỏi đó. Bằng cách được xây dựng như một trang web, bạn chỉ cần nhúng nó vào một trang và xuất bản nó. cứ thế Nếu bạn muốn phân phối nó thông qua các nền tảng độc quyền, bạn phải trải qua một quá trình gọi là gói. Về cơ bản, bạn tạo một ứng dụng gốc cho nền tảng mà bạn muốn phân phối ứng dụng đó (iOS, Android, v.v.) và đưa trò chơi của bạn vào bên trong để ứng dụng này hoạt động như một trình duyệt web và “chạy” trò chơi của bạn Đối với các nền tảng máy tính để bàn như Windows, Mac hoặc Linux, có một công cụ gọi là NWjs cho phép bạn đóng gói các trò chơi HTML5 của mình cho các nền tảng này Chúng tôi chỉ có thể đề cập đến những điều cơ bản ở đây, nhưng chúng tôi khuyến khích bạn đọc lời khuyên sâu hơn của chúng tôi về việc xuất bản trò chơi Khung trò chơi HTML5Hầu hết các trò chơi chia sẻ một số khái niệm, đó là sprites (yếu tố đồ họa đại diện cho kẻ thù, người chơi, yếu tố trong trò chơi của bạn), cảnh hoặc giai đoạn, hoạt ảnh, âm thanh, tải nội dung đồ họa, v.v. Vì hầu hết các nhà phát triển trò chơi muốn tập trung vào trò chơi thực tế của họ chứ không phải tạo toàn bộ lớp trừu tượng này, nên bạn nên sử dụng khung trò chơi HTML5 Thư viện và khung trò chơi HTML5 chứa các thành phần xây dựng mà bạn có thể sử dụng để tạo trò chơi của riêng mình. Các thư viện này là các dự án Nguồn mở được tạo và duy trì bởi những người muốn đóng góp cho môi trường gamedev HTML5. Trong nhiều trường hợp, họ đã tạo ra các khung cho trò chơi của riêng mình và sau khi nhận ra rằng những người khác không chỉ muốn sử dụng nó mà còn muốn đóng góp vào đó, họ đã phát hành chúng dưới dạng mã nguồn mở, vì vậy mọi người đều thắng Chọn công cụ trò chơi nào để sử dụng là một quyết định quan trọng, vì vậy hãy đảm bảo rằng bạn đã nghiên cứu kỹ lưỡng trước khi đưa ra lựa chọn của mình. Cho dù bạn chọn công cụ nào, bạn sẽ phải làm quen với mã và hoạt động bên trong của nó nếu muốn sử dụng đúng cách, vì vậy chúng không nên được coi là hộp đen Điều gì có thể giúp bạn lựa chọn
Đôi khi nhìn vào các trò chơi thực sự mang lại cho bạn cái nhìn sâu sắc hơn là chỉ từ ngữ. Dự án này so sánh các công cụ khác nhau bằng cách tạo ra cùng một trò chơi Breakout trong tất cả chúng Một số framework miễn phí phổ biến là
Khóa học phát triển trò chơi HTML5Các khóa học video là một cách tuyệt vời để học các công nghệ mới. Sự khác biệt chính giữa khóa học qua video và chỉ xem video trên YouTube là có nhiều cấu trúc hơn. Các khóa học tốt có mục tiêu rõ ràng và từng bước xây dựng mục tiêu đó. Dưới đây là danh sách các khóa học và hướng dẫn của Zenva có thể cung cấp cho bạn các công cụ cần thiết để tạo trò chơi HTML5 Phát triển trò chơi chung
phaser
WebGL, 3D và XR
Kỹ năng HTML5
Tại Học viện GameDev, như bạn đã biết, chúng tôi có rất nhiều hướng dẫn phát triển trò chơi HTML5, chủ yếu về Phaser, LimeJs, Quintus và BabylonJS. Có những nơi tuyệt vời khác để tìm các hướng dẫn về gamedev HTML5 chất lượng tốt
HTML5 cho trường họcBạn có phải là giáo viên đang tìm cách giúp sinh viên làm quen với các khuôn khổ như Phaser hoặc dạy họ các kỹ năng phát triển web cốt lõi và có liên quan không? . Nền tảng này đi kèm với các bài học video, tóm tắt văn bản, câu đố, tính năng quản lý lớp học, báo cáo, v.v. để hỗ trợ việc học HTML5 Cộng đồng gamedev HTML5Bạn có thể tìm thấy nhiều cộng đồng tích cực trên Internet, một số tập trung vào gamedev nói chung và một số khác chỉ tập trung vào gamedev HTML5 mạng
cộng đồng khác
Thử thách gamedev HTML5
Podcast trò chơi HTML5Tôi chỉ biết Lostcast, một podcast được tạo bởi những người từ Lost Decade Games (những người mà chúng tôi đã phỏng vấn trước đây). Trong các tập podcast, họ nói về các trò chơi HTML5 và phát triển trò chơi nói chung Tôi có thể tạo trò chơi bằng HTML không?Phần tử . Phần tử
HTML có tốt cho việc mã hóa trò chơi không?Có, HTML, CSS và JavaScript có thể khá tốt cho việc phát triển trò chơi, đặc biệt . Một lợi ích lớn của nó là về cơ bản, tất cả các thiết bị máy tính đều có thể chơi các trò chơi được triển khai bằng JS và HTML.
Làm cách nào để tạo trò chơi 2D bằng HTML?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 ảnh Đầu vào bàn phím Tạo đường đạn sự kiện định kỳ Trò chơi nào sử dụng mã HTML?Trò chơi cơ bản khác . đột phá xếp hình máy bay ném bom ếch nhái Bộ chỉ huy tên lửa Sokoban Nhảy nguệch ngoạc |
