落ちゲーアプリ作成５

前回はゲーム終了後に結果発表のページへ遷移することについて検討していた。

ただし、合計点数を他のページへ渡せないでいたためページ遷移方法について悩んでいた。

js のフォルダは指定しない限りどのビューにも反映されるため、

if(document.URL.match(/new/)){window.addEventListener('load', fall)};

と new (ゲーム)画面にのみ適用されるように if 文を利用していたが、

clickCount (合計点数)を表示させたいため、他ページでも共有できるように通常の

window.addEventListener('load', fall);

としてみて、ページ遷移してみたが、 clickCount (点数カウント)はページ遷移後は０点になっていた。

（当然か、、、）と思いました。

setTimeout で hidden にしていたページを時間経過後に表示することにした。

ページの後ろにいるキャラクターをクリックすることが出来ないことを確認。

当初、一定時間経過後に結果表示画面への遷移ボタンを表示し、画面遷移と共に post し、合計点数を表示しようかと考えたが、一定時間経過後に表示するページにも合計点数を表示することにし、ページ遷移せずに結果を表示することに成功した。

// クリックカウント

const gamePoint = document.getElementById("game_point");

const resultPoint = document.getElementById("result_point");

const ninjas =document.getElementById("ninjas");

let clickCount = 0

ninjas.addEventListener("click",() => {

clickCount += 10;

gamePoint.innerHTML = `合計${clickCount}点`;

resultPoint.innerHTML = `合計${clickCount}点`;

});

let clickCount = 0 の変数定義を関数宣言の外にすることにより合計の clickCount の値を console で取得することが出来た。

今までは、上記の clickCount を忍者をクリックすると消える ( remove の "click" によるイベント発火) 関数の中に入れていたが、 clickCount のみを取り出して関数宣言したことによりコードが簡素化された。

console で点数を取得することが出来たので、今後、XHR の非同期通信で点数を post し、保存することが出来ると思われる。

まずはゲーム性の向上と見た目をよくすること、ゲーム音楽・効果音の導入、点数を公開する為のTwitterやインスタへのリンクを作成したい。