I was messing around with some maze stuff. I was wondering if its possible to add a character to what i have even though Im not using canvas.How do you position an html element representing your player on your page so it aligns with a position in the maze.
my html:
<head>
<title>Maze</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="mazegenerator.js"></script>
<script type="text/javascript" src="Maze.js"></script>
<style type="text/css">
#maze {
border-collapse: collapse;
}
#maze td {
width: 20px;
height: 20px;
}
canvas {
position: absolute;
}
</style>
</head>
<body>
<table id="maze">
<tbody></tbody>
</table>
<script>
var disp = newMaze(20,20);
for (var i = 0; i < disp.length; i++) {
$('#maze > tbody').append("<tr>");
for (var j = 0; j < disp[i].length; j++) {
var selector = i+"-"+j;
$('#maze > tbody').append("<td id='"+selector+"'> </td>");
if (disp[i][j][0] == 0) { $('#'+selector).css('border-top', '2px solid black'); }
if (disp[i][j][1] == 0) { $('#'+selector).css('border-right', '2px solid black'); }
if (disp[i][j][2] == 0) { $('#'+selector).css('border-bottom', '2px solid black'); }
if (disp[i][j][3] == 0) { $('#'+selector).css('border-left', '2px solid black'); }
}
$('#maze > tbody').append("<tr>");
}
</script>
<br>
<span id="mazeComplete">Maze complete <button id="resetMaze" onclick="mazeReset()">New Maze</button> </span>
Completed <span id="mazeCompletions">0</span>
<script type="text/javascript" src="Maze.js"></script>
</body>
</html>
my javascript:
// Establish variables and starting grid
var totalCells = x*y;
var cells = new Array();
var unvis = new Array();
for (var i = 0; i < y; i++) {
cells[i] = new Array();
unvis[i] = new Array();
for (var j = 0; j < x; j++) {
cells[i][j] = [0,0,0,0];
unvis[i][j] = true;
}
}
// Set a random position to start from
var currentCell = [Math.floor(Math.random()*y), Math.floor(Math.random()*x)];
var path = [currentCell];
unvis[currentCell[0]][currentCell[1]] = false;
var visited = 1;
// Loop through all available cell positions
while (visited < totalCells) {
// Determine neighboring cells
var pot = [[currentCell[0]-1, currentCell[1], 0, 2],
[currentCell[0], currentCell[1]+1, 1, 3],
[currentCell[0]+1, currentCell[1], 2, 0],
[currentCell[0], currentCell[1]-1, 3, 1]];
var neighbors = new Array();
// Determine if each neighboring cell is in game grid, and whether it has already been checked
for (var l = 0; l < 4; l++) {
if (pot[l][0] > -1 && pot[l][0] < y && pot[l][1] > -1 && pot[l][1] < x && unvis[pot[l][0]][pot[l][1]]) { neighbors.push(pot[l]); }
}
// If at least one active neighboring cell has been found
if (neighbors.length) {
// Choose one of the neighbors at random
next = neighbors[Math.floor(Math.random()*neighbors.length)];
// Remove the wall between the current cell and the chosen neighboring cell
cells[currentCell[0]][currentCell[1]][next[2]] = 1;
cells[next[0]][next[1]][next[3]] = 1;
// Mark the neighbor as visited, and set it as the current cell
unvis[next[0]][next[1]] = false;
visited++;
currentCell = [next[0], next[1]];
path.push(currentCell);
}
// Otherwise go back up a step and keep going
else {
currentCell = path.pop();
}
}
return cells;
}
function mazeReset(){
document.location.reload()
}
var gameComplete = false;
var mazeComplete = document.getElementById("mazeComplete");
function checkGameFinished() {
if (gameComplete === false) {
mazeComplete.style.visibility = 'visible'
} else if (gameComplete === true) {
mazeComplete.style.visibility = 'visible'
}
}
checkGameFinished();
I expect a way to put a movable object in the top left corner then a sort of goal in the bottom right corner. at the moment Im not sure how to accomplish this.
