如果你想要一個簡單有趣的小游戲，那么你來到了正確的地方！用HTML寫游戲可能會讓你有些困惑，但是我們可以讓它變得容易些。
<html>
<head>
<script type="text/javascript">
function updateScore() {
score++;
document.getElementById("score").innerHTML = "得分: " + score;
}
function moveBall() {
var ball = document.getElementById("ball");
var left = ball.offsetLeft;
var top = ball.offsetTop;
if (left <= 0 || left >= 280) {
dx = -dx;
}
if (top <= 0 || top >= 280) {
dy = -dy;
}
left += dx;
top += dy;
ball.style.left = left + "px";
ball.style.top = top + "px";
}
function checkCollision() {
var ball = document.getElementById("ball");
var paddle = document.getElementById("paddle");
var ballBottom = ball.offsetTop + ball.offsetHeight;
var ballRight = ball.offsetLeft + ball.offsetWidth;
var paddleTop = paddle.offsetTop;
var paddleBottom = paddle.offsetTop + paddle.offsetHeight;
var paddleLeft = paddle.offsetLeft;
var paddleRight = paddle.offsetLeft + paddle.offsetWidth;
if (ballBottom <= paddleTop || ball.offsetTop >= paddleBottom
|| ballRight <= paddleLeft || ball.offsetLeft >= paddleRight) {
// No collision!
} else {
updateScore();
dy = -dy;
}
}
function movePaddle(event) {
var paddle = document.getElementById("paddle");
var x = event.clientX;
if (x <= 20) {
paddle.style.left = 0;
} else if (x >= 300) {
paddle.style.left = (300 - paddle.offsetWidth) + "px";
} else {
paddle.style.left = (x - 20) + "px";
}
}
function doFrame() {
moveBall();
checkCollision();
setTimeout("doFrame()", 20);
}
var dx = 4;
var dy = 4;
var score = 0;
// Start the game
doFrame();
</script>
</head>
<body onmousemove="movePaddle(event)">
<div id="paddle"></div>
<div id="ball"></div>
<div id="score">得分: 0</div>
</body>
</html>以上就是這個小游戲的整個HTML代碼了。在這個小游戲中，玩家必須使用鼠標在屏幕上移動擋板以防止小球落下。每當小球與擋板相撞時，玩家將賺取1分。這個小游戲很容易定制。你可以更改小球和擋板的大小，改變小球的速度并且可以添加更多的交互性。
在這個代碼中，用到了一些 JavaScript 來實現小球、擋板以及交互的邏輯。JavaScript 是一個廣泛使用的編程語言，它是用于點此游戲中的動態行為和用戶交互的最流行語言之一。
希望這篇 HTML 代碼示例有助于你開始構建有趣的 HTML 小游戲。讓我們開始創建有趣的HTML游戲吧！
上一篇python 迭代數組
下一篇python 找子路徑