Hướng dẫn how do you make a html game? - làm thế nào để bạn tạo một trò chơi html?


Tìm hiểu cách tạo trò chơi, không sử dụng gì ngoài HTML và JavaScript.

Đẩy các nút để di chuyển Quảng trường Đỏ:




Hãy tự mình lấy ví dụ

Với trình chỉnh sửa trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã và nhấp vào nút để xem kết quả.

Thí dụ

function startGame () {& nbsp; & nbsp; myGamePiece = new Dement (30, 30, "Red", 10, 120); & nbsp; & nbsp; mygamePiece.gravity = 0,05; & nbsp; myscore = thành phần mới ("30px", "consolas", "đen", 280, 40, "văn bản"); & nbsp; mygamearea.start ();}
  myGamePiece = new component(30, 30, "red", 10, 120);
  myGamePiece.gravity = 0.05;
  myScore = new component("30px", "Consolas", "black", 280, 40, "text");
  myGameArea.start();
}

var mygamearea = {& nbsp; Canvas: Document.CreateEement ("Canvas"), & nbsp; bắt đầu: function () {& nbsp; & nbsp; & nbsp; this.canvas.width = 480; & nbsp; & nbsp; & nbsp; this.canvas.height = 270; & nbsp; & nbsp; & nbsp; this.context = this.canvas.getContext ("2d"); & nbsp; & nbsp; & nbsp; document.body.insertbefore (this.canvas, document.body.childnodes [0]); & nbsp; & nbsp; & nbsp; this.frameno = 0; & nbsp; }, & nbsp; & nbsp; rõ ràng: function () {& nbsp; & nbsp; & nbsp; this.context.clearrect (0, 0, this.canvas.width, this.canvas.height); & nbsp; }}
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

Hãy tự mình thử »



Tham gia các con số và đến Gạch 2048 !.

Mặc dù các trò chơi flash đã khởi hành từ thế giới này, nhưng vẫn có một nhu cầu đáng kể về các trò chơi dựa trên trình duyệt và đa nền tảng. Cho dù bạn có chủ động 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 xuất hiện mỗi ngày.

Hiện tượng này phần lớn nhờ vào 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 khung mới, phát triển trò chơi HTML5 đã đạt đến độ cao rộng, cho phép trải nghiệm nhiều người chơi, đồ họa 3D và hơn thế nữa! Không khôn ngoan khi nói rằng chơi game bây giờ cũng khả thi thông qua trình duyệt như trên nhiều thiết bị khác!

  • Giả sử điều này nghe có vẻ như là một triển vọng thú vị đối với bạn với tư cách là một 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 cách bạn có thể tạo ra các trò chơi của riêng mình! Ngồi lại, thư giãn và chuẩn bị để tăng cường 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!
  • Chính xác thì trò chơi HTML5 là gì?
  • & nbsp; khối xây dựng
  • Phía máy chủ
  • Cách phân phối trò chơi HTML5
  • Các khóa học phát triển trò chơi HTML5
  • Hướng dẫn trò chơi HTML5
  • Cộng đồng HTML5 Gamedev
  • HTML5 Gamedev thách thức
  • & NBSP; HTML5 Gamedev Podcasts

Chính xác thì trò chơi HTML5 là gì?

Hãy bắt đầu từ tổng số 0. HTML5 là gì? Đó là một câu hỏi khó. Có một định nghĩa chính thức về HTML5, chỉ đơn giản là viết tắt của bản sửa đổi 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 các trang web) và định nghĩa được thổi phồng hơn (điều mà hầu hết mọi người hiểu khi HTML5 được đề cập) Các tính năng mới của các công nghệ web đã xuất hiện trong vài năm qua (API của JavaScript như Canvas hoặc Webaudio, thẻ HTML Semantic, v.v.).

Với mục đích của chúng tôi, chúng tôi sẽ sử dụng các bit của cả hai. HTML5 là HTML trong phiên bản mới nhất của nó, bao gồm cả một loạt các tính năng thú vị giúp các công nghệ web trở thành một tiêu chuẩn mở với các khả năng vô tận kết hợp HTML, CSS và JavaScript.

Có HTML cùng với tất cả các siêu năng lực vượt ra ngoài việc tạo ra một trang web đơn giản cho phép chúng ta tạo ra, trong số những thứ khác, các trò chơi. Đây là những trò chơi HTML5.games. These are HTML5 games.

& nbsp; khối xây dựng

Các khối xây dựng rất cơ bản của trò chơi HTML5 là của Web:

  • HTML
  • CSS
  • JavaScript

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 điều 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à suy nghĩ về các phiên bản được thổi phồng của các thuật ngữ này, chúng ta cũng có thể cần, để tạo ra các trò chơi HTML5:

  • HTML5 (API JavaScript)
  • CSS3

Với những điều trên, bạn có thể tạo ra các trò chơi tuyệt vời sẽ 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 đó, có nhiều khối xây dựng mà bạn có thể thêm.

Chẳng hạn, bạn có thể muốn thực hiện các trò chơi 3D. Nếu đó là trường hợp 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.

Hướng dẫn how do you make a html game? - làm thế nào để bạn tạo một trò chơi html?

Phía máy chủ

Nếu bạn muốn các trò chơi của mình được lưu dữ liệu từ xa, bạn sẽ cần một phía máy chủ cho trò chơi của mình. Bạn có thể phát triển 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.

  • JavaScript (NodeJS)
  • PHP
  • Java
  • Python
  • Ruby

Hoặc bạn có thể sử dụng nhà cung cấp dịch vụ phụ trợ của bên thứ ba như Firebase. Một số có phiên bản miễn phí 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 một số giới hạn nhất định. Một số nhà cung cấp này đặc biệt tập trung vào các trò chơi, một số hầu hết được hình thành cho các ứng dụng di động nhưng cũng có thể được sử dụng cho các trò chơi.

Cách phân phối trò chơi HTML5

Cách dễ nhất để phân phối HTML5 là chỉ cần đưa nó ra khỏi đó! Bằng cách được xây dựng như một trang web, bạn có thể nhúng nó vào một trang và xuất bản nó. Chỉ như vậy.

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 bạn muốn phân phối nó cho (iOS, Android, v.v.) và đặt trò chơi của bạn vào bên trong để ứng dụng này hoạt động giống như 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ể bao gồm 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 chuyên sâu hơn về các trò chơi xuất bản.

Hướng dẫn how do you make a html game? - làm thế nào để bạn tạo một trò chơi html?

Khung trò chơi HTML5

Hầu hết các trò chơi đều chia sẻ một số khái niệm, của các sprites (các yếu tố đồ họa đại diện cho kẻ thù, người chơi, các yếu tố trong trò chơi của bạn), cảnh hoặc sân khấu, hoạt hình, âm thanh, tải tài sản đồ họa, v.v. Vì hầu hết các nhà phát triển trò chơi đều muốn tập trung vào trò chơi thực tế của họ và Không phải trong việc tạo toàn bộ lớp trừu tượng này, bạn nên sử dụng các khung trò chơi HTML5.

Các khung và thư viện trò chơi HTML5 có chứa các thành phần xây dựng bạn có thể sử dụng để tạo các trò chơi của riêng bạn. 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 HTML5 Gamedev. Trong nhiều trường hợp, họ đã tạo ra các khung cho các 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 đóng góp cho nó, 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 những công cụ trò chơi sẽ sử dụng là một quyết định quan trọng, vì vậy hãy chắc chắn rằng bạn thực hiện nghiên cứu đúng trước khi đưa ra lựa chọn của mình. Bất kể bạn chọn động cơ nào, bạn sẽ phải làm quen với mã và bên trong của nó hoạt động nếu bạn 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 đưa ra lựa chọn của mình:

  • Trò chơi của bạn cho máy tính để bàn, điện thoại di động hay cả hai?
  • Họ có một cộng đồng tích cực?
  • Có nhiều người sử dụng khung ngày nay không?
  • Có phải nó đang được duy trì hay trang GitHub trông giống như một thị trấn bị bỏ hoang?

Đôi khi nhìn vào các trò chơi thực sự cho bạn cái nhìn sâu sắc hơn là chỉ những từ ngữ. Dự án này so sánh các động cơ khác nhau bằng cách thực hiện cùng một trò chơi đột phá trong tất cả chúng.

Một số khung miễn phí phổ biến là:

  • Phaser -> phổ biến nhất những ngày này
  • Creatjs
  • Limejs
  • Quintus
  • Crafttyjs
  • Melonjs
  • Pixiejs
  • Babylonsjs -> Khung WebGL cho kết xuất 3D
  • PlayCanvas
  • Bajs
  • Kontrajs
  • Cannon.js
  • Stage.js
  • Matter.js

Hướng dẫn how do you make a html game? - làm thế nào để bạn tạo một trò chơi html?

Các khóa học phát triển trò chơi HTML5

Cá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 một khóa học video và chỉ xem video YouTube là có nhiều cấu trúc hơn. Các khóa học tốt có một mục tiêu rõ ràng và xây dựng từng bước. Dưới một 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ụ bạn cần để tạo các trò chơi HTML5.

Phát triển trò chơi chung

  • 10 cách tốt nhất để học viết mã
  • Cách tạo trò chơi - Tạo trò chơi video từ đầu
  • Cách viết mã một trò chơi
  • Cách thiết kế một trò chơi: Tài liệu thiết kế trò chơi
  • Cách tiếp cận tường thuật trò chơi

Phaser

  • Phát triển trò chơi HTML5 MINI-NDE (Chương trình giảng dạy cao cấp bao gồm việc tạo ra nhiều trò chơi nhỏ với Phaser)
  • Học viện MMORPG (Chương trình giảng dạy cao cấp dạy cách tạo game nhập vai trực tuyến với Phaser, Node.js và MongoDB)
  • Hướng dẫn của Phaser 4 - Hướng dẫn đầy đủ

Webgl, 3D và XR

  • Học viện JavaScript 3D & XR (Chương trình giảng dạy cao cấp bao gồm nhiều khung JavaScript cho trải nghiệm 3D và XR trên web)
  • WebVR cho người mới bắt đầu-Xây dựng các trang web VR với khung hình A (khóa học cao cấp trên A-FRAME)
  • Tìm hiểu những điều cơ bản của Babylon.js (Khóa học miễn phí trên Babylon.js)

