qml demo分析(samegame-拼图游戏)

 一、效果展示

　　相信大家都玩儿过连连看游戏，而且此款游戏也是闲时一款打发时间的趣事，那么接下来我将分析一款类似的游戏，完全使用qml编写界面，复杂逻辑使用js完成。由于此游戏包含4种游戏模式，因此本篇文章可能会比较长，本篇文章我主要是分析该游戏的主题思路和一些比较难理解的模块，文章末尾我会把示例代码的下载链接附上，示例代码是qt5.7示例代码，位于Qt5.7.0_vs2013\Examples\Qt-5.7\quick\demos\samegame目录下，个人知识添加了大量注释在程序中，逻辑几乎没有修改。

　　如图1所示，是这个游戏简单的示意，要想展示完全合格游戏的所有细节，仅仅靠这一个小的gif图是完全不够的，因此本篇文章不会和以往的示例分析那样，在源码分析过程中没有程序截图，在后续代码分析中我会适当的加入一些游戏过程中的截图。

图1 samgegame简单试玩

二、源码分析

 　　细心的同学可能会发现在1 player模式下，程序出现了最高分的显示，呵呵呵。。。因为那是我玩儿的，这个游戏也使用了简单的本地数据库存储功能，在后续代码分析过程当中这一部分我会单独拉出来讲解。

　　还是同上一篇文章一样，我们还是先来整体分析下工程目录，文件看起来真是多啊，起初我看到这么多文件的时候自己也是挺难以下手，不过当我正真的理解这个程序的设计意图之后，想想就没有那么难了。

图2 工程目录

　　既然我已经把这个示例代码做了整体的理解，那么我就不会那么无脑的一个一个文件讲解，首先我要做的就是把这么写qml进行分类，分类完以后的工程目录就没有图2那么恐怖了，如图3所示是按功能点整理后的工程目录

图3 整理后工程目录

　　接下来我按文件夹分别说明该模块下的qml文件功能

• data：主要负责puzzle模式下提供关卡数据
• emitter：重写了一些例子发射器，每个例子发射器所属组不同，并且设置有不同的参数，例如：例子发射速率、例子生命周期等
• block：色块，分别存储了4种游戏模式下的色块
• control：封装了该示例代码公有的一部分组件，例如Button是封装过后的按钮，点击时可以发出clicked信号
• setting：程序设置，包括初始大小，一些基础布局信息
• 其余：剩下3个qml文件，也是游戏画面中比较关键的积分qml

 1、页面布局

　　一般情况下qml主文件的名字都和工程名字相同，那么本篇示例程序的主程序文件就是samegame.qml文件无疑。由于该文件代码量过大，我就不整篇粘贴了，大家可以在自己安装的qt库的example目录下自行查找，如下代码所示是我对主程序文件进行了大量删减得出的主界面布局，程序中几乎每一行代码都有注释，包括删减的代码依然有大量注释，感兴趣的同学可到文章最后提供的链接进行下载

import QtQuick 2.0
import QtQuick.Particles 2.0
import "content/samegame.js" as Logic
import "content"//导入一个目录  目录下的所有组件可以直接被使用

Rectangle {
    Image {//主窗口背景色  底部菜单栏和顶部信息面板都在该背景图之上
        source: "content/gfx/background.png"
        anchors.fill: parent
    }
    GameArea {//游戏画布
    }
    Item {//游戏启动界面  主菜单  除过底部工具栏以外部分
        //G和S动画
        LogoAnimation {
            x: 64
            y: Settings.headerHeight
            particleSystem: gameCanvas.ps
            running: root.state == ""//游戏未开始时运行
        }
        //Game和Same剩余的3个字母
        Row {
            x: 112
            y: 20
            Image { source: "content/gfx/logo-a.png" }//A
            Image { source: "content/gfx/logo-m.png" }//M
            Image { source: "content/gfx/logo-e.png" }//E
        }
        //四种游戏模式
        Column {
            spacing: Settings.menuButtonSpacing//在context目录下Settings组件中定义的属性
            width: parent.width
            height: parent.height - (140 + Settings.footerHeight)//

            Button {//1 player
                width: root.width
                rotatedButton: true//按钮1支持旋转
                imgSrc: "content/gfx/but-game-1.png"//根据导出属性指定图片地址(相对路径指定方式)
                onClicked: {//自定义信号对于槽
                    if (root.state == "in-game")//如果游戏中则什么事情都不干
                        return //Prevent double clicking
                    root.state = "in-game"//游戏开始后 将游戏状态置位in-game字样
                    gameCanvas.blockFile = "Block.qml"//指定游戏中每个格子实例化时所引用的组件
                    gameCanvas.background = "gfx/background.png"//指定游戏背景色
                    arcadeTimer.start();
                }
                //Emitted particles don't fade out, because ImageParticle is on the GameArea
                system: gameCanvas.ps//按钮中粒子发射器所属粒子系统
                group: "green"//按钮中粒子发射器所属组
                Timer {
                    id: arcadeTimer
                    interval: Settings.menuDelay
                    running : false
                    repeat  : false
                    onTriggered: Logic.startNewGame(gameCanvas)//启动一次新游戏
                }
            }

            Button {//2 players
            }
            Button {//zen
            }
            Button {//puzzle
            }
        }
    }
    Image {//顶部游戏信息面盘
        id: scoreBar
        source: "content/gfx/bar.png"
        width: parent.width
        z: 6
        y: -Settings.headerHeight//默认不显示  在界面以外
        height: Settings.headerHeight
        Behavior on opacity { NumberAnimation {} }
        SamegameText {//当前游戏分数 arcade下显示
            id: arcadeScore
            anchors { 
                right: parent.right; //从界面右侧开始布局
                topMargin: 3; 
                rightMargin: 11; 
                top: parent.top
                }
            text: '<font color="#f7d303">P1:</font> ' + gameCanvas.score//黄色的P1字样+白色字样的游戏分数
            font.pixelSize: Settings.fontPixelSize
            textFormat: Text.StyledText//字体格式
            color: "white"//分数颜色为白色
            opacity: gameCanvas.mode == "arcade" ? 1 : 0//游戏模式为arcade时 显示
            Behavior on opacity { NumberAnimation {} }//透明度使用渐变
        }
        SamegameText {//最高分  arcade下显示
        }
        SamegameText {//玩家一 得分  多人下显示
        }
        SamegameText {//玩家二 得分  多人下显示
        }
        SamegameText {//移动步数  puzzle下显示
        }
        SamegameText {//当前游戏时长  puzzle下显示
        }
        SamegameText {//游戏得分  puzzle下显示
        }
    }

    Image {//底部工具条
        id: bottomBar
        width: parent.width
        height: Settings.footerHeight
        source: "content/gfx/bar.png"
        y: parent.height - Settings.footerHeight;
        z: 2
        Button {//退出按钮
            id: quitButton
            height: Settings.toolButtonHeight
            imgSrc: "content/gfx/but-quit.png"
            onClicked: {Qt.quit(); }//点击退出应用程序
            anchors { left: parent.left; verticalCenter: parent.verticalCenter; leftMargin: 11 }
        }
        Button {//菜单按钮  返回主页
        }
        Button {//开始新的一局
        }
        Button {//puzzle模式下 下一关
        }
    }
}

　　程序根节点是一个Rectangle组件，该组件是整个程序的根，他含有一个总的背景色。然后是游戏画布，游戏画布即除过顶部信息面板和底部工具栏以外的区域，游戏画布顶端紧接着顶部信息面板，底部紧接着底部工具栏顶端。从代码顺序往下分析，然后紧接着的两个大的Item分别就是顶部信息面板和底部工具条，他们两个的id分别是scoreBar与bottomBar。

　　GameArea组件几乎包含了游戏过程中所有的ui交互操作，在该组件中包含有一个粒子系统，游戏当中所有的烟花效果都是由该粒子系统进行实现，粒子系统默认有一种粒子图片，但是其使用Loader还加载了8种粒子图片，以备不同的粒子发射器使用，值得注意的是粒子发射器可以发射同属一个组的粒子图片。

