打算从零开始开发贪吃蛇游戏，写个帖子，记录一下制作过程
先准备一个空项目，当然是熟悉的qt on android框架
0_1524188175385_QQ图片20180420093243.jpg
刚开始什么都没有，先做一个虚拟摇杆
0_1524191936095_QQ截图20180420103825.png
审美不行，只能P成这样，经过测试，显示的角度如图，为啥会是这样结果，暂时不明，不过不影响使用
关于摇杆控制贪吃蛇转向问题，我的设想是以蛇头为自身坐标系，当向上时候，实际以蛇头的方向向前
0_1524202991870_QQ截图20180420134300.png
自身坐标系已经把我绕晕了，改用全局坐标系，虚拟摇杆和qml界面，四象限对应关系
0_1524205926415_QQ截图20180420143148.png
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（一个身位），身体部分设置为前一个位置，实现移动
- 为了去掉一格格闪现效果（卡顿效果），设定移动动画，实现假流畅效果
游戏截图，
0_1524574165718_Screenshot_20180424-203539.jpg
新的设计影响到贪吃蛇从屏幕循环，所以去掉屏幕循环，为了防止蛇跑出屏幕，追加乒乓球效果，就是碰到屏幕反弹
0_1524633827546_QQ截图20180425132334.png
我很笨拙的把四象限挨个判断了一遍，效果还是不错的
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
}
}
}
增加一个加速按钮，可以手动加速爬行
0_1524640903680_Screenshot_20180425-152046.jpg
有了两个按钮，出现了新的问题，因为用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了，支持恢复，重新开始，排行榜，退出
0_1524654206568_Screenshot_20180425-190156.jpg
排行榜界面
0_1524654313544_Screenshot_20180425-190213.jpg
下次加个开始界面
修复
首先修复一个bug，快速轻点加速键，会暂停贪吃蛇，所以为加速键追加了一个长压判断
//长压判断
Timer{
id: timerLongPress
interval: 300
onTriggered: {
//加速键被长压
fire.scale = 0.9
isFired = true
longPressed = false
}
}
开始画面
0_1524719315192_startBg.png
提示
追加操作提示按钮
0_1524721293282_QQ图片20180426134044.jpg
保存数据
使用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"
}
完成
程序下载：下载地址
源代码下载：下载地址
网友评论