从零开始的贪吃蛇游戏

打算从零开始开发贪吃蛇游戏，写个帖子，记录一下制作过程

先准备一个空项目，当然是熟悉的qt on android框架

刚开始什么都没有，先做一个虚拟摇杆

审美不行，只能P成这样，经过测试，显示的角度如图，为啥会是这样结果，暂时不明，不过不影响使用

关于摇杆控制贪吃蛇转向问题，我的设想是以蛇头为自身座标系，当向上时候，实际以蛇头的方向向前

自身座标系已经把我绕晕了，改用全局座标系，虚拟摇杆和qml界面，四象限对应关系

if(angle<0)
        {
            rotationHead.angle = Math.abs(angle) + 90
        }
        else if(angle>=90 && angle <= 180)
        {
            rotationHead.angle = 180-angle+270
        }
        else
        {
            //0-90
            rotationHead.angle = 90-angle
        }

通过timer控制蛇移动

Timer{
        id: timerGame
        interval: 30
        repeat: true
        running: bStartGame
        onTriggered: {
            snake.move(step)
        }
    }

move函数里面一点点移动贪吃蛇，先移动蛇头，根据旋转角度和step计算新的座标，后面的身体和尾巴使用前一个点的座标

贪吃蛇跑出屏幕很不好，我又不想这样算死亡，需要计算屏幕宽度，重置座标，希望蛇跑出屏幕，从另一头再出来

修改

从虚拟遥感到蛇头移动，其实不用座标系转换，计算角度时候我使用的是Math.atan2，这里的参数 是（y, x），我原来用的(x, y)，修正后，不用转换座标系，蛇头就是正常的:loudly_crying_face:

var radian = Math.atan2(snakerCY - centerY, snakerCX - centerX )

传统贪吃蛇都是一格格移动，后一个移动到前一个位置，我想实现很流畅的移动，改用下面这个方案

• Timer设定30ms更新，每次更新蛇头移动10px，身体部分靠角度计算实现移动

现实是残酷的，结果是身体各种乱飞，然后我放弃了这种方案，改为传统一格格移动

• Timer设定500ms更新，每次更新蛇头移动100px（一个身位），身体部分设置为前一个位置，实现移动
• 为了去掉一格格闪现效果（卡顿效果），设定移动动画，实现假流畅效果

游戏截图，

新的设计影响到贪吃蛇从屏幕循环，所以去掉屏幕循环，为了防止蛇跑出屏幕，追加乒乓球效果，就是碰到屏幕反弹

我很笨拙的把四象限挨个判断了一遍，效果还是不错的

function checkScreen(x, y){
        var w = Screen.width
        var h = Screen.height

        var point = Qt.point(x,y)


        if(x<=0 && (rotationHead.angle>=90 && rotationHead.angle<=180)){
            rotationHead.angle = 180-rotationHead.angle
        }
        else if(x<=0 && (rotationHead.angle>=-180 && rotationHead.angle<=-90)){
            rotationHead.angle = -180-rotationHead.angle
        }
        else if(x>=w && (rotationHead.angle>=-90 && rotationHead.angle<=0)){
            rotationHead.angle = -180-rotationHead.angle
        }
        else if(x>=w && (rotationHead.angle>=0 && rotationHead.angle<=90)){
            rotationHead.angle = 180-rotationHead.angle
        }

        if(y<=0 && (rotationHead.angle>=-180 && rotationHead.angle<=-90) ){
            rotationHead.angle = -rotationHead.angle
        }
        else if(y<=0 && (rotationHead.angle>=-90 && rotationHead.angle<=0) ){
            rotationHead.angle = -rotationHead.angle
        }
        else if(y>=h && (rotationHead.angle>=0 && rotationHead.angle<=90) ){
            rotationHead.angle = -rotationHead.angle
        }
        else if(y>=h && (rotationHead.angle>=90 && rotationHead.angle<=180) ){
            rotationHead.angle = -rotationHead.angle
        }


        return point
    }

随着分数的提升，加快蛇的爬行速度

onScoreChanged: {

        //每10分提升一个level的速度(-10)
        //level最大20，对应分数200
        var level = Math.floor(score/10)

        if(level==0){
        }
        else{
            if(speed - 10*level <= 100){
                speed = 100
            }
            else{
                speed = 300-10*level
            }
        }
    }

增加一个加速按钮，可以手动加速爬行

有了两个按钮，出现了新的问题，因为用MouseArea实现的，这两个按钮不能同时按下去

多点触控

为了能同时旋转+加速，采用多点触控，MultiPointTouchArea组件是qml提供的现成的多点触控组件

touchPoints: [
            TouchPoint{
                id: point1
            },
            TouchPoint{
                id: point2
            }
        ]

添加了两个触控点，需要考虑两个点分别占用摇杆和加速键的情况

    property int touchYaoGan: 0     //0=没有，1=触控点1占用，2=触控点2占用
    property int touchSpeed: 0    //0=没有，1=触控点1占用，2=触控点2占用

把两个操作的逻辑在MultiPointTouchArea上又实现了一遍，完成后的体验真酸爽

消减

如果一直不死，游戏缺乏难度，因此追加了，如果碰到边界，会消减一段身体，当然头是不能消得。
这样就变成了，永远不死，但是分数不会无限增加，想加个分数排行榜

菜单

在游戏界面按下手机返回键，显示菜单，菜单界面我很努力的去P了，支持恢复，重新开始，排行榜，退出

排行榜界面

下次加个开始界面

修复

首先修复一个bug，快速轻点加速键，会暂停贪吃蛇，所以为加速键追加了一个长压判断

//长压判断
    Timer{
        id: timerLongPress
        interval: 300
        onTriggered: {
            //加速键被长压
            fire.scale = 0.9
            isFired = true
            longPressed = false
        }
    }

开始画面

提示

追加操作提示按钮

保存数据

使用QSettings 将最大分数进行本地化保存

void MyCommon::saveScore(double score)
{
    QSettings settings(QDir::currentPath()+"/data.ini", QSettings::IniFormat);
    settings.setValue("config/score", score);
}

double MyCommon::getScore()
{
    QSettings settings(QDir::currentPath()+"/data.ini", QSettings::IniFormat);
    double score = 0.0;
    score = settings.value("config/score").toDouble();

    return score;
}

音效

这个吃东西的音效，特别脆

SoundEffect {
        id: playSound
        source: "qrc:/music/music/eat1.wav"
    }

完成

程序下载：下载地址

源代码下载：下载地址