//游戏窗口
import QtQuick 2.0
import QtQuick.Particles 2.0
import "samegame.js" as Logic
import "."

Item {
    Image {//游戏中背景色
        id: bg
        z: -1
        anchors.fill: parent
        source: background;
        fillMode: Image.PreserveAspectCrop
    }

    MouseArea {
        anchors.fill: parent; onClicked: {
            if (puzzleTextBubble.opacity == 1) {
                puzzleTextBubble.opacity = 0;//隐藏关卡提示窗口
                Logic.finishLoadingMap();//根据本地文件数据 加载puzzle游戏数据
            } else if (!swapping) {
                Logic.handleClick(mouse.x,mouse.y);//处理点击事件
            }
        }
    }

    Image {//历史最高分提示窗口
        id: highScoreTextBubble
        opacity: mode == "arcade" && gameOver && gameCanvas.score == gameCanvas.highScore ? 1 : 0
        Behavior on opacity { NumberAnimation {} }
        anchors.centerIn: parent
        z: 10
        source: "gfx/bubble-highscore.png"
        Image {
            anchors.centerIn: parent
            source: "gfx/text-highscore-new.png"
            rotation: -10
        }
    }

    Image {//过关提示  蓝色背景提示
        id: puzzleTextBubble
        anchors.centerIn: parent
        opacity: 0
        Behavior on opacity { NumberAnimation {} }
        z: 10
        source: "gfx/bubble-puzzle.png"
        Connections {
            target: gameCanvas
            onModeChanged: if (mode != "puzzle" && puzzleTextBubble.opacity > 0) puzzleTextBubble.opacity = 0;
        }
        Text {//文本信息
            id: puzzleTextLabel
            width: parent.width - 24
            anchors.centerIn: parent
            horizontalAlignment: Text.AlignHCenter
            color: "white"
            font.pixelSize: 24
            font.bold: true
            wrapMode: Text.WordWrap
        }
    }
    onModeChanged: {//当前游戏模式发送变化 隐藏双人模式下获胜窗口
        p1WonImg.opacity = 0;
        p2WonImg.opacity = 0;
    }
    SmokeText { id: puzzleWin; source: "gfx/icon-ok.png"; system: particleSystem }//puzzle模式闯关胜利
    SmokeText { id: puzzleFail; source: "gfx/icon-fail.png"; system: particleSystem }//puzzle模式闯关失败

    onSwapPlayers: {//双人模式下 鼠标点击后 交换玩家 
        smokeParticle.color = "yellow"
        Logic.turnChange();//交换玩家
        if (curTurn == 1) {
            p1Text.play();
        } else {
            p2Text.play();
        }
        clickDelay.running = true;
    }
    SequentialAnimation {
        id: clickDelay//点击延迟 防止点击速度过快
        ScriptAction { script: gameCanvas.swapping = true; }//
        PauseAnimation { duration: 750 }
        ScriptAction { script: gameCanvas.swapping = false; }
    }

    SmokeText {//提示玩家1 可以操作
        id: p1Text; source: "gfx/text-p1-go.png";
        system: particleSystem; playerNum: 1
        opacity: p1WonImg.opacity + p2WonImg.opacity > 0 ? 0 : 1
    }

    SmokeText {//提示玩家2 可以操作
        id: p2Text; source: "gfx/text-p2-go.png";
        system: particleSystem; playerNum: 2
        opacity: p1WonImg.opacity + p2WonImg.opacity > 0 ? 0 : 1
    }

    onGameOverChanged: {//游戏结束
        if (gameCanvas.mode == "multiplayer") {
            if (gameCanvas.score >= gameCanvas.score2) {
                p1WonImg.opacity = 1;
            } else {
                p2WonImg.opacity = 1;
            }
        }
    }
    Image {//提示玩家1获胜
        id: p1WonImg
        source: "gfx/text-p1-won.png"
        anchors.centerIn: parent
        opacity: 0
        Behavior on opacity { NumberAnimation {} }
        z: 10
    }
    Image {//提示玩家2获胜
        id: p2WonImg
        source: "gfx/text-p2-won.png"
        anchors.centerIn: parent
        opacity: 0
        Behavior on opacity { NumberAnimation {} }
        z: 10
    }

    ParticleSystem{//粒子系统
        id: particleSystem;
        anchors.fill: parent
        z: 5
        ImageParticle {
            id: smokeParticle
            groups: ["smoke"]
            source: "gfx/particle-smoke.png"
            alpha: 0.1
            alphaVariation: 0.1
            color: "yellow"
        }
        Loader {
            id: auxLoader
            anchors.fill: parent
            source: "PrimaryPack.qml"
            onItemChanged: {
                if (item && "particleSystem" in item)
                    item.particleSystem = particleSystem
                if (item && "gameArea" in item)
                    item.gameArea = gameCanvas
            }
        }
    }
}

