卒業研究~プログラム完成までの軌跡~

お久しぶりです、おみぬーです。 またしても前回のブログから期間が空いてしまったことをお詫びします。 今回はプログラムの内容についてではなく、わたし自身のお話をさせていただきたいと思います。プログラムにつきましては、不要箇所の削除など、細かな箇所をいじりました。 ということでわたし自身のお話をさせていただきます。まず私は東京経済大学に一年間浪人し、入学してきました。高校時代のわたしはテストの順位は下から数えた方が早い、赤点ばかり、再テストは当たり前という典型的な問題児でした。そんな奴が大学入試に成功するわけもなく、親に頼み込み一年間の浪人を許可してもらいました。そこからでした、わたしの意識が変化していったのは。毎日予備校に通い続け、授業が終われば自習室が閉まるまで自習室へ、帰宅後も自室に籠り勉強し続け、その結果無事に東経大に入学しました。 わたしにとって浪人の一年間は人生のターニングポイントだったといっても過言ではありません。高校時代のころのように、すべてを中途半端に、なにに対してもやる気がない、そんな状況で大学に入学しても、まともに講義を受けている想像がつきません。そんな状況だったわたしを予備校に通わせてくれた両親を裏切るわけにはいかないと思い、今までの自分と決別し、物事に真摯に向き合うようになりました。その結果大学入試のみならず、入学後の成績もかなり良かったと感じます。また講義での不明点をお互いに教えあったり、お互いの意見をぶつけ合い熱い議論を展開させたりすることができる友人にも恵まれました。 大学在学中にしか経験できないことをたくさん経験することができました。一つ後悔があるとすれば、交友関係をもっと広げるべきだったということです。人見知りな一方で、仲良くなると面倒くさい性分のそんなわたしと友人になってくれた彼らには感謝しかありません。 大学在学期間で講義による多くの知識はもちろん素敵な友人とも出会うことができた国分寺のキャンパスを忘れることはありません。 長くなってしまいましたが、今回はここまでとさせていただきます。 お疲れ様でした。 参考文献 田中賢一郎『ゲームで学ぶJavaScript 入門』インプレス,2015年 田中賢一郎『ゲームで作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス,2017年 田中賢一郎『ゲームで学ぶJavaS...

