HTML實現(xiàn)跳一跳代碼
跳一跳是一個很受歡迎的小游戲，現(xiàn)在我們就來學(xué)習(xí)用HTML實現(xiàn)它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跳一跳</title>
<style>
#box {
position: relative;
width: 400px;
height: 600px;
border: 1px solid #000;
}
#btn {
width: 50px;
height: 50px;
background-color: #ff0000;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div id="box">
<div id="btn"></div>
</div>
<script>
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var timer = null;
btn.onclick = function() {
btn.onclick = null;
var speed = 0;
timer = setInterval(function() {
speed++;
btn.style.bottom = btn.offsetTop + speed + 'px';
if (btn.offsetTop >= box.clientHeight - btn.clientHeight) {
clearInterval(timer);
btn.onclick = function() {
speed = 0;
timer = setInterval(function() {
speed--;
btn.style.bottom = btn.offsetTop + speed + 'px';
if (btn.offsetTop<= 0) {
clearInterval(timer);
btn.onclick = function() {
btn.onclick = null;
btn.style.bottom = '0';
setTimeout(function() {
btn.onclick = function() {
btn.onclick = null;
var speed = 0;
timer = setInterval(function() {
speed++;
btn.style.bottom = btn.offsetTop + speed + 'px';
if (btn.offsetTop >= box.clientHeight - btn.clientHeight) {
clearInterval(timer);
btn.onclick = function() {
speed = 0;
timer = setInterval(function() {
speed--;
btn.style.bottom = btn.offsetTop + speed + 'px';
if (btn.offsetTop<= 0) {
clearInterval(timer);
btn.onclick = function() {
btn.onclick = null;
btn.style.bottom = '0';
}
}
}, 30);
}
}
}, 30);
}
}, 500);
}
}
}, 30);
}
}
}, 30);
}
</script>
</body>
</html>以上是HTML實現(xiàn)跳一跳代碼的具體內(nèi)容，我們可以將其復(fù)制到代碼編輯器中，保存為HTML文件后就可以在瀏覽器中打開體驗跳一跳游戲了。