Line Maze Challenge
About this app
Navigate through a complex network of lines to find the exit and win the silver medal!
Maze Challenge
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maze Challenge</title>
<meta name="description" content="Navigate through a complex network of lines to find the exit and win the silver medal!">
<meta name="keywords" content="maze, lines, challenge, game, puzzle, web app">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Press Start 2P', cursive;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #e66465, #9198e5);
}
.split-container {
display: flex;
width: 100%;
height: 100%;
}
.split-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
border: 5px solid #333;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body>
<div class="split-container">
<div class="split-item">
<canvas id="mazeCanvas1" width="400" height="600"></canvas>
</div>
<div class="split-item">
<canvas id="mazeCanvas2" width="400" height="600"></canvas>
</div>
</div>
<script>
const canvas1 = document.getElementById('mazeCanvas1');
const ctx1 = canvas1.getContext('2d');
const width1 = canvas1.width;
const height1 = canvas1.height;
const lines1 = [];
const maxLines1 = 83;
const exitLineIndex1 = maxLines1 - 1;
let exitReached1 = false;
const canvas2 = document.getElementById('mazeCanvas2');
const ctx2 = canvas2.getContext('2d');
const width2 = canvas2.width;
const height2 = canvas2.height;
const lines2 = [];
const maxLines2 = 84;
const exitLineIndex2 = maxLines2 - 1;
let exitReached2 = false;
function generateRandomLine(width, height) {
const x1 = Math.random() * width;
const y1 = Math.random() * height;
const x2 = Math.random() * width;
const y2 = Math.random() * height;
return { x1, y1, x2, y2 };
}
function drawLine(ctx, line, color = '#FFF') {
ctx.beginPath();
ctx.moveTo(line.x1, line.y1);
ctx.lineTo(line.x2, line.y2);
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.stroke();
}
function createMaze(ctx, maxLines, exitLineIndex) {
for (let i = 0; i < maxLines; i++) {
const line = generateRandomLine(width, height);
lines.push(line);
drawLine(ctx, line);
}
const exitLine = lines[exitLineIndex];
drawLine(ctx, exitLine, 'silver'); // Highlight the exit line in silver
}
function checkLineIntersection(line, mouseX, mouseY) {
const distToStart = Math.hypot(line.x1 - mouseX, line.y1 - mouseY);
const distToEnd = Math.hypot(line.x2 - mouseX, line.y2 - mouseY);
const lineLength = Math.hypot(line.x2 - line.x1, line.y2 - line.y1);
return Math.abs(distToStart + distToEnd - lineLength) < 1;
}
function checkForWin(ctx, lines, exitLineIndex, mouseX, mouseY, exitReached) {
if (checkLineIntersection(lines[exitLineIndex], mouseX, mouseY)) {
exitReached = true;
alert('Congratulations! You have found the exit and won the silver medal! 🥈');
}
}
createMaze(ctx1, maxLines1, exitLineIndex1);
createMaze(ctx2, maxLines2, exitLineIndex2);
canvas1.addEventListener('mousemove', (event) => {
if (exitReached1) return;
const rect = canvas1.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
checkForWin(ctx1, lines1, exitLineIndex1, mouseX, mouseY, exitReached1);
});
canvas2.addEventListener('mousemove', (event) => {
if (exitReached2) return;
const rect = canvas2.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
checkForWin(ctx2, lines2, exitLineIndex2, mouseX, mouseY, exitReached2);
});
</script>
</body>
</html>
NEW APPS
These are apps made by the community!