スクリプト要素の大枠

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

今回は、おまつりゲームのソースコードの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年

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コードで番号を並べる

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

▲使う画像素材も書く。

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

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

＜参考文献＞

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

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

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

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

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

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

手描きのイメージ図

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

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

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

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

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

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

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

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

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

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

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

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

＜参考文献＞

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

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

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

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

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

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

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

ゲームの概要

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

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

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

ストーリーの流れ

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

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

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

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

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

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

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

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

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

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

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

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

補足

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

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

＜参考文献＞

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

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

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

僕、さいがやん。

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

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

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

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

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

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

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

▲この画面からゲーム開始です。校庭の右下部分です。黄色いのが主人公（「ぼく」と「みずほ」）です。白いのがテントです。右のほうは明かりが届いていません。

▲校庭の左下部分です。小さいですが軽トラックの食べ物屋などがあります。

▲校庭の右上部分です。子どもたちの上のドアから校舎に入れます。

▲校庭の左上部分です。やぐらを囲んで輪踊りをしています。

▲校舎1階です。トイレがあります。

▲校舎2階です。トイレがあります。

今回は以上です。これからも、たまに見に来てくださいな。

＜参考文献＞

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

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

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