モンスターをプレイヤーに近づけるようにする

 　今回はモンスターがプレイヤーに近づいていくようにするプログラムを作成しました。

～今回の内容～




左側の蟻にご注目ください。この画面から下方向へボタンを押します。


プレイヤーは下に移動し、蟻は上に移動したのがわかります。またこの状態から下にプレイヤーを動かします。


プレイヤーが下に移動しました。そして蟻は右に移動していることがわかります。この状態から今度は右に何マスか移動させましょう。


プレイヤーが右に移動しています。ついでに蟻もプレイヤーに追随するように移動しているのがわかりますでしょうか。この状態からまた右に移動してみます。


今度はありだけではなく左下にいる犬もプレイヤーに近づいています。
今回はこのような動作をどのようにプログラムしたのか解説します。

～プログラムの説明～

モンスターとプレイヤーの距離を把握する

　今回の動作を実現するにあたり、モンスターがプレイヤーの座標を把握する必要があります。そのため、モンスターオブジェクトに新しくプロパティとメソッドを追加しています。下が追加したプログラムになります。

583行目にthis.dis、584行目にthis.xdis、585行目にthis.ydisを追加しました。　


607~612行目にかけてthis.discalcメソッドを追加しています。
　608行目ではthis.xdisにモンスターのx座標とプレイヤーのx座標の差を代入しています。
　609行目ではthis.ydisにモンスターのy座標とプレイヤーのy座標の差を代入しています。
　610行目でモンスターとプレイヤーがどのくらい離れているかを計算しています。この計算には2点間の距離を求める公式を使っています。
　これらの処理を画像を使って解説します。


プレイヤーとモンスターが上記の位置関係にあるとします。この位置関係を三角形で表すと画像のように、底辺がxdis、高さがydis、斜辺がdisといったように表せます。2点間の距離を求める公式は√(x2-x1)^2＋(y2-y2)^2となります。この式に上記の情報を当てはめることでモンスターとプレイヤーの距離を導くことができます。
　まず、608行目のthis.xdis = (this.px - playerpx)はxdis = (3 - 1)がとなります。答えはxdis = 2になります。
　609行目のthis.ydis = (this.py - playerpy)はydis = (2 - 1)となります。答えはydis = 1になります。
　610行目の2点間の距離の公式に当てはめてみます。 dis = √2^2 + 1^2 となります。
dis = √5となります。これを数字に直すと dis = 2.23606... となります。プログラム上ではどうなっているのか見てみましょう。


　説明と同じ結果になりました。この計算をプレイヤーとモンスターの位置関係が変わる度に行います。
　ちなみに、隣同士にいる場合はxdis、ydisのどちらかが1と0になるため、disの値は1になります。

　これによりモンスターとプレイヤーがx座標、y座標においてどれだけ離れているのかをプログラム上で認識することができました。色々と応用が利きそうですね。

モンスターをプレイヤーに近づける

　それではモンスターをプレイヤーに近づけさせるプログラムの解説に入ります。

モンスターオブジェクトのmoveメソッドです。
　617行目から条件分岐を追加しました。条件はthis.disが1以外の時です。プレイヤーとモンスターが隣同士でないときのモンスターの移動に動作するプログラムです。
　626行目の条件式を加えました。this.disが5よりも上の時です。これは、モンスターとプレイヤー間の距離を計算した結果、5よりも上であるとき（遠い時）にモンスターをランダムに動かすようにしています。


728行目からはthis.disが5以下の時のプログラムです。ここからがモンスターを近づけさせるプログラムになります。
　729行目では変数absxdisにthis.xdisの絶対値を代入しています。730行目でも同じ処理を行っています。
731~738行目ではモンスターがプレイヤーに対して左上にいるときに動作するプログラムを書いています。条件はモンスターのx、y座標がともに負の値の場合です。

　位置関係の考え方を画像を使って説明します。


　コンピュータ上では2次元平面の座標は画面の左上（画像ではaの部分）を(0 , 0)とし、右に進むたびにx座標が増え、下に進むたびにy座標が増えるようになっています。このことから、モンスターがプレイヤーに対して左上にいるときは画像のようになり、プレイヤーから敵の座標を把握した際にはx座標、y座標ともに負の値になるということがわかるでしょうか。

　話を戻します。

　732行目でまた条件式を書いています。条件はxdisがydis以上の時です。この時、敵を右に動かします。
　735～737行目はydisが多きい時の処理で、モンスターを下に動かします。
この条件式は、モンスターがプレイヤーに向かって上下左右に動くとき、均等に動かすために行っています。
　同じような処理をモンスターが右上、左下、右下にいる場合に分けて行っています。

以上がモンスターをプレイヤーに近づけるようにするプログラムです。

おわり

　いかがでしたか。実はこのプログラム、1か月ほど前に作成していてブログを書いている現在は思い出しながら書いています。なので説明を端折っているところや上手く説明できていない点もございますが、なにとぞご了承ください。

参考文献

浅見 尚. "5分でわかる！２点間の距離の公式". TryiT. 
        （2024-10-27参照）
"【JavaScript】算術演算 - 四則演算・剰余・累乗と計算の優先順位". ITHACK. 
        （2024-10-27参照）

コメント

コメントを投稿

このブログの人気の投稿

自己紹介と作成するゲームの説明

