配列の破壊を防ぐ

 　今回は不具合が起きているマップデータを改良します。

～問題のバグ～

A
　どんどん更新していきます。

B
↓↓↓

C
↓↓↓

D
↓↓↓

E

　どんなバグかというと、前回のマップのデータを引き継いでしまっているんです。このゲームはランダムでマップを表示させて攻略していくという趣旨のもと作成しています。そのマップデータは元からプログラム内に保存されている2次元配列データを使用しています。この画像では、過去にランダムで配置したアイテムや階段のデータを配列が記憶してしまっているため、その記憶したデータをもとにまた階段やアイテムを生成しているのです。画像C、Eを見てください。このゲームはアイテムを配置する際に階段は1つしか配置しないようにしていますが、画像Eでは階段が2つ配置されてしまっています。また、右上の階段と左上のリンゴの位置が同じであることからこの現象がよくわかると思います。

～直していく～

　このバグの根幹には元の配列に上書き（破壊）してしまうというのが原因だと推測しました。それに伴い、元のデータAを複製してデータBを作成し、データBに対して配列の変更作業を行うようにすればよいと考えました。

　これを考えたら、次はネット上で解決策を調べまくります。そこで参考になるサイトを見つけました。

こちらのサイトです。→ https://qiita.com/Tatamo/items/444969a7ff2fbba30479

　このサイトによると、どうやら私が行いたいコピーは、配列に対しては2種類あるようです。それは浅いコピーと深いコピーです。これは、配列の構造によるのですが、普通の配列だと浅いコピーとして扱われるようです。深いコピーは、多重構造の配列に用いられます。私が行いたいのは2次元配列のコピーなので、深いコピーに該当します。

　ここまで来たら残りはJavaScriptで深いコピーのやり方を検索するだけです。

　[Js　配列　深いコピー] [検索]

こちらのサイトが参考になりました。
　深いコピーをしたい場合、StructureCloneというメソッドを使用するのが良いみたいです。どうやらこのメソッドは最近になって標準搭載されたようです。ラッキー＾＾

　その後、色々と改良を加えたプログラムがこちらになります。

　主に変えたのは171行目と175行目です。
　171行目で変数onmap（表示されているマップという意味）を追加しました。
　175行目ではonmapにmap[stage]を代入しています。この操作によって、ランダムに選ばれたマップの配列が複製されます。
　その他、map[stage] と書いたものを全て onmap に変更しました。これによって、複製された配列にランダムに階段やアイテムが表示されるようになります。
　以下が、改良後のマップになります。

おわり

　今回はマップの不具合を直しました。バグが発生した当初は絶望しましたが、思ったより簡単に早く直せてよかったです。
　少しずつではありますが、ゲームが理想の状態に近づいているのがわかります。ここまでくると上手く動かない時があっても楽しめますね。次はどうしましょうか。選択ウィンドウを作るか階層移動画面を作るかですね。

参考文献

＠Tatamo . ”もう一度理解する、JavaScriptの配列とコピー” . Qiita . 
        （2024-07-02参照)

akkie.i . "【JacaScript】オブジェクトのディープコピーが標準機能で使えるようになりま            した" . Zenn . 2023-04-07 .
         https://zenn.dev/akkie1030/articles/js-structured-clone . （2024-07-02参照)

コメント

コメントを投稿

このブログの人気の投稿

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

初めまして、ひらひさです。 　 趣味はギターとツーリングで、休日はほとんど趣味に費やすか家でダラダラしてます。 プログラミングに興味を持ったきっかけは、小中高とゲームをたくさんやってきた中で、今やっているゲームがどのようにして作られていったのかに興味を持ったからです。 やってきたゲームはポケモンシリーズにモンハンシリーズ、また当時流行っていたゲーム（妖怪ウォッチとか）です。 大学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つのマップデータの中からランダム...
続きを読む