2025年10月23日木曜日

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

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

今回からは、おまつりゲームを作ってきた過程を紹介していこうと思います!
僕はストーリーから考えたので、今回それを紹介しますね。趣味の輪踊りから着想を得て作りました。

ゲームの概要
ゲームの概要は、ゲーム開始画面にも表示されます。
主人公はぼくと、その子であるみずほとの2人で、一緒におまつり会場の学校に来ています。ぼくは現金を持っておらず、交通系ICだけあります。みずほの希望に応えて満足させて帰宅できればゲームクリアです。
みずほの具体的な希望は3つあります。一つ目は「トイレに行く」、その次は「クレープを食べる」、最後に「かき氷を食べる」。最後まで叶えてあげてから、校門まで行けばクリアします。

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

ゲームを開始したらまず、「トイレに行く」時に、みずほが友達に話しかけられ、クレープをおすすめされます。
みずほはクレープを欲しがり、クレープ購入をぼくに託してトイレへ行きます。これで「トイレに行く」は叶えました。

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

2通り目は、クレープ屋に向かう前に、校舎の中のトイレの前までみずほを迎えに行って合流し、2人でクレープを買いに行く方法です。トイレは1階と2階にありますが、みずほが入っているのは2階のほうです。
これで、「クレープを食べる」が叶えられました。

次は、「かき氷を食べる」を叶えましょう。
普通にかき氷屋に行くと、交通系ICが使えなくて買えません。買う以外の方法を使います。
校庭には、やぐらを囲んで輪踊りしている人たちがいます。そのうちの、ある人に話しかけると踊り方を教えてくれて、ぼくみずほはうまく踊れるようになりました。その後、踊りを見ていたやぐら職人に話しかけると、やぐらに上がって踊る許可が出ます。やぐらの上の人に話しかけるとかき氷屋に口利きしてもらうことができ、かき氷屋に行くと無料でかき氷をくれます。
これで「かき氷を食べる」を叶えられたので、校門に行けば帰宅できて、ゲームクリアです。

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

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

<参考文献>
・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年
・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年
・田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版~ブラウザゲームづくりでHTML&CSSも身につく!』インプレス、2022年

2025年10月7日火曜日

僕、さいがやん。

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

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

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

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

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

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


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

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

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

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

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

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

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

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


<参考文献>
・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年
・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年
・田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版~ブラウザゲームづくりでHTML&CSSも身につく!』インプレス、2022年

スクリプト要素の大枠

 どうも、東京経済大学の さいがやん です。 今回は、おまつりゲームのソースコードのscript要素について書きます。 script要素 おまつりゲームのソースコードのhead要素の中にscript要素があります。 そしてそのscript要素の中では、最初にグローバル変数を定義し...