今天突然覺得比較想處理"做讓人寫遊戲的遊戲"
原因我也不太清楚
不過我想應該是跟我昨天那篇負能量滿滿的小說《離心力》片段有關
但9/18~9/19,我睡很多段,做了兩個比較有印象的夢
一個是好夢,一個是噩夢(但這忘得差不多了)
好夢是:
夢中引用個福爾摩斯的名言
「當你排除一切不可能的情況後,剩下的,不管有多不可思議,那都是真相」
只是引用後變成
「當你排除一切不可能的情況後,剩下的,不管有多不可思議,那依然有可能不是真相」
嗯,個人是喜歡講一串話結果讓人發現是廢話的風格!!
回正題
午休時測試了下Javascript eval()的限制
測試網頁檔或說程式碼如下:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<textarea id="input_data"></textarea>
<button id="run">執行</button>
<div id="div_test"></div>
<script src="jquery-3.3.1.js"></script>
<script>
run.addEventListener("click",compute);
var test_a=1;
function compute(){
var test_b=2;
eval(input_data.value);
run.click();
}
</script>
</body>
</html>
然後測試是
在框中輸入
alert(test_a);
按執行
alert(test_b);
按執行
跟
var test_b=3;
alert(test_b);
按執行
測試後發現,區域變數跟全域變數是能讀取到的
不過有可能會被使用者宣告同名變數覆蓋掉
其實這份網頁檔不需要引入jQuery啦!!
或者說是可以在文字框中再引入jQuery
當然對應的路徑底下還是得有相對應的jQuery檔案
然後測試了一下
textchange事件不好用
不過可以用setInterval(compute,毫秒數)這樣的方式
來讀取現在textarea(文字輸入區塊)的值
那這樣的話
我想應該是有辦法做出讓人寫出遊戲的遊戲
例如難易度─簡單的是
我已經把重繪函數跟Canvas寫好了
然後玩家只要宣告對應的變數跟填變數值
就能完成對應的遊戲
這樣一步步做到整個網頁檔都寫在<textarea>
不過目前有個問題是
<textarea>預設版不是很適合輸入程式
例如沒行號,然後字體太小這樣
那之前在Github參考過前人的程式碼
有用到CodeMirror這別人設計好的網頁樣式
那今天下午放工後估計會研究下要怎麼使用CodeMirror
沒猜錯的話應該跟引入jQuery一樣間單吧
不過最主要的問題是
圖形化的Online Judge系統不知道要怎麼做
(也就是說若玩家隨興的寫程式
我能否只要呼叫像 run.click()這樣的事件
再比對最終圖檔與變數的內容
而不用去管到程式碼具體每行是怎麼寫的
就像傳統的ACM比賽或者說是Online Judge系統那樣)
之前也未曾見過
所以不太好評斷玩家玩的狀況
不過經過這幾下測試之後
雖然我不確定具體要怎麼做
但我想是有可能做出來的
我防不了玩家直接自行重新宣告次變數再硬填入所要求的數值
就如同Online Judge系統除非去檢查程式碼printf();的狀況
不然防不了在知道所有測資的狀況下直接用printf()把解答一一對應的輸出那樣
所以我想這樣的缺陷是可以接受的!!
那9/19~9/20主要就是要做個
讓玩家寫出遊戲的遊戲
理想狀況是
玩家寫程式卡太久時
我出現些提示這樣
更理想的話是
每一小段程式
像玩家輸入<html>時
就像是遊戲達成成就條件那樣的效果
我想到的自然是用正規表達式來做
可是若用正規表達式來做
有些程式結構比較模糊
或者是允許的寫法有很多種的話
我覺得我可能處理不來這情況
進而導致要寫程式很僵化才能達成遊戲那樣的成就
但還是嘗試下吧
說到底
做個教人真的把遊戲寫出來的遊戲
本身就是個很難玩的遊戲
要有趣是很困難的
多數的編程遊戲
不是遊戲本身僅是引入帳號等級制度的關卡式Online Judge
就是遊戲的內容離寫程式有段很大的差距
呀,罪魁禍首應該還是我本身就訂個不太實際的目標
教人真的把遊戲寫出來的遊戲本身問題不大
不過那遊戲嚴格上來說我想應該不算遊戲
或者是趣味比起其它遊戲來說過低了些
只是儘管如此
我出於逃避困難的心理
(逃避困難的困難是指即時策略遊戲那樣的移動隊列或移動陣型功能
就我想像中比那應該是比教人寫遊戲的遊戲難做
雖然教人寫遊戲的遊戲與移動陣型相比較為費工,沒辦法一勞永逸就是了
教人寫遊戲的遊戲選俄羅斯方塊,就要寫個俄羅斯方塊
若是棋排類遊戲就要寫棋牌類遊戲這樣沒完沒了
比起傳統的Online Judge只要改輸入資料跟預期結果的測資相比費事許多)
與這至少也曾經是我的夢想
還是要做出些成果給個交待
我想不管怎樣的交待
我大概都不太滿意
但比直接跳過這個夢想的好!!
然後...
這遊戲應該是可以做成多人版網頁遊戲
(多人版的教人寫遊戲的遊戲
大概就是已經會寫遊戲的人、真的想學寫遊戲的人跟單純湊熱鬧或搞破壞的人所組成的
不過就算是這樣我想也不會比較有趣
只是有機會讓過程沒那麼難熬)
雖然我所謂的多人版網頁遊戲
因為我目前沒對外的Server
我自己能測試的也只有我的手機跟電腦還有多個瀏覽器或瀏覽器內的多個分頁這樣
因此規模大時是否會出什麼問題我也不清楚
但一旦出問題,我猜我大概也不知道要怎麼解決
嗯,那這兩天就嘗試下吧
不過第一個遊戲會用Sliding Puzzle
我覺得那比俄羅斯方塊好入門多了
或者說是簡陋版的Sliding Puzzle跟簡陋版的俄羅斯方塊相比
程式碼行數、架構、函式數來說都少多了
除錯的情形也是Sliding Puzzle單純許多
畢竟Sliding Puzzle可以不做Timer(計時器)的功能
不過為了省事起見
我做教人寫Sliding Puzzle遊戲的遊戲
應該還是會加入Timer功能
不然我還得再找個有Timer的遊戲來寫
(有Timer的遊戲很多啦,或者是現有的遊戲隨意想到個新功能也大多要配合Timer)
我想主要的麻煩應該還是在於
"寫程式過程中的提示"(或美其名為遊玩過程中的提示)
若不做這個的話
其實我用這篇最一開始的程式就大可以撒手人寰(假裝自己已經寫出教人做遊戲的遊戲)了
嗯,那我午睡時就思考這問題吧
反正我中午其實也睡不著
只是會意識突然遠去個一小段時間
不過這樣就有達到休息的效果了
-------------------------------------
17:10開始奮鬥
17:44導入CodeMirror成功
下載檔案即可
比較需要注意的是,使用CodeMirror之後
Textarea的value會變成空的
因為CodeMirror似乎是用<div>來做的
總之,要取值的話要用CodeMirror底下的getValue()
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('input_data'), {
lineNumbers: true
});
run.addEventListener("click",compute);
function compute(){
eval(editor.getValue());
}
</script>
注意
上述這段必須寫在<textarea id="input_data"></textarea>與
<button id="run">按鍵上顯示的字</button>
後面才能生效
嗯...看CodeMirror目前營運狀態是哭喪著臉
我等下個月拿信用卡時再贊助台幣200塊意思意思下好了
就當作是花200塊買軟體這樣(呀,我還真小氣!!)
到目前(2018/09/19 18:03)為止的檔案是:
但要運作順利的話還需要把另外三個檔案放在同個路徑底下
今天就先做到這邊吧
也有些累了(我非假日通常都回家時就有些累了)
我接下來的計劃是
設計關卡
前幾關是先接觸些HTML的標籤,像<title><script><div><textarea><button><img>這些
然後是接觸if-else或switch-case、for迴圈或while迴圈
再來是接觸一些event,像click、keydown
往後是接觸setInterval、setTimeout
最後是jQuery載入文件、陣列與陣列處理(像split配合正規表達式的使用)
那我後來想了下
應該會用打字遊戲跟play_game_to_write_game.html本身來做新手教學階段的整合
滑動式拼圖才是脫離新手教學的第一關
其實我第一關是很想要直接用play_game_to_write_game.html的檔案內容
也就是跟所使用的網頁檔一樣的網頁檔內容
不過還是延後幾關再用這招好了
話是這麼說啦
但新手教學要怎麼做我今天也想蠻久、想到蠻疲倦的
也還是沒想到足以讓個人滿意的方式
不過我是在想我有可能會用到這個網站
式姬大全的かけあい製作所,可以想成兩人對話產生器
かけあい後面若接漫才,比較常寫作 掛け合い漫才
就類似我們的對口相聲(兩個人的相聲)
我是單純想說若全用文字的話應該會趕跑不少人
所以想借用美觀的圖片
實際上我覺得若許多遊戲把角色、怪物全換成火柴人,遊戲背景換成特定一種顏色的話
大概也沒多少人玩得下去
那9/19大概就這樣
----------------------9/20-----------------------
18:08 建議下載整個資料夾
現在支援HTML5語法關鍵字變色功能
不然所需的檔案是
codemirror.css
codemirror.js
css.js
htmlmixed.js
javascript.js
require.js
xml.js
jquery-3.3.1.js
跟play_game_to_write_game.html本身
20:21 現在還需要再引入五個圖檔才能順利動作
孫麗1.png
孫麗2.png
砂華姬1.png
砂華姬2.png
對話框.png
-----------------9/21 08:55-------------------
做了個類似以前文字型冒險遊戲的系統
用到的技術也跟過往文字型冒險遊戲差不多
目前的檔案就類似會自動播放的投影片
還不能算是遊戲啦!!
但至少確認一些功能做得出來了
需要再多引入 劇本.txt
效果圖(只列前兩個示意)
創作內容
9/19~21,關於網頁遊戲讓人寫出遊戲,目前做出像自動播放的投影片,推薦式姬掛け合い製作所
單機版網頁遊戲系列相關 (20)
