拿来吧你! Flutter贪吃蛇 — 陀螺仪至尊VIP版
中秋快乐!!!
前言:放假期间,小T打算回顾一下经典,想用Flutter做一下小游戏,做什么好呢,从打飞机到坦克大战,最后还是想做一款贪吃蛇,依稀还记得,小时候第一次玩游戏是在父母的小灵通上玩贪吃蛇哈哈,但是光光一个贪吃蛇太单调了,我们就加一个陀螺仪吧~
话不多说,先上效果图,有图有真相!!(陀螺仪好难操控)
开发步骤:
非常简单,就是玩起来有点费手~
源码在最后哦,直接运行即可
1.定义蛇和豆子
2.让蛇动起来
3.使用陀螺仪来控制蛇
4.让蛇吃掉豆子
5.吃掉豆子随机生成一个豆子
1.定义蛇和豆子
///蛇的每一块的大小
const double size = 10;
Offset ball = Offset.zero;//豆子
List<Offset> snakeList = [Offset(50, 0), Offset(60, 0)];//蛇的长度
显示豆子和蛇:
使用Stack是因为豆子在被蛇吃的时候会重叠
使用Positioned来进行定位
body: Stack(children: snakeList.map((snake) => Positioned.fromRect(rect: Rect.fromCenter(center: adjust(snake), width: size, height: size),child: Container(margin:const EdgeInsets.all(1),color: Colors.black)))//加个外边距使每一块更清晰.toList()..add(Positioned.fromRect(rect: Rect.fromCenter(center: adjust(ball), width: size, height: size),child: Container(color: Colors.orange))),)
Offset adjust(Offset offset) {return Offset(offset.dx + size / 2, offset.dy + size / 2); //使每一块更好的展示出来
}
2.让蛇动起来
在这里我们要先给蛇来一个状态定义:
///控制蛇的状态
enum Direction { Up, Down, Left, Right }
因为蛇要一直动,所以给一个周期函数:
1.定义200毫秒动一次
2.处理更新蛇的长度
3.求余的好处在于优化吃豆子,因为随机生成豆子时,可能是个不会被整除的。
Direction direction = Direction.Left; //给蛇设置一个状态,默认向左移动
///周期函数void didChangeDependencies() {///两百毫秒的周期函数var period = Duration(milliseconds: 200);///对蛇的长度进行优化double maxWidth = MediaQuery.of(context).size.width;double widthPad = maxWidth % size;maxWidth -= widthPad;double maxHeight = MediaQuery.of(context).size.height;double heigthPad = maxHeight % size; //这里除于是为了更好的游戏体验maxHeight -= heigthPad;///周期调用///用于贪吃蛇的自己移动,以及碰撞检测Timer.periodic(period, (timer) {final snakeHead = snakeList[0];List<Offset> newSnakeList = List.generate(snakeList.length, (index) {if (index > 0) {return snakeList[index - 1];} else {///移动处理switch (direction) {case Direction.Up:return Offset(snakeHead.dx,(snakeHead.dy - size + maxHeight) % maxHeight); //求余是保证不会超标case Direction.Down:return Offset(snakeHead.dx, (snakeHead.dy + size + maxHeight) % maxHeight);case Direction.Left:return Offset((snakeHead.dx - size + maxWidth) % maxWidth, snakeHead.dy);case Direction.Right:return Offset((snakeHead.dx + size + maxWidth) % maxWidth, snakeHead.dy);}}});setState(() {snakeList = newSnakeList; //更新蛇的状态});});super.didChangeDependencies();}
3.使用陀螺仪来控制蛇
Flutter使用陀螺仪需要借助一个库:sensors 或者sensors_plus,两者没有太大的区别
这个demo使用:
sensors: any
官方给的例子:
import 'package:sensors/sensors.dart';accelerometerEvents.listen((AccelerometerEvent event) {print(event);
});
// [AccelerometerEvent (x: 0.0, y: 9.8, z: 0.0)] 加速度userAccelerometerEvents.listen((UserAccelerometerEvent event) {print(event);
});
// [UserAccelerometerEvent (x: 0.0, y: 0.0, z: 0.0)]gyroscopeEvents.listen((GyroscopeEvent event) {print(event);
});
// [GyroscopeEvent (x: 0.0, y: 0.0, z: 0.0)] 陀螺仪
我们在initState对陀螺仪进行监听:
这里有x,y,z的三个参数,也可以自己优化调试,5.0是当手机倾斜>=45°
@override
void initState() {super.initState();accelerometerEvents.listen((AccelerometerEvent event) {setState(() {_accelerometerValues = <double>[event.x, event.y, event.z];if(_accelerometerValues[0] >= 5.0){ direction = Direction.Left;}else if(_accelerometerValues[1] >= 5.0){direction = Direction.Down;}else if(_accelerometerValues[0] <= -5.0){direction = Direction.Right;}else if(_accelerometerValues[1] <= -5.0){direction = Direction.Up;}});});
}
4.让蛇吃掉豆子
还是在刚刚的周期函数里添加:
当蛇头碰到豆子时,给蛇加一格
if(newSnakeList[0] == ball){newSnakeList..add(snakeList[snakeList.length - 1]);setState(() {ball = randoowPositon(maxWidth, maxHeight); //随机生成一个豆子,randoowPositon方法在后面});
}
5.吃掉豆子随机生成一个豆子
对豆子的生成也需要优化一下
Offset randoowPositon (double widthRange,double heigthRange){///随机生成豆子var rng = Random();double widthPad = widthRange % size;widthRange -= widthPad;double heigthPad = heigthRange % size; //这里除于是为了更好的游戏体验heigthRange -= heigthPad;return Offset(rng.nextInt(widthRange.toInt()).toDouble(),rng.nextInt(heigthRange.toInt()).toDouble());
}
ok到这里就完成了,需要源码的,给该文章点个赞,在我的主页有交流群,源码已经上传~
这游戏好玩是好玩,就是费手,哈哈,来个大神优化一下吧
添加我为你的好友,领取源码以及Flutter学习资料~
加入我们吧,一起学习,一起进步~
我是小T,我们下期再见~
拿来吧你! Flutter贪吃蛇 — 陀螺仪至尊VIP版相关推荐
- 贪吃蛇大作战JavaFx版完整源码
贪吃蛇大作战 Java版 项目源码:https://github.com/silence1772/JavaFX-GreedySnake (记得点star啊,收藏一个项目最好的方式是star而不是for ...
- c语言联机游戏,C/C++ 游戏 贪吃蛇双人对战版
贪吃蛇双人对战版--C语言 最近写的,用于交最后一次结构化程序设计课的作业,闲暇之余传到网上,仅供参考,新手上路,请多指教. 话不多说,先附上下载链接.http://download.csdn.net ...
- 贪吃蛇大作战撞墙不死c语言,贪吃蛇大作战无敌版
贪吃蛇大作战无敌版是款好玩的休闲类的游戏,游戏中拥有十分简单的画风,玩法十分的简单,你在游戏中简直是无敌的存在,贪吃蛇大作战无敌版撞到别人身上不会死,还可以随意翻出去,让你从此横行霸道于群蛇之间.玩法 ...
- 用javascript+jquery编写的小游戏-贪吃蛇(双人对战版)
前言 这是我在多年前初学jquery, 并结合javascript, 编写的一个小游戏.那洋洋洒洒几千行的js代码时刻提醒着我"不忘初心!". 效果演示 代码 引入文件 由于用到了 ...
- Java贪吃蛇360旋转,贪吃蛇大作战360版
贪吃蛇大作战360客户端带你享受最轻松.最愉悦的休闲游戏,游戏中比拼的不仅是手速,还有技巧,更加考验你的策略!比赛刚开始时大家都是小蛇,这时候就要通过不断努力来把自己变成巨无霸,这样才能更加轻松的取得 ...
- 12行贪吃蛇html,贪吃蛇大作战无敌版
贪吃蛇大作战无敌版下载是一款贪吃蛇类手游,在贪吃蛇大作战无敌版下载游戏中蛇分两种,蛇越多身体越笨重,但伤害也就越高,小蛇虽然伤害不高,但身体非常灵活,可以非常轻快地躲避大蛇的攻击,还等什么赶快来下载游 ...
- 简易贪吃蛇小游戏java版_用GUI实现java版贪吃蛇小游戏
本文实例为大家分享了java版贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 项目结构 新建一个JFrame窗口,作为程序入口 public class GameStart{ public stat ...
- C++贪吃蛇的简单实现版
近期看完C++Primer,决定小试身手,碰巧看到某博主用C++实现了贪吃蛇,所以我也决定试一试. C++编程的核心思想之一就是OO思维(面向对象思维),需要一定的抽象能力,同样还需要更好的封装. 大 ...
- 贪吃蛇(C语言版)链表实现
贪吃蛇 gitee:贪吃蛇C语言版: Snake 蛇的结构 typedef struct Snake {int x;int y;struct Snake *next; }; 游戏开始欢迎界面 //游戏 ...
最新文章
- Dubbo负载均衡原理
- linux telnet 权限,允许telnet 通过root用户进行访问
- 信息学奥赛一本通 1095:数1的个数 | OpenJudge NOI 1.5 40
- Daily scrum 12.19
- Linux Tun/Tap网口(/dev/net/tun)的读写方法
- M语言中的操作符说明:数字以及时间相关的操作符
- 首届“十大最具价值”互联网创新创业项目遴选榜单丨Xtecher联合中投协权威发布...
- mt管理器图片在哪个文件夹_MT管理器构造(新手小白教程)-小白文件管理器
- HTML初识——网页设计html基础
- FPGA学习网站推荐
- UVA - 1589 Xiangqi (象棋)
- VSCode 的扩展包C/C++ IntelliSense, debugging, and code browsing的IntelliSense功能无法使用,远程服务器linux上面的不能用
- python绘制图形界面(一)
- python金融实战 源代码_Python金融股票爬虫实战源码大全
- html写钢琴键盘按键错乱,键盘按键错乱怎么修复
- 齐岳合成黄光磷光材料Ir(CzPPya)3|Eu(TAA)3(apt)Ho(TAA)3(apt)
- 【转】光荣的传统,荣耀的历史,勇敢的心!
- 杭州云栖·2050大会-团聚召集人手册
- 一知半解学CubeMX——GPIO:LED
- 程序创业会有哪些坑?