Calculator Tools Calculator Tools
Create

Super Jump Game

Nov 11, 2023

About this app

A fun 3D game where the player, Bradley, jumps on a big grassland.

Super Jump Game Hold Spacebar to charge super jump Max super jump charge: 1000000% Belly flop on the ground to create a crack Press Enter to go to the bonus level Kill purple worms in bonus level by pressing X Press Enter to return to the grasslands Bonus Level Kill the purple worms!

Related apps

Put this on your site

Source

                    <!DOCTYPE html>
<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>Super Jump Game</title>
<meta name="description" content="A fun 3D game where the player, Bradley, jumps on a big grassland.">
<meta name="keywords" content="3D game, super jump, Bradley, grasslands, bonus level">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<style>
body {
margin: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
}

#canvas-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

#game-info {
position: fixed;
top: 10px;
left: 10px;
color: #fff;
font-size: 18px;
z-index: 1;
}

#bonus-level {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 48px;
font-family: 'Old English Text MT', serif;
z-index: 1;
display: none;
}
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="game-info">
<p>Hold <strong>Spacebar</strong> to charge super jump</p>
<p>Max super jump charge: 1000000%</p>
<p>Belly flop on the ground to create a crack</p>
<p>Press <strong>Enter</strong> to go to the bonus level</p>
<p>Kill purple worms in bonus level by pressing <strong>X</strong></p>
<p>Press <strong>Enter</strong> to return to the grasslands</p>
</div>
<div id="bonus-level">
<p>Bonus Level</p>
<p>Kill the purple worms!</p>
</div>

<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const canvasContainer = document.getElementById('canvas-container');
const gameInfo = document.getElementById('game-info');
const bonusLevel = document.getElementById('bonus-level');

// Game parameters
const grasslandSize = 99999999999;
const superJumpChargeRate = 0.01;
const maxSuperJumpCharge = 1000000;
const gravity = 9.8;
const crackFontSizeFactor = 0.1;

let superJumpCharge = 0;
let isCharging = false;
let isJumping = false;
let isBellyFlopped = false;
let bellyFlopHeight = 0;

// Initialize Three.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
canvasContainer.appendChild(renderer.domElement);

// Create grassland
const grassGeometry = new THREE.PlaneGeometry(grasslandSize, grasslandSize);
const grassTexture = new THREE.TextureLoader().load('grass_texture.jpg');
grassTexture.wrapS = THREE.RepeatWrapping;
grassTexture.wrapT = THREE.RepeatWrapping;
grassTexture.repeat.set(100, 100);
const grassMaterial = new THREE.MeshBasicMaterial({ map: grassTexture });
const grass = new THREE.Mesh(grassGeometry, grassMaterial);
scene.add(grass);

// Create Bradley model
const bradleyGeometry = new THREE.BoxGeometry(1, 1, 1);
const bradleyTexture = new THREE.TextureLoader().load('bradley_texture.jpg');
const bradleyMaterial = new THREE.MeshBasicMaterial({ map: bradleyTexture });
const bradley = new THREE.Mesh(bradleyGeometry, bradleyMaterial);
bradley.position.y = 0.5;
scene.add(bradley);

// Create crack
const crackGeometry = new THREE.PlaneGeometry(1, 1);
const crackTexture = new THREE.TextureLoader().load('crack_texture.jpg');
const crackMaterial = new THREE.MeshBasicMaterial({ map: crackTexture, transparent: true });
const crack = new THREE.Mesh(crackGeometry, crackMaterial);
crack.position.y = -100;
crack.rotation.x = -Math.PI / 2;
scene.add(crack);

// Create purple worms in bonus level
const wormGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
const wormMaterial = new THREE.MeshBasicMaterial({ color: 0x993399 });
const worms = [];
for (let i = 0; i < 10; i++) {
const worm = new THREE.Mesh(wormGeometry, wormMaterial);
worm.position.x = Math.random() * 100 - 50;
worm.position.z = Math.random() * 100 - 50;
worms.push(worm);
scene.add(worm);
}

// Handle key events
document.addEventListener('keydown', function (event) {
if (event.code === 'Space') {
isCharging = true;
} else if (event.code === 'Enter') {
if (isBellyFlopped) {
bonusLevel.style.display = 'block';
} else {
bonusLevel.style.display = 'none';
}
} else if (event.code === 'KeyX' && bonusLevel.style.display === 'block') {
worms.forEach(function (worm) {
scene.remove(worm);
});
bonusLevel.style.display = 'none';
}
});

document.addEventListener('keyup', function (event) {
if (event.code === 'Space') {
isCharging = false;
if (superJumpCharge === maxSuperJumpCharge) {
isJumping = true;
superJumpCharge = 0;
bradley.position.y += superJumpCharge / maxSuperJumpCharge * 10;
}
}
});

// Render loop
function animate() {
requestAnimationFrame(animate);

// Move Bradley horizontally
if (isJumping) {
bradley.position.y -= gravity * 0.01;
}

// Check if Bradley has reached the ground
if (bradley.position.y <= 0) {
isJumping = false;
if (isBellyFlopped) {
const crackSize = bellyFlopHeight * crackFontSizeFactor;
crack.scale.set(crackSize, crackSize, 1);
crack.position.y = 0;
crack.position.x = bradley.position.x;
crack.position.z = bradley.position.z;
isBellyFlopped = false;
}
}

// Charge super jump
if (isCharging && superJumpCharge < maxSuperJumpCharge) {
superJumpCharge += superJumpChargeRate;
}

// Update game info
gameInfo.innerHTML = `
<p>Hold <strong>Spacebar</strong> to charge super jump</p>
<p>Max super jump charge: ${maxSuperJumpCharge}%</p>
<p>Belly flop on the ground to create a crack</p>
<p>Press <strong>Enter</strong> to go to the bonus level</p>
<p>Kill purple worms in bonus level by pressing <strong>X</strong></p>
<p>Press <strong>Enter</strong> to return to the grasslands</p>
`;

// Render the scene
renderer.render(scene, camera);
}

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

<script>
// Load Google Fonts
WebFontConfig = {
google: {
families: ['Old English Text MT']
}
};

(function () {
var wf = document.createElement('script');
wf.src = ('https:' === document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
</body>
</html>