網站首頁 編程語言 正文
前言
放假期間,小T打算回顧一下經典,想用Flutter做一下小游戲,做什么好呢,從打飛機到坦克大戰,最后還是想做一款貪吃蛇,依稀還記得,小時候第一次玩游戲是在父母的小靈通上玩貪吃蛇哈哈,但是光光一個貪吃蛇太單調了,我們就加一個陀螺儀吧~
話不多說,先上效果圖,有圖有真相!!(陀螺儀好難操控)!
開發步驟:
非常簡單,就是玩起來有點費手~
github倉庫還沒有搭建,大家可以先看一下文末通知!
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 heightRange) { ///隨機生成豆子 var rng = Random(); int intWidthRange = widthRange.toInt(); int intHeightRange = heightRange.toInt(); int finalWdith = rng.nextInt(intWidthRange); int finalHeight = rng.nextInt(intHeightRange); double widthPad = finalWdith % size; double heightPad = finalHeight % size; double actualWidth = finalWdith - widthPad; double actualHeight = finalHeight - heightPad; return Offset(rng.nextInt(widthRange.toInt()).toDouble(), rng.nextInt(heightRange.toInt()).toDouble()); }
原文鏈接:https://juejin.cn/post/7010001127949205512
相關推薦
- 2022-12-09 Android入門之ProgressBar的使用教程_Android
- 2022-06-13 Python學習之線程池與GIL全局鎖詳解_python
- 2022-04-02 C語言對冒泡排序進行升級介紹_C 語言
- 2022-12-09 C++使用標準庫實現事件和委托以及信號和槽機制_C 語言
- 2022-06-21 Oracle新增和刪除用戶_oracle
- 2022-12-09 Go?Web實戰之創建項目及增加日志功能_Golang
- 2023-01-26 Redis中的慢日志_Redis
- 2022-09-24 Go?GORM?事務詳細介紹_Golang
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支