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

在 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 可以選 )

1__warriorjs__node_

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

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

readmewarriorjs

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

walk

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

run

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

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

secondtower

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

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

這個遊戲會讓你上癮嗎?恭喜你,這個遊戲也會讓你喜歡上寫程式

專案網址 WarriorJS

你可能會有興趣

🌳未來有跟這個專案的相關補充資訊會放到 FB 貼文的留言區,有興趣可按讚追蹤

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: