Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Roguelike
Gamedevelopment

Làm thế nào để làm cho Roguelike đầu tiên của bạn

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Roguelikes đã được chú ý gần đây, với các trò chơi như Dungeons của Dredmor, Spelunky, The Binding of Isaac, và FTL tiếp cận khán giả rộng lớn và nhận được sự ca ngợi quan trọng. Long rất thích những người chơi hardcore trong một niche nhỏ, các yếu tố roguelike trong các kết hợp khác nhau giờ đây giúp mang lại độ sâu và khả năng chơi lại cho nhiều thể loại hiện có.

Wayfarer a 3D roguelike currently in development
Wayfarer, một Roguelike 3D hiện đang được phát triển.

Trong hướng dẫn này, bạn sẽ học cách tạo ra một roguelike truyền thống bằng cách sử dụng JavaScript và công cụ trò chơi HTML 5 của Phaser. Đến cuối, bạn sẽ có một trò chơi roguelike đơn giản, đầy đủ chức năng, có thể chơi được trong trình duyệt của bạn! (Đối với mục đích của chúng tôi một roguelike truyền thống được định nghĩa là một trình thu thập dungeon đơn lẻ, ngẫu nhiên, theo lượt với permadeath.)

Click to play the game
Nhấp để chơi trò chơi.

Lưu ý: Mặc dù mã trong hướng dẫn này sử dụng JavaScript, HTML và Phaser, bạn sẽ có thể sử dụng cùng một kỹ thuật và khái niệm trong hầu hết các ngôn ngữ lập trình và công cụ trò chơi khác.


Sẵn sàng

Đối với hướng dẫn này, bạn sẽ cần một trình soạn thảo văn bản và trình duyệt. Tôi sử dụng Notepad ++ và tôi thích Google Chrome cho các công cụ dành cho nhà phát triển mở rộng của nó, nhưng quy trình làm việc sẽ khá giống với bất kỳ trình soạn thảo văn bản và trình duyệt nào bạn chọn.

Sau đó, bạn nên tải xuống các tệp nguồn và bắt đầu với thư mục init; điều này chứa Phaser và các tệp HTML và JS cơ bản cho trò chơi của chúng tôi. Chúng tôi sẽ viết mã trò chơi của chúng tôi trong tệp rl.js hiện đang trống.

Tệp index.html chỉ cần tải Phaser và tệp mã trò chơi nói trên của chúng tôi:


Khởi tạo và định nghĩa

Hiện tại, chúng ta sẽ sử dụng đồ họa ASCII cho roguelike của mình - trong tương lai, chúng ta có thể thay thế chúng bằng đồ họa bitmap, nhưng hiện tại, việc sử dụng ASCII đơn giản làm cho cuộc sống của chúng ta dễ dàng hơn.

Hãy định nghĩa một số hằng số cho kích thước phông chữ, kích thước của bản đồ của chúng ta (có nghĩa là, mức độ), và bao nhiêu diễn viên sinh ra trong nó:

Chúng ta hãy khởi tạo Phaser và lắng nghe các sự kiện key-up bàn phím, vì chúng ta sẽ tạo một trò chơi theo lượt và sẽ hành động một lần cho mỗi cú đánh chính:

Kể từ khi phông chữ mặc định monospace có xu hướng khoảng 60% rộng khi chúng cao, chúng tôi đã khởi tạo kích thước canvas là 0,6 * kích thước phông chữ * số cột. Chúng tôi cũng nói với Phaser rằng nó nên gọi hàm create () của chúng ta ngay lập tức sau khi nó khởi tạo xong, lúc đó chúng ta khởi tạo các điều khiển bàn phím.

Bạn có thể xem các trò chơi cho đến nay - không phải là có nhiều để xem!


Bản đô

