ゲーム完成までの道のり

1月 19, 2025

ゲーム完成までの道のり

東京経済大学のおみぬーです。

タイトルにあるようにゲームが完成したことをお伝えします。

前々回のブログで書いたように、コード解説は基本的に簡易的なもので進めていきます。

コード解説の前に追加の自作イラストを紹介させていただきます。

こちらはマップ画像で使う宝箱です。

同じくマップで使う石畳です。

マップに表示する用の湧き水です。

続いて紙です。こちらはイベント時に表示されるものです。

また前回載せ忘れたイラストがあるのでそちらも載せます。

こちらはわきみずです。それ以上でもそれ以下でもありません。

以上自作イラスト紹介でした。ここからは追加したコードの紹介に移ります。

まずは追加マップのコードと画像です。

var map6 = [

[08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08],

[08, 30, 09, 09, 09, 09, 09, 09, 09, 09, 09, 08, 08, 08, 08, 08, 08, 08, 08, 08],

[08, 08, 08, 08, 08, 08, 08, 08, 09, 89, 09, 08, 08, 08, 08, 08, 08, 08, 08, 08],

[08, 08, 08, 08, 08, 08, 08, 08, 09, 09, 09, 08, 08, 08, 08, 08, 08, 08, 08, 08],

[08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 09, 08, 08, 08, 08, 08, 08, 08, 08, 08],

[08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 09, 09, 09, 08, 08, 08, 08, 08, 08, 08],

[08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08],

];

89で宝箱を表示、30で移動ゲートが表示されるようになっています。宝箱はイベント扱いになっており、触れることで以下の画面が表示されます。

宝箱はイベント扱いになっていると言いましたが、既存のeventpaint 関数に追加せず、わかりやすくするために新たにtreasuretpaint関数を追加しました。以下がコードです。

function treasuretpaint(trnum) {

document.getElementById("sound").play();

gc.fillStyle = "Black";

gc.fillRect(200, 20, 400, 400);

var imgtr = document.getElementById("Treasure"+trnum+"");

gc.drawImage(imgtr, 350, 50, 100, 100);

gc.fillStyle = "White";

gc.font = "12px serif";

switch (trnum) {

case 88:

gc.fillText("ただのかみきれのようだ、、、", 250, 200);

break;

case 89:

flag5=true

gc.fillText("スライムのえがかかれている", 250, 200);

break;

}

89のイベントを踏むことで、flag5を回収します。88は別マップに用意したフェイクの宝箱の中身です。以下がそのマップとイベント画面です。

flag5回収後のイベント解説の前に、追加マップへの行き方（flag回収方法）を紹介します。

先ほどのマップに行くためには、flag4を回収する必要があります。コードはこちらです。

else if ((mpt==36 && flag4==true) || mpt==30) {

gc.drawImage(imgGate, x * 40, y * 40, 40, 40);

}

flag4が回収されていない状態ではマップ上には木として表示されています。

flag4のは、98のイベントをflag3を回収した状態で踏むことで回収できます。以下が98のコードになります。

case 98:

if(flag1==true && flag2==true && flag3==true && flag4==false && flag5==false) {

flag4=true

gc.fillText("盲目の男性「このもりになにかへんかをかんじた」", 250, 200);

}

else {

gc.fillText("盲目の男性「このもりには　いけ　があるときいたんだが", 250, 200);

gc.fillText("どこをさがしても　みあたらないのだ", 320, 230);

gc.fillText("その　いけ　には", 320, 260);

gc.fillText("ふしぎないきものが　すんでいるそうだ」", 320, 290);

}

break;

以上が追加したコードになります。細かい部分の調整なども行いましたが、本当にちょっとした調整であることと、それなりに数があるため省略します。

最後にこのゲームのタイトルですが、無難に『スライムアドベンチャー』にしようかと思います。ネーミングセンスが壊滅的なので無難なものに落ち着かせました。

今回が最後のブログになると思いますので、感想などを綴りたいと思います。

最初ははじめてのプログラミングということで、楽しみと不安が半々でした。しかし想像ほど難しいわけではなく、不安は早々に消えていました。またコード作成中、間違っていてもきちんとコードを見直せば正しい挙動をするようになり、その度に達成感を感じていました。自分が望む形にプログラムが動作することに感動しています。

今回で研究ノートのブログは最後になると思います。次は卒業研究でお会いすることになるでしょう。約半年間ありがとうございました。

参考文献

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

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

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

このブログを検索

はじめてのぷろぐらみんぐ

ゲーム完成までの道のり

人気の投稿

はじめての投稿

ゲームのコンセプト