Pathfinder Game
About this app
A simple Pathfinder game where you move around to reach the goal.
Maze Pathfinder Game
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Maze Pathfinder Game</title>
<meta name="description" content="A maze Pathfinder game with 100 levels of increasing difficulty.">
<meta name="keywords" content="Maze, Pathfinder, Game, Fun, Interactive, Web App">
<style>
/* App CSS Goes Here */
.row {
display: flex;
}
.cell {
border: 1px solid #000;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- Grid will appear here -->
</div>
<script type="text/javascript">
try {
// Game Variables
let playerPosition = {x: 0, y: 0};
let goalPosition = {x: 0, y: 0};
const gridSize = 5;
let currentLevel = 1;
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
window.addEventListener('keydown', handleKeydown);
generateMaze();
drawGrid();
});
function handleKeydown(e) {
switch(e.keyCode) {
case 37: // left
if (isPath(playerPosition.x - 1, playerPosition.y)) {
playerPosition.x--;
}
break;
case 38: // up
if (isPath(playerPosition.x, playerPosition.y - 1)) {
playerPosition.y--;
}
break;
case 39: // right
if (isPath(playerPosition.x + 1, playerPosition.y)) {
playerPosition.x++;
}
break;
case 40: // down
if (isPath(playerPosition.x, playerPosition.y + 1)) {
playerPosition.y++;
}
break;
}
drawGrid();
if(playerPosition.x === goalPosition.x && playerPosition.y === goalPosition.y) {
setTimeout(function() {
alert("You've reached the goal! 🎉");
nextLevel();
}, 100);
}
}
function generateMaze() {
const obstacles = generateObstacles();
const validPath = generateValidPath(obstacles);
playerPosition = validPath[0];
goalPosition = validPath[validPath.length - 1];
}
function generateObstacles() {
const obstacles = [];
for(let i = 0; i < gridSize; i++) {
obstacles[i] = [];
for(let j = 0; j < gridSize; j++) {
obstacles[i][j] = Math.random() < getObstacleDensity(currentLevel);
}
}
return obstacles;
}
function generateValidPath(obstacles) {
const path = [];
const visited = [];
for(let i = 0; i < gridSize; i++) {
visited[i] = [];
for(let j = 0; j < gridSize; j++) {
visited[i][j] = false;
}
}
dfs(0, 0, visited, path, obstacles);
return path;
}
function dfs(x, y, visited, path, obstacles) {
visited[x][y] = true;
path.push({x, y});
if(x === gridSize - 1 && y === gridSize - 1) {
return true;
}
const dx = [-1, 1, 0, 0];
const dy = [0, 0, -1, 1];
for(let i = 0; i < 4; i++) {
const newX = x + dx[i];
const newY = y + dy[i];
if(isValid(newX, newY, visited, obstacles)) {
if(dfs(newX, newY, visited, path, obstacles)) {
return true;
}
}
}
path.pop();
return false;
}
function isValid(x, y, visited, obstacles) {
return x >= 0 && x < gridSize && y >= 0 && y < gridSize && !visited[x][y] && !obstacles[x][y];
}
function isPath(x, y) {
return x >= 0 && x < gridSize && y >= 0 && y < gridSize && !obstacles[x][y];
}
function getObstacleDensity(level) {
return Math.min(0.2 + level * 0.01, 0.8);
}
function nextLevel() {
currentLevel++;
generateMaze();
drawGrid();
}
function drawGrid() {
const container = document.getElementById('main-container');
container.innerHTML = '';
for(let y = 0; y < gridSize; y++) {
const row = document.createElement('div');
row.classList.add('row');
for(let x = 0; x < gridSize; x++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.textContent = getCellContent(x, y);
row.appendChild(cell);
}
container.appendChild(row);
}
}
function getCellContent(x, y) {
if(playerPosition.x === x && playerPosition.y === y) {
return '🚶♂️';
} else if(goalPosition.x === x && goalPosition.y === y) {
return '🏁';
} else if(obstacles[x][y]) {
return '🌳';
} else {
return ' ';
}
}
} catch (error) {
throw error;
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!