从零开始的贪吃蛇游戏

从零开始的贪吃蛇游戏"/>

从零开始的贪吃蛇游戏

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

先准备一个空项目，当然是熟悉的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-90rotationHead.angle = 90-angle}

通过timer控制蛇移动

Timer{id: timerGameinterval: 30repeat: truerunning: bStartGameonTriggered: {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.widthvar h = Screen.heightvar 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，对应分数200var 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: timerLongPressinterval: 300onTriggered: {//加速键被长压fire.scale = 0.9isFired = truelongPressed = 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: playSoundsource: "qrc:/music/music/eat1.wav"}

完成

程序下载：下载地址

源代码下载：下载地址