どうも、東京経済大学のさいがやんです。
前々回から、おまつりゲームのソースコードのscript要素の中身について書いています。script要素の中では、最初にグローバル変数を定義し、init関数、fieldkeydown関数、fieldpaint関数、eventpaint関数、shippai関数があります。
今回は、eventpaint関数とshippai関数を紹介します。また、別のHTMLファイルにある関数も紹介します。🙂
eventpaint関数
前回紹介したfieldkeydown関数は、主人公の移動先によってはfieldpaint関数を呼んだり、さらにeventpaint関数を呼んだりします。ここで紹介するeventpaint関数は、人に話しかけるときなどに会話を表示させるための関数です。例えばこのような画面を出すものです。
ソースコードを見てみましょう。
function eventpaint(evnum) {
window.removeEventListener("keydown", fieldkeydown);
setTimeout(ugoku, 800);
function ugoku() { window.addEventListener("keydown", fieldkeydown); }
▲まず、会話するマスにたどり着いた時に、0.8秒間そのマスから動けなくします。ゲーム開発当初はこの設定をしていなかったのですが、それだと遊ぶときにキーを長押しや連打していると会話が一瞬しか見られないことが分かったため、少し止めるようにしました。
kaka.play();
gc.fillStyle = "Black";
gc.fillRect(200, 20, 400, 400);
gc.fillStyle = "White";
gc.font = "12px meiryo";
▲次に、「カカッ」というような音声を再生して、黒い正方形で背景を描画します。文字は白の12px、メイリオに設定します。
switch (evnum) {
case 22: //やぐひだり
gc.drawImage(kuchikiki, 325, 30, 150, 150);
if (flag08 == false) {
flag08 = true;
gc.fillText("ひと 「ふたりとも、おどってくれてありがとうな。", 250, 200);
gc.fillText("かきごおりやさんに くちききしてやるから、", 285, 230);
gc.fillText("たべて いきなよ。」", 286, 260);
gc.fillText("みずほ「いいの？ ありがとう！！」", 250, 330);
gc.fillText("ぼく 「ありがとうございます！」", 250, 360);
}
else if (flag08 == true && flag09 == false) {
gc.fillText("ひと 「かきごおり たべていってね」", 250, 200);
gc.fillText("みずほ「うん！」", 250, 230);
}
else if (flag09 == true) {
gc.fillText("ひと「また おどりに きてくれたんだね」", 250, 200);
}
break;
▲switch文で、マスにふられた番号ごとに、描画する画像や会話内容を書いていきます。（会話内容をbody要素に書く方法もあるのですが、私はscript要素に書いています。）上記のコードは、やぐらで踊っている左側の人に話しかけたときの内容です。ストーリーがどこまで進んだかによって会話内容を変えます。この人はストーリー展開のきっかけになる人なので、flag変数の切り替えも含まれています。
ちなみに、クレープ屋さんは唯一ゲームオーバーになりうるポイントです。
case 44: //クレープ
//（中略）
else if (flag01 == true && flag02 == false && flag03 == true && flag04 == false) {
pay++;
if (pay < 3) {
flag04 = true;
gc.drawImage(crape, 325, 30, 150, 150);
gc.fillText("６００えんで もういちどクレープをかった", 250, 200);
}
else { shippai() }
}
else if (flag02 == true && flag05 == false) {
pay++;
if (pay < 3) {
flag05 = true;
gc.drawImage(mizuho, 325, 30, 150, 150);
gc.drawImage(crape, 330, 70, 60, 60);
gc.fillText("みずほ 「クレープください！」", 250, 200);
gc.fillText("てんいん「はい、６００えんね。どうぞ」", 250, 230);
gc.fillText("みずほは クレープをたべて うれしそうだ」", 250, 290);
}
else { shippai() }
}
//（中略）
break;
▲主人公がクレープ屋さんに支払おうとした回数が３回以上（つまり残高不足）になるとshippai関数を呼びます。
shippai関数
shippai関数は、クレープを買えなくなってゲームオーバーになったとき用の関数です。このような画面を出すものです。
ソースコードを見てみましょう。
function shippai() {
gc.fillStyle = "Black";
gc.fillRect(200, 20, 400, 400);
gc.fillStyle = "White";
if (flag02 == false && pay == 3) { //ぼくだけ
gc.font = "36px serif";
gc.fillText("GAME OVER", 280, 100);
gc.font = "14px meiryo";
gc.fillText("てんいん「ざんだかが たりません。」", 250, 290);
gc.fillText("ぼく 「えっ・・・」", 250, 320);
gc.fillText("１２００えんを むだにしてしまった", 250, 360);
gc.drawImage(bikuboku, 300, 85, 200, 190);
window.removeEventListener("keydown", fieldkeydown);
}
▲ぼくが単独でいるときにゲームオーバーになる場合のコードです。eventpaint関数での描画のしかたと大差ありません。
seikou関数
ゲームクリアの画面を表示するためにseikou関数を作ったのですが、同じHTMLファイルの中に置くと、キーダウンされた時にもとの画面に戻ってしまうため、ファイルを分けました。seikou関数は別のHTMLファイルのscript要素の中にあります。以下がソースコードです。
function seikou(){
gc.fillStyle = "rgba(180, 180, 180, 1)";
gc.fillRect(200, 0, 400, 440);
gc.fillStyle = "rgba(255, 255,0,1)";
gc.font = "50px pop";
gc.fillText("帰宅成功！", 290, 80);
gc.fillStyle = "black";
gc.font = "18px meiryo";
gc.fillText("ぼく＆みずほ「ただいま～！」", 290, 415);
gc.drawImage(ie, 250, 90, 300, 300);
そして、この画面が出ます。
ファイルが切り替わる時に一瞬画面が消えますが、それは許容範囲だと思って放置しています。
おそらくこれが最後の投稿だと思います。見てくださった方、ありがとうございました！！
＜参考文献＞
・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年
・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年
・田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりでHTML&CSSも身につく！』インプレス、2022年