Kỹ năng HTML5

  • Tìm hiểu HTML và CSS (Khóa học miễn phí)
  • Lập trình JavaScript cho người mới bắt đầu
  • JavaScript Mini Projects-Trò chơi học ngôn ngữ
  • Khám phá các công cụ phát triển cho các ứng dụng JavaScript

Phát triển phía máy chủ (để thực hiện phụ trợ cho các trò chơi của bạn)

  • Node.js và Express cho người mới bắt đầu
  • Xác thực người dùng với MongoDB và Express
  • UI xác thực dựa trên web cho Express và Node.js
  • Giao tiếp máy chủ thời gian thực với ổ cắm.io

Hướng dẫn trò chơi HTML5

Tại Học viện Gamedev, như bạn đã biết, chúng tôi đã có một loạt các hướng dẫn phát triển trò chơi HTML5, chủ yếu là trên Phaser, Limejs, Quintus và Babylonjs. Có những nơi tuyệt vời khác để tìm HTML5 Gamedev chất lượng tốt:

  • Xây dựng các trò chơi mới
  • Gamedevtuts+
  • Phát triển trò chơi HTML5 (tin tức và liên kết đến hướng dẫn)
  • Hướng dẫn Phaser
  • Hướng dẫn trò chơi Mozilla
  • Hướng dẫn trò chơi HTML5
  • Trò chơi HTML5 với JavaScript & Phaser
  • Hướng dẫn phát triển trò chơi JavaScript HTML5
  • Hướng dẫn phát triển trò chơi HTML5

Cộng đồng HTML5 Gamedev

Bạ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ố cộng đồng khác chỉ trong HTML5 Gamedev.

Web:

  • HTML5GameDevs

Facebook:

  • Nhà phát triển trò chơi Indie
  • Ứng dụng Indie và Nhóm phát triển trò chơi
  • Sự phát triển trò chơi
  • Các nhà phát triển trò chơi video

Các cộng đồng khác:

  • Diễn đàn Phaser
  • reddit
  • GAMEDEV.JS
  • Babylonjs froum
  • Bài giảng bajs

HTML5 Gamedev thách thức

  • Global Game Jam® là một sự kiện thường niên, thường xảy ra vào tháng 1 hàng năm. Những người tham gia làm việc đồng thời trên toàn cầu, và xung quanh một chủ đề trung tâm, và sau đó làm việc cùng nhau để tạo ra một trò chơi. is an annual event, usually occurring in January every year. Participants work concurrently around the globe, and around a central theme, and then work together to create a game.
  • Cạnh tranh J13K: Cuộc thi kết thúc nhưng bạn vẫn có thể đọc blog, đăng ký nhận bản tin và kiểm tra các tài nguyên cho các công cụ.: the competition is over but you can still read the Blog, subscribe to the Newsletter, and check the Resources for tools.

& NBSP; HTML5 Gamedev Podcasts

Tôi chỉ biết Lostcast, một podcast được tạo ra bởi những kẻ từ Lost Decade Games (người mà chúng tôi đã phỏng vấn trong quá khứ). 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.

Bán - Những ngày cuối cùng

Xây dựng trò chơi

Hướng dẫn how do you make a html game? - làm thế nào để bạn tạo một trò chơi html?

Tham gia các con số và đến Gạch 2048 !.

Xây dựng trò chơi của riêng bạn

✓ 250 khóa học mã hóa

✓ Bài học tương tác

✓ Đường dẫn học tập hướng dẫn

✓ Trợ giúp từ các cố vấn chuyên gia

$1

Hướng dẫn how do you make a html game? - làm thế nào để bạn tạo một trò chơi html?

Nhận tất cả chỉ cho

Bạn có thể tạo một trò chơi trong HTML không?. The element offers all the functionality you need for making games. Use JavaScript to draw, write, insert images, and more, onto the .

Làm cách nào để tạo trò chơi HTML của riêng tôi?

Tệp HTML sẽ rất đơn giản: một khi bạn có bố cục HTML cơ bản, hãy tạo một div với "trò chơi" ID, và sau đó hai div khác bên trong nó với ID "ký tự" và "khối".Nhân vật sẽ là khủng long, và khối sẽ là cây xương rồng hướng về phía chúng tôi.create a div with the ID "game" , and then two more divs inside of it with the IDs "character" and "block" . The character will be the dinosaur, and the block will be the cactuses coming towards us.

HTML có tốt cho chơi game không?

Có, HTML, CSS và JavaScript có thể khá tốt để phát triển trò chơi.Một lợi ích lớn của nó là về cơ bản tất cả các thiết bị điện toán có thể chơi các trò chơi được triển khai với JS và HTML.. One big benefit of it is that basically all computing devices can play games implemented with JS and HTML.

Làm thế nào để bạn thực hiện 2048 trong HTML?

.
2048.
0.
.
Tham gia các con số và đến Gạch 2048 !.
.
.