　　程序中包含有大量SmokeText组件对象和SmokeText组件对象，这些组件都被封装了起来，可以实现特定功能，例如SmokeText是烟花文本，首先提供文本显示功能，随后文本隐藏，并伴随烟花效果。该模块有一个MouseArea组件，铺满了整个GameArea区域，他主要是为了处理游戏过程中的鼠标点击事件。

　　ui展示的最后一个东西就是LogoAnimatin文件了，该文件代码量不大，因此我没有做删减，这个组件实现了一个G和S滚动的效果，如图1中的gis所展示的效果那样。

//程序启动窗口 game和same字样中 g/s切换动画
import QtQuick 2.0
import QtQuick.Particles 2.0

Item {
    id: container //Positioned where the 48x48 S/G should be
    property alias running: mainAnim.running
    property ParticleSystem particleSystem
    property int dur: 500
    signal boomTime
    Image {//S字样
        id: s1
        source: "gfx/logo-s.png"
        y: 0
    }
    Image {//G字样
        id: g1
        source: "gfx/logo-g.png"
        y: -128
    }
    Column {//垂直布局2个元素 以便产生粒子效果
        Repeater {
            model: 2
            Item {
                width: 48
                height: 48
                BlockEmitter {
                    id: emitter
                    anchors.fill: parent
                    group: "red"
                    system: particleSystem//粒子发射器所述粒子系统
                    Connections {//链接container对象的信号
                        target: container
                        onBoomTime: emitter.pulse(100);
                    }
                }
            }
        }
    }
    SequentialAnimation {
        id: mainAnim
        running: true
        loops: -1//无限循环
        PropertyAction { target: g1; property: "y"; value: -128}//界面以外
        PropertyAction { target: g1; property: "opacity"; value: 1}//透明度变为1
        PropertyAction { target: s1; property: "y"; value: 0}
        PropertyAction { target: s1; property: "opacity"; value: 1}
        NumberAnimation { target: g1; property: "y"; from: -96; to: -48; duration: dur}//G字样移动到S字样顶部
        ParallelAnimation {//G字样和S字样同时移动
            NumberAnimation { target: g1; property: "y"; from: -48; to: 0; duration: dur}
            NumberAnimation { target: s1; property: "y"; from: 0; to: 48; duration: dur }
        }
        PauseAnimation { duration: dur }//暂停500ms
        ScriptAction { script: container.boomTime(); }//执行js脚本  发送boomTime信号  id为emitter的BlockEmitter发射器 处理该信号
        ParallelAnimation {//G字样和S字样同时淡出
            NumberAnimation { target: g1; property: "opacity"; to: 0; duration: dur }
            NumberAnimation { target: s1; property: "opacity"; to: 0; duration: dur }
        }
        PropertyAction { target: s1; property: "y"; value: -128}//S移动到界面外
        PropertyAction { target: s1; property: "opacity"; value: 1}//可见
        NumberAnimation { target: s1; property: "y"; from: -96; to: 0; duration: dur * 2}//将S字样移动到A字母平齐位置
    }
}

