Meta Description" name="description" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Monkey Jump</title>
<style>
body {
background: #c8f0ff;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-end;
}
.monkey {
width: 120px;
position: relative;
bottom: 0;
transition: 0.3s;
}
/* Jump Animation */
.jump {
animation: jump 0.6s ease-out;
}
@keyframes jump {
0% { transform: translateY(0); }
50% { transform: translateY(-150px); }
100% { transform: translateY(0); }
}
button {
position: absolute;
top: 20px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="jumpMonkey()">Jump!</button>
<!-- Monkey Image -->
<img src="https://i.imgur.com/Jy2LQxU.png" class="monkey" id="monkey">
<script>
function jumpMonkey() {
let monkey = document.getElementById("monkey");
// prevent spam jumping
if (!monkey.classList.contains("jump")) {
monkey.classList.add("jump");
setTimeout(() => {
monkey.classList.remove("jump");
}, 600);
}
}
</script>
</body>
</html>3
2
2KB
2KB
47.0ms
100.0ms
206.0ms