Snake Game in Dart

Question

First project in Dart - looking for style tips. I feel like I'm writing it a bit like Java, and would like to learn how to write dart-y dart.

Also - what's the convention on multiple files in a project? There are other files in this project, and I do not know how to include them in each other, etc...

See more

library snake;
import 'dart:html';
import 'dart_snake.dart';
import 'eats.dart';

class Snake {
  Map<int, Function> directions;
  Function nextMove;
  List<List<int>> links = [[330, 330]];

  Snake() {
    directions = {
      38: () {
        move(0, SQUARE_SIZE);
      },
      40: () {
        move(0, -SQUARE_SIZE);
      },
      37: () {
        move(-SQUARE_SIZE, 0);
      },
      39: () {
        move(SQUARE_SIZE, 0);
      }
    };
    nextMove = directions[40];
  }

  void move(int moreX, int moreY) => links.insert(0, [addToX(moreX), addToY(moreY)]);

  int headX() => links.first[0];
  int headY() => links.first[1];

  bool isOnEats(Eats eats) => headX() == eats.x && headY() == eats.y;
  bool isDead() => links.skip(1).any((e) => (e[0] == headX() && e[1] == headY()));

  int addToX(int more) => (headX() + more) % windowWidth();
  int addToY(int more) => (headY() + more) % windowHeight();

  void keyPressed(KeyboardEvent e) {
    if (directions.keys.contains(e.keyCode)) {
      nextMove = directions[e.keyCode];
    }
  }

  void doNextMove(bool ate) {
    nextMove();
    if (!ate) links.removeLast();
  }

  void addListeners() {
    window.onKeyUp.listen((KeyboardEvent e) {
      keyPressed(e);
    });
  }

  void draw() {
    for (List<int> link in links) {
      querySelector('#board').children.add(new DivElement()
          ..className = 'snake'
          ..style.left = "${link[0]}px"
          ..style.bottom = "${link[1]}px");
    }
  }
}

Answer 1

Very clean Dart code! Just a couple of (minor) styling issues issues I can see:

Screaming caps

In the Effective Dart: Style guide we are told to avoid screaming caps for constants unless we are extending older Dart code (it was originally Dart style to use screaming caps).

From the documentation linked to above:

Note: We initially used Java’s SCREAMING_CAPS style for constants. We changed for a few reasons:

• SCREAMING_CAPS looks bad for many cases, particularly enum values for things like CSS colors.
• Constants are often changed to final non-const variables, which would necessitate a name change.
• The values property automatically defined on an enum type is const and lowercase.

... so you might want to rename SQUARE_SIZE to squareSize.

If there are many such constants it might help to package them in their own file (e.g. import 'globals.dart' as globals;) or an abstract class (see avoid static-member-only classes where the guide gives exceptions to the rule).

KeyboardEvent.key

This is more of a DOM than Dart issue, and may not be what you want, but it might improve your code readability to use the KeyboardEvent.key property rather than KeyboardEvent.keyCode. (See more at the MDN docs.) In that case directions could be a more easily read Map<String, Function> object. Also:

This feature [keyCode] is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes... MDN source

Misc.

Also, if directions is only going to be defined once and not changed during execution, consider making it final and defining it where where you declared it. (I can't find the docs for this point but I vaguely remember reading something along these lines somewhere.)