Пишем Тетрис на Flutter

Дело было вечером, делать было нечего (с)..В качестве разминки решил в кои-то веки написать игру. Пришла на ум идея написать давнюю мечту — тетрис. В т.ч. использовать будем более ранние наработки по работе с Hive и Requets оформленные в виде отдельных классов.

Из интересного:

1) Для отображения стакана и фигур используем три массива:

LandMatrix — массив вида ширина/высота — фактически «стакан» с «приземленными» фигурами. Точка пересечения массива — цвет квадратика. Если пусто — значит в точке стакана ничего нет

MoveFig — массив движущейся по стакану фигуры. В момент совпадения низа фигуры с любой не пустой точкой стакана фигура переносится в «стакан»

ShadowRotareFig — вспомогательный массив, используемый для поворота фигуры. В момент когда фигуру необходимо повернуть, она переносится из MoveFig в этот массив, поворачивается, и переносится обратно в MoveFig. Создание отдельного массива для поворота было обусловлено способом хранения фигур — хранится не матрица, а просто массив текущих координат квадратиков из которых составлена фигура.

2) Отрисовка стакана происходит после того, как фигура перенесена в массив стакана. Причины переноса — касание дна стакана.

List <Widget> MyLandView(){
    int poz=0;
    return List<Widget>.generate(lh, (int index_h){
      return Row(
        children:
        List<Widget>.generate(lw, (int index_w){
          poz++;
          Color BoxColor=FigColors[99]??Colors.black;
          if (MovedFig.contains(poz)==true){
            BoxColor=FigColors[fcurrent]??Colors.black;
          };
          Coords crd=Poz2Coors(poz);
          // если в стакане что-то есть - рисуем
          if (LandMatrix[crd.y][crd.x]>0){  // если  клетка не пустая
            BoxColor=FigColors[100]??Colors.black;
          };
          if (LandMatrix[crd.y][crd.x]==101){  //
            BoxColor=FigColors[101]??Colors.black;
          };
          if (BoxColor==FigColors[100]){
            //определяем это верхний блок или под ним еще что есть?
            bool ground_top=false;
              Coords crd_tmp=Poz2Coors(poz-lw);
              print("Строчка: ${crd.y},${crd.x}");
              print("Строчка вниз: ${crd_tmp.y},${crd_tmp.x}");
              if (crd_tmp.y>0) {
                if (LandMatrix[crd_tmp.y][crd_tmp.x] >0) {
                  print("-- ниже  есть земля!");
                  ground_top = true;
                }
              }
            return
                Container(
                  color: BoxColor,
                  height: MediaQuery.of(context).size.height/lh,
                  width: MediaQuery.of(context).size.width/lw,
                  child:
                    Image.asset(
                        !ground_top?"lib/images/ground.png":"lib/images/ground_full.png",
                      height: 10,
                      width: 10,
                      fit: BoxFit.fill,
                    ),
                );
          } else {
            return
              Padding(
                  padding: EdgeInsets.all(1),
                  child:
                  Container(
                    color: BoxColor,
                    height: MediaQuery.of(context).size.height / lh - 2,
                    width: MediaQuery.of(context).size.width / lw - 2,
                    //child: Text("$poz")
                  )
              );
          };
        }),
      );
    });
  }