初めまして、ひらひさです。 　 趣味はギターとツーリングで、休日はほとんど趣味に費やすか家でダラダラしてます。 プログラミングに興味を持ったきっかけは、小中高とゲームをたくさんやってきた中で、今やっているゲームがどのようにして作られていったのかに興味を持ったからです。 やってきたゲームはポケモンシリーズにモンハンシリーズ、また当時流行っていたゲーム（妖怪ウォッチとか）です。 大学2年生になってからプログラミングに触れました。それまでも情報系の授業でJavaとかPython、CSSとかの名前は知っていたのですが、独学だと重い腰が上がらなかったのでゼミでプログラミングを学ぶことにしました。 ゲームの説明 　今回作るゲームは、ジャンルでいえばローグライクです。 ローグライクとは、ダンジョンに入るたびにマップ、アイテム、敵の数や位置がランダムに決定されるダンジョンをクリアまで導くゲームです。既存のゲームで例えるなら、トルネコの大冒険、風来のシレン、ポケモン不思議のダンジョンが挙げられます。 　少し難しいかもしれませんが、頑張って作っていきたいと思います。 今回は一つのダンジョンを深く深く潜っていくゲームにしたいと考えています。深くなるたびに、敵が強くなり、アイテムが変わり、お邪魔要素を追加したりと、難易度を上げていきたいと考えています。BGMをつけるのもいいかもしれませんね。  とか言っていますが正直どこまでやれるか不安ではあります。理想の形に近づけるように隙間時間を利用して少しづつ更新していきたいです。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015 年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス，2017 年 ＠Tatamo . ”もう一度理解する、JavaScriptの配列とコピー” . Qiita .          2019-12-24 .  https://qiita.com/Tatamo/items/444969a7ff2fbba30479 ,         （2024-07-02参照) akkie.i .  ...
続きを読む

ランダムにモンスターを出現させる

イメージ
 おひさしぶりです。結構更新が開いてしまいました。すみません でも、更新しない間に少しずつモンスターを発生させるプログラムを作成していました。 今回はモンスターを発生させるプログラムの他、少し改良した部分の解説を行います。 ～今回の内容～ 　初期画面です。犬がいます。階段まで移動します。 　階段の近くまで移動しました。この時、下の犬が移動していることがわかると思います。 　階段を上り、次のマップに移動しました。黒い玉ねぎがいますね。階段の近くまで移動します。 　階段の近くまで移動しました。この時、黒い玉ねぎも同時に移動しています。 ～プログラムの説明～ まず、マップにランダムにアイテムを配置するswitch文に、敵キャラを配置する際のプログラムを追加しました。ここでは276～279行目にあたります。 276行目では敵キャラ「オニオン」をマップ上に表示させるプログラムを書いています。 276行目でグローバル変数Enemy1にモンスターオブジェクトのインスタンスを格納しています。この変数Enemy1がオニオンインスタンスになります。引数x, yはマップを読み込む際にスライムが読み込まれたタイミングでのx, y の値となります。 　例）x座標が3, y座標が5のタイミングでスライムが読み込まれた際にスライムのx, y座標もx=3,y=5となり、マップに表示されます。 　また、flag関数を用いることによって、モンスターが出現しているかどうかの判定を行い、モンスターが出現しなかった場合でもプログラムが正常に動作するようにしています。 次に、モンスターの移動をスムーズにするためのプログラムを作成しました。 391行目以降では、マップ上の値が「1」（何も置いていない床）であるときの移動に関するプログラムを書いています。 393行目のif文では敵が左側を向いているかつ左側に壁がある場合のプログラムです。 　このプログラムは敵が永遠に壁側に進もうとして画面上で停止してるように見えてしまうことを防ぐために作りました。 394～397行目では左側（壁側）以外にランダムに進むようにプログラムを作成しました。 同じように上、下、右方向に壁がある場合にスムーズに移動させるようにプログラムを作成しました。 435行目以降はマップ上の値が「2」（通路）であるときの移動に関するプログラムを...
続きを読む

マップをランダムで生成する

イメージ
 今回はマップをランダムで生成するプログラムを作成します。 ～説明～ 　更新ボタンを押します。 　別のマップが表示されます。また更新ボタンを押します。 　またまた別のマップが表示されます。 ～プログラムの説明～ 　今回のプログラムは、既にあるマップデータからランダムで一つのマップを選択するようなプログラムになっています。本当は完全にランダムで画面上に生成したいとは思うのですが、現在の私の知恵と技術では無理がありました。厳しいって。 173 function mapselect() { 174 stage = Math.floor(Math.random() * map.length); 175 px = Math.floor(Math.random()*map[stage].length); 176 py = Math.floor(Math.random()*map[stage].length); 177 if (map[stage][py][px] == 0 || map[stage][py][px] == 2) { 178 mapselect(); 179 } 180 else { 181 return; 182 } 　上記が、今回作成した主なプログラムになります。 まず、ゲームが始まるとinit関数が発動します。init関数の中身は以下になります。 185 function init() { 186 cv = document.getElementById("field"); 187 gc = cv.getContext("2d"); 188 window.addEventListener("keydown", fieldkeydown); 189 mapselect(); 190 fieldpaint(); 191 } 　189行目に mapselect(); があります。これによって、init関数が発動した際に、関数mapselectを発動するようにしています。 では、mapselect関数の中を見ていきます。 　まず、174行目で6つのマップデータの中からランダム...
続きを読む