JSFiddle - React, Tailwind, and code Playground
by path411
HTML
<div id="info">
Loopy Shloopy Floop Doop Boop is an example of the A* algorithm for pathfinding.
The objective is to connect the red square to the green square.<br /><br />
<b>Instructions:</b><br /><br />
You are able to draw walls and obstacles by pressing, holding, and dragging your mouse
around the canvas below. If you want to erase a wall, simply go over an already added
wall with your mouse, as if you were drawing a new wall. Upon completion, press "enter"
and LSFDB will begin to find the fastest path. When you're done, or when you want to
clear it, press "c".<br /><br />
After LSFDB has found the path, you will see green squares and blue squares. The green
squares represent the quickest path to between the dots, and the blue squares represent
squares that were looked at or visited during the time that it took to find the shortest path.<br /><br />
<b>Set the Start & End Locations:</b><br /><br />
Start: x: <input type="text" id="input_startx" value="7" /> y: <input type="text" id="input_starty" value="14" /><br />
End: x: <input type="text" id="input_endx" value="23" /> y: <input type="text" id="input_endy" value="14" /><br />
<input type="button" value="Set" onclick="setStartEndXY();" /> ** Will Clear Canvas On Set
</div>
<canvas id="canvas" width="900" height="900"></canvas>CSS
body {
padding:0;
margin:0;
font-family:Helvetica, Arial;
font-weight:bold;
font-size:16px;
color:#000;
background-color:#EEE;
}
header {
display:block;
margin-top:20px;
font-size:30px;
text-align:center;
color:#666;
}
div#info {
display:block;
width:900px;
padding:10px;
padding-left:0;
padding-right:0;
margin-left:auto;
margin-right:auto;
font-size:15px;
font-weight:normal;
color:#333;
}
canvas {
display:block;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:20px;
background-color:#333;
border:#333 2px solid;
}
#sc_drag_area_protector div{
border-radius: 0px 0px;
margin:0;
/*max-width:100%;*/
min-width: 1px;
}
#sc_drag_area {
height:100px;
left:150px;
position: absolute;
top:100px;
width:250px;
z-index: 9999;
}
#sc_drag_container {
border: 1px solid #0000FF;
cursor: move ;
height: 100% ;
margin: 0;
overflow: hidden;
padding: 0;
position: relative ;
width: 100%;
z-index:9997;
}
#sc_drag_area_protector {
border-radius: 0px 0px;
display: block;
height:100%;
left:0;
top:0;
position: absolute;
width:100%;
z-index:8500;
margin: 0;
min-width: 1px;
overflow: hidden;
}
#sc_drag_size {
background-color: rgba(44, 44, 44, 0.5);
color:#ffffff;
font-family: arial,san-serif;
font-weight:bold;
font-size:12px;
height:18px;
min-width:65px !important;
left:12px;
line-height:18px;
position:absolute;
padding-left:4px;
padding-right:4px;
text-align:center;
top: -18px;
z-index:9998;
}
#sc_drag_cancel, #sc_drag_crop {
background-color: rgba(0, 0, 0, 0.5);
cursor:pointer;
color:#ffffff;
font-size:12px;
font-family: arial,san-serif;
font-weight:bold;
height:22px;
line-height:22px;
position:absolute ;
z-index:9998
}
#sc_drag_crop {
bottom:-25px;
text-align:...JavaScript
var canvas, ctx;
var boxes = [], searchedBoxes = [];
var start = {x:7,y:14};
var end = {x:23,y:14};
var searchCount = 0, searching = false;
$(document).ready(function() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
$(document).bind('keyup',function(e) {
if (e.keyCode == 13) {
// enter
solvePath();
}
if (e.keyCode == 67) {
// c for clear
if (!searching) {
boxes = [];
layoutBoxes();
drawBoxes();
}
}
});
var getMouseFromEvent = function(e) {
var mouseX, mouseY;
if (e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
} else if(e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
return {x:mouseX, y:mouseY};
};
var drawBoxAtCoords = function(coords) {
if (searching) return;
var box = boxAtLoc(coords.x,coords.y);
if (box) {
if (box && box.clickable && !box.clicked && lastBoxDrawn != box) {
lastBoxDrawn = box;
box.clicked = true;
drawBox(box);
} else if (box.clickable && box.clicked && lastBoxDrawn != box) {
lastBoxDrawn = box;
box.clicked = false;
drawBox(box);
}
}
};
var clickdown = false;
var lastBoxDrawn = null;
var mousemove = function(e) {
var coords = getMouseFromEvent(e);
drawBoxAtCoords(coords);
};
$(canvas).mousedown(function(e) {
...