您的位置:首页 > 教程 > 开发工具 > sublime > 基于AndroidFlutter编写贪吃蛇游戏

基于AndroidFlutter编写贪吃蛇游戏

2022-03-31 12:46:13 来源:易采站长站 作者:

基于AndroidFlutter编写贪吃蛇游戏

目录
前言开发步骤:1.定义蛇和豆子2.让蛇动起来3.使用陀螺仪来控制蛇4.让蛇吃掉豆子5.吃掉豆子随机生成一个豆子

前言

放假期间,小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());
}

到此这篇关于基于Android Flutter编写贪吃蛇游戏的文章就介绍到这了,更多相关Flutter贪吃蛇内容请搜索易采站长站以前的文章或继续浏览下面的相关文章希望大家以后多多支持易采站长站!

如有侵权,请联系QQ:279390809 电话:15144810328

相关文章

  • sublime php语法错误提示怎么发现

    sublime php语法错误提示怎么发现

    sublime php语法错误提示的发现方法:首先打开sublime软件;然后在sublime中写入php代码;接着按下快捷键“ctrl+B”,即可在执行过程中显示错误提示。昨晚因为php的某个变量代码写错了,sublime又没有提示语法错误。弄了许久,一段段的调试,最后才知道是取到的变量是空的sublime可以提示php语法错误在sublime写完了php代码后,如果写错了不像eclipse即时
    2020-08-15
  • Sublime Text3简体中文汉化包怎么用

    Sublime Text3简体中文汉化包怎么用

    下面由sublime教程栏目给大家介绍Sublime Text3简体中文汉化包的使用方法,希望对需要的朋友有所帮助!汉化包下载地址:https://github.com/Trojain/sublime-package1、由上面的链接得到的 Default.sublime-package 文件。打开sublime text 3 编辑器,打开菜单 => preferences => Browse Pa
    2020-08-20
  • 关于 Sublime Text 中的 Git

    关于 Sublime Text 中的 Git

    下面由sublime教程栏目给大家介绍Sublime Text 中的 Git,希望对需要的朋友有所帮助!Sublime Text 中的 Git从 3.2 版本开始,Sublime Text 在编辑器内集成了 Git。功能如下:侧边栏将会使用图标来指明文件及文件夹的 Git 状态。被你的 .gitignore 文件所指定忽略的文件以及文件夹会在侧边栏褪色显示。在状态栏,你能够查看当前所在分支以及你做
    2020-08-21
  • Sublime Text3+Markdown配置步骤【图文详解】

    Sublime Text3+Markdown配置步骤【图文详解】

    下面由sublime教程栏目给大家介绍Sublime Text3+Markdown配置步骤【图文详解】,希望对需要的朋友有所帮助!Sublime是一款非常优秀的文本编辑器,可以安装大量的插件,使用Sublime + Markdown更是有一番别样体验,在此只写如何正确配置(以Sublime Text 3为例),使用技巧请参阅相关文章。1.安装Package:Markdown Preview和Ma
    2020-08-22
  • 三步搞定sublime text 3配置

    三步搞定sublime text 3配置

    下面由sublime教程栏目给大家介绍sublime text 3的下载和配置,希望对需要的朋友有所帮助!下载sublime text 3在百度中搜索sublime text 3,进入sublime text官网,官网链接是http://www.sublimetext.com/。下载界面如图所示:点击Download for Windows按钮,下载sublime text 3,需要注意的是这里下
    2020-08-24
  • 分享Sublime Text 3 、WebStorm配置护眼主题(浅绿色)

    分享Sublime Text 3 、WebStorm配置护眼主题(浅绿色)

    下面由sublime教程栏目给大家分享Sublime Text 3 、WebStorm配置护眼主题(浅绿色),希望对需要的朋友有所帮助!本文所用软件版本Sublime Text 3(Build 3143)、WebStorm 2017.2.4(Build #WS-172.4155.35),其他版本软件配置过程可能不一样,请知悉!1.Sublime Text 3护眼主题 (1)下载配置文件 链
    2020-08-26
  • Sublime Merge 是什么

    Sublime Merge 是什么

    下面由sublime教程栏目给大家介绍Sublime Merge,希望对需要的朋友有所帮助!Sublime Merge 是由知名文本编辑器 Sublime Text 开发商打造的 Git 客户端,仅适用于 64 位平台。按开发商的说法,Sublime Merge 融合了 Sublime Text 的 UI 引擎和从零开始的 Git* 实现。所以这一工具继承了 Sublime Text 优雅美观的
    2020-08-27
  • Sublime Text 快捷键列表分享

    Sublime Text 快捷键列表分享

    下面由sublime教程栏目给大家介绍Sublime Text 快捷键,希望对需要的朋友有所帮助!Sublime Text 快捷键列表 快捷键按类型分列如下:1、通用 ↑↓← → 上下左右移动光标 Alt 调出菜单 Ctrl + Shift + P 调出命令板(Command Palette) Ctrl + ` 调出控制台2
    2020-08-29