CSS貪吃蛇是一款基于HTML、CSS和JavaScript的小游戲。在游戲中，玩家控制蛇移動并收集食物，蛇越長得分越高。該游戲主要使用了CSS3的一些屬性和動畫效果，以及JavaScript的一些基礎語法。下面是部分JS代碼的實現過程。

// 創建蛇身和食物的函數
function createSnake() {
for (var i = 0; i< 3; i++) {
var bodyDiv = document.createElement('div');
bodyDiv.style.left = i*20 + 'px';
bodyDiv.style.top = '0px';
bodyDiv.className = 'snakeBody';
snakeArr.push(bodyDiv);
gameMap.appendChild(bodyDiv);
}
}
function createFood() {
var foodDiv = document.createElement('div');
foodDiv.style.left = Math.floor(Math.random() * 30) * 20 + 'px';
foodDiv.style.top = Math.floor(Math.random() * 30) * 20 + 'px';
foodDiv.className = 'food';
gameMap.appendChild(foodDiv);
foodNum++;
foodScore.innerHTML = foodNum;
}

該游戲中，創建蛇身和食物的函數非常關鍵，這里我們主要使用了DOM元素的創建方法和CSS中的基本單位像素px。同時，在創建蛇身部分，我們還使用了一個數組來存儲蛇身的div元素，以便在后續移動時進行遍歷并修改樣式。

// 游戲結束函數
function gameOver() {
clearInterval(moveInterval);
alert('游戲結束，得分為：' + foodNum);
snakeArr.forEach(function(item){
item.className = 'snakeBody remove';
})
snakeArr = [];
createSnake();
createFood();
foodNum = 0;
foodScore.innerHTML = foodNum;
}
// 碰撞檢測函數
function checkCrash() {
if (snakeArr[0].offsetLeft< 0 || snakeArr[0].offsetLeft >580 || snakeArr[0].offsetTop< 0 || snakeArr[0].offsetTop >580) {
gameOver();
}
for (var i = 1; i< snakeArr.length; i++) {
if (snakeArr[0].offsetLeft === snakeArr[i].offsetLeft && snakeArr[0].offsetTop === snakeArr[i].offsetTop) {
gameOver();
}
}
}

在游戲過程中，需要不斷進行碰撞檢測，判斷蛇頭是否碰到邊界或者蛇身。這里我們使用了DOM元素的offsetLeft和offsetTop屬性來判斷蛇頭的位置，以及一個for循環來遍歷蛇身，判斷是否與蛇頭位置重合。同時，在游戲結束時，我們需要清空當前蛇身，重新創建一個新的蛇身和食物，以及將得分清零。