CSS射擊是一種非常流行的CSS練習和游戲，它可以幫助開發者更好地理解CSS的布局、選擇器和樣式等知識。在CSS射擊中，你需要用鼠標或鍵盤操作射擊CSS選擇器或屬性，讓它們達到正確的效果。 首先，讓我們來看一下CSS射擊的基本代碼：

html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background: #111;
}
.game-container {
position: relative;
}
.target {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: #FFF;
border-radius: 50%;
}
.target:hover {
background: #F00;
}

如上所示，CSS射擊的基本頁面包含一個容器和一個目標。我們使用CSS選擇器將目標設置為絕對定位，并將其放置在容器中間。我們也使用CSS屬性來設置目標的背景色、邊框、樣式等等。我們還設置了一個鼠標懸浮的效果來幫助用戶更好地區分目標。 接下來，我們需要添加JavaScript代碼來讓游戲真正變得有趣。代碼如下：

const target = document.querySelector('.target');
const score = document.querySelector('.score');
let points = 0;
target.addEventListener('click', () =>{
points++;
score.innerHTML = points;
});
document.addEventListener('mousemove', (e) =>{
const x = e.clientX;
const y = e.clientY;
target.style.left = `${x}px`;
target.style.top = `${y}px`;
});

如上所示，我們定義了一個目標和一個計分板。當用戶單擊目標時，我們會增加一個點數并在計分板中更新分數。我們還使用JavaScript的鼠標移動事件來追蹤用戶的鼠標位置，并將目標移動到相應的位置。 最后，我們需要為游戲添加一些樣式來讓它看起來更像游戲本身。代碼如下：

.game-container {
width: 500px;
height: 500px;
background: #333;
border-radius: 10px;
box-shadow: 0 0 40px 0 rgba(255, 255, 255, 0.5);
overflow: hidden;
}
.score {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 2rem;
color: #FFF;
}
.target {
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}

如上所示，我們添加了一個游戲容器來容納目標并為其添加了一些樣式。我們還定義了一個計分板來顯示用戶的得分。最后，我們為鼠標懸停時的目標添加了一個過渡動畫和光標樣式。 現在，你已經了解了CSS射擊的基本結構和代碼，試著用你的CSS技能來改進它吧！敬請享受游戲！