Last active
October 2, 2021 11:37
-
-
Save StEvUgnIn/ac1c041e9100df81399b752cf3d5ca4b to your computer and use it in GitHub Desktop.
Dart and HTML5 game : Snake
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id='wrapper'> | |
<canvas id='canvas' width="450" height="450"></canvas> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'dart:html'; | |
import 'dart:math'; | |
import 'dart:collection'; | |
import 'dart:async'; | |
const num CELL_SIZE = 10; | |
late CanvasElement canvas; | |
late CanvasRenderingContext2D ctx; | |
void main() { | |
canvas = querySelector('#canvas')! as CanvasElement..focus(); | |
ctx = canvas.getContext('2d')! as CanvasRenderingContext2D; | |
Snake snake = new Snake(); | |
clear(); | |
snake.update(); | |
new Game()..run(); | |
} | |
void drawCell(Point coords, String color) { | |
ctx | |
..fillStyle = color | |
..strokeStyle = "white"; | |
final num x = coords.x * CELL_SIZE; | |
final num y = coords.y * CELL_SIZE; | |
ctx | |
..fillRect(x, y, CELL_SIZE, CELL_SIZE) | |
..strokeRect(x, y, CELL_SIZE, CELL_SIZE); | |
drawCell(new Point(10, 10), "salmon"); | |
} | |
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(num 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); | |
static const int START_LENGTH = 6; | |
// coordinates of the body segments | |
late List<Point> _body; | |
// current travel direction | |
Point _dir = RIGHT; | |
// keyboard | |
Keyboard keyboard = new Keyboard(); | |
// constructor | |
Snake() { | |
num i = START_LENGTH - 1; | |
_body = new List<Point>.generate(START_LENGTH, (num 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 new head based on current direction | |
_body.insert(0, head + _dir); | |
} | |
void _move() { | |
// add a new head segment | |
grow(); | |
// remove the 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 run faster | |
static const num GAME_SPEED = 50; | |
num _lastTimeStamp = 0; | |
// a few convenience variables to simplify calculations | |
late int _rightEdgeX; | |
late int _bottomEdgeY; | |
late Snake _snake; | |
late Point _food; | |
Game() { | |
_rightEdgeX = canvas.width! ~/ CELL_SIZE; | |
_bottomEdgeY = canvas.height! ~/ CELL_SIZE; | |
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(); | |
} | |
// keep looping | |
run(); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
#wrapper { | |
width: 450px; | |
margin: auto; | |
border: solid thin black; | |
} | |
#canvas { | |
/* nothing to say */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment