(※2026/01/17更新…変数mapの配列の長さを書き直しました。誤「５」→正「６」)
どうも、東京経済大学のさいがやんです。
今回からは、おまつりゲームのソースコードのscript要素の中身について書きます。script要素の中では、最初にグローバル変数を定義し、init関数、fieldkeydown関数、fieldpaint関数、eventpaint関数、shippai関数があります。
今回は、グローバル変数とinit関数を紹介します😄
グローバル変数
script要素では初めにグローバル変数を定義しています。
・map…map0, map1, map2, map3, map4, map5の6つの要素で構成されます。map0～5それぞれでは、１１個の要素が縦方向に並んだ配列があり、さらにその中でに２０個ずつの要素が横方向に並んだ配列があります。
・cv…キャンバスを描画するのに使う変数です。
・gc…二次元描画ツールを使えるようにするための変数です。
・stage…map0～5の数字部分にあたります。画面遷移のときに使います。
・px, py…主人公がいる場所のマスを表す変数です。
・pay…初期値が０で、ぼくがクレープ屋さんに代金を支払う場面の度に１ずつ増えます。３回目に買おうとするとpayが3になり、ゲームオーバーとなります。
以下はflag変数です。全部で９つありますよ。
・flag01…falseのとき、校舎のドアの前にいるこどもに話しかけるとtrueに切り替わります。このタイミングで、みずほがトイレに行き、ぼくの単独行動が始まります。
・flag02…flag01がtrueになった後、ひとりでいるぼくがみずほと合流したらflag02がtrueに切り替わります。合流場所は、２階のトイレか、暗闇かの２パターンあります。
・flag03…flag01がtrueで、flag02がまだfalseのとき、ぼくが初めて単独でクレープを購入するとflag03がtrueに切り替わります。このタイミングで、みずほと校舎前にいたこどもは、暗闇に行って鬼ごっこを始めます。
・flag04…このflag変数だけ、初期値はtrueです。flag02がfalse、flag03がtrue、かつflag04がtrueであるときに限って、ぼくが単独でクレープを持っている状態になります。その状態のときにみずほと合流しようとすると、鬼ごっこの鬼にぶつかられてクレープを落とし、flag04がfalseに切り替わります。みずほと合流する前にまた単独でクレープを買うと、flag04がtrueに戻ります。
・flag05…flag02がtrueで、変数payが２以下のとき、ふたりでクレープを買ってみずほが食べると、flag05がtrueになります。ここからは、みずほがかき氷を欲しがるようになります。
・flag06…flag05がtrue、flag06がfalseのとき、やぐらの左のほうで踊っている人に声をかけると、flag06がtrueになります。
・flag07…flag06がtrue、flag07がfalseのとき、やぐらを作った職人に話かけると、flag07がtrueになります。また、このタイミングで、主人公がやぐらに上れるようになります。
・flag08…flag07がtrueで、flag08がfalseのとき、やぐらの上にいる人と話すと、flag08がtrueに切り替わります。この人が口利きしてくれたことによって、かき氷屋でかき氷ひとつ無料でもらえるようになります。
・flag09…flag08がtrueで、flag09がfalseのとき、かき氷を貰うとflag09がtrueになります。これでみずほが満足し、おまつりから帰れるようになります。
グローバル変数は以上です。flag変数だらけですね🙄
init関数
お次は、init関数です。init関数では、おまつりゲームの開始画面を表示したり、fieldpaint関数を実行させたり、キーを押すイベントを登録したりします。
何をしているか細かく見ていきます。
cv = document.getElementById("field"); ←キャンバス要素をcvに代入。
gc = cv.getContext("2d"); ←二次元描画ツールを取得。
gc.fillStyle = "Black"; ←黒で、
gc.fillRect(0, 0, 800, 440); ←背景を描画する。
gc.drawImage(shujinkou2, 550, 100, 240, 240); ←主人公ふたりを描画。
gc.fillStyle = "White"; ←白で、
gc.font = "18px meiryo"; ←１８ｐｘのメイリオで、以下を描画する。
gc.fillText("ぼくは、むすめの”みずほ”に つれられて おまつりにきた。", 100, 200);
gc.fillText("ぼくは いま、こうつうけいICしか もっていない。", 100, 240);
gc.fillText("みずほを まんぞくさせて、いえに かえりたい。", 100, 280);
window.addEventListener("keydown", kaishi); ←キーを押せば関数kaishiを実行するイベントを登録。
ここまでの段階で出る画面がこちら。（黒背景よりも下に書いてある説明書きは、body要素の中のｐ要素で書きました。）
そして、この画面のときにキーを押すと、関数kaishiが実行されます。
function kaishi(a) { ←関数kaishi。aにはキー押下の情報が入っています。
window.removeEventListener("keydown", kaishi); ←イベント削除。
setInterval(function(){taiko.play()}, 410); ←音源を0.41秒ごとに再生。
fieldpaint(); ←関数fieldpaintを呼ぶ。
window.addEventListener("keydown", fieldkeydown); ←キーを押せば関数fieldkeydownを実行するイベント登録。
} ←関数kaisihi終了
ちなみに、関数kaishiで関数fieldpaintが呼び出されて実行された段階で表示される画面はこうなります。
次回は、おまつりゲームの中の、他の関数を紹介します！
