HTMLでゲームブック作ろうぜｗｗｗｗ

Check Tweet

62 ：VIPにかわりましてGEPPERがお送りします(不明なsoftbank) ：2012/05/19(土) 08:39:35.06 ID:WIzQxImh0

#プログラミングっぽかったのをちょっと改訂してみた
#だいぶそれっぽい雰囲気になってきた

!たからばこ１ = "たいまつ"

VIP QUEST
;START

なまえを　いれてください
!input( name:"主人公", value:"とんぬら" );
!submit( "けってい" );
;

おうさま：
「＊おお　${主人公}！

・・・・・・省略・・・・・・

@王の部屋
どうする？
!link( label:"へいし１", jump:@王の部屋　兵士１ );
!link( label:"たからばこ", func:たからばこ, args: [ 'たからばこ１', @王の部屋 ] );
;

@王の部屋　兵士１
へいし：
「＊ローラひめのことを　ごぞんじか？
!link( label:"はい", jump:@王の部屋　兵士１　姫を助けて );
!link( label:"いいえ" );
;

・・・・・・省略・・・・・・

!VIP

function たからばこ( id, jump ) {
if ( environment[id] ) {
print( "${主人公}は　${environment[id]}を　みつけた。\n" );
environment[id] = null;
}
else {
print( "なにもなかった。\n" );
}
link( label:"もどる", jump:jump );
}

!END

63 ：VIPにかわりましてGEPPERがお送りします(不明なsoftbank) ：2012/05/19(土) 08:59:44.71 ID:WIzQxImh0

ちなみにこのシナリオは仮想マシンコードへとコンパイルされる
こんな感じ

["LDC","たいまつ","STG","たからばこ１","LDG","print","LDC","VIP QUEST\n","CALL",1,"POPR",1,"POP","LDG","link","LDG","{}","LDC","label","LDC","START","CALL",2,"POPR",2,"CALL",1,"POPR",1,"POP","LDG","end","CALL", .........省略.............. "LDA",2,"CALL",2,"POPR",2,"JMPF",741,"LDG","print","LDG","主人公","LDC","は　","ADD","LDG","[]get","LDG","environment","LDA",2,"CALL",2,"POPR",2,"ADD","LDC","を　みつけた。\n","ADD","CALL",1,"POPR",1,"POP","LDG","[]set","LDG","environment","LDA",2,"LDC",null,"CALL",3,"POPR",3,"POP","JMP",750,"LDG","print","LDC","なにもなかった。\n","CALL",1,"POPR",1,"POP","LDG","link","LDG","{}","LDC","label","LDC","もどる","LDC","jump","LDA",1,"CALL",4,"POPR",4,"CALL",1,"POPR",1,"RET"]

スタックマシンと組み込み関数さへ移植すればC++だろうがC#だろうが動く
スタックマシン自体はとても単純なので容易に移植可能
今はJSでしか動かないけど、スタックマシンと組み込み関数をPHPに移植して携帯でもプレイ出来るようにする予定
とりあえずはＤＱ１の完成を目指します

64 ：VIPにかわりましてGEPPERがお送りします [sage]：2012/05/19(土) 12:35:37.35 ID:PfGmHTnxo

雑スレからきますた。
これは絵とかなしの想定？
シナリオはファンタジーRPG風のがいいのかな。

65 ：VIPにかわりましてGEPPERがお送りします(不明なsoftbank) ：2012/05/19(土) 12:54:45.39 ID:WIzQxImh0

どうもはじめまして
もし完走したら、絵師さん募集して絵をつけるというのはアリですが
一応絵なしです

シナリオはエロ・グロ意外何でもいいです！

66 ：PIP [sage]：2012/05/19(土) 13:13:33.91 ID:PfGmHTnxo

基本的な概要は>>28ってことでいいのかな？

あえて古典的なファンタジー冒険もので行くか、
何かヒネった内容にするか……。

67 ：VIPにかわりましてGEPPERがお送りします(不明なsoftbank) ：2012/05/19(土) 13:20:45.75 ID:WIzQxImh0

適当に文章書いてもらえば
スクリプトは私の方で書きます

ちなみにスクリプトの書き方は>>28と違って来てます
今はこんな感じ

@START
VIP QUEST
;START

なまえを　いれてください
!input( name:"主人公", value:"とんぬら" );
!submit( "けってい" );
;

おうさま：
＊「おお　${主人公}！
　　ゆうしゃロトの　ちをひくものよ！
　　そなたのくるのをまっておったぞ。
.

