HTML小球碰撞是一種很有趣的交互式應用程序，可以通過HTML、CSS和JavaScript實現。這種應用程序使用了Web開發技術的一些關鍵概念和功能，包括元素樣式和位置、DOM操作以及事件處理。下面是一份簡單的HTML小球碰撞源代碼，可以讓您開始構建自己的應用程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML小球碰撞</title>
<style>
#container {
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
.ball {
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute;
}
#ball1 {
background-color: red;
left: 0;
top: 0;
}
#ball2 {
background-color: blue;
left: 450px;
top: 450px;
}
</style>
</head>
<body>
<div id="container">
<div id="ball1" class="ball"></div>
<div id="ball2" class="ball"></div>
</div>
<script>
let ball1 = document.getElementById("ball1");
let ball2 = document.getElementById("ball2");
let x1 = 0;
let y1 = 0;
let x2 = 450;
let y2 = 450;
let vx1 = 5;
let vy1 = 5;
let vx2 = -5;
let vy2 = -5;
setInterval(function() {
x1 += vx1;
y1 += vy1;
ball1.style.left = x1 + "px";
ball1.style.top = y1 + "px";
if (x1 < 0 || x1 + 50 > 500) {
vx1 = -vx1;
}
if (y1 < 0 || y1 + 50 > 500) {
vy1 = -vy1;
}
x2 += vx2;
y2 += vy2;
ball2.style.left = x2 + "px";
ball2.style.top = y2 + "px";
if (x2 < 0 || x2 + 50 > 500) {
vx2 = -vx2;
}
if (y2 < 0 || y2 + 50 > 500) {
vy2 = -vy2;
}
if (x1 + 50 > x2 && x1 < x2 + 50 && y1 + 50 > y2 && y1 < y2 + 50) {
vx1 = -vx1;
vy1 = -vy1;
vx2 = -vx2;
vy2 = -vy2;
}
}, 50);
</script>
</body>
</html>上述代碼創建了一個包含兩個帶有不同顏色的小球的容器。然后使用JavaScript和CSS樣式分別控制兩個小球的位置和速度。當兩個小球觸碰時，它們將改變方向并反彈，從而模擬一個小球碰撞的過程。