介绍

在 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;
}

■ 积分

仅在选项设置未更改时应用排名数据 您是否在结果屏幕中排名？显示 样本更新

下面是一个反映所有这些变化的例子。

看笔通过野岛（) 上.

请尝试排名是否保存。

在最后

这一次，我可以使用本地存储来保存排名。我认为有一些场景可以在web系统上使用本地存储，所以我认为值得了解。

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308632013.html