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

お疲れ様です、おみぬーです。 私用で忙しかったり、季節の変わり目で体調を崩していたため、前回の更新からだいぶ時間が空いてしまいました。 今回は予定通りクリア後のストーリーを追加しました。ストーリーとは言っても、ようせいやその他のキャラクターから感謝されるというものです。 マップは以前研究ノートで作成したものを使用します。今回はフラグなどは使用しないシンプルなものになっているので、マップの詳細は割愛します。興味のある方は、以前作成した研究ノートのブログをチェックしてください。前回のブログに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文は通路を移動している場合には実行されません。そうすることで、壁に当たるまで移動方向を変えない、つまり直線移動するよ...

 東京経済大学のおみぬーです。 今回も追加マップの作成です。今回作成するマップではモンスターの動きに変化を与えます。 前回のマップから今回のマップに移動するためのコードは以下になります。 if (jelly1.life == 0 && jelly2.life == 0 && map[slime.py-1][slime.px] == 7 && slime.dir == -2) { location.href = "hitcheck8ex-4.html"; } 作成したマップ画像は以下になります。 今までに比べ、複雑なマップになりました。このようにしたのは、モンスターの動きの変化が要因です。マップのコードを紹介した後、モンスターの動きについても紹介します。 以下がコードです。 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, 9, 9, 9, 8, 8, 9, 9, 9, 9, 9, 8, 9, 9, 9, 8, 8], [8, 8, 9, 8, 9, 8, 9, 8, 9, 9, 8, 8, 8, 9, 8, 9, 8, 9, 8, 8], [8, 8, 9, 8, 9, 8, 9, 8, 9, 9, 9, 8, 8, 9, 8, 9, 8, 9, 8, 8], [8, 8, 9, 8, 9, 8, 9, 8, 9, 9, 9, 9, 8, 9, 8, 9, 8, 9, 8, 8], [8, 8, 9, 8, 9, 8, 9, 8, 8, 9, 9, 9, 8, 9, 8, 9, 8, 9, 8, 8], [8, 8, 9, 8, 9, 8, 9, 8, 8, 8, 9, 9, 8, 9, 8, 9, 8, 9, 8, 8], [8, 8, 9, 9, 9, 8, 9, 9, 9, 9, 9, 8, 8, 9, 9, 9, 9, 9, 8, 8], ...

東京経済大学のおみぬーです。 前回に引き続き追加マップの紹介になります。今回はvol.2です。 前回のブログでは、モンスターの動きを変えるつもりでしたが、先にモンスターの追加をすることに決めました。 以下が今回作成したマップ画像です。 今回のマップでは前回のマップからモンスターが1体増え、2体になりました。 マップのクリア条件は変わらず、モンスターのライフを0にすれば良いです。この際2体ともライフを0にしなくてはなりません。 マップのコードは以下になります。 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, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 8, 8], [8, 8, 9, 8, 8, 8, 8, 8, 8, 9, 9, 8, 8, 8, 8, 8, 8, 9, 8, 8], [8, 8, 9, 9, 9, 9, 9, 9, 8, 9, 9, 8, 9, 9, 9, 9, 9, 9, 8, 8], [8, 8, 9, 8, 8, 8, 8, 9, 8, 9, 9, 8, 9, 8, 8, 8, 8, 9, 8, 8], [8, 8, 9, 9, 9, 9, 8, 9, 8, 9, 9, 8, 9, 8, 9, 9, 9, 9, 8, 8], [8, 8, 9, 8, 8, 9, 8, 9, 8, 9, 9, 8, 9, 8, 9, 8, 8, 9, 8, 8], [8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 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], ]; 前回同様、8が壁、9が通路、7はクリア前は...