3) При старте игры назначаем периодический таймер, при выполнении которого фигура движется на линию ниже. При движении выполняется проверка касания дна в стакане.

  void StartTimer(context){
    timer = Timer.periodic(Duration(seconds: 1), (Timer _) {
      DestroyFullLines();
      print("Сработал таймер..");
      MoveFigDown(context);
    });
  }
  // двигаем фигуру вниз
  void MoveFigDown(context){
      if (GameOver==true) {return;};
      bool move=true;
      // проверим,при следующем шаге, ни одна ли из точек не достигнет дна колодца при движении вниз?
      for (var i = 0; i < MovedFig.length; i++) {
        // проверка дна колодца
        if ((MovedFig[i] + lw)>lw*lh){
          move=false;
        };
        // проверка что наезд на другую фигуру
        Coords crd=Poz2Coors(MovedFig[i] + lw);
        if (MovedFig[i] + lw<=lw*lh) {
          if (LandMatrix[crd.y][crd.x] > 0) {
            move = false;
          };
        };
      };
      if (move==true) {
        for (var i = 0; i < MovedFig.length; i++) {
          MovedFig[i] = MovedFig[i] + lw;
        };
      };
      // если не можем двигаться вниз, то переносим фигуру в "стакан"
      if (move==false){
        print("-переносим фигуру в стакан");
        for (var i = 0; i < MovedFig.length; i++) {
          Coords crd=Poz2Coors(MovedFig[i]);
          LandMatrix[crd.y][crd.x]=1;
        };
        DestroyFullLines();
        // создаём новую фигуру
        FigureSelections();
      };
      setState(() {
        MovedFig=MovedFig;
      });
    print("Фигура двинулась вниз: ${MovedFig}");
      String audioasset = "lib/sounds/click.mp3";
      AssetsAudioPlayer.newPlayer().open(
          Audio(audioasset)
      );
  }

4) Поворот фигуры, как уже писал выше осуществляется переносом фигуры в матрицу, поворот матрицы и обратный перенос фигуры

  // поворачиваем блок
  void RotateFig(context){
    print("До поворота: ${MovedFig}");
    List <int> OldFig=List<int>.from(MovedFig); //запоминаем фигуру и положение до поворота

    // найдем минимальные координаты x и y до поворота
    Coords crd_before_rotare=GetStartXYFigure(MovedFig);
    print("min_x=${crd_before_rotare.x},min_y=${crd_before_rotare.y}");

    // передвинем фигуру в центр
    int center_x=4;
    int center_y=4;

    MovedFig=FigureMove(center_x,center_y,MovedFig);

    for (var i = 0; i < MovedFig.length; i++) {
      Coords crd=Poz2Coors(MovedFig[i]);
      int new_x=(crd.x * cos(3.1415926535897932/2) - crd.y * sin(3.1415926535897932/2)).round();
      int new_y=(crd.x * sin(3.1415926535897932/2) + crd.y * cos(3.1415926535897932/2)).round();
      MovedFig[i]=Coors2Poz(new_x,new_y);
      //print("x=${new_x},y=${new_y}");
    };
    MovedFig=FigureMove(crd_before_rotare.x-2,crd_before_rotare.y,MovedFig);

    print("После поворота: ${MovedFig}");
    // проверяем, а можно ли было поворачивать?
    if (MovedFig[0]==-1){
      MovedFig=OldFig;
    }
    // проверяем, а нет ли наложения элементов на то что уже в стакане?
    for (var i = 0; i < MovedFig.length; i++) {
      Coords crd=Poz2Coors(MovedFig[i] + lw);
      if (MovedFig[i] + lw<=lw*lh) {
        if (LandMatrix[crd.y][crd.x] > 0) {
          MovedFig=OldFig;
        };
      };
    };
  }

Исходный код игры можно скачать тут

Dart: формат даты

В Dart дату к любому строчному формату можно привести при помощи функции DateFormat. Например как-то так:

import 'package:intl/intl.dart';
DateTime now =DateTime.now();
DateFormat formatter = DateFormat('dd.MM.yyyy');
final String formatted = formatter.format(now);

Dart: секунды в строку вида hh:mm:ss

Задача: преобразовать и отобразить секунды в строку часы-минуты-секунды

Решение:

  String TimeLeft(diff){
    var timestamp = diff.floor();
    var hours = (timestamp / 60 / 60).floor();
    var minutes = ((timestamp / 60) - (hours * 60)).floor();
    var seconds = timestamp % 60;
    if (seconds<0){
      seconds=0;hours=0;minutes=0;
    }
    String hs=hours.toString();
    hs=hs.length>1?hs:"0"+hs;
    String ms=minutes.toString();
    ms=ms.length>1?ms:"0"+hs;
    String ss=seconds.toString();
    ss=ss.length>1?ss:"0"+ss;
    return "$hs:$ms:$ss";
  }

Бонусом тоже самое на javascript:

function TimeLeft(diff){    
    var timestamp = Math.floor(diff);
    var hours = Math.floor(timestamp / 60 / 60);
    var minutes = Math.floor(timestamp / 60) - (hours * 60);
    var seconds = timestamp % 60;        
    if (seconds<0){seconds=0;hours=0;minutes=0;} 
    h=("0"+hours).slice(-2);
    m=("0"+minutes).slice(-2);
    s=("0"+seconds).slice(-2);
};

Flutter: реализация «смахивания» в приложении.

Задача: реализовать удаление позиции из списка «смахиванием».

Решение: используем для этого виджет Dismissible. Обернем в него каждый пункт в ListView. Ну собственно в него можно оборачивать любой виджет.

  child: ListView.builder(
....
...
                                child:
                                Dismissible(
                                    key: UniqueKey(),
                                    direction:DismissDirection.startToEnd,
                                    onDismissed: (DismissDirection direction){
                                        TDialogs dia = TDialogs();
                                        dia.SureDialog(context, "Подтверждение", "Вы действительно удалить ТМЦ  "+globals.TMCList[index]["inv_num"]+" ?",
                                          (){
                                            setState(() {
                                                                                            globals.TMCList.removeAt(index);
                                            });
                                          },
                                          (){
                                            setState(() {});
                                          }
                                        );
                                    },
                                    child: Container(
                                        padding: EdgeInsets.symmetric(vertical: 10),
                                        color: globals.TMCList[index]["count"]==0?Colors.red:null,
                                        child: Column(
                                          children: [
                                            Text(
                                              globals.TMCList[index]["name"],
                                              textAlign: TextAlign.start,
                                            ),
                                            Align(

....

Из интересного: метод direction отвечает за то, как именно разрешено «смахивать». В примере это «от старта до конца». Т.е. слева на право. Доступные варианты:

enum DismissDirection {
  vertical,
  horizontal,
  endToStart,
  startToEnd,
  up,
  down,
  none
}

Flutter: скроллинг до элемента в списке

Задача: позиционировать по нажатию кнопки список на нужном элементе списка.

Решение: используем пакет scroll_to_index:

dependencies:
  scroll_to_index : any

Код:

class _MainMenuState extends State<MainMenu> {
  final scaffoldKey = GlobalKey<ScaffoldState>();

  final scrollDirection = Axis.vertical;
  late AutoScrollController controller;

  @override
  void initState() {
    print("-инициализация класса..");
    controller = AutoScrollController(
        viewportBoundaryGetter: () =>
            Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),
            suggestedRowHeight: 2000, // если большой список, и  скролл визуально идёт медленно, то это "шаг" скролла. Т.е. чем больше, тем быстрее.
            axis: scrollDirection
    );
  }

  Future _scrollToCounter(int counter) async {

    await controller.scrollToIndex(counter, duration: Duration(seconds: 1));
    controller.highlight(counter);
  }
....
...
      // список ТМЦ для инвентаризации (если есть)
      body: ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          scrollDirection: scrollDirection,
          controller: controller,
          padding: const EdgeInsets.all(8),
          itemCount: globals.TMCList.length,
          itemBuilder: (BuildContext context, int index) {
            return AutoScrollTag(
              key: ValueKey(index),
              controller: controller,
              index: index,
              child: Container(
                  padding: EdgeInsets.symmetric(vertical: 10),
                  child: Column(
                    children: [
                      Text(
                        globals.TMCList[index]["name"],
                        textAlign: TextAlign.start,
                      ),
                      Align(
.....
        floatingActionButton: FloatingActionButton(
          onPressed: (){
_scrollToCounter(10);
          },
1 2 3 5