質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.35%

ゲーム スコア保持の方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,711
退会済みユーザー

退会済みユーザー

ゲームのランキングスコアを保持したいです。

詳細

現在、タイピングゲームを作成しており、ある程度完成したのですが、一つ問題があることに気づきました。
ページ内ではランキングの更新があると、次のプレイの時にもその上位タイム情報が維持されるのですが、ページを更新、あるいはほかの端末で行うと、そのタイムが保持されないという状況が発生しました。

このタイムをページがリロード(再読込)されても保持するようにはどのように書き換えたらいいのでしょうか。下部に入力してみたJSを置いておきます。ご解答よろしくお願いします。

ランキング表示

順位 初期タイム 1回目終了後 2回目終了後 リロード後
1位 59:59:00 30:00:00 25:00:00 59:59:00
2位 59:59:01 59:59:00 30:00:00 59:59:01
3位 59:59:02 59:59:01 59:59:00 59:59:02
4位 59:59:03 59:59:02 59:59:01 59:59:03
5位 59:59:04 59:59:03 59:59:02 59:59:04

※1回目記録30:00:00/2回目記録25:00:00

ランキング表示のhtml

          <script src="/header.js"></script>
            <script>
        var r=[
          ['23:59.95','abc'],
          ['23:59.96','xyz'],
          ['23:59.97','ijk'],
          ['23:59.98','aaa'],
          ['23:59.99','zzz'],
          ];
          var qs=[
            '',
            ];
            const viewRank=()=>{
              document.querySelector('#rank span').innerHTML=r.map(x=>x.join(" ")).join("<br>");
              };
              window.addEventListener('DOMContentLoaded',()=>{
                viewRank();
                document.querySelector('#start').addEventListener('click',e=>{
                  const t1=e.target;
                  const t2=document.querySelector('#a');
                  t1.disabled=true;
                  t2.disabled=false;
                  const name=prompt("お名前を入力してください。");
                  if(name=="") name="UnKnown";
                  (async()=>{
                    qs=qs.map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
                    const s=new Date().getTime();
                    for(var i=0;i<qs.length;i++){
                      const qStr=qs[i];
                      document.querySelector('#q span').textContent=qStr;
                      t2.value="";
                      t2.focus();
                      await new Promise(resolve=>{
                        const timerId=setInterval(()=>{
                          if(t2.value==qStr){
                            clearInterval(timerId);
                            resolve();
                            }
                            },10);
                            });
                            }
                            const e=new Date().getTime();
                            const diff=e-s;
                            const str=(10000+diff/1000).toString();
                            const time=str.substr(1,2)+":"+
                            str.substr(3,5);
                            r.push([time,name]);
                            //r=await r.sort((x,y)=>x[0]>y[0]).splice(0,5);
                            //以下追加入力
                            r=await r.sort((x,y)=>x[0]>y[0]?1:-1).splice(0,5);
                            viewRank();
                            t1.disabled=false;
                            t2.disabled=true;
                            })();
                            });
                            });
                            </script>
                            <input type="button" value="ゲーム開始!" id="start">
                            <div id="q">Q:<span>ここに問題が表示されます。</span></div>
                            <div>A:<input type="text" id="a"></div>
                            <div id="rank">ランキングトップ5<br>
                              <span></span>
                            </div>


名前入力(ランキング表示の際に使用)

ゲームスタート

終了

ランキング表示

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

「ほかの端末」のデータを保存するにはサーバ側で保存する仕組みを作る必要があります。
当該端末のみの保存であれば Web Storage API でを使えば保存できます。

【Web Storage API - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/29 13:07

    パーミッション設定のことですか?
    パーミッション設定はしたのですが、、、
    ※呼び出し・書き込み・実行すべて許可にしています。
    具体的なサーバーで使える言語・データベースについて名前だけでも1つ挙げていただければ幸いです。

    キャンセル

  • 2019/09/29 18:16

    横槍失礼します。
    helpsさん、その質問になってしまうと、本質問要件から外れていくので、
    別途質問立てられるといいかと思います。
    また、そのままの質問(コメントにての質問)では、丸投げになってしまいますので、
    まずは自分で調べましょう。
    そして、JavaScript(クライアントサイド)では何ができて何ができないのか、
    サーバーサイドでは何ができて何ができないのか、
    ここら辺を、調べ勉強されるといいかと思います。

    キャンセル

  • 2019/09/29 18:48

    アドバイスありがとうございます。回答を参考にしつつ探し、再度質問してみたいと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る