Maze Runner: SHEEP Quest
About this app
Navigate through the maze with the letters S, H, E to spell out SHEEP at the exit while collecting points and bonuses.
Maze Runner: SHEEP Quest Level Score: 0 Time: 0s Total Score: 0
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">
<title>Maze Runner: SHEEP Quest</title>
<meta name="description" content="Navigate through the maze with the letters S, H, E to spell out SHEEP at the exit while collecting points and bonuses.">
<meta name="keywords" content="maze, game, SHEEP, puzzle, HTML game, interactive, JavaScript">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Press Start 2P', cursive;
}
#maze-container {
position: relative;
width: 100%;
height: 90%;
}
.maze-cell {
position: absolute;
border: 1px solid #000;
box-sizing: border-box;
}
.wall {
background-color: #333;
}
.path, .exit {
background-color: #fff;
}
.letter {
position: absolute;
user-select: none;
font-size: 1rem;
text-align: center;
line-height: 1.5rem;
cursor: pointer;
}
.exit {
background-color: #90ee90;
}
.item-common {
color: #cccccc;
}
.item-uncommon {
color: #00ff00;
}
.item-rare {
color: #0000ff;
}
.item-epic {
color: #800080;
}
.item-mystery {
color: #ff1493;
}
#scoreboard {
padding: 10px;
background: #f0f0f0;
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1rem;
}
#timer {
font-size: 1.5rem;
}
.hidden {
display: none;
}
</style>
<script>
try {
const levelMultiplier = 0.01;
let currentLevel = 1;
let totalScore = 0;
let levelScore = 0;
let levelStart = null;
let levelInterval = null;
let mazeSize = 10;
let playerPosition = {x: 0, y: 0};
let exitPosition = {x: 0, y: 0};
let collectedLetters = '';
const letters = ['S', 'H', 'E'];
const itemScores = {
'common': 10,
'uncommon': 50,
'rare': 100,
'epic': 500,
'mystery': 1000
};
function createLevel() {
mazeSize += currentLevel * levelMultiplier;
// Generate maze layout, player and exit position, and items. For simplicity, a random approach is used.
// In a real scenario, a more complex algorithm like recursive division would be used.
generateMaze(Math.floor(mazeSize), Math.floor(mazeSize));
placePlayer();
placeExit();
placeItems();
levelStart = new Date();
updateTimer();
levelInterval = setInterval(updateTimer, 1000);
}
function generateMaze(width, height) {
const mazeContainer = $('#maze-container');
mazeContainer.empty();
const cellSize = `${100 / width}%`;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const cell = $('<div/>').addClass('maze-cell path').css({
top: `${y * cellSize}`,
left: `${x * cellSize}`,
width: cellSize,
height: cellSize
});
if (Math.random() < 0.2) {
cell.addClass('wall').removeClass('path');
}
mazeContainer.append(cell);
}
}
}
function placePlayer() {
playerPosition = {x: 0, y: 0};
$('#maze-container').append($('<div/>').addClass('letter').text('S').css({
top: `${playerPosition.y}%`,
left: `${playerPosition.x}%`
}).attr('id', 'player'));
}
function placeExit() {
exitPosition = {x: mazeSize - 1, y: mazeSize - 1};
const cellSize = `${100 / mazeSize}%`;
$('#maze-container').append($('<div/>').addClass('maze-cell exit').css({
top: `${exitPosition.y * cellSize}`,
left: `${exitPosition.x * cellSize}`,
width: cellSize,
height: cellSize
}).text('EP'));
}
function placeItems() {
// Place items randomly in the maze
const mazeContainer = $('#maze-container');
const itemTypes = ['common', 'uncommon', 'rare', 'epic', 'mystery'];
for (let i = 0; i < mazeSize; i++) {
let itemType = itemTypes[Math.floor(Math.random() * itemTypes.length)];
let pos = {
x: Math.floor(Math.random() * mazeSize),
y: Math.floor(Math.random() * mazeSize)
};
if (pos.x !== playerPosition.x || pos.y !== playerPosition.y) {
mazeContainer.append($('<div/>').addClass(`item-${itemType} letter`).css({
top: `${pos.y * (100 / mazeSize)}%`,
left: `${pos.x * (100 / mazeSize)}%`
}).text(itemType[0].toUpperCase()));
}
}
}
function updateTimer() {
const now = new Date();
const elapsed = now - levelStart;
const seconds = Math.floor(elapsed / 1000);
$('#timer').text(`Time: ${seconds}s`);
}
function collectItem(itemType, element) {
levelScore += itemScores[itemType];
$(element).remove();
updateScore();
}
function updateScore() {
$('#level-score').text(`Level Score: ${levelScore}`);
$('#total-score').text(`Total Score: ${totalScore}`);
}
function checkForExit() {
if (collectedLetters === 'SHE' && playerPosition.x === exitPosition.x && playerPosition.y === exitPosition.y) {
clearInterval(levelInterval);
totalScore += levelScore;
currentLevel++;
createLevel();
}
}
function movePlayer(direction) {
const cellSize = 100 / mazeSize;
const newPosition = {...playerPosition};
if (direction === 'up') newPosition.y--;
if (direction === 'down') newPosition.y++;
if (direction === 'left') newPosition.x--;
if (direction === 'right') newPosition.x++;
// Check for walls
const nextCell = $(`.maze-cell`).filter(function() {
const x = parseInt($(this).css('left')) / cellSize;
const y = parseInt($(this).css('top')) / cellSize;
return x === newPosition.x && y === newPosition.y;
});
if (!nextCell.hasClass('wall') && newPosition.x >= 0 && newPosition.x < mazeSize && newPosition.y >= 0 && newPosition.y < mazeSize) {
playerPosition = newPosition;
$('#player').css({
top: `${playerPosition.y * cellSize}%`,
left: `${playerPosition.x * cellSize}%`
});
const item = nextCell.hasClass('path') ? nextCell.text().toLowerCase() : null;
if (item && itemScores[item]) {
collectItem(item, nextCell);
}
const letter = nextCell.text();
if (letters.includes(letter) && !collectedLetters.includes(letter)) {
collectedLetters += letter;
}
checkForExit();
}
}
$(document).keydown(function(e) {
e.preventDefault();
switch(e.which) {
case 37: movePlayer('left'); break;
case 38: movePlayer('up'); break;
case 39: movePlayer('right'); break;
case 40: movePlayer('down'); break;
}
});
$(document).ready(function() {
createLevel();
});
} catch (error) {
throw error;
}
</script>
</head>
<body>
<div id="scoreboard">
<div id="level-score">Level Score: 0</div>
<div id="timer">Time: 0s</div>
<div id="total-score">Total Score: 0</div>
</div>
<div id="maze-container"></div>
</body>
</html>
NEW APPS
These are apps made by the community!