#はじめに
本格的なプログラミング言語を使わなくても、XMLベースの日本語によるマークアップ言語で、ブラウザゲームを簡単に作れるWebアプリを開発してみました。
遊びながらマークアップ言語とアルゴリズムを同時に習得できるため、プログラミング教育にも役に立つと思います。
サンプル
一例として以下のようにマークアップしてみます。
<小説 横="中央" 縦="枠中央" 幅="16" 高さ="5" 速度="60" >
この物語は、プログラミング言語を習得し、サービスを立ち上げるまでのエンジニアたちの戦いの記録である。<クリック /><改行 />
続く。<クリック />
</小説>
すると、以下のようなゲーム画面が表示されます。
#タグ一覧
使用できるタグには以下のものがあります。
小説：ノベル風のメッセージを表示します
会話：アドベンチャーゲーム風のメッセージを表示します
音楽変更：BGMを鳴らします
効果音：効果音を鳴らします
画像ON：アップロードした画像を表示、非表示、または半透明にします
画像移動：アップロードした画像を並行移動させます
GIF効果：GIF画像を１周アニメーションさせます
待機：処理を待機します
クリック：クリック/タップをするまで処理が再開できないようにします
人物表示：プレイヤーキャラクターを表示/非表示にします。
表示：小説や会話の中に変数の値を表示します
変更：変数の値を変更します
数値計算：四則演算をしその結果を変数の中に格納します
文字連結：文字列同士を連結し、その結果を変数の中に格納します
ダイス：サイコロを振り、その結果を変数に格納します
人物参照：選択中のキャラクターのデータ(HP,名前など)を参照し、変数に格納します
HP：キャラクターにダメージを与えたり回復します
もしも：一般的なプログラミング言語のIF文と同じで変数やプリミティブ値を比較します
もしくは：一般的なプログラミング言語のELSE IF文と同じです
その他：一般的なプログラミング言語のELSE文と同じです
ループ：一般的なプログラミング言語のWHILE文と同じで条件が満たされる間繰り替えされます
それぞれ：一般的なプログラミング言語のFOREACH文と似ていてキャラクターの人数分だけ繰り返します
選択：「はい」「いいえ」などの選択肢を包括する命令文です
選択肢：「はい」や「いいえ」を選んだときに実行される命令を包括する命令文です
人物選択：プレイヤーなどにキャラクターを選択させることができます
役割交換：会話の役割を指定することができます (例)ボケ役ツッコミ役など
コード呼び出し：一般的なプログラミング言語の関数、メソッドに相当するものを呼び出します
戦闘：戦闘画面に移動します
場面移動：他の場面に移動します
終了：ゲームを終了させます
#クイズゲーム作成手順
この章では、練習としてクイズゲームを作り方を解説していきたいと思います。
ユーザアカウント作成手順と新規ゲーム登録手順はここでは割愛します。
無事、新規ゲーム登録が終わったら、次のような画面が表示されます。
propsgamesのゲームは場面という単位の組み合わせで成り立っています。
例えば、あなたが、探偵を題材にしたアドベンチャーゲームを作りたいとします。探偵事務所の場面から、殺害現場の場面へ移動し、街の聞き込みの場面へ移動するといった具合に、場面ごとにゲーム内で起きる出来事ごとに場面を分割してみると、プログラミング言語のクラス分割、関数分割の如く、ゲームの全体像を管理しやすくなると思います。
今回、作るのはシンプルなクイズゲームですので場面一つで作ってみましょう。
ゲームを新規作成したときには、「ゲームスタート」という場面があらかじめ用意されています。編集するので、リンクをクリックしてみましょう。
すると以下のような画面になると思います。
イベント-開始時-表示をクリックしてみましょう。
以下のような入力フォームが表示されるはずです。
テキストエリアとカラフルなボタンが表示されています。
この中から小説をクリックしてみましょう。
小さなウィンドウが表示されました。
ここに適当な文章を入れて生成ボタンを押してみましょう。
<小説>という括弧で囲われたテキストが出力されました。この括弧で囲まれたものをタグといいます。
完成したら保存をクリックします。
ゲーム編集画面に戻って下の方にスクロールすると、テストプレイというカテゴリに「テストする」というボタンがあるのでクリックしてみましょう。
さっき、作成したテキストが流れるように１文字ずつ表示されました。
少しだけゲームっぽくなってきましたね。
もっとゲームっぽくするために、選択肢を設けてみましょう。
場面編集画面に戻って、選択肢ボタンをクリックして、適当なクイズを入力して生成ボタンをクリックしてみましょう。
そして、先程説明した小説ボタンと組み合わせて、以下のように入力してみましょう！
<選択>
<会話 名前="" 速度="0" >
問題！<改行 />
インド映画産業の通称はどっち？
</会話>
<選択肢 メッセージ="ボリウッド" >
<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="60" >
正解です！<クリック />
</小説>
</選択肢>
<選択肢 メッセージ="ハリウッド" >
<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="60" >
間違いです！<クリック />
</小説>
</選択肢>
</選択>
これを保存して、「セーブデータをリセットする」ボタンを押した後、再び「テストする」ボタンをクリックしてみましょう。
ボリウッドを選ぶと正解のメッセージが流れ、ハリウッドの選択肢を選ぶと間違いのメッセージが流れるはずです。
さて、たまにですが、ゲームを実行しようとすると以下のような画面になることがあります。
このメッセージが出た場合は、さっき書いたコードの11行目に何かしらの間違いが起きているはずです。括弧や""が閉じられてないというものがよくあるミスですので修正してから、再度実行してみましょう。
さて、クイズ１問だけでは物足りないので３問くらい問題を作ってみましょう。
そして、最後に正解の数をカウントして発表するシステムを組みましょう。
正解数を代入するための、変数をまず作りましょう！
適当な名前(ここでは分かりやすく「正解数」としておきましょうか)を入力し、新規作成ボタンを押します。
今回は正解した問題数、つまり数字を扱うのでタイプを数値、初期値を0にして変更ボタンを押しましょう。これで、クイズの正解数が０問ということになります。
↓
作ったら、場面編集画面をブラウザでリロードした後で、数値計算ボタンをクリックしてください。
以下のようなウィンドウが表示されるはずです。
緑のボタンを活用しながら、計算式に正解数+1と入力し、生成ボタンをクリックしましょう。
そして、それを正解の選択肢の中に入れ込みます。
<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="60" >
クイズです。<クリック /><改行 />
あなたは正解できるかな？<クリック />
</小説>
<選択>
<会話 名前="" 速度="0" >
問題！<改行 />
インド映画産業の通称はどっち？
</会話>
<選択肢 メッセージ="ボリウッド" >
<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="60" >
正解です！<クリック />
</小説>
<計算 結果="正解数" 式="正解数+1" />
</選択肢>
<選択肢 メッセージ="ハリウッド" >
<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="60" >
間違いです！<クリック />
</小説>
</選択肢>
</選択>
同じように２問、適当な問題を作り、その下に変数表示ボタンを活用し、以下のメッセージを加えます。
<会話 速度="60">
あなたの正解数は<変数表示 変数="正解数" />問です！<クリック />
</会話>
するとクイズの最後に以下のようなメッセージが表示されます。
##会話ゲーム作成手順
さてさて、次はせっかくキャラクターが４人も居るので会話させてみましょう。
サンプルとして、昔懐かしのギャグをさせてみます。
A「俺は実験台になんてなりたくない！」
B「じゃあ、俺がなるよ」
C「俺がなりたいと思ってたんだ」
D「俺がなる！」
A「そう言うなら、仕方ないな。俺がなるよ」
B「どうぞどうぞ」
C「どうぞどうぞ」
D「どうぞどうぞ」
A「こらっ！」
この会話はロールプレイ機能(日本語で役割分担の意味)で実現させます。
ゲーム編集画面の真ん中の方にロールプレイという項目があるので、見つけたら、グループの新規作成ボタンをクリックします。
そしたら、グループ１というものが表示されると思うので、ここに、さっきの役割、A,B,C,Dを入力し、保存をクリックしたら準備完了。
場面のゲームスタートをクリックして
イベント-開始時-表示をクリックしてみましょう。
以下のような入力フォームが表示されます。
ボタンの中から、会話を選択しましょう。
そしたら、こんなポップアップウィンドウが出てくるはずです。
ラジオボタンはメッセージが選択されていますが、これをプレイヤーキャラクターに切り替えます。
キャラクターが表示されています。さてさて、キャラクターのセレクトボックスが、今は「$選択中$」ですが、これを「A」に切り替え、そして、「男」と「女」の欄にセリフを入れてみましょう。
あと、<クリック />は消さずに残しておきましょう。
そして、生成ボタンをクリックすると、以下のような命令が生成されるはずです。
<会話 役割="A" 性別="男" 速度="60" >
俺は実験台になんてなりたくないぞ！<クリック />
</会話>
<会話 役割="A" 性別="女" 速度="60" >
私は実験台になんてなりたくないわ！<クリック />
</会話>
生成されているのを確認したら、保存ボタンをクリックしてみましょう。
そして、ゲーム編集画面に戻り、「テストする」ボタンをクリック。
セリフをちゃんと話していることを確認したら、同じ要領で、次のような会話を入力し、保存します。
<会話 役割="A" 性別="男" 速度="60" >
俺は実験台になんてなりたくないぞ！<クリック />
</会話>
<会話 役割="A" 性別="女" 速度="60" >
私は実験台になんてなりたくないわ！<クリック />
</会話>
<会話 役割="B" 性別="男" 速度="60" >
じゃあ、俺がなるよ。<クリック />
</会話>
<会話 役割="B" 性別="女" 速度="60" >
じゃあ、私がなるよ。<クリック />
</会話>
<会話 役割="C" 性別="男" 速度="60" >
俺がなりたいと思ってたんだ。<クリック />
</会話>
<会話 役割="C" 性別="女" 速度="60" >
私がなりたいと思ってたのよ。<クリック />
</会話>
<会話 役割="D" 性別="男" 速度="60" >
俺がなる！<クリック />
</会話>
<会話 役割="D" 性別="女" 速度="60" >
私がなる！<クリック />
</会話>
<会話 役割="A" 性別="男" 速度="60" >
そう言うなら、仕方ないな。俺がなるよ。<クリック />
</会話>
<会話 役割="A" 性別="女" 速度="60" >
そう言うなら、仕方ないな。私がなるよ。<クリック />
</会話>
<会話 役割="B" 性別="男" 速度="60" >
どうぞどうぞ。<クリック />
</会話>
<会話 役割="B" 性別="女" 速度="60" >
どうぞどうぞ。<クリック />
</会話>
<会話 役割="C" 性別="男" 速度="60" >
どうぞどうぞ。<クリック />
</会話>
<会話 役割="C" 性別="女" 速度="60" >
どうぞどうぞ。<クリック />
</会話>
<会話 役割="D" 性別="男" 速度="60" >
どうぞどうぞ。<クリック />
</会話>
<会話 役割="D" 性別="女" 速度="60" >
どうぞどうぞ。<クリック />
</会話>
<会話 役割="A" 性別="男" 速度="60" >
こらっ！<クリック />
</会話>
<会話 役割="A" 性別="女" 速度="60" >
こらっ！<クリック />
</会話>
ちゃんと会話が成立していたら成功です！