You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
3.4 KiB
66 lines
3.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="https://code.jquery.com/jquery-3.6.4.min.js" type="text/javascript"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js" type="text/javascript"></script>
|
|
<script src="data/scripts/init.js" type="text/javascript"></script>
|
|
<script src="data/scripts/events.js" type="text/javascript"></script>
|
|
<script src="data/scripts/online.js" type="text/javascript"></script>
|
|
<script src="data/scripts/game.js" type="text/javascript"></script>
|
|
<script src="data/scripts/algorithm.js" type="text/javascript"></script>
|
|
<script src="data/scripts/grid.js" type="text/javascript"></script>
|
|
<link href="styles.css" rel="stylesheet">
|
|
<link href="data/styles/color_picker.css" rel="stylesheet">
|
|
<link href="data/styles/range_input.css" rel="stylesheet">
|
|
<title>Pathfinding Algorithms</title>
|
|
</head>
|
|
<body>
|
|
<div id="p5_loading"></div>
|
|
<div id="content">
|
|
<div id="canvas-holder"></div>
|
|
<div id="interface">
|
|
<form onchange="game.updateVisibilities();">
|
|
<label for="circles">Circles</label>
|
|
<input id="circles" name="appearance" type="radio" value="Circles">
|
|
<br>
|
|
<label for="rectangles">Rectangles</label>
|
|
<input id="rectangles" name="appearance" type="radio" value="Rectangles">
|
|
</form>
|
|
<div onchange="game.updateVisibilities();">
|
|
<label for="pathSmoothness">Smooth path: </label>
|
|
<input id="pathSmoothness" type="checkbox">
|
|
</div>
|
|
<div onchange="game.updateVisibilities();">
|
|
<label for="gridVisibility">Grid: </label>
|
|
<input id="gridVisibility" type="checkbox">
|
|
</div>
|
|
<div onchange="game.updateVisibilities();">
|
|
<label for="information">Additional information: </label>
|
|
<input id="information" type="checkbox">
|
|
</div>
|
|
<div onchange="game.generateGrid();">
|
|
<label for="direction">Random direction: </label>
|
|
<input id="direction" type="checkbox">
|
|
</div>
|
|
<select id="movement">
|
|
<option value="0">Only Straight</option>
|
|
<option value="1">Only Diagonal</option>
|
|
<option value="2">Straight and Diagonal</option>
|
|
</select>
|
|
<input id="difficulty" max="5" min="1" oninput="game.updateDifficulty()" type="range">
|
|
<span id="difficulty_text"></span>
|
|
<input id="velocity" max="60" min="1" oninput="game.updateVelocity()" type="range">
|
|
<span id="velocity_text"></span>
|
|
<input id="cell_count" onchange="game.generateGrid();" type="range">
|
|
<span id="cell_count_text"></span>
|
|
<select id="algorithm_type">
|
|
<option value="astar">A* Algorithm</option>
|
|
<option value="dijkstra">Dijkstra Algorithm</option>
|
|
</select>
|
|
<button onclick="startAlgorithm();">Start</button>
|
|
<button onclick="game.generateGrid();">Generate</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |