“Jump Jump” is a super addictive mini-game where you control a block that jumps from one platform to another by charging up jump power.
The longer you hold, the farther it jumps. It’s simple but challenging, and perfect for quick fun.
How It Works
- Press and hold the mouse (or screen) to charge jump power
- Release to make the block jump forward
- The goal is to land safely on the next platform
- Miss a jump and the game is over
- Each successful jump increases your score and spawns a new platform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Simple Jump Jump Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #222;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
background: #333;
border-radius: 10px;
display: block;
}
</style>
</head>
<body>
<canvas id="game" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
// Game variables
let platforms = [{ x: 150, y: 550, width: 100 }];
let player = { x: 190, y: 530, size: 20 };
let nextPlatform = { x: 0, y: 0, width: 0 };
let isCharging = false;
let chargeStart = 0;
let jumpPower = 0;
let score = 0;
let isJumping = false;
let jumpProgress = 0;
let jumpStart = { x: 0, y: 0 };
let jumpEnd = { x: 0, y: 0 };
// Generate a new platform at a random distance and height
function newPlatform() {
const minGap = 80, maxGap = 150;
const gap = Math.random() * (maxGap - minGap) + minGap;
const width = Math.random() * 60 + 60;
const last = platforms[platforms.length -1];
nextPlatform.x = last.x + gap;
nextPlatform.y = 550 - Math.random() * 100;
nextPlatform.width = width;
platforms.push({...nextPlatform});
}
// Draw game objects
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw platforms
ctx.fillStyle = '#5ac';
platforms.forEach(p => {
ctx.fillRect(p.x, p.y, p.width, 10);
});
// Draw player block
ctx.fillStyle = 'yellow';
ctx.fillRect(player.x, player.y, player.size, player.size);
// Draw score
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText(`Score: ${score}`, 10, 30);
// Draw charge bar when charging
if (isCharging) {
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, jumpPower * 200, 10);
}
}
// Update game state each frame
function update() {
if (isJumping) {
jumpProgress += 0.05;
if (jumpProgress >= 1) {
jumpProgress = 1;
isJumping = false;
// Check if player landed on a platform
const landed = platforms.some(p => {
return player.x + player.size / 2 > p.x &&
player.x + player.size / 2 < p.x + p.width &&
Math.abs(player.y + player.size - p.y) < 10;
});
if (landed) {
score++;
newPlatform();
// Shift platforms so player stays roughly centered
const shiftX = nextPlatform.x - player.x;
platforms = platforms.map(p => ({x: p.x - shiftX, y: p.y, width: p.width}));
player.x -= shiftX;
} else {
alert(`Game Over! Your score: ${score}`);
// Reset game
platforms = [{ x: 150, y: 550, width: 100 }];
player = { x: 190, y: 530, size: 20 };
score = 0;
}
} else {
// Calculate jump trajectory (parabola)
player.x = jumpStart.x + (jumpEnd.x - jumpStart.x) * jumpProgress;
const peak = 150; // jump height
player.y = jumpStart.y + (jumpEnd.y - jumpStart.y) * jumpProgress - peak * Math.sin(Math.PI * jumpProgress);
}
}
}
// Main game loop
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
// Input handlers
canvas.addEventListener('mousedown', () => {
if (!isJumping) {
isCharging = true;
chargeStart = Date.now();
jumpPower = 0;
}
});
canvas.addEventListener('mouseup', () => {
if (isCharging) {
isCharging = false;
jumpPower = Math.min((Date.now() - chargeStart) / 500, 1);
isJumping = true;
jumpProgress = 0;
jumpStart = { x: player.x, y: player.y };
jumpEnd = {
x: player.x + jumpPower * 200,
y: platforms[platforms.length - 1].y - player.size
};
}
});
// Charge power update loop
function chargeLoop() {
if (isCharging) {
jumpPower = Math.min((Date.now() - chargeStart) / 500, 1);
}
setTimeout(chargeLoop, 16);
}
// Start the game
newPlatform();
gameLoop();
chargeLoop();
</script>
</body>
</html>
Want a Faster, More Intense Jumping Challenge?
If you enjoyed this mini-game, you’ll love Geometry Dash Meltdown — a rhythm-based platformer where every jump is synced with music, and every level tests your reflexes to the max.
Top comments (0)