Patchy's Super Jump
About this app
Experience Patchy's Super Jump - a fun and exciting game where you have to hold the finger on the screen to perform a super jump!
Patchy's Super Jump Patchy's Super Jump
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>Patchy's Super Jump</title>
<meta name="description" content="Experience Patchy's Super Jump - a fun and exciting game where you have to hold the finger on the screen to perform a super jump!">
<meta name="keywords" content="Patchy, Super Jump, Game, UK, Skydive, Belly Flop, Bonus Level">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
var jumpBar = document.getElementById("jump-bar");
var jumpButton = document.getElementById("jump-button");
var bonusButton = document.getElementById("bonus-button");
var timer = null;
// Function to handle holding the finger on the screen to perform a super jump.
function performSuperJump() {
var jumpPercent = 0;
jumpBar.style.width = jumpPercent + "%";
// Increase the jump percent gradually.
var interval = setInterval(function() {
jumpPercent += 0.01;
jumpBar.style.width = jumpPercent + "%";
if (jumpPercent >= 100) {
clearInterval(interval);
// Form a skydive pose and belly flop.
var skydivePose = document.createElement("div");
skydivePose.classList.add("skydive-pose");
var bellyFlop = document.createElement("div");
bellyFlop.classList.add("belly-flop");
// Form the number 1998 in Old English font.
var number1998 = document.createElement("div");
number1998.classList.add("old-english-font");
number1998.textContent = "1998";
// Form the word "Patchy" in Old English font shaped crack.
var patchyCrack = document.createElement("div");
patchyCrack.classList.add("old-english-font");
patchyCrack.classList.add("crack");
patchyCrack.textContent = "Patchy";
// Create shockwave and dust based on the fall height.
var shockwave = document.createElement("div");
shockwave.classList.add("shockwave");
shockwave.style.width = (jumpPercent * 3) + "px";
shockwave.style.height = (jumpPercent * 3) + "px";
var dust = document.createElement("div");
dust.classList.add("dust");
dust.style.width = (jumpPercent * 5) + "px";
dust.style.height = (jumpPercent * 5) + "px";
// Add the elements to the main container.
document.getElementById("main-container").appendChild(skydivePose);
document.getElementById("main-container").appendChild(bellyFlop);
document.getElementById("main-container").appendChild(number1998);
document.getElementById("main-container").appendChild(patchyCrack);
document.getElementById("main-container").appendChild(shockwave);
document.getElementById("main-container").appendChild(dust);
// Remove the elements after a delay.
setTimeout(function() {
skydivePose.remove();
bellyFlop.remove();
number1998.remove();
patchyCrack.remove();
shockwave.remove();
dust.remove();
}, 2000);
// Show the bonus level button.
bonusButton.style.display = "block";
}
}, 10);
}
// Function to handle entering the bonus level.
function enterBonusLevel() {
// Remove the jump button.
jumpButton.style.display = "none";
// Create harmless good worms.
var goodWorms = document.createElement("div");
goodWorms.classList.add("good-worms");
// Create the timer.
var bonusTimer = document.createElement("div");
bonusTimer.classList.add("bonus-timer");
bonusTimer.textContent = "15";
// Add the elements to the main container.
document.getElementById("main-container").appendChild(goodWorms);
document.getElementById("main-container").appendChild(bonusTimer);
// Start the timer countdown.
var countdown = 15;
timer = setInterval(function() {
countdown--;
bonusTimer.textContent = countdown;
if (countdown <= 0) {
clearInterval(timer);
// Remove the bonus level elements and go back to the normal world.
goodWorms.remove();
bonusTimer.remove();
jumpButton.style.display = "block";
}
}, 1000);
}
// Add event listener for holding the finger on the screen to perform a super jump.
jumpButton.addEventListener("touchstart", performSuperJump);
jumpButton.addEventListener("mousedown", performSuperJump);
// Add event listener for entering the bonus level.
bonusButton.addEventListener("touchstart", enterBonusLevel);
bonusButton.addEventListener("mousedown", enterBonusLevel);
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background-color: #f5f5f5;
font-family: 'Open Sans', sans-serif;
}
#main-container {
text-align: center;
padding-top: 50px;
}
h1 {
color: #333333;
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
}
.jump-bar-container {
width: 80%;
max-width: 300px;
height: 20px;
background-color: #dddddd;
margin: 0 auto;
margin-bottom: 40px;
position: relative;
}
#jump-bar {
width: 0;
height: 100%;
background-color: #00b3e6;
position: absolute;
top: 0;
left: 0;
}
.jump-button {
width: 100px;
height: 100px;
background-color: #00b3e6;
border-radius: 50%;
display: inline-block;
cursor: pointer;
transition: background-color 0.3s ease;
}
.jump-button i {
color: #ffffff;
font-size: 48px;
line-height: 100px;
}
.jump-button:hover {
background-color: #0099cc;
}
.bonus-button {
display: none;
margin-top: 20px;
}
.bonus-button i {
color: #ffffff;
font-size: 48px;
line-height: 100px;
}
.skydive-pose {
width: 200px;
height: 200px;
background-color: #ff6699;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
z-index: 1;
}
.belly-flop {
width: 200px;
height: 160px;
background-color: #ff6699;
border-radius: 50% 50% 0 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.old-english-font {
font-family: 'Old English Text MT', serif;
font-size: 72px;
color: #333333;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.crack {
width: 200px;
height: 80px;
background-color: #333333;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 36px;
font-weight: 700;
}
.shockwave {
width: 0;
height: 0;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}
.dust {
width: 0;
height: 0;
background-color: #cccccc;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}
.good-worms {
width: 200px;
height: 200px;
background-color: #00cc66;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.bonus-timer {
color: #ffffff;
font-size: 48px;
font-weight: 700;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Patchy's Super Jump</h1>
<div class="jump-bar-container">
<div id="jump-bar"></div>
</div>
<div class="jump-button" id="jump-button">
<i class="fa fa-arrow-up"></i>
</div>
<div class="bonus-button" id="bonus-button">
<i class="fa fa-plus"></i>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!