第 6 章 — 实现高分榜

Composer 可访问数据

在大多数情况下，当您使用 Composer 时，场景保持自包含，这意味着您在给定场景中创建的变量、函数和对象仅隔离在该特定场景中。例如，我们在 `game.lua` 中使用的 `lives` 和 `score` 变量仅与该场景关联。

这通常有利于保持应用程序的整洁和有序，但有时您需要从本质上不知道其存在的不同场景访问一个场景中的变量/对象。例如，在本章中，我们需要访问玩家的分数(`game.lua` 中的 `score`)在我们新的 `highscores.lua` 场景中。

Lua 本身提供了多种在模块之间传递和访问数据的方法，但 Composer 通过以下命令使其更加容易

• `composer.setVariable()` — 设置在一个场景中声明的变量，使其在整个Composer 结构的应用程序中都可访问。
• `composer.getVariable()` — 允许您检索先前通过 `composer.setVariable()` 设置的任何变量的值。

掌握了这些命令后，让我们更新 `endGame()` 函数

1. 打开您的 `game.lua` 文件。

2. 找到 `endGame()` 函数并将其内容**替换**为以下两个命令

local function endGame()
    composer.setVariable( "finalScore", score )
    composer.gotoScene( "highscores", { time=800, effect="crossFade" } )
end

3. 保存您修改后的 `game.lua` 文件。

高分榜场景

我们的高分场景将主要具有存储和检索分数、确定十个最高分并显示它们的功能。

首先，复制标准的`scene-template.lua`文件，该文件包含在本章的 源文件中。将此副本重命名为 `highscores.lua`，将其放在您的 `StarExplorer` 项目文件夹中，然后使用您选择的文本编辑器将其打开。

像往常一样，我们将从初始化一些变量开始。将以下代码放在场景可访问的代码区域

-- -----------------------------------------------------------------------------------
-- Code outside of the scene event functions below will only be executed ONCE unless
-- the scene is removed entirely (not recycled) via "composer.removeScene()"
-- -----------------------------------------------------------------------------------

-- Initialize variables
local json = require( "json" )

local scoresTable = {}

local filePath = system.pathForFile( "scores.json", system.DocumentsDirectory )

让我们简要地检查一下这些命令

• 使用第一个命令，我们为我们的应用程序加载一个新的资源：JSON 库。JSON 是一种处理数据的便捷格式。如果您不熟悉 JSON，请不要担心 - 就此应用程序而言，您只需要学习如何使用内置的 `json.encode()` 和 `json.decode()` 命令。相应地，这些命令允许您获取一个 Lua 表，将其内容存储（编码）为易于理解的格式，然后将该数据转换（解码）回 Lua 表。

• 下一个命令，`local scoresTable = {}`，只是创建一个空表，该表最终将包含检索到的分数或要保存的更新分数列表。

• 最后一行生成 JSON 文件（`scores.json`）的绝对路径，我们将使用该文件保存十个最高分。不用担心该文件实际上尚不存在 - 此命令将创建该文件并在变量 `filePath` 下启动指向它的链接。

加载数据

现在我们已经初始化了用于存储分数的文件，让我们编写一个函数来检查先前保存的任何分数。当然，目前还没有任何分数，但我们最终将需要此函数。

紧跟您已经添加到场景可访问的代码区域的命令之后，添加以下 `loadScores()` 函数

local filePath = system.pathForFile( "scores.json", system.DocumentsDirectory )