　　代码中有大量注释，相信大家应该都看得懂，值得注意的是32行的Connections连接，他将该组件的boomTime信号进行了处理，让emitter粒子发射器发生了100ms粒子，并进行关闭。代码最后的mainAnim序列动画，将G和S窗口进行了简单的动画处理，其中PropertyAction是属性动作，可以重置属性值，NumberAnimation时属性动画，将指定属性从from态变为to态，并使用duration指定的时间，如果需要指定js代码，则使用ScriptAction脚本动作。

2、data目录

　　data目录包含的qml文件是最多的，但也缺是最简单的，该目录下的所有文件都是服务于puzzle游戏模式，TemplateBase.qml组件中封装了puzzle游戏模式中的关卡过关评判标准，level*.qml文件都继承自TemplateBase.qml组件，新增了startingGrid属性，用于存储关卡数据，关于其他属性TemplateBase.qml文件中都有具体注释，如图4所示puzzle过关评判标准。

图4 puzzle过关评判标准

3、emitter目录

　　该目录下包含4个文件，除过PrimaryPack文件外都是重写了粒子发射器，PrimaryPack.qml文件主要是提供了粒子发射器发射的粒子图片，在GameArea组件中通过Loader加载器进行了所有粒子图片的加载处理。

• BlockEmitter.qml组件是块粒子发射器，主要用于启动页G和S色块消失时产生烟花效果
• MenuEmitter.qml组件是块粒子发射器，主要用于启动页菜单项被点击消失时产生烟花效果
• PaintEmitter.qml组件是粒子发射器，主要用于游戏过程中色块消失时提供烟花效果

　　重写的粒子发射器主要是针对粒子发射器属性进行了重新赋值。如下BlockEmitter粒子发射器所示

import QtQuick 2.0
import QtQuick.Particles 2.0
// Needed for singletons QTBUG-34418
import "."

Emitter {
    property Item block: parent//父组件
    velocity: TargetDirection{targetX: block.width/2; targetY: block.height/2; magnitude: -40; magnitudeVariation: 40}
    acceleration: TargetDirection{targetX: block.width/2; targetY: block.height/2; magnitude: -100;}
    shape: EllipseShape{fill:true}
    enabled: false;
    lifeSpan: 700; //生命周期周期
    lifeSpanVariation: 100//生命周期振幅
    emitRate: 1000//速率  每秒钟产生1000个粒子
    maximumEmitted: 100 //only fires 0.1s bursts (still 2x old number)
    size: Settings.blockSize * 0.85//粒子初始大小
    endSize: Settings.blockSize * 0.85 /2//最终大小
}

4、block目录

　　连连看游戏总共包含4种游戏模式，其实1 player和2 players模式使用的色块文件是同一个qml文件。

• block.qml：使用与1 player和2 players游戏模式，该色块文件比SimpleBlock.qml色块文件多了一个PaintEmitter粒子发射器，在游戏过重当中主要表现在色块消失后会在背景色上留下一片阴影，如图5所示色块消失时，在界面上留下了红色的效果，随着时间推进该红色残留会逐渐消失。
• PuzzleBlock.qml：puzzle模式下色块，主要是加载色块图片不一样
• SimpleBlock.qml：类似于block.qml色块，只是色块消失时没有颜色残留，烟花效果依然存在

图5 Block消失演示

5、control目录

　　单纯的组件封装

• Button.qml：实现了按钮的基本功能，例如主界面上的游戏菜单选项，底部工具栏的按钮均是该组件对象
• SamegameText.qml：Text封装，主要针对Text的一些属性进行了设置
• SmokeText.qml：带有烟花消失效果的文本窗口

6、setting目录

　　如下代码所示，进行了程序基础值定义

//游戏 属性定义
import QtQml 2.0

QtObject {
    // This height/width is here for desktop testing, otherwise
    // we could just use Screen.width/Screen.height.
    property int screenHeight: 1280
    property int screenWidth: 768

    property int menuDelay: 500

    property int headerHeight: 70
    property int footerHeight: 100

    property int fontPixelSize: 55

    property int blockSize: 64

    property int toolButtonHeight: 64

    property int menuButtonSpacing: 15
}

