CubeBit/a-star-visualize
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Denys Seredenko
2025-06-03 13:11:19 +02:00
commit e65150f518
2 changed files with 155 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
index.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A* Visualisation Algorithm</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
</head>
<body>
<h1>Hello World!</h1>
<div class="container py-4">
<div class="mb-3">
<label for="widthInput" class="form-label">Width</label>
<input oninput="onWidthInputChanged(this.value)" type="number" class="form-control" id="widthInput" placeholder="Define a width of field">
</div>
<div class="mb-3">
<label for="heightInput" class="form-label">Height</label>
<input oninput="onHeightInputChanged(this.value)" type="number" class="form-control" id="heightInput" placeholder="Define a height of field">
</div>
<button onclick="regenerateField()" type="button" class="btn btn-danger">Regenerate</button>
<div class="pt-4">
<div>
Selected mode: <span id="mode">Free Field</span>
</div>
<button type="button" class="btn btn-primary" onclick="changeMode(0)">Free Space</button>
<button type="button" class="btn btn-dark" onclick="changeMode(1)">Obstacle</button>
<button type="button" class="btn btn-warning" onclick="changeMode(2)">Start Point</button>
<button type="button" class="btn btn-success" onclick="changeMode(3)">End Point</button>
</div>
</div>
<div id="field" class="container text-center">
<div id="row-0" class="row g-2 g-lg-3">
<div class="col p-3 border border-1 border-dark">0</div>
<div class="col p-3 border border-1 border-dark">0</div>
</div>
<div id="row-1" class="row g-2 g-lg-3">
<div class="col p-3 border border-1 border-dark">0</div>
<div class="col p-3 border border-1 border-dark">0</div>
</div>
<div id="row-2" class="row g-2 g-lg-3">
<div class="col p-3 border border-1 border-dark">0</div>
<div class="col p-3 border border-1 border-dark">0</div>
</div>
<div id="row-3" class="row g-2 g-lg-3">
<div class="col p-3 border border-1 border-dark">0</div>
<div class="col p-3 border border-1 border-dark">0</div>
</div>
</div>
<script src="js/main.js">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
</body>
</html>

101
js/main.js Normal file
View File

@@ -0,0 +1,101 @@
let width = 10;
let height = 10;
// 0 - free field, 1 - obstacle, 2 - start point, 3 - end point
let currentMode = 0;
//0 - means free, 1 - means obstacle, 3 - means start point, 4 - means end point
let fieldModel = [];
function changeMode(num) {
currentMode = num
rerenderMode()
}
function rerenderMode() {
let modus = document.getElementById("mode")
if (currentMode === 0)
modus.innerText = 'Free Field'
else if(currentMode === 1)
modus.innerText = 'Obstacle'
else if(currentMode === 2)
modus.innerText = 'Start Point'
else if (currentMode === 3)
modus.innerText = 'End Point'
}
function onWidthInputChanged(num) {
width = num;
}
function onHeightInputChanged(num) {
height = num;
}
function regenerateField() {
fieldModel = []
for (let i = 0; i < height; ++i) {
fieldModel.push(Array.from({length: width}, (element, index) => 0))
}
reDrawField()
}
function startAStar() {}
function reDrawField() {
const oldField = document.getElementById("field")
const newField = document.createElement("div")
newField.setAttribute("id", "field")
newField.setAttribute("class", "container text-center")
for (let i = 0; i < fieldModel.length; ++i) {
//Build a row
let row = document.createElement("div")
row.setAttribute("id", `row-${i}`)
row.setAttribute("class", "row g-2 g-lg-3")
for (let j = 0; j< fieldModel[i].length; ++j) {
//add columns in built row
let column = document.createElement("div")
if (fieldModel[i][j] === 0) {
column.setAttribute("class", "col p-3 border border-1 border-dark bg-white")
} else if (fieldModel[i][j] === 1) {
column.setAttribute("class", "col p-3 border border-1 border-dark bg-black")
} else if (fieldModel[i][j] === 2) {
column.setAttribute("class", "col p-3 border border-1 border-dark bg-warning")
} else if (fieldModel[i][j] === 3) {
column.setAttribute("class", "col p-3 border border-1 border-dark bg-success")
}
column.addEventListener("click", (event) => {
if (currentMode === 2) {
for (let ii = 0; ii < height; ++ii) {
for (let jj = 0; jj < width; ++jj) {
if (fieldModel[ii][jj] === 2)
fieldModel[ii][jj] = 0
}
}
}
if (currentMode === 3) {
for (let ii = 0; ii < height; ++ii) {
for (let jj = 0; jj < width; ++jj) {
if (fieldModel[ii][jj] === 3)
fieldModel[ii][jj] = 0
}
}
}
fieldModel[i][j] = currentMode
event.target.innerText = currentMode
reDrawField()
})
column.innerText = fieldModel[i][j]
row.appendChild(column)
}
newField.appendChild(row)
}
oldField.remove()
document.body.appendChild(newField)
}
regenerateField()