邊寫 Javascript 程式碼邊玩遊戲 – WarriorJS

softnshare發表於2018-08-17

在 github 上看到這個有趣的專案 – WarriorJS ,專案的內容寫著 – 令人興奮的程式設計和人工智慧遊戲,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

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

歡迎逛逛 Soft & Share 網站


相關文章