おまつりゲーム制作過程

2026年1月18日日曜日

スクリプト要素～eventpaint関数とshippai関数～

どうも、東京経済大学のさいがやんです。

前々回から、おまつりゲームのソースコードの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年

2026年1月16日金曜日

スクリプト要素～fieldpaint関数とfieldkeydown関数～

どうも、東京経済大学のさいがやんです。

前回から、おまつりゲームのソースコードのscript要素の中身について書いています。script要素の中では、最初にグローバル変数を定義し、init関数、fieldkeydown関数、fieldpaint関数、eventpaint関数、shippai関数があります。

今回は、fieldpaint関数とfieldkeydown関数を紹介します。ついでに、ストーリーに合わない仕様を直したことを記録します。

fieldpaint関数

fieldpaint関数はマップや主人公を描画します。init関数やfieldkeydown関数の中でfieldpaint関数が呼び出されます。

function fieldpaint() {
            gc.fillStyle = "rgba(160, 160, 150, 1)";
            gc.fillRect(0, 0, 800, 440);

▲fieldpaint関数ではまず、キャンパス全体を灰色っぽくしています。これがそのまま、校庭の色になります。

            var y, x;
            for (y = 0; y < map[stage].length; y++) {
                for (x = 0; x < map[stage][y].length; x++) {
                    var mpt = map[stage][y][x];
                    if (mpt ==01) { //もん
                        gc.drawImage(mon, x * 40, y * 40, 40, 40);
                    }
                    else if (mpt ==02) { //き
                        gc.drawImage(ki, x * 40, y * 40, 40, 40);
                    }
                    else if (mpt ==04) { //ちゃり
                        gc.fillStyle = "rgba(150, 220, 240, 1)";
                        gc.fillRect(x * 40, y * 40, 40, 40);
                        gc.drawImage(chari2, x * 40, y * 40, 40, 40);

▲次に、表示するステージ（マップ0～5のどれか）の配列の要素番号が格納されるものをy、さらにその中の配列の要素番号が格納されるものを変数xとします。for文とif文を使って、色や画像をつけた40px四方のマスを、横20個×縦11個描画していきます。

            if (flag01 == true && flag02 == false) {  //主人公
                gc.drawImage(boku, px * 40, py * 40, 40, 40);
            }
            else {
                gc.drawImage(shujinkou2, px * 40, py * 40, 40, 40);
            }

▲主人公を描画します。

for (y = 0; y < map[stage].length; y++) {  //暗闇
                for (x = 0; x < map[stage][y].length; x++) {
                    var mpt = map[stage][y][x];
                    if (mpt ==03 || mpt == 31 || mpt == 51 || mpt == 52 || mpt == 68 || mpt == 73) {
                        gc.fillStyle = "rgba(50, 50, 40, 0.65)"; //かげ
                        gc.fillRect(x * 40, y * 40, 40, 40);
                    }
                }
            }

▲校庭の暗闇部分を半透明の暗い灰色で描画します。暗闇にいる主人公を見えにくくするため、主人公の後に上から描画します。

fieldpaint関数は以上です。

fieldkeydown関数

init関数でキーダウンイベントが登録されたので、キーが押されるとfieldkeydown関数が実行されます。fieldkeydown関数は、主人公が移動するための関数です。

function fieldkeydown(e) {
            var dx = px, dy = py;
            switch (e.keyCode) {
                case 37: dx--; break;
                case 38: dy--; break;
                case 39: dx++; break;
                case 40: dy++; break;
            }

▲変数dx,dyは、主人公の移動先候補を表します。switch文で、上下左右のキーと、x,y座標の増減を対応させます。

var mpt = map[stage][dy][dx];
            if ((mpt == 20 || mpt == 21 || mpt == 23) && flag07 == true) {
                px = dx;
                py = dy;
                fieldpaint();
            }
            else if (mpt == 22 && flag07 == true) {
                px = dx;
                py = dy;
                fieldpaint();
                eventpaint(mpt);
            }

▲移動先候補の座標を、移動先の座標に入れて、fieldpaint関数に描画を頼みます。さらに、移動先のマスでキャラクターと話したりする場合はeventpaint関数も呼びます。

しかし、移動先候補のマスが木や壁のときは特に何もしませんし、画面遷移が必要なときはまた別の処理をします。そのコードの記載は省略します。

修正箇所

関数の説明とは無関係ですが、ぼくが一人でいるときに正門から出ようとすると、こんな画面が出てきてしまうことを発見しました。

これでは、みずほが瞬間移動して正門にきていることになってしまい不自然です。場面によっては、トイレにいるみずほが、瞬間移動で正門に来てトイレに戻る、ということにもなりえます。これではよろしくないので、変えました。

この画面を新しく追加し、解決しました。

＜参考文献＞

・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年

・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年

・田中賢一郎『ゲームで学ぶ JavaScript 入門増補改訂版～ブラウザゲームづくりでHTML&CSSも身につく！』インプレス、2022年

2026年1月12日月曜日

スクリプト要素～グローバル変数とinit関数～

(※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が呼び出されて実行された段階で表示される画面はこうなります。

この時の画面はmap3です。主人公の位置は、一番左・上のマスを０だとして、左から７マス目、上から９マス目です。これらは、グローバル変数で定義したstage=3, px=7, py=9 に対応していますね。

次回は、おまつりゲームの中の、他の関数を紹介します！

＜参考文献＞

・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年

・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年

・田中賢一郎『ゲームで学ぶ JavaScript 入門増補改訂版～ブラウザゲームづくりでHTML&CSSも身につく！』インプレス、2022年

2025年12月28日日曜日

スクリプト要素の大枠

どうも、東京経済大学のさいがやんです。

今回は、おまつりゲームのソースコードのscript要素について書きます。

script要素

おまつりゲームのソースコードのhead要素の中にscript要素があります。

そしてそのscript要素の中では、最初にグローバル変数を定義し、init関数、fieldkeydown関数、fieldpaint関数、eventpaint関数、shippai関数という関数を使っております。

定義するグローバル変数には、マップやx座標y座標、フラグなどがあります。

init関数では、おまつりゲームの開始画面を表示したり、fieldpaint関数を実行させたり、キーを押すイベントを登録したりします。

fieldpaint関数では、マップや主人公を描画します。矢印キーが押される度に、マップと主人公を上書きすることで、主人公が移動したように見せています。

fieldkeydown関数は、キーが押された時に実行する関数で、表示するマップを切り替えたり、主人公の位置を変えたりします。

eventpaint関数は、人に話しかけるときなどに会話を表示させるための関数です。

shippai関数は、クレープを買えなくなってゲームオーバーになったとき用の関数です。

次回からは、グローバル変数から順に説明します！

＜参考文献＞

・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年

・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年

・田中賢一郎『ゲームで学ぶ JavaScript 入門増補改訂版～ブラウザゲームづくりでHTML&CSSも身につく！』インプレス、2022年

2025年11月30日日曜日

マップ制作過程（２：プログラムでのマップづくり）

どうも、東京経済大学のさいがやんです。

今回は、おまつりゲームのマップの制作過程、第２弾！

色分けマップのマスごとの画像づくり

前回、Excelのマスを使い、視覚的に色分けマップを作るところまで紹介しました。その後は、ただの色ではなく、実際のゲーム画面に使用する画像を作ります。

僕は絵をスマートフォンで書いて、そのスクリーンショットを使うことにしました。

例えば、これはやぐらの絵の１マスですが、PNG形式で自分が分かりやすいファイル名にして保存しておきます。僕は、"kouhaku.png"にしました。このように画像を作っていきます。

画像ではなく単色で事足りるなら、画像を作らなくていいマスもあります。例えば下駄箱は色を指定するだけで、画像を使っていません。

色や画像と、番号を対応させる

ゲーム画面のマップを作るときは、起こしたい効果（例えば画像や色の表示、プレイヤーの移動など）と番号を結びつけて、マスごとに適切な番号を割り当てます。

おまつりゲームでは、木、下駄箱、テントなどの通過できないマスと、途中から上がれるようになる「やぐら」などのマスと、地面や人など、いつでも通過することのできるマスがあります。プレイヤーを移動させる関数を作るときの条件式が作りやすくなるように、移動のしかたによって番号をまとめておくと便利です。

▲１～１９は通過できないマス。

▲２０～３０はやぐら関係の、後から入れるようになるマス。

▲３０～５４は屋外の通過できるマス。

▲５５～５９は校舎の中の通過できるマス。

▲６０～はマップの切り替えなどを伴うことがあるマス。

コードで番号を並べる

番号ごとに何の画像・色にするかが決まったら、その番号を、色分けマップと番号表を見ながらコードに書きます。

▲使う画像素材も書く。

地図を描画する関数がなければプログラムで表示させることはできませんが、ひとまずこれで、どのようなマップの見た目にするかの情報ができました。

今回はここで終わりです。ありがとうございました！

＜参考文献＞

・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年

・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年

・田中賢一郎『ゲームで学ぶ JavaScript 入門増補改訂版～ブラウザゲームづくりでHTML&CSSも身につく！』インプレス、2022年

2025年11月6日木曜日

マップ制作過程（１：手描き～Excel塗りつぶし）

どうも、東京経済大学のさいがやんです。

今回は、おまつりゲームのマップの制作過程を紹介します！

手描きのイメージ図

僕はまず、行ったことのある盆踊り会場（学校）を参考に、ストーリーに沿うようなマップを手描きしました。

おまつりゲームは、みずほと一緒にトイレを目指すことから始まりますが、その間にクレープの誘惑を仕掛けなければなりません。そのため、クレープを食べているこどもを、トイレがある校舎の入口にスタンバイさせました。

また、クレープをぼくが買っている間に、みずほとこどもが陰に行ってバナナ鬼を始めるので、こどもとクレープ屋が同じ画面にならないようにしました。

マップが6分割と少なめなのは、（僕のような）方向音痴でも比較的迷わないようにするためです😊

Excelを塗りつぶして色分けマップ

手描きの次は、Excelで行と列を同じ長さに揃えていって、どのマスに何を置くか決めました。手描き段階では無かった物も追加したりしています。

▲校舎です。水色がドアです。黄色（チェーン）は越えられません。白い部分は壁です。紫はトイレマークをつけるマスです。左上の暗めの灰色は階段、下駄箱近くの1マスの灰色はかき氷を食べている人です。

▲校庭です。手描きから変わったのは、お茶屋さんができたのと、陰にバナナ鬼の鬼（暗い灰色）と捕まったみずほ（黄色）が来るためのマスを表示したことです。

ちなみに、１つのマップは２０×１１マスなのですが、校庭では隣同士のマップが長さ２マス分重なっています。その理由を説明させてください。

最初は、マップの範囲が重ならないような画面遷移をするつもりでした。マップ間の移動が一本道ならそれでいいのですが、校庭のような開放的な所で、マップ間の境界線に沿って移動しようとするとワープしてしまい、行先によっては抜け出せなくなることが分かりました😨

そこで、ワープしないようにこの画像のような画面遷移にして、マップが重なることになったのでした。

中途半端ですが今回は以上です。次は、マスに画像を当てはめるところから書こうと考えています！

＜参考文献＞

・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年

・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年

・田中賢一郎『ゲームで学ぶ JavaScript 入門増補改訂版～ブラウザゲームづくりでHTML&CSSも身につく！』インプレス、2022年

2025年10月23日木曜日

おまつりゲームのストーリー

どうも、東京経済大学のさいがやんです。

今回からは、おまつりゲームを作ってきた過程を紹介していこうと思います！

僕はストーリーから考えたので、今回それを紹介しますね。趣味の輪踊りから着想を得て作りました。

ゲームの概要

ゲームの概要は、ゲーム開始画面にも表示されます。

主人公はぼくと、その子であるみずほとの２人で、一緒におまつり会場の学校に来ています。ぼくは現金を持っておらず、交通系ICだけあります。みずほの希望に応えて満足させて帰宅できればゲームクリアです。

みずほの具体的な希望は３つあります。一つ目は「トイレに行く」、その次は「クレープを食べる」、最後に「かき氷を食べる」。最後まで叶えてあげてから、校門まで行けばクリアします。

ストーリーの流れ

ここからは、ストーリーの流れを説明します。これを見れば罠に引っかからないので、プレイしても全く楽しめなくなります。

ゲームを開始したらまず、「トイレに行く」時に、みずほが友達に話しかけられ、クレープをおすすめされます。

みずほはクレープを欲しがり、クレープ購入をぼくに託してトイレへ行きます。これで「トイレに行く」は叶えました。

「クレープを食べる」を叶えるには、２通りの方法があります。

１通り目は、素直に一人でクレープ屋に向かうバターンです。ぼくはクレープ屋に行き、交通系ICでクレープを購入し、みずほに渡しに行こうとします。しかし、みずほはトイレにもどこにも見当たりません。校庭の右の暗闇を探し回っていると、こどもにぶつかられてクレープを落としてしまいました。その後、みずほを見つけて一緒にクレープ屋で買えば、「クレープを食べる」が叶えられます。

ちなみに、クレープを落としてまた一人で買い直すと、もう一回落とされて、次は残高不足で買えずにゲームオーバーです。

２通り目は、クレープ屋に向かう前に、校舎の中のトイレの前までみずほを迎えに行って合流し、２人でクレープを買いに行く方法です。トイレは１階と２階にありますが、みずほが入っているのは２階のほうです。

これで、「クレープを食べる」が叶えられました。

次は、「かき氷を食べる」を叶えましょう。

普通にかき氷屋に行くと、交通系ICが使えなくて買えません。買う以外の方法を使います。

校庭には、やぐらを囲んで輪踊りしている人たちがいます。そのうちの、ある人に話しかけると踊り方を教えてくれて、ぼくとみずほはうまく踊れるようになりました。その後、踊りを見ていたやぐら職人に話しかけると、やぐらに上がって踊る許可が出ます。やぐらの上の人に話しかけるとかき氷屋に口利きしてもらうことができ、かき氷屋に行くと無料でかき氷をくれます。

これで「かき氷を食べる」を叶えられたので、校門に行けば帰宅できて、ゲームクリアです。

補足

ゲーム制作前に考えていたストーリーではゲームオーバーが存在せず、交通系ICの残高が無限大でした。ゲームを作ってから、延々と買えるのがおかしいと感じて、残高の制限を付けてみました。

今回はストーリーの紹介でした。次回はマップの見た目の制作過程をご紹介するつもりです。それではまた。

＜参考文献＞

・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年

・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年

・田中賢一郎『ゲームで学ぶ JavaScript 入門増補改訂版～ブラウザゲームづくりでHTML&CSSも身につく！』インプレス、2022年

2025年10月7日火曜日

僕、さいがやん。

どうも初めまして、東京経済大学の さいがやん でやんす。

このブログでは、僕が研究ノートで取り組み中のプログラム開発の記録を、日誌形式で公開していきます。

初回は自己紹介メインです。

改めまして、「さいがやん」です。僕の好きなことは歌うこと、輪踊り、筋トレ、ファッション、絵を描くこと、ラキューなど。想像したことを視覚的に表現して、それを自分で見て楽しむのが大好きです（歌うのだけは聴覚的ですが）。最近は補色（っぽい）コーデがマイブームです。赤と緑とか、青と黄とか、パキッとした色の組み合わせが、気分あがるんですよ。これがイメージです。

僕の好きなことって単純で、やろうと思えば数秒で表現できるので、基本的に完成するまでノンストップです。しかし今やってるプログラミングは、ゲームを作るのに通算何十日間もかかります。今までの趣味の感覚でやってると、昼に作業を始めていつのまにか朝になっていることがあったので、意識してアラームで区切りをつけないと体を壊すと思いました。気をつけます。

ところで、プログラミングを学ぼうと思ったきっかけは、中学校でscratchを紹介されたことでした。高校でプログラミングの授業を取ろうと思ったら他の選択授業と被り、大学でも被り、３年目でやっと学ぶことになりました。「ホームページが作れるようになりたい」と思っていたのですが、今はすっかりゲーム制作が楽しくなっています。ゼミではJavaScriptを使っていて、計算結果を表示させる方法、画面遷移、for文やフラグ変数の使い方などを教わってきました。

最後に、現時点のおまつりゲームの画面の地図を紹介します。おまつり会場（小学校）のうち、４画面が校庭、２画面が校舎です。