glm94/javascript-search-tests
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Started updating the main form to have control over how the maze's properties. Search algorithm can now be changed on the fly.

Browse Source
This commit is contained in:
glm94
2020-05-19 13:28:54 -05:00
parent ff496ff63b
commit 6e8c700b9b
3 changed files with 102 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+48 -12
View File
@@ -22,6 +22,31 @@
clear: both;
}
</style>
<script>
function updateCanvasWidth(){
let w = document.getElementById('canvasWidthTextbox').value;
resizeCanvas(w, height);
}
function updateCanvasHeight(){
let h = document.getElementById('canvasHeightTextbox').value;
}
function toggleForm(enabled){
document.getElementById("canvasProperties").disabled = !enabled;
document.getElementById("algo").disabled = !enabled;
document.getElementById("misc").disabled = !enabled;
document.getElementById("runButton").disabled = !enabled;
}
function rerun(){
algo = {};
maze.resetMazeState();
maze.updateMazeDisplay();
loop();
}
</script>
<script src="maze-solver.js"></script>
<script src="cell.js"></script>
<script src="gen-maze.js"></script>
@@ -33,19 +58,30 @@
<body>
<div id="sketch-holder" class="column"></div>
<div class="column">
<label id="information"></label>
<form action="">
<label for="canvasWidthTextbox" >Canvas Size Width: </label><input type="number" id="canvasWidthTextbox" value="400"/>
<label for="canvasHeighTextbox"> Height: </label><input type="number" id="canavasHeightTextbox" value="400"/><br/>
<label for="genFrameRate">Framerate During Maze Generation: </label><input type="number" id="genFrameRate" min="1" max="144" step="1" value="30"/><br />
<label for="searchAlgo">Search Algorithm to Find Maze Anwser: </label>
<select id="searchAlgo">
<option value="depthFirst">Depth First</option>
<option value="breadthFirst">Breadth First</option>
<option value="a">a*</option>
</select><br />
<label for="solvingFrameRate">Framerate During Maze Solving: </label><input type="number" id="solvingFrameRate" min="1" max="144" step="1" value="30"/><br />
<input id="reuseMaze" type="checkbox" checked="true"/><label for="reuseMaze">Reuse current maze on next run</label>
<br /><button type="button" onClick="draw();">Again</button>
<fieldset id="canvasProperties" name="canvasProperties" disabled="disabled">
<legend>Canvas Properties</legend>
<label for="canvasWidthTextbox" >Canvas Size Width: </label><input type="number" id="canvasWidthTextbox" value="500" onchange="updateCanvasWidth()"/>
<label for="canvasHeightTextbox"> Height: </label><input type="number" id="canavasHeightTextbox" value="500" onchange="updateCanvasHeight()"/><br/>
<label for="genFrameRate">Framerate During Maze Generation: </label><input type="number" id="genFrameRate" min="1" max="144" step="1" value="30" /><br />
<label for="solvingFrameRate">Framerate During Maze Solving: </label><input type="number" id="solvingFrameRate" min="1" max="144" step="1" value="30" /><br />
<input id="reuseMaze" type="checkbox" checked="true" /><label for="reuseMaze">Reuse current maze on next run (uncheck to generate a new maze)</label>
</fieldset>
<fieldset id="algo" name="algo" disabled="disabled">
<legend>Search Algorithms</legend>
<label for="searchAlgo">Search Algorithm to Find Maze Anwser: </label>
<select id="searchAlgo">
<option value="depthFirst">Depth First</option>
<option value="breadthFirst">Breadth First</option>
<option value="a*">a*</option>
</select>
</fieldset>
<fieldset id="misc" disabled="disabled">
<legend>Misc.</legend>
<label for="cellWidthInput">Cell Width: </label><input type="number" id="cellWidthInput" value="50" />
</fieldset>
<button id="runButton" type="button" onClick="rerun()" disabled>Re-run</button>
</form>
</div>