/a_star_backbone/main.html

https://github.com/siyegen/A--backbone · HTML · 43 lines · 39 code · 4 blank · 0 comment · 0 complexity · b18f531b163f5ce3f72d4e082f510853 MD5 · raw file 

    

  1. <html>
    2. 

  2. 	<head>
    3. 

  3. 		<meta charset="utf-8">
    4. 

  4. 		<title>A* demo with a backbone</title>
    5. 

  5. 		
    6. 

  6. 		<script src="./js/underscore.js"></script>
    7. 

  7. 		<script src="./js/jquery-1.6.4.js"></script>
    8. 

  8. 		<script src="./js/backbone.js"></script>
    9. 

  9. 		<script src="./js/json2.js"></script>
    10. 

  10. 

  11. 		<script data-main="js/a_star" src="js/require.js"></script>
    12. 

  12. 

  13. 		<link href="./css/style.css" media="all" rel="stylesheet" type="text/css">
    14. 

  14. 		
    15. 

  15. 	</head>
    16. 

  16. 	<body>
    17. 

  17. 		<script type="text/template" id="grid-template">
    18. 

  18. 			<table class="grid">
    19. 

  19. 				<% for(var i=0; i<rows; i++){%><tr id="row-<%= i %>"></tr><% }%>
    20. 

  20. 			</table>
    21. 

  21. 		</script>
    22. 

  22. 		<script type="text/template" id="button-template">
    23. 

  23. 			<button class="btn primary" id="<%= id %>"><%= name %></button>
    24. 

  24. 		</script>
    25. 

  25. 		<script type="text/template" id="help-text">
    26. 

  26. 			<p>
    27. 

  27. 				A* demo with a backbone.  Input the number of rows and columns in the range [2, 20].
    28. 

  28. 			</p>
    29. 

  29. 			<p>
    30. 

  30. 				Click build to build the grid.  Click and drag the start/end (green/red) cells to move them.
    31. 

  31. 				Click and drag any other cell to toggle whether it's passable or not.
    32. 

  32. 			</p>
    33. 

  33. 			<p>
    34. 

  34. 				When you're ready, click 'Start' to let the algo try to find a path.  The path is shown in light
    35. 

  35. 				blue, and expanded (or travelled) cells are shown in a varying color depending on the cost to get
    36. 

  36. 				there from the start cell.  If you want to make changes to the grid and try again click 'Unlock', 
    37. 

  37. 				make your changes, and then click 'Start' again.  Clicking 'Build' again will reset the div.  Be
    38. 

  38. 				warned that resizing the window so that the grid changes size will cause the inputs to be off till
    39. 

  39. 				you rebuild.
    40. 

  40. 			</p>
    41. 

  41. 		</script>
    42. 

  42. 	</body>
    43. 

  43. </html>
    44.