让我们做一个简单的游戏(输赢)


让我们做一个简单的游戏

首次使用JavaScript完成"#11让我们做一个简单的游戏"后，
我突然想到了它，所以我用Flutter做到了。

规格

  • 有5个正方形，其中1个将随机成"赢"，而4个则成"输"。
  • 当"丢失"被选中，"输了！"显示在单元格中。
  • 在显示" Lose！"的同时，正方形变小。
  • 选择" Win"时，单元格中将显示" Win！"。
  • 在显示" Win！"的同时，正方形从蓝色变为粉红色，并且在旋转时，正方形从正方形变为圆。

    • 这样的地方吗？

    尝试使

    目前，以下是操作砝码的源代码。
    如果您能教我如何更有效地写作，如何操作以及如何以良好的方式进行写作，我将不胜感激。

    • 获胜者被随机设置为"获胜"。
    • 使用for语句创建一个单元格，如果列表的索引与获胜者匹配，则操作" Win"，否则执行" Lose"操作。
    • RotationTransition用于旋转正方形，而Animated Padding和Animated Container用于更改正方形的大小和颜色并插入字符。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    class MyCard extends StatefulWidget{
      MyCard({Key key, this.index}) : super(key: key);

      final int win = winner;
      final int index;

      @override
      _MyCardState createState() => _MyCardState();
    }

    class _MyCardState extends State<MyCard> with SingleTickerProviderStateMixin {
      Color _mycolor = Colors.blue[500];
      String _mytxt = '';
      double _width = 100, _heigth = 100, _padding = 10, _radius = 0;

      final Tween<double> turnsTween = Tween<double>(
        begin: 1,
        end: 2,
      );
      AnimationController _controller;

      initState() {
        _controller = AnimationController(
          vsync: this,
          duration: const Duration(seconds: 1),
        );
        super.initState();
      }

      @override
      Widget build(BuildContext context) {
        return card();
      }

      void _winorlose(){
        setState(() {
          if (widget.index == widget.win) {
            _mycolor = Colors.pink[100];
            _mytxt = 'Win!';
            _radius = 100;
            _controller.forward();
          } else {
            _mytxt = 'Lose!';
            _width = 80;
            _heigth = 80;
            _padding = 20;
          }
        });
      }

      Widget card() {
        return GestureDetector(
          onTap: () {
            _winorlose();
          },
          child: RotationTransition(
            turns: turnsTween.animate(_controller),
            child: AnimatedPadding(
              duration: const Duration(milliseconds: 500),
              padding: EdgeInsets.all(_padding),
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 500),
                width: _width,
                height: _heigth,
                child: Center(
                  child: Text(_mytxt),
                ),
                decoration: BoxDecoration(
                  color: _mycolor,
                  borderRadius: BorderRadius.circular(_radius),
                ),
              )
            ),
          ),
        );
      }
    }

    原来是这样的

    在最后

    感谢您的阅读。
    顺便说一句，我无人值守Google Maps的操作。 .. ..