用dart实现一个ASCII交互小动画

周末的时候想教小孩编程，想先引起孩子的兴趣，就想做一个小动画出来给她看看。之前给她玩过scratch的示例小猫，小猫可以通过简单的命令设置在屏幕上移动。就想用dart自己做一个，结果发现桌面端对图形的支持比较差，需要安装一堆额外的东西，或者采用flutter的app/web/desktop方案。简单研究了一下，都比较麻烦（主要也是当时用的电脑也不允许安装这些东西），就暂时放弃了，准备以后作为一个单独的课题进行研究。

于是就想，之前玩BBS时，经常有一些ASCII字符画，要不就在命令行的环境下，做一个简单的ASCII图画移动程序吧。然后在网上找了一幅画，又做了ASCII转码（网址：https://www.degraeve.com/img2txt.php），然后写了如下的程序。本次只做了平移，没有做旋转，后续再研究一下旋转的实现。平移的实现主要靠对数组的操作。

本次环境：

dart vm version: 2.10.4

console：

height = 30;

width = 118;

 

完整代码如下：

import 'dart:io';
import 'dart:math';

main() async {
  var path = r'.\ascii\dog.txt';

  var lines = await File(path).readAsLines();

  display(AsciiImage(
      'dog', List.generate(lines.length, (i) => lines[i].split(''))));
}

void display(AsciiImage image) {
  Console.draw(image);
  var cmd = _getCmd();
  while (cmd != 'exit') {
    var steps = _getSteps();
    switch (cmd) {
      case 'up':
        image.moveUp(steps);
        Console.draw(image);
        break;
      case 'down':
        image.moveDown(steps);
        Console.draw(image);
        break;
      case 'left':
        image.moveLeft(steps);
        Console.draw(image);
        break;
      case 'right':
        image.moveRight(steps);
        Console.draw(image);
        break;
      default:
        break;
    }
    if (!image.isValid()) {
      stdout.writeln('Aha~~~ the ${image.name} has disappeared! Game Over!');
      return;
    }
    cmd = _getCmd();
  }
}

class Console {
  static const height = 30;
  static const width = 118;

  static void draw(AsciiImage image) {
    var outImage = _needCut(image) ? image.cut(height, width) : image;
    stdout.writeln(outImage.content);
  }
}

bool _needCut(AsciiImage image) =>
    image.height > Console.height || image.width > Console.width;

bool _isValidCmd(String cmd) =>
    cmd == 'left' ||
    cmd == 'right' ||
    cmd == 'up' ||
    cmd == 'down' ||
    cmd == 'exit';

String _getCmd() {
  stdout.write(
      'Now try to move the dog! left, right, up or down. exit for quit: ');
  var cmd = stdin.readLineSync().toLowerCase();
  while (!_isValidCmd(cmd)) {
    stdout.write('Invalid Command! left, right, up or down. exit for quit: ');
    cmd = stdin.readLineSync().toLowerCase();
  }
  return cmd;
}

int _getSteps() {
  var steps = -1;
  while (steps < 0) {
    stdout.write('Please input the steps(an integer >= 0): ');
    try {
      steps = int.parse(stdin.readLineSync());
    } catch (e) {}
  }
  return steps;
}

class AsciiImage {
  static const placeholder = ' ';

  String name;

  final List<List<String>> asciis;

  AsciiImage(this.name, this.asciis);

  AsciiImage.generateEmptyImage(this.name, int height, int width)
      : asciis = List.generate(
            height, (_) => List.filled(width, placeholder, growable: true));

  int get height => asciis.length;

  int get width => asciis.isEmpty ? 0 : asciis[0].length;

  void moveLeft(int x) {
    for (var line in asciis) line.removeRange(0, min(x, width));
  }

  void moveRight(int x) {
    for (var line in asciis) line.insertAll(0, List.filled(x, placeholder));
  }

  void moveUp(int y) => asciis.removeRange(0, min(y, height));

  void moveDown(int y) => asciis.insertAll(0,
      List.generate(y, (_) => List.filled(width, placeholder, growable: true)));

  // 裁剪，根据给定的高和宽，当图形移动超出屏幕显示范围时，需要裁剪
  AsciiImage cut(int h, int w) => AsciiImage(
      name,
      List.generate(
          min(height, h), (i) => asciis[i].sublist(0, min(width, w))));

  // 字符画的本质是字符串，因此将其转换为字符串以便输出
  String get content {
    var buffer = StringBuffer();
    for (var line in asciis) buffer.write('${line.join()}\n');
    return buffer.toString();
  }

  bool isValid() => height > 0 && width > 0;
}

示例用的小狗ASCII文件内容dog.txt：

                                                  
                              L#KKK#G.            
                            .G        EK          
                           .i           t,        
                           W             ;,       
                                          ;f      
                          D  K   G          #     
                          #  ;    f      #   .#t# 
                          L L     f           K . 
                          i #      ;          fDW 
                         :  E      W            , 
                         E  f      i           K  
                         #t D      .          .,  
                        :: t#                ii   
                        #EG E               K.    
                       .;  ED:     ,    ,DWi      
                       #     #     ##fG;          
                      j      ;    L    D          
                     t;       W  #L#;  EL         
   j, #             W.         ##    ;t  W        
  ;.  ,          ;#i                 K  ;j        
  L   i        tW                    f LWD        
 D    #       #                       # Di        
 D   i      ,E                        :           
 ,   #     t;                        .            
.    E    ;i                         D            
 .   t    D                          #            
 f   j   #                          t             
 #   #   :                          L             
 ,   :t G                     #,   D              
  #    ##                    # ,   E              
   #                       .#  i  ,               
    ;#t                   t;E  j  W               
        .K              :#  j  D  #               
          K           ,#:    . #  K               
          K         #f       E D .#               
          #        GDE#.     f .   K              
         t             #      Wtf  .              
         ;L;iG####WWEEEi        ;i E              
                                  .