Ping-Pong Game in Dartpad

index.html

<canvas id="canvas" width="298" height="400"></canvas>
<footer>
  <button type="button" id="play" class="button">Play</button>
</footer>

main.dart

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

void main() {
  // Get a reference to the canvas.
  CanvasElement canvas = querySelector('#canvas');
  Board board = new Board(canvas);
}

class Racket {
  Board board;

  num x;
  num y;
  num w;
  num h;

  bool rightDown = false;
  bool leftDown = false;

  Racket(this.board, this.x, this.y, this.w, this.h) {
    draw();
    document.onKeyDown.listen(onKeyDown);
    document.onKeyUp.listen(onKeyUp);
    document.onMouseMove.listen(onMouseMove);
  }

  void draw() {
    board.context.beginPath();
    board.context.rect(x, y, w, h);
    board.context.closePath();
    board.context.fill();
  }

  // Set rightDown or leftDown if the right or left keys are down.
  void onKeyDown(event) {
    if (event.keyCode == 39) {
      rightDown = true;
    } else if (event.keyCode == 37) {
      leftDown = true;
    }
  }

  // Unset rightDown or leftDown when the right or left key is released.
  void onKeyUp(event) {
    if (event.keyCode == 39) {
      rightDown = false;
    } else if (event.keyCode == 37) {
      leftDown = false;
    }
  }

  // Change a position of a racket with the mouse left or right mouvement.
  void onMouseMove(event) {
    if (event.page.x > Board.X && event.page.x < board.width) {
      x = event.page.x - Board.X - w / 2;
      if (x < Board.X) x = Board.X;
      if (x > board.width - w) x = board.width - w;
    }
  }
}

class Board {
  static const num X = 0;
  static const num Y = 0;
  static const num BALL_RADIUS = 8;
  static const num RACKET_WIDTH = 75;
  static const num RACKET_HEIGHT = 8;

  Timer timer;

  CanvasElement canvas;
  CanvasRenderingContext2D context;

  num width;
  num height;
  double startBallX;
  double startBallY;
  num dx = 2;
  num dy = 4;

  Ball ball;
  Racket racketNorth;
  Racket racketSouth;

  Board(this.canvas) {
    context = canvas.getContext("2d");
    width = canvas.width;
    height = canvas.height;
    border();

    startBallX = width / 2;
    startBallY = height / 2;
    querySelector('#play').onClick.listen((e) {
      init();
    });
  }

  void init() {
    ball = new Ball(this, startBallX, startBallY, BALL_RADIUS);
    racketNorth = new Racket(this, width / 2, Y, RACKET_WIDTH, RACKET_HEIGHT);
    racketSouth = new Racket(
        this, width / 2, height - RACKET_HEIGHT, RACKET_WIDTH, RACKET_HEIGHT);
    // redraw every 10 ms
    timer =
        new Timer.periodic(const Duration(milliseconds: 10), (t) => redraw());
  }

  void border() {
    context.beginPath();
    context.rect(X, Y, width, height);
    context.closePath();
    context.stroke();
  }

  void clear() {
    context.clearRect(X, Y, width, height);
    border();
  }

  void redraw() {
    clear();

    ball.draw();

    // Move the north side racket if the left or the right key is pressed.
    if (racketNorth.rightDown) {
      if (racketNorth.x < width - X - racketNorth.w - 4) racketNorth.x += 5;
    } else if (racketNorth.leftDown) {
      if (racketNorth.x > X + 4) racketNorth.x -= 5;
    }
    racketNorth.draw();

    // Move the south side racket if the left or the right key is pressed.
    if (racketSouth.rightDown) {
      if (racketSouth.x < width - X - racketSouth.w - 4) racketSouth.x += 5;
    } else if (racketSouth.leftDown) {
      if (racketSouth.x > X + 4) racketSouth.x -= 5;
    }
    racketSouth.draw();

    // The ball must stay within the west and east sides.
    if (ball.x + dx > width || ball.x + dx < 0) dx = -dx;

    // The north side.
    if (ball.y + dy < 0) {
      if (ball.x > racketNorth.x && ball.x < racketNorth.x + racketNorth.w) {
        dy = -dy;
      } else {
        // The ball hit the north side but outside the racket -
        // game over, so stop the animation.
        timer.cancel();
      }
    }

    // The south side.
    if (ball.y + dy > height) {
      if (ball.x > racketSouth.x && ball.x < racketSouth.x + racketSouth.w) {
        dy = -dy;
      } else {
        // The ball hit the south side but outside the racket -
        // game over, so stop the animation.
        timer.cancel();
      }
    }

    ball.x += dx;
    ball.y += dy;
  }
}

class Ball {
  Board board;

  num x;
  num y;
  num r;

  Ball(this.board, this.x, this.y, this.r) {
    draw();
  }

  void draw() {
    board.context.beginPath();
    board.context.arc(x, y, r, 0, math.pi * 2, true);
    board.context.closePath();
    board.context.fill();
  }
}

styles.css

html, body {
  background: #d7e9f7;
  width: 100%;
  height: 100%;
  margin: 20px;
}

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