Letter Maze Adventure
About this app
Navigate through a maze as the letters S, H, and E to spell SHEEP and collect points!
Letter Maze Adventure Score: 0 Time: 0.00s
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>Letter Maze Adventure</title>
<meta name="description" content="Navigate through a maze as the letters S, H, and E to spell SHEEP and collect points!">
<meta name="keywords" content="maze, game, adventure, SHEEP, points, levels">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Press Start 2P', cursive;
display: flex;
justify-content: center;
align-items: center;
background: #7ec8e3;
}
#game-container {
position: relative;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-gap: 2px;
background: #8FD694;
padding: 10px;
border-radius: 10px;
}
.cell {
width: 30px;
height: 30px;
background: #FFF;
border-radius: 4px;
}
.wall {
background: #555;
}
.player {
background: #FCD34D;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #000;
}
.exit {
background: #4ADE80;
}
.point-item {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #000;
}
.common { color: #60A5FA; }
.uncommon { color: #A78BFA; }
.rare { color: #FB7185; }
.epic { color: #FBBF24; }
.mystery { color: #ECFCCB; }
#scoreboard {
position: absolute;
top: 10px;
right: 10px;
background: #FFF;
padding: 10px;
border-radius: 10px;
}
#timer {
position: absolute;
top: 10px;
left: 10px;
background: #FFF;
padding: 10px;
border-radius: 10px;
}
@keyframes blink {
50% { background: #FEF3C7; }
}
.exit.blink {
animation: blink 1s infinite;
}
</style>
</head>
<body>
<div id="game-container"></div>
<div id="scoreboard">Score: <span id="score">0</span></div>
<div id="timer">Time: <span id="time">0.00</span>s</div>
<script>
let mazeSize = 10;
let currentLevel = 1;
let totalScore = 0;
let levelTime = 0;
let interval;
let player = { letter: 'S', x: 0, y: 0, score: 0 };
const gameContainer = document.getElementById('game-container');
const scoreSpan = document.getElementById('score');
const timerSpan = document.getElementById('time');
function initializeGame() {
resetTimer();
generateMaze(mazeSize);
placePlayer();
placePointItems();
placeExit();
startTimer();
listenForMovement();
}
function generateMaze(size) {
gameContainer.innerHTML = '';
gameContainer.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
for (let i = 0; i < size * size; i++) {
const cell = document.createElement('div');
cell.className = 'cell' + (Math.random() < 0.2 ? ' wall' : '');
gameContainer.appendChild(cell);
}
}
function placePlayer() {
const cells = Array.from(document.getElementsByClassName('cell'));
let cell;
do {
cell = cells[Math.floor(Math.random() * cells.length)];
} while (cell.classList.contains('wall'));
cell.classList.add('player');
cell.textContent = player.letter;
player.x = cell.cellIndex % mazeSize;
player.y = Math.floor(cell.cellIndex / mazeSize);
}
function placePointItems() {
const pointClasses = ['common', 'uncommon', 'rare', 'epic', 'mystery'];
const cells = Array.from(document.getElementsByClassName('cell'));
cells.forEach(cell => {
if (!cell.classList.contains('wall') && !cell.classList.contains('player')) {
const rarity = Math.random();
if (rarity < 0.5) {
cell.classList.add('point-item', pointClasses[0]);
cell.textContent = '🌱';
} else if (rarity < 0.75) {
cell.classList.add('point-item', pointClasses[1]);
cell.textContent = '🍀';
} else if (rarity < 0.9) {
cell.classList.add('point-item', pointClasses[2]);
cell.textContent = '🌟';
} else if (rarity < 0.98) {
cell.classList.add('point-item', pointClasses[3]);
cell.textContent = '💎';
} else {
cell.classList.add('point-item', pointClasses[4]);
cell.textContent = '❓';
}
}
});
}
function placeExit() {
const cells = Array.from(document.getElementsByClassName('cell'));
let cell;
do {
cell = cells[Math.floor(Math.random() * cells.length)];
} while (cell.classList.contains('wall') || cell.classList.contains('player') || cell.classList.contains('point-item'));
cell.classList.add('exit', 'blink');
cell.textContent = 'EP';
}
function listenForMovement() {
document.addEventListener('keydown', (e) => {
const key = e.key;
const directions = {
'ArrowUp': { x: 0, y: -1 },
'ArrowDown': { x: 0, y: 1 },
'ArrowLeft': { x: -1, y: 0 },
'ArrowRight': { x: 1, y: 0 }
};
if (directions[key]) {
movePlayer(directions[key].x, directions[key].y);
}
});
}
function movePlayer(dx, dy) {
const newX = player.x + dx;
const newY = player.y + dy;
const newCellIndex = newY * mazeSize + newX;
const newCell = gameContainer.children[newCellIndex];
if (newCell && !newCell.classList.contains('wall')) {
const currentCell = gameContainer.children[player.y * mazeSize + player.x];
if (newCell.classList.contains('point-item')) {
collectPoints(newCell);
}
if (newCell.classList.contains('exit')) {
completeLevel();
return;
}
currentCell.classList.remove('player');
currentCell.textContent = '';
newCell.classList.add('player');
newCell.textContent = player.letter;
player.x = newX;
player.y = newY;
}
}
function collectPoints(cell) {
const points = {
'common': 10,
'uncommon': 25,
'rare': 50,
'epic': 100,
'mystery': Math.floor(Math.random() * 201) // 0 to 200 points
};
for (const [key, value] of Object.entries(points)) {
if (cell.classList.contains(key)) {
player.score += value;
break;
}
}
cell.classList.remove('point-item', ...Object.keys(points));
cell.textContent = '';
updateScore();
}
function completeLevel() {
stopTimer();
totalScore += player.score;
if (currentLevel < 200) {
currentLevel++;
mazeSize = Math.floor(mazeSize * 1.01); // Increase by 1%
initializeGame();
} else {
alert(`Congratulations! You've completed all levels with a score of ${totalScore}`);
}
}
function updateScore() {
scoreSpan.textContent = player.score;
}
function startTimer() {
interval = setInterval(() => {
levelTime += 0.01;
timerSpan.textContent = levelTime.toFixed(2);
}, 10);
}
function resetTimer() {
clearInterval(interval);
levelTime = 0;
timerSpan.textContent = '0.00';
}
function stopTimer() {
clearInterval(interval);
}
initializeGame();
</script>
</body>
</html>
NEW APPS
These are apps made by the community!