Calculator Tools Calculator Tools
Create

Maze Runner: SHEEP

Nov 18, 2023

About this app

Navigate the maze as the letters S, H, and E to find the EP exit and spell SHEEP, while collecting points and avoiding obstacles.

Maze Runner: SHEEP Score: 0 Time: 0s

Related apps

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 Runner: SHEEP</title>
<meta name="description" content="Navigate the maze as the letters S, H, and E to find the EP exit and spell SHEEP, while collecting points and avoiding obstacles.">
<meta name="keywords" content="maze, game, sheep, puzzle, adventure, collectibles, points, levels">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

<style>
body {
font-family: 'Press Start 2P', cursive;
background-color: #e9ecef;
}
#game-container {
position: relative;
width: 90vw;
height: 90vh;
max-width: 600px;
max-height: 600px;
margin: 5vh auto;
background-color: #fff;
overflow: hidden;
border: 5px solid #333;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.letter {
position: absolute;
width: 5%;
height: 5%;
text-align: center;
line-height: 1;
user-select: none;
cursor: pointer;
transition: 0.2s;
color: #fff;
}
.letter.S { background-color: #f86c6b; }
.letter.H { background-color: #20c997; }
.letter.E { background-color: #6610f2; }
.point-item {
position: absolute;
width: 3%;
height: 3%;
border-radius: 50%;
text-align: center;
line-height: 1.5;
font-size: 1.5rem;
}
.common { background-color: #6c757d; }
.uncommon { background-color: #17a2b8; }
.rare { background-color: #ffc107; }
.epic { background-color: #dc3545; }
.mystery { background-color: #343a40; }
.exit {
position: absolute;
width: 10%;
height: 10%;
background-color: #28a745;
text-align: center;
line-height: 2.5;
font-size: 2rem;
color: #fff;
border-radius: 15%;
}
#scoreboard {
text-align: center;
font-size: 1.5rem;
margin-bottom: 10px;
}
#timer {
text-align: center;
font-size: 1.5rem;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div id="game-container">
<!-- Game HTML Goes Here -->
</div>
<div id="scoreboard">Score: <span id="score">0</span></div>
<div id="timer">Time: <span id="time">0</span>s</div>
</div>

<script type="text/javascript">
try {
const gameContainer = $("#game-container");
const scoreDisplay = $("#score");
const timerDisplay = $("#time");
let score = 0;
let timer = 0;
let interval;
let level = 1;
let levelSize = 100;
const pointValues = {
common: 10,
uncommon: 25,
rare: 50,
epic: 100,
mystery: 250
};

function startTimer() {
interval = setInterval(function() {
timer++;
timerDisplay.text(timer);
}, 1000);
}

function stopTimer() {
clearInterval(interval);
}

function collectItem(item) {
const rarity = item.attr("class").split(' ')[1];
score += pointValues[rarity];
scoreDisplay.text(score);
item.remove();
}

function createMaze(level) {
// Maze generation logic will go here
// This placeholder simply appends the letters and the EP exit
gameContainer.append('<div class="letter S" style="top: 5%; left: 5%;">S</div>');
gameContainer.append('<div class="letter H" style="top: 10%; left: 10%;">H</div>');
gameContainer.append('<div class="letter E" style="top: 15%; left: 15%;">E</div>');
gameContainer.append('<div class="exit" style="bottom: 5%; right: 5%;">EP</div>');
}

function initGame() {
createMaze(level);
startTimer();
}

$(document).on('keydown', function(e) {
// Movement logic will go here
});

$(document).on('click', '.point-item', function() {
collectItem($(this));
});

// Initialize the game on document ready
$(document).ready(function() {
initGame();
});

} catch (error) {
throw error;
}
</script>
</body>
</html>