目前兩個版本的背64卦程式,遊玩體驗都不太好,因此最終版更新於第二版下方
最終版採用第二種設計,也就是顯示使用者的輸入數字
巴哈程式排版不友善,Github位址
注意目前程式有錯,在firefox與chrome底下不能運作(其它的應該也一樣)
我打算利用console.log()來除錯,吃完飯後再繼續
document.addEventListener("keydown",player_keyin,false);
找到了忘記的是這行,當初複製貼上的後遺症
但就算修正了那行,目前鍵盤輸入還是怪怪的
大概是if-else那哪邊錯誤
也許我要考慮每條if能在螢幕上呈現些東西
不然最近的瀏覽器(我瀏覽器應該都有更新)
console.log()用F12開的好像有些問題在
好了,已經可以玩了
不過會不會按一按出錯還尚待研究與測試
我思考下後再說改正的要點與新增的程式碼哪些需要特別注意
主要著重於錯第二次以後直接講答案
與設計成使用者可以確認目前自己輸入的數字是多少?
此篇重點
if(條件式1)
{
//當條件式1成立時執行這塊
}
else if(條件式2)
{
//當條件式1不成立"且"條件式2成立時執行這塊
//也就是說雖然不滿足條件式1,但符合條件式2
//最後,還有個意思是,這邊會被執行到的話,條件式1肯定不成立了
}
else
{
//剩下的所有狀況都在此解決
//也就是條件式1、條件式2,其實else if印象中還可以條件式3
//上述都不成立了,才會執行此區塊
//然後,if-else if-else這類敘述,個區塊裡面還可以有if-else if-else
//寫程式時注意別把自己繞暈了
}
嗯,觀察了下前面幾篇
覺得以教學文來說還是太過晦澀了些
不過就慢慢體會吧!!
我目前都還是挑自己寫得出來的程式寫
而如果我卡住了,有人沒卡,那也許是個突破點
但卡住的人本身也是有利用更改設計的方式來做出突破
因此,「後生可畏」,程式畢生所學也許三兩下就被學去
(也可能不是三兩下,總之已經有人能取代我們,幫我們分擔勞務了)
又或者是某次更新之後多了函式庫或流行框架就被取代掉
(不過學習時通常還是建議照著歷史的進程來學)
將背周易六十四卦的程式進行分解的話
大概有這四件事情要做
(這四件事情其實可以交由不同的人來做
只是要多個步驟就是最後進行整合)
1.更改字體大小,文字位置置中,顏色(已被CSS語法解決)
2.隨機印出卦與卦名,並對鍵盤、時間做控制(到這邊時基本上遊戲已經可以玩了)
3.改成用迴圈,然後做大約8關,並記錄被解開的卦(因為希望關卡互不重複)
4.改成按L鍵後,遊戲進入最多六十四關的無限模式,改成按U鍵後,進入完全無限模式
題與題之間用較長的-號隔開
各題的子問題或解題步驟,用較短的*號隔開
------------------------------------------------------------
2.
//到這邊時,建議把之前程式碼if(Math.random > 0.5)那段整個刪掉
//測試時畫面才較為清淨些
//鍵盤控制篇
//↓這句話的意思是 鍵盤按下後,我們要做什麼,請看函式player_keyin
document.addEventListener("keydown",player_keyin,false);
function player_keyin(e)
{
document.getElementById("div_test").innerHTML+= String(e.keyCode)+"<br>";
//e.keyCode是鍵盤位置所對應到的碼
//在這邊我們先記錄要用到的鍵盤位置,
//我們要先想下使用者會怎麼輸入?
//數字在桌上型電腦上的鍵盤上至少有兩種輸入方式
//(人體工學鍵盤我不確定)
//首先是鍵盤左邊的0~9,是48~57(正好跟ASCII編碼方式一樣)
//再來是右邊的數字鍵盤,是96~105
//然後L是76,U是85(L,U不分大小寫都正好分別是大寫的ASCII)
//console.log(e.keyCode);
//有些瀏覽器(opera,vivaldi)在偵錯視窗中(按F12開啟)
//切到其中的子標籤console後還是會有顯示不出來的現象
//因此沒特別講比較正規的偵錯方式
}
我們現在想想
為何程式碼上述就夠?
因為這是keydown事件,鍵盤按下才會觸動
因此在這邊我們還沒必要用上時間或計時
確認上述程式碼可以動作後
我們可以針對使用者的輸入來思考了
使用者理想的輸入情況是純數字
因此第一步要先將輸入篩選成純數字
那按L鍵、按U鍵能進入隱藏關卡
這邊也可以稍做處理
到這邊
我們的程式碼大概有段是長成
function player_keyin(e)
{
if(e.keyCode == 76 || e.keyCode == 85)
{
//留待第四題來填
}
//注意,↑個if跟↓個if是兩段不同的if,其實上面的我比較想用switch-case語法
//但考量到非本篇重點就先用if草草帶過,這段甚至不該寫出來
if(e.keyCode >= 48 && e.keyCode <= 57)
{
//處理輸入的數字判別問題
}
else if(e.keyCode >= 96 && e.keyCode <= 105)
{
//繼續處理輸入的數字判別問題
}
else
{
//報錯,可用document.getElementById("div_test").innerHTML= "input error"
}
到這邊時我們發現了件事情
報錯若用innerHTML的話
會跟題目衝到
因此我們在
<div id="div_test"></div>
這底下加一行
<div id="div_alert"></div>
並利用第一題的技巧
在<script>中加入
document.getElementById("div_alert").align= "middle";
document.getElementById("div_alert").style= "color:red;font-size:60px";
更改顏色成紅色(red)使得那訊息更醒目些
寫到這時
我們好像發現題目的敘述不夠清楚
應該是
請問
䷀ 乾為天
為第幾卦?
請輸入數字
你所輸入的數字是: (若輸入正確的話,這邊建議用div_alert)
這要怎麼改呢?
document.getElementById("div_test").innerHTML+=
getUnicodeCharacter(test_random_hexgram+0x4DC0) +
hexgram[test_random_hexgram];
這行改成
document.getElementById("div_test").innerHTML+= "請問<br>" +
getUnicodeCharacter(test_random_hexgram+0x4DC0) +
hexgram[test_random_hexgram]+"<br>為第幾卦?<br>請輸入數字<br>";
這樣改
其中的<br>是換行的意思
那是HTML的語法
而這個是innerHTML =
也就是說內嵌HTML語法與標籤
因此換行不是用Enter鍵來換的
(為何要這麼設計,大概是顧慮到網頁
可能用的作業系統都不同
因此換行鍵的處理Unix與其它系統的相容性是需要思考的)
下一步就要想清楚囉
因為下一步會牽扯到設計問題
我們先來想一下,玩家若手滑的話?
要不要處理
之前我們那樣寫
if(){}
else if(){}
else{}
這寫法是傾向於要處理輸入錯誤
但玩家手滑輸入到非數字的
就這麼罪不可赦嗎?
(其實之所以要處理輸入錯誤
主要是擔心玩家不會玩這款遊戲
或者是說輸入的不是數字鍵
而是 注音輸入法ㄑ一 七 這樣)
所以我這邊還是示範處理的狀況
嗯...用兩種做法來示範差異好了
(有些類似傳說之中的"推敲",賈島的詩是要寫 僧推月下門,還是 僧敲月下門)
第一種解法,碰到英文或其它功能鍵,像F11,Alt,Ctrl那些的
直接對使用者警告
那樣的話在else{}的{}裡面
寫這類敘述即可
document.getElementById("div_alert").innerHTML+= "你輸入的不是數字,請重新再來<br>";
然後你會發現,我錯一次之後
這條訊息就一直被累加著(也就是每次都多一行錯誤)
因此
我們要做如下處理
function player_keyin(e)
{
document.getElementById("div_alert").innerHTML= "";
我們加在一開頭,這樣每次keydown時
就檢測是不是數字
接著的問題就只剩輸入64卦時,十位數與個位數問題
左思右想
單靠按鍵的一層if
沒辦法處理
我們還是得儲存使用者的輸入(也可能是我能力弱)
其中因為我們已經把英文字篩選掉了
因此以存數字的變數對我們來說較為有利
於是在
function player_keyin(e)
{
之前(之內其實也可以,且理論上來說宣告在裡面才是好的)
加上了個var keyin_contain = 0;
想像下,若使用者輸入的數字是0~9
個位數該如何處理
若使用者輸入0怎樣才不會出錯
我們似乎可以這麼下條件式
用加的 0+0=0,這樣不會影響個位數與十位數字的判斷
那十位數字呢?
就else if(keyin_contain < 10)
這樣,之後再先把 原來的keyin_contain*10 加上 0~9
若還有其它情況
就是輸入三個數字以上了,要給予玩家提示訊息
最後
如果它正好等於六十四卦
那就終止遊戲
(所以這個不能寫在外層if裡面)
注意,我們是下在if (e.keyCode >= 48 && e.keyCode <= 57)裡面哦
if (e.keyCode >= 48 && e.keyCode <= 57)
{
if(keyin_contain==0)
{
keyin_contain += e.keyCode - 48;
}
else if(keyin_contain < 10)
{
keyin_contain = keyin_contain*10+(e.keyCode-48);
}
else
{
prompt_flag=true;
document.getElementById("div_alert").innerHTML+= "輸入錯誤,請再嘗試<br>";
keyin_contain = 0;
}
if(keyin_contain == test_random_hexgram+1)
//↑檢測是不是六十四卦
{
over_flag=true;
document.removeEventListener("keydown",player_keyin,false);
}
}
唔,上述程式碼怎麼會多出prompt_flag(提示_旗幟)與over_flag(結束_旗幟)
prompt_flag是用來控制顯示用的
而over_flag是讓遊戲破關時停住的
---------------------------------------------
最後
在用另一種設計之前
先來處理下時間吧
程式位置寫在剛才那一串的if-else if-else底下即可
//接著是進行計時,看自己背多快?
var time_count=0;
var clock_off = setInterval(check_over,100);
//setInterval(函數名,多少毫秒時觸發該函數)
function check_over()
{
if(over_flag)
{
document.getElementById("div_test").innerHTML+=
"<br>共耗時"+String(time_count)+"秒";
clearInterval(clock_off);
//停止計時用,clear,與清除、掃除同個意思
}
else
{
time_count+=0.1;
}
}
另外一個設計後天再更新
目前這種設計的是,隱藏使用者的輸入
若我們把使用者的輸入呈現在畫面上
玩起來應該會愉快、順暢許多
創作內容
[遊戲程式進展]背六十四卦,專注解第二題(著重if,完成,文字敘述改天補)
單機版網頁遊戲系列相關 (20)
