Maze Runner: SHEEP Quest
About this app
Navigate the letters S, H, and E through a maze to spell SHEEP at the exit EP. Collect points and find bonus items. How fast can you complete it?
Maze Runner: SHEEP Quest Score: 0 Time: 0s Next Level
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 the letters S, H, and E through a maze to spell SHEEP at the exit EP. Collect points and find bonus items. How fast can you complete it?">
<meta name="keywords" content="maze game, sheep quest, puzzle game, web game, interactive game">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Press Start 2P', cursive;
}
#game-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background: linear-gradient(to right, #6dd5ed, #ff758c);
color: #333;
}
#maze {
position: relative;
border: 5px solid #333;
}
.cell {
width: 20px;
height: 20px;
float: left;
border: 1px solid #eee;
box-sizing: border-box;
}
.wall {
background-color: #333;
}
.path {
background-color: #fff;
}
.letter {
position: absolute;
transition: top 0.2s, left 0.2s;
}
.exit {
background-color: #0f9d58;
}
#hud {
text-align: center;
padding: 10px;
}
.hud-item {
margin: 5px;
display: inline-block;
}
.hud-item span {
display: block;
font-size: 16px;
}
button {
padding: 5px 15px;
margin-top: 10px;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
const mazeContainer = $('#maze');
const hudTime = $('#hud-time');
const hudScore = $('#hud-score');
let level = 1;
let score = 0;
let startTime;
let timerInterval;
function initGame(level) {
const size = Math.floor(10 + level * 0.1);
mazeContainer.empty().css({width: size * 22, height: size * 22});
generateMaze(size);
placeLetters();
startTime = new Date();
timerInterval = setInterval(updateTime, 100);
}
function generateMaze(size) {
// Maze generation logic
// Placeholder for the actual maze generation
for (let i = 0; i < size * size; i++) {
$('<div/>').addClass('cell path').appendTo(mazeContainer);
}
}
function placeLetters() {
// Place letters S, H, E and exit EP
$('<div/>').addClass('letter').text('S').css({top: 0, left: 0}).appendTo(mazeContainer);
$('<div/>').addClass('letter').text('H').css({top: 0, left: '22px'}).appendTo(mazeContainer);
$('<div/>').addClass('letter').text('E').css({top: '22px', left: 0}).appendTo(mazeContainer);
$('<div/>').addClass('cell exit').text('EP').css({bottom: 0, right: 0}).appendTo(mazeContainer);
}
function updateTime() {
const now = new Date();
const elapsedTime = now - startTime;
const seconds = Math.floor(elapsedTime / 1000);
hudTime.text(`Time: ${seconds}s`);
}
function updateScore(points) {
score += points;
hudScore.text(`Score: ${score}`);
}
// Event listeners for keyboard controls
$(document).on('keydown', function(e) {
// Placeholder for movement logic
});
// Initialize the first level
initGame(level);
// Function to update the game to the next level
function nextLevel() {
clearInterval(timerInterval);
level++;
initGame(level);
}
$('#next-level-btn').on('click', nextLevel);
});
</script>
</head>
<body>
<div id="game-container">
<div id="hud">
<div class="hud-item">
<span id="hud-score">Score: 0</span>
</div>
<div class="hud-item">
<span id="hud-time">Time: 0s</span>
</div>
<button id="next-level-btn">Next Level</button>
</div>
<div id="maze"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!