7、js文件分析

　　除过游戏ui部分，js文件就是该示例代码的灵魂所在，完成了qml不容易控制的逻辑代码

7.1动态加载组件

function changeBlock(src)
{
    blockSrc = src;
    component = Qt.createComponent(blockSrc);
}

7.2创建组件对象

function createBlock(column,row,type)
{
    // Note that we don't wait for the component to become ready. This will
    // only work if the block QML is a local file. Otherwise the component will
    // not be ready immediately. There is a statusChanged signal on the
    // component you could use if you want to wait to load remote files.
    if (component.status == 1){//组件加载完毕Component.Ready
        if (type == undefined)
            type = Math.floor(Math.random() * types);
        if (type < 0 || type > 4) {
            console.log("Invalid type requested");//TODO: Is this triggered by custom levels much?
            return;
        }
        //通过组件创建对象
        var dynamicObject = component.createObject(gameCanvas,//父类
                {"type": type,//导出属性type
                "x": column*gameCanvas.blockSize,
                "y": -1*gameCanvas.blockSize,
                "width": gameCanvas.blockSize,
                "height": gameCanvas.blockSize,
                "particleSystem": gameCanvas.ps});//导出属性particleSystem
        if (dynamicObject == null){
            console.log("error creating block");
            console.log(component.errorString());
            return false;
        }
        dynamicObject.y = row*gameCanvas.blockSize;
        dynamicObject.spawned = true;

        board[index(column,row)] = dynamicObject;
    }else{
        console.log("error loading block component");
        console.log(component.errorString());
        return false;
    }
    return true;
}

7.3启动新的一局游戏

//开始一场新游戏  gc变量类型决定gameCanvas变量类型
function startNewGame(gc, mode, map)
{
    gameCanvas = gc;//初始化当前游戏对象
    if (mode == undefined)
        gameMode = "arcade";//默认为arcade游戏模式
    else
        gameMode = mode;
    gameOver = false;//游戏未结束

    cleanUp();

    gc.gameOver = false;
    gc.mode = gameMode;
    // Calculate board size
    maxColumn = Math.floor(gameCanvas.width/gameCanvas.blockSize);//计算最大列数
    maxRow = Math.floor(gameCanvas.height/gameCanvas.blockSize);//计算最大行数
    maxIndex = maxRow * maxColumn;//计算格子个数
    if (gameMode == "arcade") //Needs to be after board sizing
        getHighScore();//从本地sqlite数据库获取最佳得分


    // Initialize Board
    board = new Array(maxIndex);//申请游戏格子内存
    gameCanvas.score = 0;//初始化游戏参数
    gameCanvas.score2 = 0;
    gameCanvas.moves = 0;
    gameCanvas.curTurn = 1;
    if (gameMode == "puzzle")//如果是puzzle模式 则需要加载关卡数据
        loadMap(map);
    else//Note that we load them in reverse order for correct visual stacking
        for (var column = maxColumn - 1; column >= 0; column--)//循环创建每一个格子上的块  即红色圆形、蓝色圆形或者黄色圆形等
            for (var row = maxRow - 1; row >= 0; row--)
                createBlock(column, row);
    if (gameMode == "puzzle")//如果是puzzle模式 则需要加载历史闯关等级
        getLevelHistory();//Needs to be after map load
    gameDuration = new Date();//游戏开始  开始计时
}

7.4鼠标点击处理游戏进度

