最高スコアー

データの保存/取り出し
定数、変数定義
スコアー保存
スコアー取得
関数呼び出し
描画
実行

データの保存/取り出し

次の命令でPCにデータを保存し取り出すことができます。

この命令を使い最高スコアーを保存し表示します。

定数、変数定義

保存するスコアーは上位３位までとします。スコアーを保存/取り出すためのキー値を配列可します。

    var SCORE_KEY = ["NO1","NO2","NO3"];       //スコアー管理用キー

1	var SCORE_KEY = ["NO1","NO2","NO3"]; //スコアー管理用キー

それぞれ上位1位～3位に対応します。また取り出した値を格納する変数を設けます。

    var scores=[];          //上位スコアー

1	var scores=[]; //上位スコアー

スコアー保存

保存関数(setScore())を作成します。この関数は保存だけではなく引数のスコアーが上位３位以内に入っているなら入替えます

5行目で引数のスコアーを配列に格納します。そして6行~8行目のソート命令で降順に並び替えます。これでスコアーが高い順で並び替えられるのです。

    /*
    スコアー保存
  */
  function setScore(value){
      scores[3] = value;
      scores.sort(function (a, b) {//降順でソートする
        return b - a;
      });
      //保存
      for(i=0;i<SCORE_KEY.length;i++){  //ランキング分ループ
        localStorage.setItem(SCORE_KEY[i], String(scores[i]));
      }
  }

スコアー保存

function setScore(value){

scores[3] = value;

scores.sort(function (a, b) {//降順でソートする

return b - a;

});

//保存

for(i=0;i<SCORE_KEY.length;i++){ //ランキング分ループ

localStorage.setItem(SCORE_KEY[i], String(scores[i]));

}

スコアーを保存している処理が10行目からのループ処理です。配列可されたキー値を基に値を保存しています。

※ソート処理の詳細はMDN web docsを参照してください。

スコアー取得

保存した値を取得するスコアー取得(getScore())関数を作成します。

5行目でスコアーのキー値分ループしながらキー値を利用して値を取得します。

    /*
      スコアー取得
    */
   function getScore(){
    for(i=0;i<SCORE_KEY.length;i++){  //ランキング分ループ
      var value = localStorage.getItem(SCORE_KEY[i]);//スコアー取得
      if(value) { //変数に格納する
        scores[i] = Number(value);
      }else{      //保存されていなかったら
        scores[i] = 0;
      }
    }  
  }

スコアー取得

function getScore(){

for(i=0;i<SCORE_KEY.length;i++){ //ランキング分ループ

var value = localStorage.getItem(SCORE_KEY[i]);//スコアー取得

if(value) { //変数に格納する

scores[i] = Number(value);

}else{ //保存されていなかったら

scores[i] = 0;

}

値が取得できない場合は10行目でスコアー値を0としています。

関数呼び出し

初期処理(init())でスコアーを取得し終了処理(final())でスコアーを保存します。

    /*
      初期処理
    */
    function init(){
     ・
     ・
        getScore();     //スコアー取得
     ・
     ・
    }

    /*
     終了処理
    */
    function final(){
     ・
     ・
        setScore(Math.floor((final_time-start_time)/1000));//スコアー保存
     ・
     ・
    }

初期処理

function init(){

・

getScore(); //スコアー取得

・

}

終了処理

function final(){

・

setScore(Math.floor((final_time-start_time)/1000));//スコアー保存

・

}

描画

スコアーの描画は既に開始画面処理(drawStart())で固定値を表示していました。ここを変数scoresに書き換えればいいのですが、scoresに格納されている値は秒です。表示は「分：秒」形式で行うため編集する必用があります。そこで編集用関数time_editを作成します。

  /*
    タイム編集
  */
  function time_edit(sa){
    sa = sa/60;
    var min = Math.floor(sa); //分
    var min_disp = ( "00" + min ).slice( -2 );
    var sec = Math.floor((sa - min)*60);//秒
    var sec_disp = ( "00" + sec ).slice( -2 );
    return min_disp+":"+sec_disp;
  }

タイム編集

function time_edit(sa){

sa = sa/60;

var min = Math.floor(sa); //分

var min_disp = ( "00" + min ).slice( -2 );

var sec = Math.floor((sa - min)*60);//秒

var sec_disp = ( "00" + sec ).slice( -2 );

return min_disp+":"+sec_disp;

}

秒数を引数にして呼び出すと「分：秒」で編集した値が返ってきます。

開始画面処理の該当箇所を次の通り変更します。

    /*
      開始画面
    */
    function drawStart(){
      ・
      ・
      ctx.fillStyle = COLOR_SCORE1;     //SCORE RANKING
      ctx.fillText("1."+time_edit(scores[0]),canvas.width/2,canvas.height*2/4+h*1+10,canvas.width*2/4);
      ctx.fillStyle = COLOR_SCORE2;
      ctx.fillText("2."+time_edit(scores[1]),canvas.width/2,canvas.height*2/4+h*2+20,canvas.width*2/4);
      ctx.fillStyle = COLOR_SCORE3;
      ctx.fillText("3."+time_edit(scores[2]),canvas.width/2,canvas.height*2/4+h*3+30,canvas.width*2/4);
      ・
      ・
    }

開始画面

function drawStart(){

・

ctx.fillStyle = COLOR_SCORE1; //SCORE RANKING

ctx.fillText("1."+time_edit(scores[0]),canvas.width/2,canvas.height*2/4+h*1+10,canvas.width*2/4);

ctx.fillStyle = COLOR_SCORE2;

ctx.fillText("2."+time_edit(scores[1]),canvas.width/2,canvas.height*2/4+h*2+20,canvas.width*2/4);

ctx.fillStyle = COLOR_SCORE3;

ctx.fillText("3."+time_edit(scores[2]),canvas.width/2,canvas.height*2/4+h*3+30,canvas.width*2/4);

・

}

実行

スコアーが保存／表示されるか確認します。実行画面へ

ここまでのソースコードを掲載します。

Download Now!