Maze
2.6/5.0 (182 votes total)
Description:
Your player is represented by the "*" in the upper-left corner.
Use the buttons to move it around the maze. The boxes will show your
coordinates. Be careful not to hit any walls. You can't edit the coordinates
in the textboxes -- that would be cheating. Reach the "$" in the lower-right to win.
Press "Reset" to start over.
JavaScript Functions:
<SCRIPT type="text/javascript" FOR="window" EVENT="onload">
initBoard();
</SCRIPT>
<script type="text/javascript">
var line = "";
var x = 0;
var y = 0;
var full="*";
var blank = ".";
var wall = "#";
var goal = "$";
var fill = "";
// Functions to create the board
function makeboard() {
for (var i=1; i<= 10; i++)
this[i] = new makeRow();
return this;
}
function makeRow() {
for (var i=1; i<= 10; i++)
this[i]=blank;
return this;
}
// Functions to fill & clear the board.
function clearBoard (form) {
// Clears & resets the board
x = 0;
y = 0;
form.xval.value = 1;
form.yval.value = 1;
for (var i=1; i<= 10; i++)
for (var j=1; j<= 10; j++)
theBoard[i][j]=blank;
drawMaze();
fillBoard(form);
return;
}
function fillBoard (form) {
// Clear board buffer
line = "";
form.grid.value = "";
// Fill board buffer
for (var i=1; i<= 10; i++)
for (var j=1; j<= 10; j++)
line += theBoard[i][j];
// Move buffer contents to board
form.grid.value=line;
}
function plot (v, h) {
theBoard[v][h] = fill;
}
function drawMaze() {
// Plots the walls of the maze
//
// Ideally, a function should do this automatically,
// or maybe I should write a maze generating function in JS!
// Note: This program operates in Y,X co-ordinates (not standard X,Y).
theBoard[10][10] = goal;
theBoard[1][2] = wall;
theBoard[2][2] = wall;
theBoard[4][1] = wall;
theBoard[4][2] = wall;
theBoard[4][3] = wall;
theBoard[2][3] = wall;
theBoard[5][2] = wall;
theBoard[6][2] = wall;
theBoard[2][5] = wall;
theBoard[4][5] = wall;
theBoard[5][5] = wall;
theBoard[2][6] = wall;
theBoard[2][7] = wall;
theBoard[9][10] = wall;
theBoard[9][9] = wall;
theBoard[8][9] = wall;
theBoard[7][9] = wall;
theBoard[10][7] = wall;
theBoard[9][7] = wall;
theBoard[8][7] = wall;
theBoard[6][7] = wall;
theBoard[9][2] = wall;
theBoard[9][3] = wall;
theBoard[9][4] = wall;
theBoard[8][2] = wall;
theBoard[7][4] = wall;
theBoard[7][5] = wall;
theBoard[6][5] = wall;
theBoard[5][7] = wall;
theBoard[5][8] = wall;
theBoard[5][9] = wall;
theBoard[4][9] = wall;
}
function update(form) {
var horiz = eval(form.xval.value);
var vert = eval(form.yval.value);
plot(vert,horiz);
fillBoard(form);
return;
}
function initBoard() {
theBoard = new makeboard();
fill = full;
clearBoard(document.board);
update(document.board);
}
// Functions to handle the player piece
//
// I suppose I could have written one function to handle this,
// but it was getting too complex. Feel free to try. :)
//
function decx(form) {
fill = blank;
update(form);
checkx = eval(form.xval.value - 1);
checky = form.yval.value;
if (form.xval.value > 1) {
if (theBoard[checky][checkx] != wall) {
form.xval.value=eval(form.xval.value - 1);
}
else {
alert("THUD!\nYou hit a wall.");
}
if (theBoard[checky][checkx] == goal) {
alert("YOU WIN!");
}
}
fill = full;
update(form);
}
function incx(form) {
fill = blank;
update(form);
checkx = eval(1 * form.xval.value + 1);
checky = form.yval.value;
if (form.xval.value < 10) {
if (theBoard[checky][checkx] != wall) {
form.xval.value=eval(1 * form.xval.value + 1);
}
else {
alert("THUD!\nYou hit a wall.");
}
if (theBoard[checky][checkx] == goal) {
alert("YOU WIN!");
}
}
fill = full;
update(form);
}
function decy(form) {
fill = blank;
update(form);
checkx = form.xval.value;
checky = eval(form.yval.value - 1);
if (form.yval.value > 1) {
if (theBoard[checky][checkx] != wall) {
form.yval.value=eval(form.yval.value - 1);
}
else {
alert("THUD!\nYou hit a wall.");
}
if (theBoard[checky][checkx] == goal) {
alert("YOU WIN!");
}
}
fill = full;
update(form);
}
function incy(form) {
fill = blank;
update(form);
checkx = form.xval.value;
checky = eval(1 * form.yval.value + 1);
if (form.yval.value < 10) {
if (theBoard[checky][checkx] != wall) {
form.yval.value=eval(1 * form.yval.value + 1);
}
else {
alert("THUD!\nYou hit a wall.");
}
if (theBoard[checky][checkx] == goal) {
alert("YOU WIN!");
}
}
fill = full;
update(form);
}
// Various Functions
function cheater (form) {
// Refuse to change values manually, and start over. CHEATER!
alert("You can't change this value manually.\nPlease use the buttons.");
clearBoard(form);
update(form);
}
</script>
HTML Script:
<table>
<tr>
<td align="center">
<form method="post" name="board">
<input type='button' value='Reset' onClick='clearBoard(this.form);update(document.board);'>
<br>
<textarea name="grid" rows="9" cols="10" wrap=virtual></textarea><br>
<!-- virtual-wrap is the key! Now one text line becomes a grid! -->
<table>
<tr>
<td><input type='button' value='UP' onClick='decy(this.form)'></td>
<td><input type='text' value='1' size=5 name='yval' onChange='cheater(this.form);'></td>
<td><input type='button' value='DOWN' onClick='incy(this.form)'></td>
<tr>
<td><input type='button' value='LEFT' onClick='decx(this.form)'></td>
<td><input type='text' value='1' size=5 name='xval' onChange='cheater(this.form);'></td>
<td><input type='button' value='RIGHT' onClick='incx(this.form)'></td>
</table>
</form>
</td>
</tr>
</table>
Browsers Compatibility:
IE