function handleClick(x,y)
{
    if (betweenTurns || gameOver || gameCanvas == undefined)
        return;
    var column = Math.floor(x/gameCanvas.blockSize);
    var row = Math.floor(y/gameCanvas.blockSize);
    if (column >= maxColumn || column < 0 || row >= maxRow || row < 0)
        return;
    if (board[index(column, row)] == null)//判断当前点击的块是否为空
        return;
    // If it's a valid block, remove it and all connected (does nothing if it's not connected)
    floodFill(column,row, -1);
    if (fillFound <= 0)
        return;
    if (gameMode == "multiplayer" && gameCanvas.curTurn == 2)
        gameCanvas.score2 += (fillFound - 1) * (fillFound - 1);//两个玩家时  给玩家2加分
    else
        gameCanvas.score += (fillFound - 1) * (fillFound - 1);
    if (gameMode == "multiplayer" && gameCanvas.curTurn == 2)
        shuffleUp();//该玩家2时 向上洗牌
    else
        shuffleDown();//向下洗牌
    gameCanvas.moves += 1;//移动次数加一
    if (gameMode == "endless")
        refill();
    else if (gameMode != "multiplayer")
        victoryCheck();
    if (gameMode == "multiplayer" && !gc.gameOver){
        betweenTurns = true;
        gameCanvas.swapPlayers();//signal, animate and call turnChange() when ready
    }
}

7.5检测游戏是否结束

//检测游戏是否结束
function victoryCheck()
{
    // Awards bonuses for no blocks left
    var deservesBonus = true;//额外奖励
    if (board[index(0,maxRow - 1)] != null || board[index(0,0)] != null)//坐上角和左下角如果有色块 则说明窗口上还有色块
        deservesBonus = false;
    // Checks for game over
    if (deservesBonus){//无色块
        if (gameCanvas.curTurn = 1)//该哪个玩家 给那个玩家加1000分
            gameCanvas.score += 1000;
        else
            gameCanvas.score2 += 1000;
    }
    gameOver = deservesBonus;
    if (gameCanvas.curTurn == 1){//如果是玩家1 操作
        if (!(floodMoveCheck(0, maxRow - 1, -1)))
            gameOver = true;
    }else{
        if (!(floodMoveCheck(0, 0, -1, true)))
            gameOver = true;
    }
    if (gameMode == "puzzle"){
        puzzleVictoryCheck(deservesBonus);//Takes it from here
        return;
    }
    if (gameOver) {
        var winnerScore = Math.max(gameCanvas.score, gameCanvas.score2);
        if (gameMode == "multiplayer"){
            gameCanvas.score = winnerScore;//更新最高分
            saveHighScore(gameCanvas.score2);
        }
        saveHighScore(gameCanvas.score);//保存历史最高分
        gameDuration = new Date() - gameDuration;//计算游戏耗时
        gameCanvas.gameOver = true;//游戏结束
    }
}

7.6从本地sqlite数据库读取历史数据

//从本地sqlite数据库读取最高分
function getHighScore()
{
    var db = Sql.LocalStorage.openDatabaseSync(
        "SameGame",
        "2.0",
        "SameGame Local Data",
        100
    );
    db.transaction(
        function(tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS Scores(game TEXT, score NUMBER, gridSize TEXT, time NUMBER)');
            // Only show results for the current grid size
            var rs = tx.executeSql('SELECT * FROM Scores WHERE gridSize = "'
                + maxColumn + "x" + maxRow + '" AND game = "' + gameMode + '" ORDER BY score desc');
            if (rs.rows.length > 0)
                gameCanvas.highScore = rs.rows.item(0).score;
            else
                gameCanvas.highScore = 0;
        }
    );
}

7.7保存游戏数据到本地sqlite数据库

//保存最高分到本地sqlite数据库
function saveHighScore(score)
{
    // Offline storage
    var db = Sql.LocalStorage.openDatabaseSync(
        "SameGame",
        "2.0",
        "SameGame Local Data",
        100
    );
    var dataStr = "INSERT INTO Scores VALUES(?, ?, ?, ?)";
    var data = [
        gameMode,
        score,
        maxColumn + "x" + maxRow,
        Math.floor(gameDuration / 1000)
    ];
    if (score >= gameCanvas.highScore)//Update UI field
        gameCanvas.highScore = score;

    db.transaction(
        function(tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS Scores(game TEXT, score NUMBER, gridSize TEXT, time NUMBER)');
            tx.executeSql(dataStr, data);
        }
    );
}

三、下载链接

 　　samegame示例分析