Dart test

index.html

<div id="wrapper">  
  <canvas id="canvas" width="450" height="450"></canvas>
</div>  

main.dart

import 'dart:html';
import 'dart:math';
import 'dart:collection';
import 'dart:async';

CanvasElement canvas;
CanvasRenderingContext2D ctx;

const int CELL_SIZE = 10;

Keyboard keyboard = new Keyboard();


void main(){
  canvas = querySelector('#canvas')..focus();
  ctx = canvas.getContext('2d');
  
  /*drawCell(new Point(10,10), "salmon");
  Snake snake = new Snake()dsa;
  clear();
  snake.update();*/
  new Game()..run();
}

void drawCell(Point coords, String color){
  ctx..fillStyle = color
    ..strokeStyle = "white";
  
  final int x = coords.x * CELL_SIZE;
  final int y = coords.y * CELL_SIZE;
  
  ctx..fillRect(x,y, CELL_SIZE, CELL_SIZE)
    ..strokeRect(x,y, CELL_SIZE, CELL_SIZE);
}

void clear(){
  ctx..fillStyle = "white"
    ..fillRect(0,0, canvas.width, canvas.height);
}

class Keyboard{
  HashMap<int, num> _keys = new HashMap<int, num>();
  
  Keyboard(){
    window.onKeyDown.listen((KeyboardEvent event){
      _keys.putIfAbsent(event.keyCode, ()=> event.timeStamp);
    });
    
    window.onKeyUp.listen((KeyboardEvent event){
      _keys.remove(event.keyCode);
    });
  }
  
  bool isPressed(int keyCode) => _keys.containsKey(keyCode);
}

class Snake{
  //directions
  static const Point LEFT 	= const Point(-1, 0);
  static const Point RIGHT 	= const Point( 1, 0);
  static const Point UP 		= const Point( 0,-1);
  static const Point DOWN 	= const Point( 0, 1);
  
  //initial size
	static const int START_LENGTH = 6;
  
  //coordintaes of the body segments
  List<Point> _body;
  
  //current travel direction
  Point _dir = RIGHT;

  Snake(){
    int i = START_LENGTH -1;
    _body = new List<Point>.generate(START_LENGTH,
        (int index) => new Point(i--,0));
  }

  Point get head => _body.first;
  
  void _checkInput(){
    if (keyboard.isPressed(KeyCode.LEFT) && _dir != RIGHT){
      _dir = LEFT;
    }
    
    else if(keyboard.isPressed(KeyCode.RIGHT) && _dir != LEFT){
      _dir = RIGHT;
    }
    
    else if(keyboard.isPressed(KeyCode.UP) && _dir != DOWN){
      _dir = UP;
    }
    
    else if(keyboard.isPressed(KeyCode.DOWN) && _dir != UP){
      _dir = DOWN;
    }
  }
  
  void grow(){
    //add a new head based on current direction
    _body.insert(0, head + _dir);
  }
  
  void _move(){
    //Add a new head segment
    grow();
    
    //remove a tail segment
    _body.removeLast();
  }
  
  void _draw(){
    //starting with the head, draw each body segment
    
    for (Point p in _body){
      drawCell(p, "green");
    }
  }
  
  bool checkForBodyCollision(){
    for(Point p in _body.skip(1)){
      if(p == head){
        return true;
      }
    }
    
    return false;
  }
  
  void update(){
    _checkInput();
    _move();
    _draw();
  }
  
}


class Game{
  //smaller numbers make the game go faster
  static const num GAME_SPEED = 50;
  num _lastTimeStamp = 0;
  
  // a few convenience variables to simplify calculations
  int _rightEdgeX;
  int _bottomEdgeY;
  
  Snake _snake;
  Point _food;
  
  Game(){
    _rightEdgeX = canvas.width	~/ CELL_SIZE;
    _bottomEdgeY = canvas.height ~/ CELL_SIZE; // ~/ = integer division on ly the integer is resulted
    
    init();
  }
  
  void init(){
    _snake = new Snake();
    _food = _randomPoint();
  }
  
  Point _randomPoint(){
    Random random = new Random();
    return new Point(random.nextInt(_rightEdgeX), random.nextInt(_bottomEdgeY));
  }
  
  void _checkForCollisions(){
    //check for collision with food
    if(_snake.head == _food){
      _snake.grow();
      _food = _randomPoint();
    }
    
    //check death conditions
    if(_snake.head.x <= -1 ||
      	_snake.head.x >= _rightEdgeX ||
      	_snake.head.y <= -1 ||
      	_snake.head.y >= _bottomEdgeY ||
      	_snake.checkForBodyCollision()){
      init();
    }
  }
  
  Future run() async{
    update(await window.animationFrame);
  }
  
  void update(num delta){
    final num diff = delta - _lastTimeStamp;
    
    if(diff > GAME_SPEED){
      _lastTimeStamp = delta;
      clear();
      drawCell(_food,"blue");
      _snake.update();
      _checkForCollisions();
    }
    
    run();
  }
}

style.css

html, body {  
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#wrapper {
  width: 450px;
  margin: auto;
  border: solid thin black;
}