介绍
在 11 中，我们添加了选项模式。
这次我想加个排名。
关于排名
我们将使从标题屏幕进入排名屏幕并在那里检查排名成为可能。
基本上，它将与添加最后一个选项屏幕相同。
[过渡图像]
我们使用本地存储来存储排名。
使用本地存储
基本上，只要记住数据的存储、检索和删除这三种类型，就可以应付。
保持
您可以使用 localStorage.setItem( 'key', 'val' ) 或 localStorage.key= 'val' 保存。
localStorage.js
localStorage.setItem( 'key', 'val' );
localStorage.saveKey = 'val';
获得
您可以使用 localStorage.getItem('key') 或 localStorage.key 获取值。
localStorage.js
var val1 = localStorage.getItem( 'key' );
var val2 = localStorage.key;
删除
使用 localStorage.removeItem( 'key' ) 删除特定键的值，
您可以使用 localStorage.clear() 删除所有数据。
localStorage.js
localStorage.removeItem( 'key' );
localStorage.clear();
源代码
首先，添加处理初始化本地存储，并在游戏开始时读取排名数据。
源代码如下。
本地存储初始化、保存、加载
// 変数
var localScores = new Array();
var localRankinPos; // ゲーム後のローカルランキングの順位(1以上:順位、-1:ランク外、-2:オプション設定が初期値ではないため保存無し)
function init(){
{
// ローカルランキングスコア取得
localScores = localStorage.scores;
if( localScores == null ){
// 保存されていない場合は初期化して保存
localScores = new Array( 5 );
for( var i=0; i<localScores.length; i++ ){
localScores[i] = 0;
}
localStorage.scores = localScores;
} else {
localScores = localScores.split( ',' );
}
}
■ 实施要点
- 如果没有数据，则从本地存储读取并设置初始值
- 如果数据已经存在，则设置为变量
* 虽然保存为数组，但实际上是本地存储内部的字符串，所以读取后必须转换为数组变量。
接下来，标题画面的源代码如下。
标题画面
// タイトル画面ループ
function titleMainLoop()
{
drawText( "コインゲット", 0, 20, '#000000', 12, TEXT_HCENTER );
drawText( "ゲーム開始", 0, SC_H - 100, '#000000', 12, TEXT_HCENTER );
drawText( "オプション", 0, SC_H - 70, '#000000', 12, TEXT_HCENTER );
drawText( "ローカルランキング", 0, SC_H - 40, '#000000', 12, TEXT_HCENTER );
if( keyTrg == KEY_UP ){
cursorNum--;
if( cursorNum < 0 ) cursorNum = 0;
}
if( keyTrg == KEY_DOWN ){
cursorNum++;
if( cursorNum > 2 ) cursorNum = 2;
}
// 選択カーソル表示
if( cursorNum == 0 ){
drawFill( 100, SC_H - 98, 12, 12, 0x0000FF, null );
drawFill( 188, SC_H - 98, 12, 12, 0x0000FF, null );
} else if( cursorNum == 1 ){
drawFill( 100, SC_H - 68, 12, 12, 0x0000FF, null );
drawFill( 188, SC_H - 68, 12, 12, 0x0000FF, null );
} else if( cursorNum == 2 ){
drawFill( 78, SC_H - 38, 12, 12, 0x0000FF, null );
drawFill( 208, SC_H - 38, 12, 12, 0x0000FF, null );
}
if( keyTrg == KEY_SPACE ){
if( cursorNum == 0 ){
gameInit(); // ゲーム画面初期化へ
} else if( cursorNum == 1 ){
optionInit(); // オプション画面初期化へ
} else if( cursorNum == 2 ){
localRankingInit(); // ローカルランキング画面初期化へ
}
}
}
■ 积分
- 基本上与之前的选项画面添加相同的修改。
接下来，排名画面的源码如下。
排名画面
// ローカルランキング画面ループ
function localRankingMainLoop()
{
drawText( "ローカルランキング", 0, 15, '#000000', 16, TEXT_HCENTER );
for( var i=0; i<localScores.length; i++ ){
drawText( ""+(i+1)+"位", (SC_W >> 1) - 100, 50+(i*30), '#000000', 12, TEXT_NONE );
drawText( ""+localScores[i]+"", (SC_W >> 1) + 50, 50+(i*30), '#000000', 12, TEXT_NONE );
}
if( keyTrg == KEY_SPACE ){
titleInit(); // タイトル初期化へ
}
}
■ 积分
- 由于“localScores”变量包含5个排名数据，它们按顺序显示。
接下来，将反映排名数据并显示结果。
排名数据反映，结果展示
// ゲーム結果画面初期化
function resultInit()
{
localRankinPos = -2;
if( updateLife == initLife &&
updateCoinChangeScore == initCoinChangeScore &&
updateCoinShowNumScore == initCoinShowNumScore &&
updateCoinShowNum == initCoinShowNum ){
localRankinPos = saveLocalRanking( score );
}
gameState = 2; // ゲーム結果画面ループへ
}
// ゲーム結果画面ループ
function resultMainLoop()
{
// ローカルランキングのランクイン状態表示
if( localRankinPos == -2 ){
drawText( "オプションが変更されているためランキング保存されません", 0, 70, '#000000', 10, TEXT_HCENTER );
} else if( localRankinPos == -1 ){
drawText( "ランク外でした", 0, 70, '#000000', 10, TEXT_HCENTER );
} else {
drawText( "「"+localRankinPos+"位」にランクインしました", 0, 70, '#000000', 10, TEXT_HCENTER );
}
}
//-----------------------------------------------------------
// saveLocalRanking : ローカルランキング保存
// 引数 : 保存データ
// 戻り値 : データ保存位置(-1で保存無し)
//-----------------------------------------------------------
function saveLocalRanking( saveData )
{
var savePos = -1; // データ保存位置
var i;
// データの挿入位置をチェック
for( i=0; i<localScores.length; i++ ){
if( saveData > localScores[i] ){
savePos = i;
break;
}
}
if( savePos != -1 ){ // ランクインした時のみローカルストレージに保存
for( i=localScores.length-1; i>savePos; i-- ){
localScores[i] = localScores[i-1]; // データを1つずらす
}
localScores[savePos] = saveData;
localStorage.scores = localScores;
savePos++;
}
return savePos;
}
■ 积分
- 仅在选项设置未更改时应用排名数据
- 您是否在结果屏幕中排名？显示
样本更新
下面是一个反映所有这些变化的例子。
看笔Qiita23_sample01通过野岛（@noji505) 上代码笔.
请尝试排名是否保存。
在最后
这一次，我可以使用本地存储来保存排名。
我认为有一些场景可以在web系统上使用本地存储，所以我认为值得了解。
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308632013.html