[4 – 遊戲邏輯] 產生初始盤面

棋盤設計

用一個陣列來代表盤面,裡面儲存1~N來代表不同的圖形

隨機產生盤面

觀察連連看遊戲裡,同樣的圖形通常會有四個,因此如果盤面是10×10的話,總共會有100的icon,一種icon會有四個,則代表會有25種不同的icon。

一開始為了方便測試,先製作6*6=36的棋盤,這樣會有36/4=9種不同的icon。

這時候可以看到已經會有一個隨機產生不同資料的6×6盤面了

呈現陣列內容

接著在邏輯撰寫的版本因為為了測試方便,我們使用angularJS來呈現這個棋盤,因為angular有bindle資料的功能,可以讓棋盤消除更加的容易。
html檔案的內容如下:

js檔案的內容如下:

上面的程式碼可以產生一個符合陣列內容的table盤面,裡面標明數字,如果任選一個數字,底部會反紅做提示,若選擇的第二個數字與第一個所選的數字相同,則會把所選的值存在select2,並且把selected的標籤設定為false。
上面程式碼的產出如下:

這邊是js bin的連結:https://jsbin.com/raqilezuye/edit?html,js

改使用Typescript開發

因為後面的程式邏輯將會越來越複雜,因此要將上面在JS Bin開發的程式碼搬到本地端的project上。

改好後的專案在此:ironman2018-3

下載後請執行下列指令安裝

安裝後可以用下列指令來打開網站

就可以成功打開網頁看到專案的結果了。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *