クリアタイムランキングの入力方法

Javascriptでタイピングゲームを作っております。
システムを作成するうえでいくつか不明点があったので、教えていただきたいです。

画面のサンプル

＜ユーザー名登録画面＞
こちらの方はやり方が全く分からない状態です。
ここで入力された文字列を後に表示するランキングに使います。
理想とする画面は以下のような感じです。

＜ゲーム画面＞
こちらは何となく作成してみました。JSを下に入力しておきます。なお、表示は以下のようになっています。

＜ランキング画面＞
ランキングはTOP10あるいはTOP5で考えています。こちらは上記のゲームと組み合わせることができず、単独になってしまいますが、記載します。なお、理想とする画面は以下のような感じです。

上記サンプルは理想とする表示です。
できるだけサンプルを参考にお答えいただきたいです。

HTML・JS・CSS

画面のHTML

HTML
1<!DOCTYPE html>
2<html>
3　<head>
4　　<meta charset="UTF-8" />
5　　<title>typingGame</title>
6　　<link rel="stylesheet" type="text/css" media="screen,print" href="style.css" />
7　</head>
8<body onLoad="disp()">
9    <center>
10            <font size="7" color="blue">
11                    <b>
12                        タイピングバトル！<br>
13                    </b>
14                </font>
15                <font size="5">
16                    <b>
17                        枠内の文字を打ってください。<br>
18                    </b>
19                </font>
20        <form action="#" name="form1">
21            <input type="text" name="field1" size="2"> 時間
22            <input type="text" name="field2" size="2"> 分
23            <input type="text" name="field3" size="2"> 秒
24        </form>
25        <div id="frame"></div>
26        <input type="button" class="button" id="restart" value="restart" onclick="gameSet()">
27        <script type="text/javascript" src="mainGame.js"></script>
28    </center>
29</body>
30</html>
31

ゲーム本体のJavaScript

JavaScript
1//0～25までの乱数を格納する配列
2var rand = new Array();
3//問題の文字列を格納
4var mondai = "";
5//何問目か格納
6var count = 0;
7//問題数
8var queNum = 200;
9
10/*--------------------------------------------*/
11
12//キー状態管理変数の定義
13var KEYS = new Array(256);
14//キーの状態を false （押されていない）で初期化
15for(var i=0; i<KEYS.length; i++) {
16    KEYS[i] = false;
17}
18//キーが押された時に呼び出される処理を指定
19window.onkeydown = function(e) {
20    //キーボードによる自動スクロールの防止
21    e.preventDefault();
22    //キーを押された状態に更新
23    KEYS[e.keyCode] = true;
24    typeGame();
25    
26};
27//キーが離された時に呼び出される処理を指定
28window.onkeyup = function(e) {
29    //キーを離された状態に更新
30    KEYS[e.keyCode] = false;
31};
32//キーコードを格納する配列
33var kCode = new Array(65,66,67,68,69,70,71,72,73,
34                        74,75,76,77,78,79,80,81,82,
35                        83,84,85,86,87,88,89,90);
36//文字を格納する配列
37var Alphabet = new Array("Ａ","Ｂ","Ｃ","Ｄ","Ｅ","Ｆ","Ｇ","Ｈ","Ｉ",
38                         "Ｊ","Ｋ","Ｌ","Ｍ","Ｎ","Ｏ","Ｐ","Ｑ","Ｒ",
39                         "Ｓ","Ｔ","Ｕ","Ｖ","Ｗ","Ｘ","Ｙ","Ｚ");
40
41/*--------------------------------------------*/
42
43//タイピングゲームの問題をセットする
44function gameSet(){
45  //問題文とカウント数とスコアをクリアする
46  mondai = "";
47  count = 0;
48  //0～25までの乱数を queNum 個作成して配列randに格納する
49  for (var i = 0;i < queNum ;i++){
50    rand[i] = Math.floor( Math.random() * 26 );
51  }
52  
53  //問題文の作成
54  for ( var i = 0 ; i < queNum ; i++){
55    mondai =  mondai + Alphabet[rand[i]];
56  }
57  
58  //問題枠に表示する
59  document.getElementById("frame").innerHTML = mondai;
60}
61
62//キー入力を受け取る
63function typeGame(){
64    //入力されたキーコードと、問題文のキーコードを比較
65    if(KEYS[kCode[rand[count]]]){
66        //カウント数を＋１にする
67        count++;
68    
69        //全文字入力したか確認
70        if (count < queNum){
71            //問題文の頭の一文字を切り取る
72            mondai = mondai.substring(1,mondai.Length);
73            //問題枠に表示する
74            document.getElementById("frame").innerHTML = mondai;
75        }else{
76            //問題枠にゲーム終了を表示
77            document.getElementById("frame").innerHTML = "ゲーム終了";
78        }
79    }
80}
81
82/*--------------------------------------------*/
83
84gameSet();
85
86

ランキング表示単体

JavsScript
1//ランキング表示
2ver r={'30:00.00','25:00.00','20:00.00','15:00,00','12:00.00',};
3console.log(r);
4
5(async()=>{
6    var s=new Date().getTime();
7    await new Promise(resolve=>{
8       setTimeout(()=>resolve(),25000);  //新たな記録[25秒]を追加と仮定
9    });
10    var e=new Date().getTime();
11    var diff=e-s;
12    var time=(100+diff/100000).toString().substr(1,2)+":"+(100+diff/1000).toString().substr(1,2)+"."+(100+diff/10).toString().substr(1,2);
13r.push(time);
14r=r.sort().splice(0,5);
15console.log(r);
16})();

画面表示CSS

CSS
1* {
2    margin: 0;
3    padding: 0;
4    border: 0;
5  }
6  
7  body {
8    background-image: url(BGdesign.gif);
9    font: 30px sans-serif;
10  }
11  #frame{
12    background: #ffffff;
13    font: 30px sans-serif;
14    border:8px double navy;
15    width:400px;
16    height:300px;
17    font-size:18pt;
18    overflow:auto;
19  }
20  #frame:first-letter{
21    color:#5bc0de;
22  }
23  #restart{
24    margin-left: 10px;
25    background: #BDBDBD;
26    border-bottom: solid 3px #888;
27    border-radius: 20px;
28    width: 100px;
29    height: 50px;
30  }

わからないこと

・ユーザー名の保存の仕方
・クリアタイムの測定
・クリアタイムの早い順のランキングTOP10
（TOP10が多ければTOP5で構いません。）
です。
たくさんのことを聞いてしまい、申し訳ございません。

お手数おかけしますが、よろしくお願いします。

miyabi_pudding

2019/09/24 01:06

質問本文に画像は貼り付けできます。わざわざサーバーのHTMLで質問している理由はなんですか？まさかマルチポストしているんじゃないでしょうか？と疑われてしまいますよ。 HTML文作ってる時間を、調べたり、自分でまずはやってみたりなどの時間に割いた方が、出来上がる気がしますが・・・。とにかく、質問のことを、まずは自分でやってみたコード、自分でどこまで調べ、ここがどうしてもわからなかった、と具体的に質問しましょう。今のままだと、丸投げの作業依頼になってしまってます。

Lhankor_Mhy

2019/09/24 07:02

JavaScript だけでは実現できないと思います。サーバ側のコーディングが必要です。

退会済みユーザー

2019/09/24 07:04

Lhankor_Mhyさんそうでしたか！ありがとうございます。

退会済みユーザー

2019/09/24 07:06 編集

miyabi_takatsukさん他のサイトでも質問したのですが、その際に画像が貼り付けられなかったため、HTMLで先に作成しております。誤解の無いよう、編集させていただきます。

miyabi_pudding

2019/09/25 04:22

他のサイトでも質問した、ということを、マルチポストと言います。推奨されない行為ですので、次からはやらないようにしましょう。 https://teratail.com/help#posted-otherservice

行動規範の内容に同意します

回答1件

ベストアンサー

前回の処理からデータの持ち方を変えるだけです

javascript
1var name="myname";
2var r=[
3  ['00:01.00','abc'],
4  ['00:02.00','xyz'],
5  ['00:03.00','ijk'],
6  ['00:04.00','aaa'],
7  ['00:05.00','zzz'],
8  ];
9(async()=>{
10  var s=new Date().getTime();
11  await new Promise(resolve=>{
12    setTimeout(()=>resolve(),2500);
13  });
14  var e=new Date().getTime();
15  var diff=e-s;
16  var str=(10000+diff/1000).toString();
17  var time=str.substr(1,2)+":"+
18           str.substr(3,5);
19  r.push([time,name]);
20  r=await r.sort((x,y)=>x[0]>y[0]).splice(0,5);
21  console.dir(r);
22})();
23