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

() translation by (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.

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:

<!DOCTYPE html>
<head>
  <title>roguelike tutorial</title>
	<script src="phaser.min.js"></script>
	<script src="rl.js"></script>
</head>
</html>

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ó:

        // font size
        var FONT = 32;

        // map dimensions
        var ROWS = 10;
        var COLS = 15;

        // number of actors per level, including player
        var ACTORS = 10;

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:

// initialize phaser, call create() once done
var game = new Phaser.Game(COLS * FONT * 0.6, ROWS * FONT, Phaser.AUTO, null, {
        create: create
});

function create() {
        // init keyboard commands
        game.input.keyboard.addCallbacks(null, null, onKeyUp);
}

function onKeyUp(event) {
        switch (event.keyCode) {
                case Keyboard.LEFT:

                case Keyboard.RIGHT:

                case Keyboard.UP:

                case Keyboard.DOWN:

        }
}

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!

Bả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):

1	// the structure of the map
2	var map;

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 đó:

function initMap() {
        // create a new random map
        map = [];
        for (var y = 0; y < ROWS; y++) {
                var newRow = [];
                for (var x = 0; x < COLS; x++) {
                     if (Math.random() > 0.8)
                        newRow.push('#');
                    else
                        newRow.push('.');
                }
                map.push(newRow);
        }
}

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:

1	// the ascii display, as a 2d array of characters
2	var asciidisplay;

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:

        function drawMap() {
            for (var y = 0; y < ROWS; y++)
                for (var x = 0; x < COLS; x++)
                    asciidisplay[y][x].content = map[y][x];
        }

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:

        function create() {
                // init keyboard commands
                game.input.keyboard.addCallbacks(null, null, onKeyUp);

                // initialize map
                initMap();

                // initialize screen
                asciidisplay = [];
                for (var y = 0; y < ROWS; y++) {
                        var newRow = [];
                        asciidisplay.push(newRow);
                        for (var x = 0; x < COLS; x++)
                                newRow.push( initCell('', x, y) );
                }
                drawMap();
        }

        function initCell(chr, x, y) {
                // add a single cell in a given position to the ascii display
                var style = { font: FONT + "px monospace", fill:"#fff"};
                return game.add.text(FONT*0.6*x, FONT*y, chr, style);
        }

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.

// a list of all actors; 0 is the player
var player;
var actorList;
var livingEnemies;

// points to each actor in its position, for quick searching
var actorMap;

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:

function randomInt(max) {
   return Math.floor(Math.random() * max);
}

function initActors() {
        // create actors at random locations
        actorList = [];
        actorMap = {};
        for (var e=0; e<ACTORS; e++) {
                // create new actor
                var actor = { x:0, y:0, hp:e == 0?3:1 };
                do {
                        // pick a random position that is both a floor and not occupied
                        actor.y=randomInt(ROWS);
                        actor.x=randomInt(COLS);
                } while ( map[actor.y][actor.x] == '#' || actorMap[actor.y + "_" + actor.x] != null );

                // add references to the actor to the actors list & map
                actorMap[actor.y + "_" + actor.x]= actor;
                actorList.push(actor);
        }

        // the player is the first actor in the list
        player = actorList[0];
        livingEnemies = ACTORS-1;
}

Đã đế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ó:

function drawActors() {
        for (var a in actorList) {
                if (actorList[a].hp > 0)
                        asciidisplay[actorList[a].y][actorList[a].x].content = a == 0?''+player.hp:'e';
        }
}

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:

function create() {
	...
	// initialize actors
	initActors();
	...
	drawActors();
}

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 độ!

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ộ:

function canGo(actor,dir) {
	return 	actor.x+dir.x >= 0 &&
		actor.x+dir.x <= COLS - 1 &&
                actor.y+dir.y >= 0 &&
		actor.y+dir.y <= ROWS - 1 &&
		map[actor.y+dir.y][actor.x +dir.x] == '.';
}

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):

function moveTo(actor, dir) {
        // check if actor can move in the given direction
        if (!canGo(actor,dir))
                return false;

        // moves actor to the new location
        var newKey = (actor.y + dir.y) +'_' + (actor.x + dir.x);
        // if the destination tile has an actor in it
        if (actorMap[newKey] != null) {
                //decrement hitpoints of the actor at the destination tile
                var victim = actorMap[newKey];
                victim.hp--;

                // if it's dead remove its reference
                if (victim.hp == 0) {
                        actorMap[newKey]= null;
                        actorList[actorList.indexOf(victim)]=null;
                        if(victim!=player) {
                                livingEnemies--;
                                if (livingEnemies == 0) {
                                        // victory message
                                        var victory = game.add.text(game.world.centerX, game.world.centerY, 'Victory!\nCtrl+r to restart', { fill : '#2e2', align: "center" } );
                                        victory.anchor.setTo(0.5,0.5);
                                }
                        }
                }
        } else {
                // remove reference to the actor's old position
                actorMap[actor.y + '_' + actor.x]= null;

                // update position
                actor.y+=dir.y;
                actor.x+=dir.x;

                // add reference to the actor's new position
                actorMap[actor.y + '_' + actor.x]=actor;
        }
        return true;
}

Về cơ bản:

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ệ.
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).
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:

function onKeyUp(event) {
        // draw map to overwrite previous actors positions
        drawMap();

        // act on player input
        var acted = false;
        switch (event.keyCode) {
                case Phaser.Keyboard.LEFT:
                        acted = moveTo(player, {x:-1, y:0});
                        break;

                case Phaser.Keyboard.RIGHT:
                        acted = moveTo(player,{x:1, y:0});
                        break;

                case Phaser.Keyboard.UP:
                        acted = moveTo(player, {x:0, y:-1});
                        break;

                case Phaser.Keyboard.DOWN:
                        acted = moveTo(player, {x:0, y:1});
                        break;
        }

        // draw actors in new positions
        drawActors();
}

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.

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!

function aiAct(actor) {
        var directions = [ { x: -1, y:0 }, { x:1, y:0 }, { x:0, y: -1 }, { x:0, y:1 } ];
        var dx = player.x - actor.x;
        var dy = player.y - actor.y;

        // if player is far away, walk randomly
        if (Math.abs(dx) + Math.abs(dy) > 6)
                // try to walk in random directions until you succeed once
                while (!moveTo(actor, directions[randomInt(directions.length)])) { };

        // otherwise walk towards player
        if (Math.abs(dx) > Math.abs(dy)) {
                if (dx < 0) {
                        // left
                        moveTo(actor, directions[0]);
                } else {
                        // right
                        moveTo(actor, directions[1]);
                }
        } else {
                if (dy < 0) {
                        // up
                        moveTo(actor, directions[2]);
                } else {
                        // down
                        moveTo(actor, directions[3]);
                }
        }
        if (player.hp < 1) {
                // game over message
                var gameOver = game.add.text(game.world.centerX, game.world.centerY, 'Game Over\nCtrl+r to restart', { fill : '#e22', align: "center" } );
                gameOver.anchor.setTo(0.5,0.5);
        }
}

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ọ:

function onKeyUp(event) {
        ...
        // enemies act every time the player does
        if (acted)
                for (var enemy in actorList) {
                        // skip the player
                        if(enemy==0)
                                continue;

                        var e = actorList[enemy];
                        if (e != null)
                                aiAct(e);
                }

        // draw actors in new positions
        drawActors();
}

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!