<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hammer the nail</title>
<style>
body {
user-select: none;
text-align: center;
background-image: url("wood.webp");
background-repeat: no-repeat;
background-size: 50%;
background-position: 0 60px;
}
.top {
position: fixed;
top: 400px;
left: 454px;
height: 20px;
width: 40px;
background-color: #777;
border-radius: 50%;
box-shadow: 0 3px #555;
background-image: url("top.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 1;
}
.nail {
position: fixed;
top: 406px;
left: 470px;
height: 90px;
width: 9px;
background-color: #444;
border-radius: 0 0 55% 55%;
z-index: -1;
}
</style>
</head>
<body>
<h3>Hammer the nail into the wood</h3>
<div class="top" onclick="myNail()"></div>
<div class="nail"></div>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
function myNail() {
$('.top').css({'transform': 'translateY(15px)'});
$('.nail').css({'height': '75px'});
$('.nail').css({'transform': 'translateY(15px)'});
$(".top").attr("onclick", "hammer1()");
$(".nail").css("border-radius", "15px");
}
function hammer1() {
$('.top').css({'transform': 'translateY(30px)'});
$(".top").attr("onclick", "hammer2()");
$('.nail').css({'transform': 'translateY(30px)'});
$('.nail').css({'height': '60px'});
}
function hammer2() {
$('.nail').css({'height': '50px'});
$('.nail').css({'transform': 'translateY(40px)'});
$('.top').css({'transform': 'translateY(45px)'});
$(".top").attr("onclick", "hammer3()");
}
function hammer3() {
$('.nail').css({'height': '20px'});
$('.nail').css({'transform': 'translateY(70px)'});
$('.top').css({'transform': 'translateY(60px)'});
$(".top").attr("onclick", "hammer4()");
}
function hammer4() {
$('.nail').css({'height': '0px'});
$('.nail').css({'transform': 'translateY(60px)'});
$('.top').css({'transform': 'translateY(75px)'});
$('.top').css({'box-shadow': '0 1px #555'});
}
</script>
</body>
</html>
