該github網址的程式碼可以下載下來,然後用建議以Chrome為內核的瀏覽器開
(像Opera,Vivaldi瀏覽器,
而firefox跟Microsoft Edge,IE瀏覽器好像在些較常接觸到的地方上有分歧)
我們第一篇主要用到的是if、for、Math.random(),
與一大串的
document.getElementById("div_test").innerHTML="要顯示的內容"
在沒學程序前
我們可能不知道遊戲還可以設計得如此無聊
不過學了程序後
我們就能開始察覺到自己身邊有什麼利器
我們已知目前自己可以寫出具有顯示文字能力的程式
但這樣可以做到什麼呢?
就當作是練習if-else跟迴圈吧
而有另一半的機率是畫六十四卦
提示 八卦字碼起始位置是2630
再提示 六十四卦字碼起始位置是4DC0 (這是Unicode,因此最後面是數字0)
程序有兩種寫法
一種是
document.getElementById("div_test").innerHTML="☰..."
另一種是
<!DOCTYPE>
<html>
<head>
</head>
<body>
<div id="div_test"><div>
<script>
if(Math.random() < 0.5)
{ for(var i=2630;i<2638;i++)
{ document.getElementById("div_test").innerHTML= i; }
}
else
{
for(var i=4DC0;i<4500;i++)
{ document.getElementById("div_test").innerHTML= i }
}
</script>
</body>
</html>
但我們會發現
這段程序完全沒動作
為什麼呢?
第一個原因是
八卦是比較少見的編碼
所以字碼集可能會有影響
第二個原因是
innerHTML是個屬性,它只能接受字串的屬性
而我們給的是數值(而且還是十六進位的數值)
那接著開始除錯吧
不知道除錯要花幾天
跟各位提示下
其它程序語言
也幾乎全都會碰上字碼的問題
除了Python似乎有較多的現成函式庫可引用外
大多要處理這棘手問題
就慢慢除錯看要花幾天解決
(我是搜尋引擎解決法,這題雖然沒加<meta charset="UTF-8">也是個疏漏
但其不能動作是可預料的)
後來在搜尋引擎找了一陣子後
發現了個網頁(其實我過往寫程式很常用到w3cschool)
以及有個現成、便捷的函式
在stackoverflow(以後寫程式這網頁也會很常被用到)
在這兩個網頁中我發現
然後UTF-16或UTF-8等
是用串接的方式來處理的
(其實一開始我找的答案大多是傾向於文字的編碼解碼
TextEncoder,TextDecoder那些
但程式似乎改了後還是沒辦法順利運作
只好找到上面的網址)
於是順利滴寫出了修改版
可以正常顯示八卦,但六十四卦還有待克服
但很不幸的
六十四卦根據w3cSchool的UTF-8網頁說明
可能是屬於UTF-16的範疇
跟吃棗藥丸的那符號同個範疇
因此要能順利寫出程式
完成地水師的第一步還前路漫漫呢
(其實文字後期會用藝術或稱為美工取代
但早晚有機會碰到的問題
讓玩家輸入顏文字更順利的功能
也是很不錯的)
更新後的程式碼如下
請特別注意更新後的innerHTML +=的+=
若漏掉 +(加號),會少去字串(String)串接的效果,因此通常會只剩最後一個卦象被顯示出來
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-16"/>
</head>
<body>
<div id="div_test"></div>
<script>
function getUnicodeCharacter(cp)
{
if (cp >= 0 && cp <= 0xD7FF || cp >= 0xE000 && cp <= 0xFFFF)
{ return String.fromCharCode(cp); }
else if (cp >= 0x10000 && cp <= 0x10FFFF) {
// we substract 0x10000 from cp to get a 20-bits number
// in the range 0..0xFFFF
cp -= 0x10000;
// we add 0xD800 to the number formed by the first 10 bits
// to give the first byte
var first = ((0xffc00 & cp) >> 10) + 0xD800
// we add 0xDC00 to the number formed by the low 10 bits
// to give the second byte
var second = (0x3ff & cp) + 0xDC00;
return String.fromCharCode(first) + String.fromCharCode(second);
}
}
if(Math.random() > 0.5)
{//var j=parseInt(0x2638,16);
for(var i=0x2630;i<0x2638;i++)
{
document.getElementById("div_test").innerHTML+= getUnicodeCharact(i);
//document.write(String(i));
}
}else
{
var k=parseInt(0x4DC0,16);
var h=parseInt(0x4500,16);
for(;k<h;k++)
{
document.getElementById("div_test").innerHTML+= getUnicodeCharacter(k)+"<br>";
//document.write(String(k));
}
}
</script>
</body>
</html>
最後想了一陣子
多測試幾次後
才想到是我六十四卦的迴圈條件設定有問題
正確的寫法應該是
for(var k=0x4DC0;k<0x4E00;k++)
{ document.getElementById("div_test").innerHTML+= getUnicodeCharacter(k);}
但是這樣一行顯示六十四個卦
會太過擁擠
因此成品檔中有
嗯,成品檔的抄襲片段應該註明出處的
最後程式如下:
也可以從最上方github那邊下載下來
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-16"/>
</head>
<body>
<div id="div_test"></div>
<script>
function getUnicodeCharacter(cp) {
if (cp >= 0 && cp <= 0xD7FF || cp >= 0xE000 && cp <= 0xFFFF) {
return String.fromCharCode(cp);
} else if (cp >= 0x10000 && cp <= 0x10FFFF) {
// we substract 0x10000 from cp to get a 20-bits number
// in the range 0..0xFFFF
cp -= 0x10000;
// we add 0xD800 to the number formed by the first 10 bits
// to give the first byte
var first = ((0xffc00 & cp) >> 10) + 0xD800
// we add 0xDC00 to the number formed by the low 10 bits
// to give the second byte
var second = (0x3ff & cp) + 0xDC00;
return String.fromCharCode(first) + String.fromCharCode(second);
}
}
if(Math.random() > 0.5)
{
//var j=parseInt(0x2638,16);
for(var i=0x2630;i<0x2638;i++)
{
document.getElementById("div_test").innerHTML+= getUnicodeCharacter(i);
//document.write(String(i));
}
}
else
{
for(var h=0;h<8;h++)
{
//for(var k=0x4DC0;k<0x4E00;k++),這樣會每次印出六十四卦
for(var k=0x4DC0+h*8;k<0x4DC0+h*8+8;k++)
{
document.getElementById("div_test").innerHTML+= getUnicodeCharacter(k);
}
document.getElementById("div_test").innerHTML+="<br>"
//↑每印八個六十四卦,就換行一次
}
}
</script>
</body>
</html>
接下來會談些遊戲的想法
至於程序會慢慢加入鍵盤,滑鼠,音樂,圖片等的控制
慢慢的意思是我們還要在文字檔中打混下
偶爾超綱下讓大家提神
麥克風其實目前我還不太會控制
不過知友有仿出跳躍吧,八分音符
相信應該是有較為簡潔的控制麥克風手法(雖然該手法不適用於手機上)
上述程式寫錯
應該是
for(var k=0x4DC0+h*8;k<0x4DC0+h*8+8;k++)
創作內容
[遊戲程式進展]如何寫不會寫的程序(10/14修正),也發在知乎上
單機版網頁遊戲系列相關 (20)
