HTML小球加速運動代碼
<!DOCTYPE html>
<html>
<head>
<title>小球加速運動</title>
<style>
#ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
var ball = document.getElementById("ball");
var speed = 1;
var acceleration = 0.1;
var xPos = 0;
var yPos = 0;
var xDir = 1;
var yDir = 1;
function moveBall() {
xPos = xPos + (speed * xDir);
yPos = yPos + (speed * yDir);
ball.style.left = xPos + "px";
ball.style.top = yPos + "px";
if (xPos < 0 || xPos >= window.innerWidth - ball.offsetWidth) {
xDir *= -1;
}
if (yPos < 0 || yPos >= window.innerHeight - ball.offsetHeight) {
yDir *= -1;
}
speed = speed + acceleration;
setTimeout(moveBall, 10);
}
moveBall();
</script>
</body>
</html>以上是一個基本的 HTML 小球加速運動代碼，它使用了 HTML，CSS 和 JavaScript 來實現一個小球的加速運動。這個小球在一個固定的矩形區域中運動，并且在撞到邊緣時會反彈并加速。
這個代碼的關鍵點在于：
1. 通過 CSS 來定義小球的樣式，包括大小和顏色等。
2. 使用 JavaScript 中的 DOM (Document Object Model) API 來獲取頁面元素，并在程序中移動小球。
3. 加速運動的實現是通過不斷增加速度來實現，并通過 setTimeout 函數來觸發小球的移動。
這個代碼雖然簡單，但是可以為初學者提供了一個 JS 動畫的基礎。