HTML碰撞代碼，是利用HTML代碼實現碰撞效果的一種技術。在HTML中，我們可以使用canvas標簽來繪制圖形，通過JavaScript代碼實現碰撞效果。以下是一個簡單的HTML碰撞代碼案例。

//定義小球的位置和速度
var x = 100;
var y = 100;
var vx = 5;
var vy = 5;
//獲取canvas元素和繪圖上下文
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//繪制小球函數
function drawCircle() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, 20, 0, 2 * Math.PI);
context.closePath();
context.fillStyle = "#0095DD";
context.fill();
}
//更新位置函數
function updatePosition() {
x += vx;
y += vy;
//判斷是否碰到邊界
if (x + 20 >canvas.width || x - 20< 0) {
vx = -vx;
}
if (y + 20 >canvas.height || y - 20< 0) {
vy = -vy;
}
}
//主循環
function mainLoop() {
drawCircle();
updatePosition();
requestAnimationFrame(mainLoop);
}
//啟動主循環
mainLoop();

通過以上代碼，我們可以看到，HTML碰撞代碼實現的原理就是通過繪制小球，并根據其速度和位置的變化實現碰撞效果。同時，該代碼中使用的canvas標簽和JavaScript代碼也非常簡單易用，適合初學者進行學習和使用。