Bản đồ lát gạch đại diện cho khu vực chơi của chúng tôi: mảng lát gạch hoặc ô trống rời rạc (trái ngược với liên tục), mỗi ô được biểu thị bằng ký tự ASCII có thể biểu thị một bức tường (#: khối chuyển động) hoặc sàn (.: Không chuyển động khối):

Hãy sử dụng hình thức tạo thủ tục đơn giản nhất để tạo ra các bản đồ của chúng ta: quyết định ngẫu nhiên ô nào sẽ chứa một bức tường và một tầng nào đó:

Điều này sẽ cho chúng ta một bản đồ nơi 80% của các tế bào là tường và phần còn lại là tầng.

Chúng tôi khởi tạo bản đồ mới cho trò chơi của chúng tôi trong hàm create (), ngay sau khi thiết lập trình nghe sự kiện bàn phím:

Bạn có thể xem bản trình diễn tại đây — mặc dù, một lần nữa, không có gì để xem, vì chúng tôi chưa hiển thị bản đồ.


Màn hình

Đã đến lúc vẽ bản đồ của chúng ta! Màn hình của chúng tôi sẽ là một mảng các phần tử văn bản 2D, mỗi phần tử chứa một ký tự đơn:

Vẽ bản đồ sẽ điền vào nội dung của màn hình với các giá trị của bản đồ vì cả hai đều là các ký tự ASCII đơn giản:

Cuối cùng, trước khi vẽ bản đồ, chúng ta phải khởi tạo màn hình. Chúng ta quay lại hàm create () của chúng ta:

Bây giờ bạn sẽ thấy một bản đồ ngẫu nhiên được hiển thị khi bạn chạy dự án.

Click to view the game so far
Nhấn vào đây để xem các trò chơi cho đến nay.

Diễn viên

Tiếp theo trong dòng là các diễn viên: nhân vật người chơi của chúng tôi, và những kẻ thù họ phải đánh bại. Mỗi diễn viên sẽ là một đối tượng có ba trường: x và y cho vị trí của nó trên bản đồ và hp cho điểm nhấn của nó.

Chúng tôi giữ tất cả các tác nhân trong mảng actorList (phần tử đầu tiên trong số đó là trình phát). Chúng tôi cũng giữ một mảng kết hợp với các vị trí của các tác nhân như các phím để tìm kiếm nhanh, để chúng tôi không phải lặp qua toàn bộ danh sách diễn viên để tìm diễn viên nào chiếm một vị trí nhất định; điều này sẽ giúp chúng ta khi chúng ta mã hóa phong trào và chiến đấu.

Chúng tôi tạo tất cả các diễn viên của chúng tôi và chỉ định một vị trí miễn phí ngẫu nhiên trong bản đồ cho mỗi người:

Đã đến lúc thể hiện diễn viên! Chúng ta sẽ vẽ tất cả kẻ thù là e và nhân vật của người chơi như số lượng các điểm đánh của nó:

Chúng ta sử dụng các hàm mà chúng ta vừa viết để khởi tạo và vẽ tất cả các tác nhân trong hàm create () của chúng ta:

Bây giờ chúng ta có thể thấy nhân vật và kẻ thù của chúng ta trải rộng ở cấp độ!

Click to view the game so far
Nhấn vào đây để xem các trò chơi cho đến nay.

Gạch chặn và có thể truy cập

Chúng ta cần đảm bảo rằng các diễn viên của chúng ta không chạy khỏi màn hình và thông qua các bức tường, vì vậy hãy thêm kiểm tra đơn giản này để xem các hướng mà một diễn viên cụ thể có thể đi bộ:


Phong trào và chiến đấu

Chúng tôi cuối cùng đã đến một số tương tác: phong trào và chiến đấu! Vì, trong roguelikes cổ điển, tấn công cơ bản được kích hoạt bằng cách chuyển sang một diễn viên khác, chúng ta xử lý cả hai cùng một điểm, hàm moveTo () của chúng ta, lấy một diễn viên và một hướng (hướng là sự khác biệt mong muốn trong x và y đến vị trí mà diễn viên bước vào):

Về cơ bản:

  1. Chúng tôi đảm bảo rằng diễn viên đang cố gắng chuyển sang vị trí hợp lệ.
  2. Nếu có một diễn viên khác ở vị trí đó, chúng tôi tấn công nó (và giết nó nếu số HP của nó đạt 0).
  3. Nếu không có một diễn viên khác ở vị trí mới, chúng tôi sẽ chuyển đến đó.

Lưu ý rằng chúng tôi cũng hiển thị thông điệp chiến thắng đơn giản khi kẻ thù cuối cùng bị giết và trả về false hoặc true tùy thuộc vào việc chúng tôi có thực hiện hành động hợp lệ hay không.

Bây giờ, chúng ta hãy quay lại hàm onKeyUp () của chúng ta và thay đổi nó để mỗi khi người dùng nhấn một phím, chúng ta xóa vị trí của diễn viên trước đó khỏi màn hình (bằng cách vẽ bản đồ lên trên), di chuyển nhân vật đến vị trí, và sau đó vẽ lại các diễn viên:

Chúng ta sẽ sớm sử dụng biến hành động để biết kẻ thù có nên hành động sau mỗi lần đầu vào của người chơi hay không.

Click to view the game so far
Nhấn vào đây để xem các trò chơi cho đến nay.

Trí tuệ nhân tạo cơ bản

Bây giờ nhân vật người chơi của chúng tôi đang di chuyển và tấn công, hãy thậm chí là tỷ lệ cược bằng cách làm cho kẻ thù hành động theo cách tìm đường rất đơn giản miễn là người chơi có sáu bước hoặc ít hơn từ họ. (Nếu người chơi ở xa hơn, kẻ địch sẽ đi ngẫu nhiên.)

Lưu ý rằng mã tấn công của chúng tôi không quan tâm ai là diễn viên đang tấn công; điều này có nghĩa rằng, nếu bạn sắp xếp chúng vừa phải, kẻ thù sẽ tấn công lẫn nhau trong khi cố gắng theo đuổi nhân vật người chơi, Doom-phong cách!

Chúng tôi cũng đã thêm một trò chơi qua tin nhắn, được hiển thị nếu một trong những kẻ thù giết người chơi.

Bây giờ tất cả những gì còn lại là làm cho kẻ thù hành động mỗi khi người chơi di chuyển, điều này đòi hỏi phải thêm những điều sau vào cuối các hàm onKeyUp () của chúng ta, ngay trước khi vẽ các diễn viên ở vị trí mới của họ:

Click to view the game so far
Nhấn vào đây để xem các trò chơi cho đến nay.

Tiền thưởng: Phiên bản Haxe

Ban đầu tôi đã viết hướng dẫn này trong Haxe, một ngôn ngữ đa nền tảng tuyệt vời biên dịch sang JavaScript (trong số các ngôn ngữ khác). Mặc dù tôi đã dịch phiên bản trên bằng tay để đảm bảo rằng chúng tôi nhận được JavaScript theo phong cách riêng, nếu như tôi thích Haxe hơn với JavaScript, bạn có thể tìm thấy phiên bản Haxe trong thư mục haxe của tệp tải xuống nguồn.

Trước tiên, bạn cần cài đặt trình biên dịch haxe và có thể sử dụng bất kỳ trình soạn thảo văn bản nào bạn muốn và biên dịch mã haxe bằng cách gọi haxe build.hxml hoặc nhấp đúp vào tệp build.hxml. Tôi cũng đưa vào một dự án FlashDevelop nếu bạn thích một IDE tốt đẹp cho một trình soạn thảo văn bản và dòng lệnh; chỉ cần mở rl.hxproj và nhấn F5 để chạy.


Tóm lược

Đó là nó! Bây giờ chúng ta có một roguelike đơn giản hoàn chỉnh, với việc tạo bản đồ ngẫu nhiên, chuyển động, chiến đấu, AI và cả hai điều kiện thắng và thua.

Dưới đây là một số ý tưởng cho các tính năng mới mà bạn có thể thêm vào trò chơi của mình:

  • nhiều cấp độ
  • tăng sức mạnh
  • hàng tồn kho
  • hàng tiêu dùng
  • Trang thiết bị

Hãy thưởng thức!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.