@pasciaks/lostwords-org-library
Version:
Lostwords.org - Word search generator and function library.
166 lines (149 loc) • 5.25 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Word hiding paths canvas example.</title>
</head>
<body style="text-align: center; margin: 0; padding: 0">
<canvas
style="border: 1px solid red"
id="gridCanvas"
width="200"
height="200"
></canvas>
<div>
<h2>Word hiding example</h2>
</div>
<div id="fadeOut"><p>Standby...</p></div>
<script>
let allPaths = [];
let grid_size = 20;
let gridSize = 10;
// Note - The side of the word will exponentially increase the creation time. More than 9 letters results in over 3 million paths.
let word = "CAT"; // 56 paths
word = "SHELDON"; // 89928 paths
word = "LOSTWORDS"; // 3349864 paths
let directions = [
[-1, 0], // Up
[1, 0], // Down
[0, -1], // Left
[0, 1], // Right
[1, 1], // Down and Right
[-1, -1], // Up and Left
[1, -1], // Down and Left
[-1, 1], // Up and Right
];
// directions = [
// [-1, 0], // Up
// [1, 0], // Down
// [0, -1], // Left
// [0, 1], // Right
// ];
// directions = [
// [1, 1], // Down and Right
// [-1, -1], // Up and Left
// [1, -1], // Down and Left
// [-1, 1], // Up and Right
// ];
// Note: one direction
// directions = [
// [1, 1], // Down and Right
// ];
// Note: only path find down and right, the duplicate and transpose to the 3 other directions for quicker algo result... ?
// directions = [
// [1, 0], // Down
// [0, 1], // Right
// [1, 1], // Down and Right
// ];
// NOTE: Enable below for static direction
// let ind = Math.floor(Math.random() * 8);
// directions = [[directions[ind][0], directions[ind][1]]];
function findAllSnakePaths(word) {
let validPaths = [];
const center = Math.floor(grid_size / 2);
function isInsideGrid(x, y) {
return x >= 0 && x < grid_size && y >= 0 && y < grid_size;
}
function findPathsRecursive(x, y, path) {
if (path.length === word.length) {
validPaths.push([...path]);
return;
}
for (const [dx, dy] of directions) {
const newX = x + dx;
const newY = y + dy;
if (
isInsideGrid(newX, newY) &&
!path.some((coords) => coords[0] === newX && coords[1] === newY)
// Note: This is where it checks for 'already visited', consider a check that allows this path if the current letter equals the possible letter at this coordinate
) {
path.push([newX, newY]);
findPathsRecursive(newX, newY, path);
path.pop();
}
}
}
findPathsRecursive(center, center, [[center, center]]);
return validPaths;
}
async function displayWordSnake() {
const canvas = document.getElementById("gridCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
const randomHexColor =
"#" +
Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, "0");
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < 200; i += gridSize) {
for (var j = 0; j < 200; j += gridSize) {
ctx.strokeStyle = "gray";
ctx.strokeRect(i, j, gridSize, gridSize);
}
}
let coordinates = allPaths;
function drawCircle(x, y, letter) {
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "gold";
ctx.strokeRect(x, y - gridSize, gridSize, gridSize);
ctx.font = "14px Courier";
ctx.fillStyle = randomHexColor;
ctx.fillRect(x, y - gridSize, gridSize, gridSize);
ctx.fillStyle = "white";
ctx.fillText(letter, x, y);
ctx.closePath();
}
let currentPathIndex = 0;
let randomSelectedPath = Math.floor(Math.random() * coordinates.length);
for (const path of coordinates) {
if (currentPathIndex === randomSelectedPath) {
console.log(JSON.stringify(path));
let ci = 0;
for (const [row, col] of path) {
let x = col * gridSize;
let y = row * gridSize;
let letter = word[ci];
ci++;
drawCircle(x, y, letter);
}
}
currentPathIndex++;
}
}
setTimeout(() => {
setInterval(() => {
displayWordSnake();
}, 500);
}, 3000);
setTimeout(() => {
allPaths = findAllSnakePaths(word);
console.log(allPaths.length);
document.getElementById("fadeOut").remove();
displayWordSnake();
}, 500);
</script>
</body>
</html>