JS地下城ー神明求籤

成果畫面（畫面第一幕）

作品連結｜程式碼

預計目標：

1. 達成響應式排版。

2. 由本地JSON檔隨機取籤。

0. 寫在前面：

一般去廟裏問事求籤的時候，我們會在籤筒中隨機抽出籤號，待擲出允筊（或不擲）後，再取出相應的籤詩紙片獲得相關詩文解答。本次程式也是相同方法，由程式點按執行後，隨機生成籤號，並顯示相對應的籤詩詩文。隨機產生籤號的程式碼為：

//產出籤號
Math.floor(Math.random()* data.length);

1. 響應式排版

本次抽籤結果頁面為九宮格排版，指定尺寸時需注意利用vw,vh(螢幕寬度、螢幕高度)單位，切版圖示可參考下圖：

抽籤結果頁面切版

第三幕-抽籤結果：手機版頁面

第三幕-抽籤結果：電腦版頁面

2. 籤詩JSON檔

六角學院提供的排版畫面，內部籤文經筆者google查詢之後，發現引用於雷雨師一百籤的籤文，查閱之後，發覺籤文內容格式整齊，較適合應用此篇範例。

籤詩json檔內容

3. 顯示幕更換

本次抽籤畫面共分三幕，第一幕由使用者選擇抽籤類別後，進行抽籤；第二幕顯示運勢類別，筆者設定時間為五秒後（setTimeout）切換螢幕；第三幕則顯示抽籤結果及使用者重新抽籤按鈕。

第二幕-運勢類別：已設定淡入效果(fade in effect)及加入音效

結語

本次的js邏輯略為簡單，唯一需注意的就是排版及動畫呈現，詳細可以查閱作品連結。