68 ：PIP [sage]：2012/05/19(土) 13:37:53.62 ID:PfGmHTnxo

シナリオはわりと早めに挙げたほうがいい感じですか？

ゲームブックならではの特色と言うと、やはり二人称の語り＋地の文多めってところかな。

69 ：VIPにかわりましてGEPPERがお送りします(不明なsoftbank) ：2012/05/19(土) 13:48:05.44 ID:WIzQxImh0

>シナリオはわりと早めに挙げたほうがいい感じですか？
早いと嬉しいけどあまり無理しなくてもいいですよ
とりあえずこっちは練習がてらドラクエコピーしてますんで

>ゲームブックならではの特色と言うと、やはり二人称の語り＋地の文多めってところかな。
実はゲームブックってあまり良く分かってませんｗｗ
文章のスタイルはお任せします

一応開始するにあたっての御願いです
・途中逃げてもＯＫですが、途中まで作っていただいたシナリオはそのままゲーム化します
　また他の人に引き継いでもらったり、修正したりもしますのでご了承ください
・完成したらドメインを取ってゲームを公開します
　希望があればそちらのＨＰやブログへのリンクも掲載します

堅苦しい事はこれだけにして、よろしくです！！

70 ：VIPにかわりましてGEPPERがお送りします(不明なsoftbank) ：2012/05/19(土) 15:43:13.21 ID:WIzQxImh0

リムルダールなう
シナリオ500行超えた
空白行もおおいけど
ドラクエ１でこんなにあるとか、
ゲームブック作るの結構大変かもな・・・

71 ：PIP [sage]：2012/05/19(土) 17:54:04.75 ID:PfGmHTnxo

そうなんよｗｗ
とりあえず練習用にショートシナリオ書いてみようかと思ってるけど、
それはそれでアイデア勝負になるから難しい。

72 ：PIP [sage]：2012/05/20(日) 00:54:07.74 ID:PTAYZLXeo

●メイドさんがおつかいをしているうちに、成り行きで伝説の剣を手に入れ、
魔王を倒しに行くことになるゲーム

●伝説のスイーツを作るためドラゴンの卵を探しに行く、戦うパティシエのゲーム

●学校で起こる怪事件を解決する、ちょいホラー風学園ミステリー

今のところゲームブックに出来そうなネタはこれぐらいかな。
恋愛ものは絵があったほうがいいだろうし。嗜好が偏っててすまん。

この中だとどれがいいでしょう？

73 ：PIP [sage]：2012/05/20(日) 00:58:21.22 ID:PTAYZLXeo

あとHTMLを生かすシステムとして、本文中の単語にﾊｲﾊﾟ-ﾘﾝｸを仕込んで、
クリックすると別ウィンドウを開くとか、ガラケーにも対応できるんだろうか？

例えば、文中の「壁」という単語をクリックすると、「隠し扉が見つかった」とかメッセージが出て、
選択肢が追加される……みたいな。

74 ：html+jsで育成　>>62とは別のプロジェクト作ってる ：2012/05/20(日) 05:06:41.80 ID:MAqOUubwo

力技でいいなら選択肢追加前、追加後の２パターンのhtmlを用意しておくという手も

75 ：VIPにかわりましてGEPPERがお送りします(不明なsoftbank) ：2012/05/20(日) 05:23:19.12 ID:Z3yac8Fq0

おはよう(=ﾟωﾟ=）

>>71
練習用ショートシナリオいいっすね！
作るの逆に難しかったりするのかな？

>>72
どれも面白そうで選ぶの困るｗｗ
うーん、パティシエ？ｗｗ

>>73
ガラケー対応しますよ
ちょっとした空き時間に携帯でプレイというのが主なターゲット層？です

PCで別ウィンドウは出来ますが
携帯で別ウィンドウはたぶん無理

>例えば、文中の「壁」という単語をクリックすると、「隠し扉が見つかった」とかメッセージが出て、
>選択肢が追加される……みたいな。
PCだと普通に出来るので携帯での話をします
携帯だと普通にリンクになっちゃいます
CSSでゴニョゴニョすれば一見リンクに見えないような
ものには出来ると思います（古い機種によっては出来ない）
フォーカスがあるのであれっ？？？て感じになると思います

76 ：VIPにかわりましてGEPPERがお送りします(不明なsoftbank) ：2012/05/20(日) 05:35:09.91 ID:Z3yac8Fq0

>>73
>>75
読み直してちょっと追記

>例えば、文中の「壁」という単語をクリックすると、「隠し扉が見つかった」とかメッセージが出て、
>選択肢が追加される……みたいな。
読み直したら別に隠しリンクって意味じゃないのかな？
普通にリンクだったら普通に出来ますよ

77 ：VIPにかわりましてGEPPERがお送りします(不明なsoftbank) ：2012/05/20(日) 06:34:55.67 ID:Z3yac8Fq0

>>74
華麗にスルーしてたので一言
フラグ管理機能あるんで大ジョブ
グローバル変数、ローカル変数、関数の引数が使えて
条件分岐とGOTOがあるので問題ない
ちなみにフォートラン萌えの人は算術GOTOも使えるから安心しる

78 ：html+jsで育成　>>62とは別のプロジェクト作ってる ：2012/05/20(日) 06:39:16.02 ID:MAqOUubwo

これがスーパープログラマー・・っ！？

79 ：手動すごろく [sage]：2012/05/20(日) 10:52:46.08 ID:UlxOmenxo

>>74
まさにこっちがやろうとしてる力技

一面マップは一本道だからいいけど
２面からは画面内にマスが入りきらない可能性がある
マップはflashの使用も考えとこう
でもそしたら全部flashで作れよって話になりかねないし
素直に画面広くした方がいいのかなあ

1面マス構成
通常34
ラッキー20
アンラッキー10
？10
モンスター10
宝箱10
トラップ5
ボス1

とりあえずシナリオの製作しよう

80 ：PIP [sage]：2012/05/20(日) 11:53:31.06 ID:PTAYZLXeo

>>74
他にもjsの力技と言えば、テキストボックスの中身はマウスオーバーなどの条件によってリアルタイムで書き換えできるとか、
ドロップボックスを『クリックしないと見れない隠しヒント』に使うとかあったけど、
これも携帯を視野に入れるなら難しいかな。


>>75
パティシエっすか。
いちばん設定が面倒くさそうなやつを……ｗｗ
ちょっと時間かかるかもしれないけど頑張ります。

>>76
CSSで出来るのは知ってるんだけど、
仰るとおり携帯だと普通にリンクの場所わかっちゃうから、
PCのほうも隠しリンクにしなくてもいいかな、と。

普段はリンクを明示しておいて、ごくたまにボーナス的に隠しリンクを仕込んでおくというのも面白いかも。

81 ：html+jsで育成　>>62とは別のプロジェクト作ってる ：2012/05/20(日) 12:47:06.33 ID:MAqOUubwo

ちょっとがんばってフラグ管理に四則演算を使えるようにして
文章内に変数埋め込みを出来るようにしたったｗｗｗｗｗｗｗｗ

HTML+動的文章+選択肢のリンクという３ブロックに分けただけの構造にしようとしてたんだけど
フラグによって内容が変化するテキストを、id属性のついたタグならなんにでも表示できるように変更
例：
power=200

style="all"
tuyosa[0]default:あなたは
tuyosa[1]if:power>=100:つよい
tuyosa[2]if:power<100:よわい
tuyosa[3]default:ですね。[@power]も力がある。

生成される文章：あなたはつよいですね。200も力がある。

styleによって評価順序とか変えられる予定
テキストにリンク貼れば動的に選択肢を変化させるような表現ができる


>>80
ガラケーだとjsが使えないらしいんですよね
フルブラウザとかアイフォンならいけるらしいんだけど

82 ：携帯ゲーム ：2012/05/20(日) 13:12:16.40 ID:T98jSjH70

>>79
携帯版はフラッシュもアリかな〜などと思いつつ
携帯フラッシュ作れないのであった

>>80
ごめん、面倒なの選んじゃったｗｗ？

隠しリンクはPCのみにして、携帯のシナリオにちょっと手を加えるのはどうだろう？

>>81
ガラケーはjs使えないよね〜
携帯はマジむかつくけど、機能が少ない分なれるとPCより楽だったりする
これは出来ないって簡単に言えるのも楽だね〜

83 ：html+jsで育成 ：2012/05/20(日) 16:36:33.15 ID:MAqOUubwo

テストがてらチュートリアルっぽいもの作ってるけどテスト糞めんどくせぇｗｗｗｗｗｗ
動作確認できたらエディタでも作ろうかな、phpあたりで
あとはシナリオ投稿できるサイトを（ｒｙ

84 ：VIPにかわりましてGEPPERがお送りします(チベット自治区) ：2012/05/20(日) 21:05:42.27 ID:9zy59hHoo

サンプルが出来たので宣伝。
Firefoxの4以降か、Chromeなら動くけどIEその他はたぶんダメだと思う。
Canvasフル活用なんでケータイはもちろん、iPhone系もたぶん無理だと思う。
ttp://abogadoflavor.web.fc2.com/gamebook/main.html

起動がすごい重いけどフォント表示は結構頑張ったので、
よかったら一度見てくらはい。

85 ：html+jsで育成 ：2012/05/20(日) 21:09:17.24 ID:MAqOUubwo

>>84
かっけー
既読スキップとか細やかだなぁ
あと読み込み重っｗｗｗｗｗｗ

86 ：VIPにかわりましてGEPPERがお送りします [sage]：2012/05/20(日) 21:09:32.22 ID:QGX8u7EWo

ちょろめで確認したお
文章のことはおいといて、中々雰囲気出ててよかったと思うの（小並感）

87 ：PIP [sage]：2012/05/20(日) 21:20:29.83 ID:PTAYZLXeo

>>84
すげー！　かっこいい。

88 ：携帯ゲーム ：2012/05/20(日) 21:27:25.79 ID:T98jSjH70

すげー
絵もあるしページデザインもあるし文章もちゃんと書いてる
製作スピードも１番速かった
とにかく最初の動くものをうｐしたのは本当に偉い
俺もがんばろー

89 ：VIPにかわりましてGEPPERがお送りします(神奈川県) [sage]：2012/05/20(日) 22:35:48.05 ID:Ag23F8g7o

14へ行けｗｗｗｗｗｗｗｗ

90 ：84 [sage]：2012/05/20(日) 23:59:41.13 ID:9zy59hHoo

見てくれた人がいたようでありがとう！

>>85
読み込みの重さはフォントデータ（2MBの画像）を最初に読み込んでる
ことが原因なので、スクリプト内で使ってる文字に限定してフォントデータ
を最適化すれば500kb程度になると思います。手を抜いてごめんね。

>>86
はい。文章のことはそっとして置いてください。
雰囲気は主にフォントの力です。出島明朝はもっと有名になっていいと思うの。

>>87
ありがとう。そちらもがんばってください。

>>88
まぁその、ページのレイアウトはロスクリのやつパクってるのと
基本的に画像素材は全部借り物なのでアレですが。。。
携帯はまた独特の技術が必要になると思いますし、
頑張ってください。

>>89
反応してくれてありがとう。
まぁ、基本ですよね。14。

さて、引き続き頑張ります。

91 ：html+jsで育成 ：2012/05/21(月) 17:30:42.87 ID:tjsUtid2o

今俺完成と未完成の境界線に居る気がする

92 ：携帯ゲーム ：2012/05/21(月) 20:22:23.93 ID:CLnb8Deb0

とあえず生存報告
ＤＱ１シナリオ全体の完成を後回しにして、
ストーリーの最初の部分だけを実装し
完成度を高める方向へ方針転換
デザインも含めて実際のものに近付けていってる

>>91
もうすぐ完成って意味ではなく、作る事ができないかもって事かな？

93 ：VIPにかわりましてGEPPERがお送りします(チベット自治区) ：2012/05/21(月) 21:01:57.03 ID:tfrBQxXbo

このスレは企画まとめ的にはどういう扱いになるのだろうか。
このスレ内部だけで3つか4つくらい平行して製作されてるよね？

94 ：携帯ゲーム ：2012/05/21(月) 21:08:34.36 ID:CLnb8Deb0

企画まとめ的ってのがどういう事良く分からんけど
いくつかの無関係なプロジェクトが並行して動いてる

95 ：VIPにかわりましてGEPPERがお送りします(チベット自治区) [sage]：2012/05/21(月) 21:33:55.93 ID:tfrBQxXbo

>>94
うん。いや、他のスレってメンバー募って「1スレで1つの企画」じゃん？
でもここはそういうわけじゃないんだよね？
なんで協力しないのかな、ってちょっと不思議に思って。
別にメンバーを募集してないってわけじゃないんだろうけどさ。

96 ：携帯ゲーム ：2012/05/21(月) 21:39:31.33 ID:CLnb8Deb0

全員プログラマっぽいんでプログラマには用がないのでは？
ちなみに俺はライターさんとペアでやってる
いずれ絵師さん募集はするかも知れんがプログラマはイラネ

97 ：html+jsで育成 ：2012/05/22(火) 02:44:02.40 ID:bvB7roROo

>>92
なんとかもちなおした

>>95
俺もプログラムがもうちょっと形になったらシナリオ募集しようと思ってる

98 ：手動すごろく [sage]：2012/05/22(火) 08:56:06.75 ID:nGSipwCmo

>>95
一つのスレで複数のプロジェクトが進行する形態のことなら
vipじゃ見ないけどゲ製板ではよくあるよ

俺は絵描きだけど一人で作る
詰まったらここでアドバイス求める予定

うｐロダ立てた
みんな好きに使ってくれ
http://ux.getuploader.com/html_game/

99 ：html+jsで育成 ：2012/05/22(火) 14:06:39.40 ID:bvB7roROo

リファクタリングなう
スタイルシートの事配慮するの忘れてたけど今は気にしない事にした
コード整理しとけばいくらでも直せるはず

>>98
乙です、ないすうｐろだ

100 ：携帯ゲーム ：2012/05/22(火) 14:34:49.35 ID:yVoX8rpw0

DQ１はもうこれで終わり
ツール使ってくれる人の募集を始めます
もちろんPIPさんのプロジェクトも同時進行
http://ux.getuploader.com/html_game/download/2/vipquest.html

101 ：html+jsで育成 ：2012/05/22(火) 14:45:06.68 ID:bvB7roROo

はええええええええ

102 ：携帯ゲーム ：2012/05/22(火) 14:53:18.90 ID:yVoX8rpw0

>>101
プレイしてくれてありがとう＾＾
しょぼくてゴメン
いずれライターさんがもっと素敵なゲームを作ってくれるさ＾＾
はやいって動作がはやいって事？
外部ファイルがjquery.jsの１個なんで起動は速いと思う

103 ：html+jsで育成 ：2012/05/22(火) 14:59:56.63 ID:bvB7roROo

完成が早いなって意味、動作も軽かったけど
俺もがんばろ

104 ：携帯ゲーム ：2012/05/22(火) 15:13:18.09 ID:yVoX8rpw0

ゴメン、そっちか
14へ行けの人に負けたから製作がはやいって言われるとは思ってなかった
シナリオもうｐしてみた
http://ux.getuploader.com/html_game/download/3/vipquest.story.txt

>>98
うｐローダありがとう＾＾

105 ：携帯ゲーム ：2012/05/22(火) 16:18:00.50 ID:yVoX8rpw0

ゴメン、間違ってダウンロードパスワードつけてた
シナリオ再うｐ
http://ux.getuploader.com/html_game/download/4/vipquest.story.txt

106 ：手動すごろく [sage]：2012/05/22(火) 17:00:39.52 ID:nGSipwCmo

>>100
乙
まほうのかぎ手に入れた後宝箱開けるの忘れて竜王に殺されたｗｗｗｗｗｗｗｗｗｗｗｗ
プレイした体感よりテキスト量多いな
やはりボリュームあるもの作るのは大変そうだ

ふえぇ・・・みんな作るのはやいよぉ・・・

107 ：PIP [sage]：2012/05/22(火) 18:20:04.96 ID:p9PQKUuDo

>>100
やってみました。
最後のローラひめに「いいえ」と答え続けると、
ジャンプ先が同じだから読み込んでるのかどうかわからなくなるね。

雰囲気がわかったんでとりあえず近日中にショートシナリオ完成させる！

108 ：携帯ゲーム ：2012/05/22(火) 18:37:38.97 ID:yVoX8rpw0

>>106
そうそう意外にボリュームあるんですよ。
シナリオ大変だと思います

>>107
これでどう？
http://ux.getuploader.com/html_game/download/5/vipquest.html

ショートシナリオ楽しみにしてます！！

109 ：html+jsで育成 ：2012/05/24(木) 15:46:06.33 ID:JkH5DF2Fo

なんちゃって言語っぽいのにしようと思ってたけど四則演算を使えるようにしていったらほとんど言語みたいなものになったでござる。

＊途中経過
HTML文書に変数の処理、変数の状態に応じてメッセージを表示する機能を追加した感じのものを製作中
分岐、育成パートを含むデモシナリオが出来たら一旦公開予定
そんときはロダ使わせてもらいます

110 ：PIP ：2012/05/28(月) 23:47:13.11 ID:NVkiWxH4o

いちおう生存報告。

手持ちのアイデアの中から短編ゲームブックに使えそうなものをシナリオに起こしてます。
学園モノで、単純な分岐だけの短い話。
本番はまたかなり違ったものになると思う。

……だけどここ数日ちょっと忙しいのでもうしばらく待ってくだされ。

111 ：html+jsで育成 ：2012/06/03(日) 09:56:34.71 ID:ll7b3RDqo

生存報告、あとシナリオというか選択肢のサンプルだけうｐ（テキスト１０行くらい）
http://ux.getuploader.com/html_game/download/6/jagaquest.zip