local function loadScores()

    local file = io.open( filePath, "r" )

    if file then
        local contents = file:read( "*a" )
        io.close( file )
        scoresTable = json.decode( contents )
    end

    if ( scoresTable == nil or #scoresTable == 0 ) then
        scoresTable = { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }
    end
end

剖析此函数，我们完成了以下操作

• 使用包含数据的文件时，第一步是确认该文件是否存在。此函数中的第一个命令，`local file = io.open( filePath, "r" )`，尝试在 `system.DocumentsDirectory` 文件夹中打开文件 `scores.json`（请记住，我们将变量 `filePath` 设置为指向该文件和文件夹）。在此命令中，还要注意第二个参数 `“r”`。这告诉 Solar2D 以仅**读取**访问权限打开文件，但这在这里就足够了，因为我们只需要读取文件内容。

• 在后面的条件块中，如果文件存在，则其内容将被转储到局部变量 `contents` 中。获得其内容后，我们使用`io.close( file )`关闭文件。然后，使用命令 `json.decode()`，我们将 `contents` 解码并将值存储在 `scoresTable` 中 - 基本上，`json.decode()` 将 `scores.json` 转换为可在我们的应用程序中使用的 Lua 表。

• 在最后的条件块中，以防 `scores.json` 文件为空或不存在，我们为 `scoresTable` 分配十个默认值 `0`，以便场景可以使用一些数据。

scoresTable = { 10000, 7500, 5200, 4700, 3500, 3200, 1200, 1100, 800, 500 }

保存数据

保存数据与读取数据一样简单。在之前的函数之后场景可访问的代码区域，添加一个 `saveScores()` 函数

    if ( scoresTable == nil or #scoresTable == 0 ) then
        scoresTable = { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }
    end
end


local function saveScores()

    for i = #scoresTable, 11, -1 do
        table.remove( scoresTable, i )
    end

    local file = io.open( filePath, "w" )

    if file then
        file:write( json.encode( scoresTable ) )
        io.close( file )
    end
end

此函数如下保存高分数据

• 首先，我们从 `scoresTable` 中清除任何不需要的分数。因为我们只想保存最高的十个分数，所以超出此范围的任何分数都可以丢弃。使用 `for` 循环，我们从表的总数（`#scoresTable`）到 `11` 向后遍历表，有效地删除了除十个分数之外的所有分数。

• 接下来，我们打开 `scores.json` 文件。与我们在 `loadScores()` 中的 `io.open()` 调用不同，这里我们将 `“w”` 指定为第二个参数。这告诉 Solar2D 创建（写入）一个新文件或覆盖该文件（如果它已经存在）。它还告诉 Solar2D 以**写入**访问权限打开文件，这很重要，因为在保存分数数据时，我们需要将数据写入文件。

• 文件成功打开后，我们调用 `file:write()` 将 `scoresTable` 数据写入文件，并通过 `json.encode()` 命令将其转换为 JSON。最后，我们使用`io.close( file )`.

显示高分

在向玩家显示分数之前，我们需要稍微操作一下 `scoresTable` 表。具体来说，我们需要将最新的分数添加到表中，然后将表条目从高到低排序。

此场景的所有工作都可以在 `scene:create()` 中完成，因此让我们将注意力集中在该函数上

1. 在我们处理分数数据之前，我们需要加载现有的分数。让我们通过调用 `loadScores()` 函数来做到这一点

-- create()
function scene:create( event )

    local sceneGroup = self.view
    -- Code here runs when the scene is first created but has not yet appeared on screen

    -- Load the previous scores
    loadScores()
end

2. 接下来，让我们将玩家最新的分数插入到 `scoresTable` 表中。请注意，我们是通过调用 `composer.getVariable()` 并使用唯一参数 `“finalScore”` 来获取其值的。这展示了 `composer.setVariable()`命令的强大功能 - 添加到 `game.lua` -用于设置一个Composer 可访问的我们现在可以在此场景 (`highscores.lua`) 中访问的变量。之后，我们立即将其值重置为 `0`，因为我们不再需要进一步记录它。

    -- Load the previous scores
    loadScores()
    
    -- Insert the saved score from the last game into the table, then reset it
    table.insert( scoresTable, composer.getVariable( "finalScore" ) )
    composer.setVariable( "finalScore", 0 )
end

3. 目前，我们不知道我们的分数在现有高分中排名如何。它甚至可能没有超过十个最高分中的最低分！为了检查这一点，让我们对表格的值进行**排序**，从高到低。这将自动将我们的分数放在正确的顺序。如果它不够高，无法进入前十名，它将保留在第 11 位，但由于我们只显示十个分数，因此您不会在屏幕上看到它。

    -- Insert the saved score from the last game into the table, then reset it
    table.insert( scoresTable, composer.getVariable( "finalScore" ) )
    composer.setVariable( "finalScore", 0 )

    -- Sort the table entries from highest to lowest
    local function compare( a, b )
        return a > b
    end
    table.sort( scoresTable, compare )
end

4. 现在表格已排序，让我们通过调用 `saveScores()` 函数将数据保存回 `scores.json`。

    -- Sort the table entries from highest to lowest
    local function compare( a, b )
        return a > b
    end
    table.sort( scoresTable, compare )

    -- Save the scores
    saveScores()
end

5. 接下来，让我们创建场景背景和一个文本对象 — 这里没有什么特别的；现在您已经是专家了！

    -- Save the scores
    saveScores()

    local background = display.newImageRect( sceneGroup, "background.png", 800, 1400 )
    background.x = display.contentCenterX
    background.y = display.contentCenterY
    
    local highScoresHeader = display.newText( sceneGroup, "High Scores", display.contentCenterX, 100, native.systemFont, 44 )
end

6. 接下来，让我们使用一个简单的 `for` 循环从 `1` 到 `10` 来显示分数。对于每个分数，我们将首先通过计算局部变量 `yPos` 来设置预期的 **y** 位置。这将使分数在屏幕上向下排列，并均匀分布。

    local highScoresHeader = display.newText( sceneGroup, "High Scores", display.contentCenterX, 100, native.systemFont, 44 )

    for i = 1, 10 do
        if ( scoresTable[i] ) then
            local yPos = 150 + ( i * 56 )

        end
    end
end

    for i = 1, 10 do
        if ( scoresTable[i] ) then
            local yPos = 150 + ( i * 56 )

            local rankNum = display.newText( sceneGroup, i .. ")", display.contentCenterX-50, yPos, native.systemFont, 36 )
            rankNum:setFillColor( 0.8 )
            rankNum.anchorX = 1

            local thisScore = display.newText( sceneGroup, scoresTable[i], display.contentCenterX-30, yPos, native.systemFont, 36 )
            thisScore.anchorX = 0
        end
    end
end

7. 最后，让我们创建一个按钮（文本对象）以返回菜单。这就像您在菜单场景中创建的文本按钮一样，它的 `"tap"` 事件侦听器将调用一个基本的 `gotoMenu()` 函数，我们将在接下来编写它。

        end
    end

    local menuButton = display.newText( sceneGroup, "Menu", display.contentCenterX, 810, native.systemFont, 44 )
    menuButton:setFillColor( 0.75, 0.78, 1 )
    menuButton:addEventListener( "tap", gotoMenu )
end

离开场景

回到场景可访问的代码区域，我们需要添加处理 `menuButton` 对象的 `"tap"` 事件的函数。这很简单

local function gotoMenu()
    composer.gotoScene( "menu", { time=800, effect="crossFade" } )
end


-- -----------------------------------------------------------------------------------
-- Scene event functions
-- -----------------------------------------------------------------------------------

场景清理

与 `game.lua` 场景类似，让我们在其自身的 `scene:hide()` 函数中移除 `highscores.lua` 场景。当玩家返回菜单场景时，这将从内存中移除该场景。

在 `scene:hide()` 函数中，添加以下突出显示的行

-- hide()
function scene:hide( event )

    local sceneGroup = self.view
    local phase = event.phase

    if ( phase == "will" ) then
        -- Code here runs when the scene is on screen (but is about to go off screen)

    elseif ( phase == "did" ) then
        -- Code here runs immediately after the scene goes entirely off screen
        composer.removeScene( "highscores" )
    end
end

章节概念

我们在本章中介绍了几个更重要的概念