位置情報を利用した拠点滞在ゲーム

<h2>位置情報を利用した拠点滞在ゲーム</h2>
<p>
位置情報を利用した拠点滞在ゲームを作りました<br>
これで残業が楽しくなるかもです...<br>
2021/6/19. 倒した敵リストタブページを追加、拠点追加の動作を修正、スクリーンショット画像出力機能追加しました<br>
2023/4/10. 黄金の泉、虹の拠点、拠点追加の動作を修正しました<br>
2023/4/10. 修練所(10コイン消費してランダムに1pt経験値獲得)の機能を追加しました.<br>
2023/4/10. 敵レベルを追加しました.<br>
2023/4/29. 拠点追加の動作を修正しました.<br>
(作成コスト以下で作成できる拠点一種を一日に一個までにしました)<br>
2023/4/30. 今日の進捗タブを追加しました.<br>
2024/11/02. ゲームデータのセーブとロード方法を変更しました(ファイル読み込み式)<br>
</p>
<hr>
<h3>最初に考えた仕様</h3><br>
ゲームを作成するにあたって最初に以下の仕様を考えました（ただし作成時に
いくつかの仕様は変更しました)<br>
<hr>
ゲーム内容<br>
位置拠点ゲーム<br>
ー勝負についてー<br>
攻撃順序は自分→敵の順番で交互に行う<br>
それぞれの対応する一対の攻撃ターン（自分・相手それぞれ一回の攻撃ターン後）は10分おきに更新する<br>
勝負は途中でキャンセル（戦線離脱）できる<br>
敵に勝利すると敵レベルに応じた乱数のコインを取得<br>
自分、相手毎の攻撃後、毎回
勝利/敗北判定する<br>
それぞれの攻撃ごとの後、50パーセントの確率で自己ステータスの上昇あるいは相手ステータスの低下のどちらを発生させるか決める）<br>
上昇あるいは低下が選択されたあとは後述の確率により実際に（上昇/低下）が発生するかを判定する<br>
ー以下アイテムについてー<br>
敵はアイテムを持たない<br>
呼び鈴ーステータス上昇確率変更アイテム<br>
追い鈴ーステータス低下確率変更アイテム<br>
色付き（呼び/追い）鈴は一度に0〜５個ずつまで持てる　持ち鈴はアイテム欄で選択）<br>
対応する色付き鈴一個につきステータス（上昇/低下）時のステータス選択確率を10%を（加算/減算）する）<br>
鈴の耐久力は0〜999）まで上げられる（耐久度を強化するのに1ptにつき5コイン）<br>
鈴の耐久力は毎5ターン後50%の確率で持ち鈴のどれか１つの耐久力が1ptだけ下がる<br>
各鈴の耐久力が0になった時点で効力を失う<br>
ー以下ステータスについてー<br>
赤ー攻撃力<br>
青ー防御力<br>
与えるダメージーmax（（自攻撃力-相防御力）、0）+乱数（1〜10）<br>
受けるダメージー
max（（相攻撃力-自防御力）、0）+乱数（1〜10）<br>
黄ーhp<br>
緑ー回避率<br>
紫ー命中率<br>
攻撃ヒット判定ー<br>
自攻撃時、min （90、max（相回避率ー自命中率、10））の%で攻撃ヒット<br>
相手攻撃時、min（90、max（自回避率ー相命中率、10））の%で攻撃ヒット<br>
ー以下ステータス変化項目ー<br>
ステータス低下・上昇発生時、黄色が選択された場合は、<br>
自上昇時ー乱数（1〜10）の%の自分のhp回復<br>
自低下時ー乱数（1〜10）の%の自分のhp消費<br>
相上昇時ー乱数（1〜10）の%の相手のhp回復<br>
相低下時ー乱数（1〜10）の%の相手のhp消費<br>
白ー自分のステータス上昇発生率<br>
白銅ー相手の起こすステータス低下発生に対する抵抗率<br>
白金ー自分のステータス上昇時の上昇数値<br>
白銀ー相手がステータス低下を発生させたときの防御数値<br>
ステータス低下数値ー<br>
黒ー相手のステータス低下発生率<br>
黒銅ー相手の起こすステータス上昇に対する抵抗率<br>
黒金ー相手のステータス低下発生時の低下数値<br>
黒銀ー相手がステータス上昇を発生させたときの防御数値<br>
自ステータス上昇発生判定ー<br>
min（90、max（自上昇率ー相上昇抵抗率、5））の%でステータス上昇<br>
相ステータス上昇発生判定ー<br>
min（90、max（相上昇率ー自上昇抵抗率、5））の%でステータス上昇））<br>　
自ステータス上昇量ー<br>
自上昇量ー相防御上昇量+乱数（0〜10）<br>
自ステータス低下発生判定ー<br>
min（90、max（相低下率ー自低下抵抗率、5））の%でステータス低下<br>
相ステータス低下発生判定ー<br>
min（90、max（自低下率ー相低下抵抗率、5））の%でステータス上昇））<br>
相ステータス上昇発生判定ー<br>
min（90、max（相上昇率ー自上昇抵抗率、5））の%でステータス上昇））　<br>
自ステータス低下量ー<br>
max（相低下量ー自防御低下量、0）+乱数（0〜10）<br>
相ステータス低下量ー<br>
max（自低下量ー相防御低下量、0）+乱数（0〜10）<br>
ー以下拠点についてー<br>
各拠点は100メートル以上の間隔が必要性<br>
コイン500に付き単色一つの色の位置拠点・黄金の泉を一つ増やせる<br>
コイン1000 につき再生の森・時戻しの砂漠を一つ増やせる<br>
コイン5000につき虹色拠点の位置拠点を１つ作れる<br>
最初はそれぞれ一つずつだけ単色・虹色の位置拠点・再生の森・時戻しの砂漠を設定できる<br>
拠点は一日に一個だけ取り壊しが可能<br>
一種類の拠点が0個となっている場合、一日に一個だけ、0コインで拠点の設置が可能<br>
それぞれの単色の位置拠点では1分いるごとに6ptの対応するステータス上昇用経験値が得られる<br>
黄金の泉では1分いるごとに1ゴールドのお金がもらえる<br>
虹色の位置拠点では1分いるごとに2ptのランダム2種のステータス上昇用経験値が得られる<br>
各色の経験値は10ptにつき1だけ、ステータス上昇に振替できる<br>
時戻しの砂漠では1分いるごとに選択された1ステータスが下がり（最大で1まで）、10ptの、時の砂が得られる<br>
再生の森では1分いるごとに時の砂を10pt消費し、選択されたステータスを上昇させる<br>
ー以下敵についてー<br>
敵はランダム動物画像<br>
ステータスは難易度レベル毎にランダム決定<br>
勝負に負けてもとくにペナルティはなし<br>