お久しぶりです、おみぬーです。 ここ一ヶ月ほど予定が立て込んでおり、更新が遅くなってしまいました。  少し前にゼミの教授である阿部先生とZOOMで面談をし、今後の予定について話しました。ゲーム自体はほぼ完成しているので、クオリティアップと、細かな点の修正を行っていきます。 今回はゲームオーバー後に、マップに戻されるようにコードとHTMLファイルを追加しました。 新たに作成したHTMLファイルは、既存のHTMLファイルを改造したものです。 既存のコードを以下に書き換えました。 else if(flag1==true && flag2==true && flag3==true && flag4==true && flag5==true && flag6==true) { window.removeEventListener("keydown", fieldkeydown); gc.fillText("ようせい「なにしてるの！", 250, 200); gc.fillText("もう一度たのんだよ!」", 310, 230); setTimeout(dungeonpaint, 3000); 以下がゲーム画面です。 ゲームオーバー時に新たに追加したHTMLファイルに遷移するためのコードは以下です。 sndGameover.play(); //gc.fillStyle = "Red"; //gc.font = "28px serif"; //gc.fillText("GAME OVER", 305, 230); location.href = "slimeadventuremapyousei.html"; clearInterval(ticktimer); return; 以上が今回追加したものになります。 今後は微調整やクオリティアップについてのほかに、大学生活4年間の感想なども書いていきたいと思います。 お疲れ様でした。...

お疲れ様です、おみぬーです。 私用で忙しかったり、季節の変わり目で体調を崩していたため、前回の更新からだいぶ時間が空いてしまいました。 今回は予定通りクリア後のストーリーを追加しました。ストーリーとは言っても、ようせいやその他のキャラクターから感謝されるというものです。 マップは以前研究ノートで作成したものを使用します。今回はフラグなどは使用しないシンプルなものになっているので、マップの詳細は割愛します。興味のある方は、以前作成した研究ノートのブログをチェックしてください。前回のブログにURLがあります。 ということで以下に、今回追加したストーリー（会話）と画像を載せます。 function eventpaint(evnum) { document.getElementById("sound").play(); gc.fillStyle = "Black"; gc.fillRect(200, 20, 400, 400); var imgev = document.getElementById("Event"+evnum+""); gc.drawImage(imgev, 350, 50, 100, 100); gc.fillStyle = "White"; gc.font = "12px serif"; switch (evnum) { case 93: gc.fillText("農民「きみが魔物をたおしてくれたんだね", 250, 200); gc.fillText("ほんとうに　ありがとう！", 285, 230); break; case 94: gc.fillText("勇者「おまえがまものを倒したのか！？", 250, 200); gc.fillText("ここはすなおに感謝しよう", 285, 230); gc.fillText("おまえのことを侮っていた", 285, ...

お疲れ様です、東京経済大学のおみぬーです。 今回から、研究ノートで作成したゲームと前回まで作成していたマップを繫げていく作業を行っていきます。 以前研究ノートで作成したゲームの詳細については以下から確認いただけます。 https://hajimetenoprogramming.blogspot.com/ 前回までに作成してきたゲームと研究ノートで作成したゲームを、違和感なくひとつの物語にしていく必要があるため、研究ノートで作成したゲームのシナリオを少し変更していくことから始めます。 研究ノートのゲームはエンド分岐がありますが、トゥルーエンドから今回作成したゲームに繫げます。以前作成したトゥルーエンドの内容は、ジェリー状のスライムから固形のスライムに変化してクリアでしたが、そこにストーリーを追加します。追加する内容としては、「ジェリー状になってしまった他のスライムを倒してほしいとお願いされる」などで良いかなと思っています。 ということで以下のコードを追加しました。 function requestpaint() { window.removeEventListener("keydown", fieldkeydown); gc.fillStyle = "Black"; gc.fillRect(200, 20, 400, 400); gc.fillStyle = "White"; gc.fillRect(350, 50, 100, 100); gc.drawImage(Event97, 350, 50, 100, 100); gc.fillStyle = "White"; gc.font = "12px serif"; gc.fillText("ようせい「きみにお願いがあるんだ」", 250, 200); setTimeout(continuepaint, 3000); } function continuepaint() { window.removeEventListener("keydown", fieldkeydown); ...

 お疲れ様です、東京経済大学のおみぬーです。 今回も追加マップの紹介です。今回もモンスターの動きに変化を加えます。 今回作成したマップ画像は以下になります。 今回のマップもモンスターの動きを活かすための構造にしました。 以下がコードです。 var map = [ [8, 8, 8, 8, 8, 8, 8, 8, 8, 7, 7, 8, 8, 8, 8, 8, 8, 8, 8, 8], [8, 8, 8, 8, 8, 8, 8, 8, 8, 7, 7, 8, 8, 8, 8, 8, 8, 8, 8, 8], [8, 8, 9, 9, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 8, 9, 8, 8], [8, 8, 9, 9, 8, 9, 8, 9, 9, 8, 8, 9, 9, 8, 9, 9, 8, 9, 8, 8], [8, 8, 9, 9, 8, 9, 8, 9, 9, 8, 8, 9, 9, 8, 9, 9, 8, 9, 8, 8], [8, 8, 9, 9, 8, 9, 8, 9, 9, 8, 8, 9, 9, 8, 9, 9, 8, 9, 8, 8], [8, 8, 9, 9, 8, 9, 8, 9, 9, 8, 8, 9, 9, 8, 9, 9, 8, 9, 8, 8], [8, 8, 9, 9, 8, 9, 8, 9, 9, 8, 8, 9, 9, 8, 9, 9, 8, 9, 8, 8], [8, 8, 9, 9, 9, 9, 8, 9, 9, 9, 9, 9, 9, 8, 9, 9, 9, 9, 8, 8], [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8], [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8], ]; 今回のモンスターは一度の移動で横方向では2マス飛ばし、縦方向では1マス飛ばしに移動します。そのため移動先以外の壁を無視して動くことが可能になっています。壁をすり抜けているように見えるので、このモンスターはGhostJellyという名前で定義しています。 この...

 お久しぶりです、東京経済大学のおみぬーです。 前回のブログでは、モンスターの動き方を決定するコードを紹介しました。 今回は改造後のコードを紹介します。 モンスターの動きを変化させるために変更した箇所は、moveメソッドです。 this.move = function () { this.movecounter(); if (this.movecnt > 0) { return; } if (this.dx == 0 && this.dy == 0) { this.dx = 1; this.dy = 0; } while (map[this.py + this.dy][this.px + this.dx] != 9) { switch (Math.floor(Math.random() *4)) { case 0: this.dx = -1; this.dy = 0; this.dir = -1; break; case 1: this.dx = 0; this.dy = -1; this.dir = -2; break; case 2: this.dx = 1; this.dy = 0; this.dir = 1; break; case 3: this.dx = 0; this.dy = 1; this.dir = 2; break; } } } 一つ目のif文では、モンスターがマスを移動中moveメソッドから抜け出すようにしています。 二つ目のif文では、モンスターの初期移動方向を指定しています。今回の場合は右方向に進むように指定しています。 そしてその後のwhike文では、初期移動方向以外でのモンスターの移動方向を決定しています。 モンスターの移動先が通路でない場合、switch文で0、1、2、3のいずれかの値をランダムに決定し、0の場合は左、1の場合は上、2の場合は右、3の場合は下方向へ移動します。 このswith文は通路を移動している場合には実行されません。そうすることで、壁に当たるまで移動方向を変えない、つまり直線移動するよ...