WarriorJS - 透過玩遊戲來學習 Javascript 程式設計

Contents

在 github 上看到這個有趣的專案，專案的內容寫著 – 令人興奮的程式設計和人工智慧遊戲，Ok 我坦白我是看到人工智慧被這個專案所吸引，但是玩了兩個關卡，還是不知道這個遊戲跟人工智慧有什麼關係，不過這個遊戲的最大亮點反而是 – 透過寫 Javascript 來破遊戲所設下的關卡

這個遊戲沒有酷炫的聲光效果，也沒有圖形介面，只有文字介面( 想起了以前很熱門的 MUD ) ，可以一邊在 VS Code 編輯器上寫程式，然後在 VS Code 內建的 console 中執行程式看看你寫的 Javascript 程式碼是不是可以順利破遊戲給你的任務，聽起來很有趣，因為都是文字介面，剛開始玩也有點摸不著頭緒，以下簡單介紹這個遊戲要如何啟動，和如何玩，希望這個遊戲會幫助你回想一下當初開始學程式設計的樂趣

遊戲背景介紹

在 WarriorJS 中，你穿著勇士般的盔甲，爬上一座高塔，到達頂端的 JavaScript 之劍。傳說持劍者因為使用 JavaScript 語言變得豁然開朗，但是要注意的是: 這個過程並不容易。在每層樓上，你需要編寫 JavaScript 來指導戰士與敵人戰鬥，拯救俘虜，活著走上樓梯。

無論你是程式設計新手還是 JavaScript 大師，WarriorJS 都會讓你的技能受到考驗。你敢接受挑戰嗎？

( 以上遊戲說明翻譯自 github 開源專案中的遊戲介紹 )

開始安裝遊戲

1. 使用 npm 安裝

npm install –global @warriorjs/cli

2. 建立你自己的戰士

到終端機執行 warriorjs ，程式會提醒你目前沒有 warriorjs 這個目錄，是否要建立，選 Yes ，接下來幫戰士取一個名稱，選一個要挑戰的塔等級 ( 一開始似乎只有 beginner 可以選 )

建立好後，warriorjs 程式會幫你在 warriorjs 這個目錄建立一個 戰士名稱-begineer 目錄，使用 VS Code 來打開這個目錄，先看看目錄中的 README.md ，這就是遊戲給你的第一道關卡任務說明，是使用 markdown 語法寫的

第一關還蠻簡單的只要走到樓梯就算過關了，裡面的 @ 就是戰士你， > 代表樓梯，還有你的生命值 HP = 20 ，還有戰士的能力，第一關只有走路 warrior.walk()

接下來就要開始寫程式來完成第一個關卡的任務，打開 Player.js ，然後在 playTurn 這個 function 中輸入 warrior.walk() ，寫好後要記得儲存

打開 VS Code 的終端機，然後輸入 warriorjs 指令，你就會看到遊戲會根據你向戰士編寫的 javascript 程式去執行，這個任務相當簡單，就是一直走到樓梯就完成了，遊戲完成後會問你是否要挑戰下一個關卡，選 Yes 後，warriorjs 會更新 README.md 給你下一個任務說明，好像 mission impossible 🙂

打開看 README.md ，OK 第二個任務來了，你會發現有新的地圖，戰士的能力除了走路也多了新的技能 ( attack() ) ，還多了感知能力 ( feel() ，回傳前面空間狀態) ，你的任務還是走到樓梯，但是中間有一個障礙 Sludge ，過這個障礙會讓你損失 12 個生命值，attack() 也會消耗 5 個生命值

任務說明有給提示，利用 feel().isEmpty() 判斷你的前面是否有障礙，如果有就使用 attack()，如果沒有就繼續走

打開 Play.js 開始設計你的戰士要如何過關，你可以先不用改程式，看看戰士是怎麼死掉的，但是為了不花費太多篇幅，先破個梗看看這關要如何過，以下是我的程式碼

class Player {

playTurn(warrior) {

if(warrior.feel().isEmpty()){

warrior.walk();

} else {

warrior.attack();

}

如果前面是空無一物就往前走，如果遇到障礙，就執行 attach() ，寫好控制程式後儲存 Player.js 然後到終端機執行 warriorjs 程式，你會看到遊戲是否按照你寫的 javascript 程式邏輯去執行，這關也很簡單，又順利過關了，如果要繼續挑戰，按下 y ，前面關卡很簡單，後面會越來越困難