これ以上の追加コンテンツは他の開発者に委ねたいです<br>


<hr>
githubURL<a href="https://github.com/NanjoMiyako2/KyotenTaizai1">https://github.com/NanjoMiyako2/KyotenTaizai1</a>

サンプルページURL
<a href="https://nanjomiyako2.github.io/KyotenTaizai1/">https://nanjomiyako2.github.io/KyotenTaizai1/</a>

<hr>
参考にしたサイト
<a href="https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage">Window.localStorage - Web API | MDN</a>
<br>
<a href="https://gray-code.com/javascript/calculate-the-difference-between-two-dates-and-times/">
2つの日時の差分を計算する | GRAYCODE JavaScript
</a>
<a href="https://qiita.com/youwht/items/8b681a856f59aa82d671">
[JavaScript] JSだけでスクリーンショットを撮ってダウンロードもする方法 - Qiita
</a>
<br>
<a href="http://codesjp.etcnotes.info/web/settimeout_sm.html">
スマートフォンWebアプリではスリープ時のsetTimeout()に注意 -Web開発サンプルコード集-</a>
<br>
<hr>
使用した素材
<a href="https://www.photock.jp/">
フリー写真素材フォトック【無料・商用利用可・クレジット表記不要】
</a>
<br>
<hr>
つまづいたところ<br>
googleのマーカのクリックイベントは全体のマーカレイヤのうち一つでも
クリックされたときにまとめて発動するため、クリック後に内部でどのマーカ
がクリックされたかを計算する必要がありました。
<hr>
スクリーンショット
![screenshot1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412430/8cfb490a-3f24-1c3d-cb0b-cf4ac2fd43cf.jpeg)