Don't Wake Up the Z's - Fun Game App
About this app
An exciting and challenging game where the objective is to keep the sleepy Z's from waking up! Test your reflexes and have fun!
Don't Wake Up the Z's - Fun Game App Don't Wake Up the Z's! Click on the Z's quickly before they wake up! Score: 0 Start Game
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
<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>Don't Wake Up the Z's - Fun Game App</title>
<meta name="description" content="An exciting and challenging game where the objective is to keep the sleepy Z's from waking up! Test your reflexes and have fun!">
<meta name="keywords" content="game, fun, reflexes, Z's, awaken, challenge, interactive">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
let score = 0;
let intervalId;
let height = 300;
// Function to create a Z
function createZ() {
const zElement = $('<div class="letter-z">Z</div>');
zElement.css({
top: Math.random() * (height - 40) + 'px',
left: Math.random() * (window.innerWidth - 40) + 'px',
position: 'absolute',
fontSize: '40px',
color: '#ffcc00',
transition: '0.5s ease-in-out'
});
$('#main-container').append(zElement);
zElement.click(function() {
score++;
updateScore();
$(this).fadeOut(300);
});
setTimeout(() => {
if (zElement.is(':visible')) {
gameOver();
}
}, 2000);
}
// Function to update the score
function updateScore() {
$('#score').text(`Score: ${score}`);
}
// Game Over function
function gameOver() {
clearInterval(intervalId);
alert("Game Over! Your final score is: " + score);
location.reload();
}
// Start the game
function startGame() {
score = 0;
$('#score').text(`Score: ${score}`);
intervalId = setInterval(createZ, 1000);
}
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
$('#start-button').click(startGame);
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(135deg, #ffcc00, #00ccff);
color: #fff;
text-align: center;
padding: 50px;
}
#main-container {
position: relative;
height: 400px;
overflow: hidden;
border: 2px solid #fff;
}
.letter-z {
font-size: 40px;
animation: bounce 1s infinite;
cursor: pointer;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
#start-button {
margin-top: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Don't Wake Up the Z's!</h1>
<p>Click on the Z's quickly before they wake up!</p>
<div id="score">Score: 0</div>
<button id="start-button" class="btn btn-warning">Start Game</button>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!