FeherMarcell · December 17, 2015 10:09
diff --git a/Ball.dart b/Ball.dart
 part of dartpong;

 class Ball {

  Board board;

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

  void draw() {
    board.context.beginPath();
    board.context.arc(x, y, r, 0, PI*2, true);
    board.context.closePath();
    // TODO set fillStyle to red & fill()
    
  }

 }
diff --git a/Board.dart b/Board.dart
 part of dartpong;

 class Board {

  const num X = 0;
  const num Y = 0;
  const num BALL_RADIUS = 8;
  const num RACKET_WIDTH = 75;
  const num RACKET_HEIGHT = 8;

  Timer timer;

  CanvasElement canvas;
  CanvasRenderingContext2D context;

  num width, height;
  num startBallX, startBallY;
  num dx, dy;
  

  Ball ball;
  Racket racketNorth;
  Racket racketSouth;

  Board(this.canvas) {
    context = canvas.getContext("2d");
    width = canvas.width;
    height = canvas.height;
    border();
    // TODO set onClick listener on document#play and call init()

  }

  void init() {
    
    // Ball initial properties
    var rnd = new Random();
    
    startBallX = width ~/ 2 + rnd.nextInt(10);
    startBallY = height ~/ 2 + rnd.nextInt(10);
    dx = 2 + rnd.nextInt(2);
    dy = 4 + rnd.nextInt(2);
    
    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);
    
    // start Game loop 
    timer = new Timer.periodic(
        const Duration(milliseconds: 20),
        // TODO set callback        
      );
  }

  void border() {
    
    context.beginPath();
    context.rect(X, Y, width, height);
    context.closePath();
    // TODO set strokeStyle to green & call 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();

    // North side exit
    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();
      }
    }

    // South side exit
    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();
      }
    }
    
    // The ball must stay within the west and east sides.
    if (ball.x + dx > width || ball.x + dx < 0) 
      dx = -dx;
  
    
    // TODO Move the ball
    
  }

 }
diff --git a/dartpong.dart b/dartpong.dart
 library dartpong;

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

 part 'Board.dart';
 part 'Ball.dart';
 part 'Racket.dart';

 void main() {
  // Get a reference to the canvas.
  CanvasElement canvas = document.query('#canvas');
  Board board = new Board(canvas);
 }
diff --git a/dartpong.html b/dartpong.html
 <!DOCTYPE html>

 <html>
  <head>
    <meta charset="utf-8"/>
    <title>Dart Pong</title>
  </head>

  <body>
    <header>
      <h1>Dart Pong!</h1>
    </header>

        
    <canvas id="canvas" width="300" height="400"></canvas>
    
    <div><button id="play">Play</button></div>
    
    <script type="application/dart" src="dartpong.dart"></script>
    <script src="packages/browser/dart.js"></script>
    
  </body>
 </html>
diff --git a/Racket.dart b/Racket.dart
 part of dartpong;

 class Racket {

  Board board;

  num x, y, w, h;
  
  bool rightDown = false;
  bool leftDown = false;

  Racket(this.board, this.x, this.y, this.w, this.h) {
    draw();
    // Rackets react on keydown and mousemove events
    // TODO onKeyDown,onKeyUp,onMouseMove  
  }

  void draw() {
    
    board.context.beginPath();
    board.context.rect(x, y, w, h);
    board.context.closePath();
    // TODO set fillStyle & 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.pageX > board.X && event.pageX < board.width) {
      x = event.pageX - board.X - w/2;
      if (x < board.X) x = board.X;
      if (x > board.width - w) x = board.width - w;
    }
  }

 }
	part of dartpong;

	class Ball {

	Board board;

	num x, y, r;

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

	void draw() {
	board.context.beginPath();
	board.context.arc(x, y, r, 0, PI*2, true);
	board.context.closePath();
	// TODO set fillStyle to red & fill()

	}

	}
	part of dartpong;

	class Board {

	const num X = 0;
	const num Y = 0;
	const num BALL_RADIUS = 8;
	const num RACKET_WIDTH = 75;
	const num RACKET_HEIGHT = 8;

	Timer timer;

	CanvasElement canvas;
	CanvasRenderingContext2D context;

	num width, height;
	num startBallX, startBallY;
	num dx, dy;


	Ball ball;
	Racket racketNorth;
	Racket racketSouth;

	Board(this.canvas) {
	context = canvas.getContext("2d");
	width = canvas.width;
	height = canvas.height;
	border();
	// TODO set onClick listener on document#play and call init()

	}

	void init() {

	// Ball initial properties
	var rnd = new Random();

	startBallX = width ~/ 2 + rnd.nextInt(10);
	startBallY = height ~/ 2 + rnd.nextInt(10);
	dx = 2 + rnd.nextInt(2);
	dy = 4 + rnd.nextInt(2);

	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);

	// start Game loop
	timer = new Timer.periodic(
	const Duration(milliseconds: 20),
	// TODO set callback
	);
	}

	void border() {

	context.beginPath();
	context.rect(X, Y, width, height);
	context.closePath();
	// TODO set strokeStyle to green & call 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();

	// North side exit
	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();
	}
	}

	// South side exit
	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();
	}
	}

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


	// TODO Move the ball

	}

	}
	library dartpong;

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

	part 'Board.dart';
	part 'Ball.dart';
	part 'Racket.dart';

	void main() {
	// Get a reference to the canvas.
	CanvasElement canvas = document.query('#canvas');
	Board board = new Board(canvas);
	}
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Dart Pong</title>
	</head>

	<body>
	<header>
	<h1>Dart Pong!</h1>
	</header>


	<canvas id="canvas" width="300" height="400"></canvas>

	<div><button id="play">Play</button></div>

	<script type="application/dart" src="dartpong.dart"></script>
	<script src="packages/browser/dart.js"></script>

	</body>
	</html>
	part of dartpong;

	class Racket {

	Board board;

	num x, y, w, h;

	bool rightDown = false;
	bool leftDown = false;

	Racket(this.board, this.x, this.y, this.w, this.h) {
	draw();
	// Rackets react on keydown and mousemove events
	// TODO onKeyDown,onKeyUp,onMouseMove
	}

	void draw() {

	board.context.beginPath();
	board.context.rect(x, y, w, h);
	board.context.closePath();
	// TODO set fillStyle & 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.pageX > board.X && event.pageX < board.width) {
	x = event.pageX - board.X - w/2;
	if (x < board.X) x = board.X;
	if (x > board.width - w) x = board.width - w;
	}
	}

	}