Skip to content

Instantly share code, notes, and snippets.

@FeherMarcell
Last active December 17, 2015 10:09
Show Gist options
  • Save FeherMarcell/5592496 to your computer and use it in GitHub Desktop.
Save FeherMarcell/5592496 to your computer and use it in GitHub Desktop.
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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment