HTML5投籃游戲是一種非常流行的網絡游戲，它的游戲玩法非常簡單，玩家需要利用投籃技巧，嘗試將籃球投進籃筐中，得分最高者獲勝。本文將為大家分享HTML5投籃游戲的源代碼，使用pre標簽包裹。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5投籃游戲</title>
<style>
/* 游戲界面樣式 */
#court {
width: 680px;
height: 400px;
background-image: url("court.png");
background-repeat: no-repeat;
background-size: contain;
position: relative;
margin: 0 auto;
}
/* 籃筐樣式 */
#basket {
width: 50px;
height: 50px;
background-color: orange;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-25%);
border-radius: 50% 50% 0 0;
}
/* 籃球樣式 */
.ball {
width: 30px;
height: 30px;
background-image: url("ball.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 300px;
left: 50%;
transform: translateX(-15px);
}
</style>
</head>
<body>
<div id="court">
<div id="basket"></div>
<div class="ball"></div>
</div>
<script>
/* 控制籃球運動 */
var ball = document.querySelector(".ball");
var isMoving = false;
var score = 0;
function moveBall() {
isMoving = true;
ball.style.top = "50px";
setTimeout(function() {
ball.style.top = "300px";
isMoving = false;
}, 1500);
}
/* 控制投籃 */
document.addEventListener("keydown", function(event) {
if (event.keyCode === 32 && !isMoving) {
moveBall();
score++;
console.log("得分：" + score);
}
});
</script>
</body>
</html>上述代碼中，首先是html標簽聲明，接著依次是head標簽和body標簽。在head部分，我們先設置了游戲界面的樣式，比如球場大小，背景圖片等等。接著定義了籃筐和籃球的樣式。
在body部分，首先將我們定義好的游戲界面布局出來，包括籃筐和籃球。接著通過JavaScript，控制籃球的運動和投籃動作。當玩家按下空格鍵時，籃球運動，并且得分+1；當籃球還未運動完成時，玩家無法再次投籃。
以上就是HTML5投籃游戲的源代碼，希望對大家有所幫助。