Pathfinding
HTML
<div id="container">
<div class="controls">
<button id="wall" style="border-color: red">Wall</button>
<button id="eraser">Eraser</button> |
<button id="start">Start</button>
<button id="finish">Finish</button> |
<button id="go">Go</button>
<button id="clear">Clear</button>
</div>
</div>
JavaScript
var WALL = -1,
EMPTY = -2,
START = -3,
FINISH = -4;
function Board(container, width, height, size) {
this.width = width;
this.height = height;
this.size = size;
this.brush = WALL;
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.canvas.style.background = 'white';
this.canvas.width = width * size;
this.canvas.height = height * size;
container.appendChild(this.canvas);
this.board = [];
this.clearBoard();
this.startPoint = {x: 1, y: 1};
this.finishPoint = {x: this.width - 5, y: this.height - 5};
this.drawWalls();
var self = this;
this.mouseIsDown = false;
this.canvas.addEventListener('mousemove', function(e) {
var coord = self.convertMouseCoord(e.clientX, e.clientY);
if (self.mouseIsDown) {
self.board[coord.x][coord.y] = self.brush;
self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
self.createGrid();
self.drawWalls();
}
});
this.canvas.addEventListener('click', function(e) {
var coord = self.convertMouseCoord(e.clientX, e.clientY);
if (self.brush === START || self.brush === FINISH) {
if (self.brush === START) {
self.startPoint.x = coord.x;
self.startPoint.y = coord.y;
} else {
self.finishPoint.x = coord.x;
self.finishPoint.y = coord.y;
}
self.brush = WALL;
self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
self.createGrid();
self.drawWalls();
return;
}
self.board[coord.x][coord.y] = self.brush;
self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
self.createGrid();
self.drawWalls();
});
...