HD 3D Third Person Game
About this app
Experience the HD 3D Third Person Game with Patchy from @officialpatchy on YouTube in the UK. Super jump, belly flop, and dive into a bonus game!
HD 3D Third Person Game Score: 0
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>HD 3D Third Person Game</title>
<meta name="description" content="Experience the HD 3D Third Person Game with Patchy from @officialpatchy on YouTube in the UK. Super jump, belly flop, and dive into a bonus game!">
<meta name="keywords" content="3D game, Patchy, YouTube, UK, super jump, belly flop, bonus game">
<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">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #000;
color: #fff;
margin: 0;
padding: 0;
overflow: hidden;
}
#main-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
#game-container {
width: 800px;
height: 600px;
background-color: #000;
border: 2px solid #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#player {
width: 100px;
height: 100px;
background-color: #00ff00;
border-radius: 50%;
position: absolute;
}
#super-jump-bar-container {
width: 400px;
height: 20px;
background-color: #666;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
#super-jump-bar {
width: 0;
height: 100%;
background-color: #00ff00;
transition: width 0.01s linear;
}
#bonus-game-container {
display: none;
width: 800px;
height: 600px;
background-color: #000;
border: 2px solid #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#worms-container {
width: 300px;
height: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.worm {
width: 50px;
height: 50px;
background-color: #ff0000;
border-radius: 50%;
margin: 10px;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.worm:hover {
transform: scale(1.1);
}
#score {
font-size: 24px;
position: absolute;
top: 20px;
right: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div id="game-container">
<div id="player"></div>
<div id="super-jump-bar-container">
<div id="super-jump-bar"></div>
</div>
</div>
<div id="bonus-game-container">
<div id="worms-container">
<!-- Worms will be dynamically added here -->
</div>
<div id="score">Score: 0</div>
</div>
</div>
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const player = document.getElementById("player");
const superJumpBar = document.getElementById("super-jump-bar");
const bonusGameContainer = document.getElementById("bonus-game-container");
const wormsContainer = document.getElementById("worms-container");
const scoreElement = document.getElementById("score");
let superJumpCharge = 0;
let isSuperJumping = false;
let score = 0;
document.addEventListener("keydown", function(event) {
if (event.key === " ") {
if (!isSuperJumping) {
isSuperJumping = true;
superJump();
}
} else if (event.key === "Enter" && bonusGameContainer.style.display === "block") {
playBonusGame();
}
});
document.addEventListener("keyup", function(event) {
if (event.key === " " && isSuperJumping) {
isSuperJumping = false;
superJumpCharge = 0;
superJumpBar.style.width = "0";
player.style.transform = "translateY(0)";
}
});
function superJump() {
const superJumpInterval = setInterval(function() {
superJumpCharge += 0.01;
superJumpBar.style.width = `${superJumpCharge}%`;
if (superJumpCharge >= 100) {
clearInterval(superJumpInterval);
superJumpCharge = 100;
player.style.transform = "translateY(-600px)";
setTimeout(function() {
player.style.transform = "translateY(0)";
createCrack();
createShockwave();
createDust();
}, 2000);
}
}, 10);
}
function createCrack() {
const crack = document.createElement("div");
crack.innerHTML = "1998";
crack.classList.add("crack");
document.body.appendChild(crack);
const crackSize = superJumpCharge * 5;
crack.style.fontSize = `${crackSize}px`;
}
function createShockwave() {
const shockwave = document.createElement("div");
shockwave.classList.add("shockwave");
document.body.appendChild(shockwave);
}
function createDust() {
const dust = document.createElement("div");
dust.classList.add("dust");
document.body.appendChild(dust);
const dustSize = superJumpCharge * 10;
dust.style.width = `${dustSize}px`;
dust.style.height = `${dustSize}px`;
}
function playBonusGame() {
bonusGameContainer.style.display = "none";
wormsContainer.innerHTML = "";
score = 0;
scoreElement.textContent = `Score: ${score}`;
for (let i = 0; i < 9; i++) {
const worm = document.createElement("div");
worm.classList.add("worm");
worm.addEventListener("click", function() {
killWorm(worm);
});
wormsContainer.appendChild(worm);
}
setTimeout(function() {
bonusGameContainer.style.display = "none";
}, 15000);
}
function killWorm(worm) {
worm.style.display = "none";
score += 100;
scoreElement.textContent = `Score: ${score}`;
}
});
} catch (error) {
throw error;
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!