Initial commit, still a work in progress

JamesRandall · May 3, 2011 · 517e422 · 517e422
commit 517e422
Show file tree

Hide file tree

Showing 13 changed files with 10,646 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,19 @@
+Copyright (C) 2011 by Accidental Fish Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# AStar Implementation
+
+This is a basic HTML 5 Canvas and JavaScript implementation of the [A* path finding algorithm](http://en.wikipedia.org/wiki/A*_algorithm). It makes use of the JavaScript libraries [jQuery](http://jquery.com/) and [RequireJS](http://requirejs.org/).
+
+For more information [visit the Accidental Fish blog](http://accidentalfish.wordpress.com).
diff --git a/astar.css b/astar.css
@@ -0,0 +1,21 @@
+body div {
+	margin: auto;
+	width: 1024px;
+}
+
+div#astar {
+  background-color: white;
+  width: 1024px;
+  height: 1024px;
+  padding: 0; }
+
+div#browserNotSupported {
+  display: none;
+  background-color: #eee;
+  border: 1px solid black;
+  padding: 1em;
+}
+
+span.right {
+	float: right;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>A* Algorithm</title>
+		<script src="scripts/modernizr-1.7.min.js" type="text/javascript" charset="utf-8"></script>
+		<script data-main="scripts/bootstrapper" src="scripts/require-jquery.js"></script>
+		<link rel="stylesheet" href="astar.css" type="text/css" media="screen" title="no title" charset="utf-8">
+	</head>
+	<body>
+		<div>
+			<h1>A* Algorithm</h1>
+			<p>This is a HTML 5 Canvas and JavaScript implementation of the A* path finding algorithm - in this example only horizontal or vertical movement is allowed. It makes use of the JavaScript libraries <a href="http://jquery.com/">jQuery</a> and <a href="http://requirejs.org/">RequireJS</a>.</p>
+			<p>Source code can be found <a href="https://github.com/JamesRandall/AStar">online at GitHub</a> and more information on <a href="http://accidentalfish.wordpress.com">my blog</a>.</p>
+			<p>You can a predetermined board layout below or edit the board by clicking cells.</p>
+			<div id="browserNotSupported"><p>Your browser does not support running A*. Please upgrade to a more recent version that supports HTML 5 canvas.</div>
+			<div id="astar">
+				<div id="toolbar">
+					<span>
+						<select id="boardType">
+							<option value="empty">Empty</option>
+							<option value="cubes">Cubes</option>
+							<option value="verticalPillars">Vertical Pillars</option>
+						</select>
+						<input id="resetButton" type="button" value="Reset" / >
+					</span>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/scripts/astar.js b/scripts/astar.js
@@ -0,0 +1,33 @@
+define(["jquery", "board", "renderer", "pathFinder"], function($,boardFactory,renderer, pathFinder) {	
+	function reset(board, boardType) {
+		board.reset(boardType);
+		renderer.render(board);
+	}
+
+	return {
+		board: null,
+		begin: function() {
+			var that = this;
+			var canvas = $('#astarCanvas');
+
+			$('#resetButton').click(function() {
+				reset(that.board, $('#boardType').val());
+			});
+
+			canvas.click(function(e) {
+				var canvasPos = canvas.position();
+				var x = e.pageX - canvasPos.left;
+				var y = e.pageY - canvasPos.top;
+				var boardPosition = renderer.getBoardCoordinates(that.board, x, y);
+				pathFinder(that.board, x, y);
+				//that.board.setMovementCost(boardPosition.x, boardPosition.y, that.board.getMovementCost(boardPosition.x, boardPosition.y) === 1 ? 0 : 1);
+				//renderer.render(that.board);
+			});
+
+			this.board = boardFactory.create();
+			this.board.clear();
+
+			renderer.render(this.board);
+		}
+	};
+});
diff --git a/scripts/board.js b/scripts/board.js
@@ -0,0 +1,103 @@
+define(["metrics"], function(metrics) {	
+	var patternBuilders = {
+		cubes: function(board) {
+			var rowIndex;
+			var columnIndex;
+
+			for (rowIndex = 0; rowIndex < board.height; rowIndex++) {
+				for (columnIndex = 0; columnIndex < board.width; columnIndex++) {
+					board.setMovementCost(columnIndex, rowIndex,  rowIndex % 4 === 0 || columnIndex % 4 === 0 ? board.movementCosts.empty : board.movementCosts.impassable);
+				}
+			}
+		},
+		verticalPillars: function(board) {
+			var columnIndex;
+			var fromTop;
+			var rowIndex;
+			var calculatedRowIndex;
+
+			fromTop = true;
+
+			for (columnIndex = 1; columnIndex < board.width; columnIndex += 2) {
+				for (rowIndex = 0; rowIndex < (board.height/3*2).integer(); rowIndex++) {
+					calculatedRowIndex = fromTop ? rowIndex : board.height-1-rowIndex;
+					board.setMovementCost(columnIndex, calculatedRowIndex, board.impassable);
+				}
+				fromTop = !fromTop;
+			}	
+		},
+		empty: function(board) {
+
+		}
+	}
+
+	return {
+		create: function() {
+			var board  = [];
+			var row;
+			var rowIndex;
+			var columnIndex;
+
+			for (rowIndex = 0; rowIndex < metrics.boardHeight; rowIndex++) {
+				row = [];
+				for (columnIndex = 0; columnIndex < metrics.boardWidth; columnIndex++) {
+					row.push(0);
+				}
+				board.push(row);
+			}
+
+			return {
+				player: {
+					x: 0,
+					y: 0
+				},
+				movementCosts: {
+					empty: 0,
+					impassable: -1
+				},
+				width: metrics.boardWidth,
+				height: metrics.boardHeight,
+				cells: board,
+				getMovementCost: function(column, row) {
+					return this.cells[row][column];
+				},
+				setMovementCost: function(column, row, cost) {
+					this.cells[row][column] = cost;
+				},
+				clear: function() {
+					var rowIndex;
+					var columnIndex;
+
+					for (rowIndex = 0; rowIndex < this.height; rowIndex++) {
+						for (columnIndex = 0; columnIndex < this.width; columnIndex++) {
+							this.setMovementCost(columnIndex, rowIndex, this.movementCosts.empty);
+						}
+					}
+				},
+				reset: function(boardType) {
+					var rowIndex;
+					var columnIndex;
+					var found;
+
+					this.clear();
+					patternBuilders[boardType](this);
+
+					found = false;
+					for (rowIndex = 0; rowIndex < this.height; rowIndex++) {
+						for (columnIndex = 0; columnIndex < this.width; columnIndex++) {
+							if (this.getMovementCost(columnIndex, rowIndex) === this.movementCosts.empty) {
+								this.player.x = columnIndex;
+								this.player.y = rowIndex;
+								found = true;
+								break;
+							}
+						}
+						if (found) {
+							break;
+						}
+					}
+				}
+			};
+		}
+	};
+})
diff --git a/scripts/bootstrapper.js b/scripts/bootstrapper.js
@@ -0,0 +1,21 @@
+require(["jquery",
+        "metrics",
+		"jsExtensions",
+		"astar"], function($, metrics, jsExtensions, astar) {
+	if (Modernizr.canvastext)
+	{
+		jsExtensions();
+
+	    $(document).ready(function() {	
+			$("#astar").append(
+				$('<canvas id="astarCanvas" width="' + $("#astar").width() + '" height="' + $("#astar").height() + '">')
+			);
+			astar.begin();
+	    });
+	}
+	else
+	{
+		$("#browserNotSupported").show();
+		$("#astar").hide();
+	}
+});
diff --git a/scripts/jsExtensions.js b/scripts/jsExtensions.js
@@ -0,0 +1,21 @@
+// Generally useful type augmentations
+define(function()
+{
+	return function() {
+		// Allows a function to be added to any given type. Usage below.
+		Function.prototype.method = function(name, func) {
+			if (!this.prototype[name]) {
+				this.prototype[name] = func;
+				return this;
+			}
+		};
+
+		Number.method('integer', function() {
+			return Math[this < 0 ? 'ceil' : 'floor'](this);
+		});
+
+		Number['randomInteger'] = function(upperBound) {
+			return (Math.random() * upperBound).integer();
+		};
+	};
+});
diff --git a/scripts/metrics.js b/scripts/metrics.js
@@ -0,0 +1,6 @@
+define(function() {
+	return {
+		boardWidth: 64,
+		boardHeight: 64
+	};
+});
diff --git a/scripts/modernizr-1.7.min.js b/scripts/modernizr-1.7.min.js
diff --git a/scripts/pathFinder.js b/scripts/pathFinder.js
@@ -0,0 +1,18 @@
+define(function() {
+	// Used to calculare the hCost (sometimes known as the heuristic cost as its a guess) between two co-ordinates
+	function manhattanCost(fromX, fromY, toX, toY) {
+		return Math.abs(toX - fromX) + Math.abs(toY - fromY);
+	}
+
+	var Cell = function(x, y, gCost, hCost) {
+		this.x = x;
+		this.y = y;
+		this.gCost = gCost;
+		this.hCost = hCost;
+	};
+
+	return function(board, targetX, targetY) {
+		var openList = [];
+		openList.push(new Cell(player.x, player.y, 0, 0));
+	};
+})