CSS試衣游戲是一種基于CSS和JavaScript的互動(dòng)游戲，它可以讓用戶通過圖像化的界面，嘗試不同風(fēng)格和款式的衣服。以下是一個(gè)簡單的CSS試衣游戲代碼示例：

HTML部分：
<div id="wardrobe">
<img src="shirt.jpg" id="shirt">
<img src="pants.jpg" id="pants">
<img src="shoes.jpg" id="shoes">
</div>
CSS部分：
#wardrobe {
width: 600px;
margin: 0 auto;
background-color: #eee;
padding: 20px;
}
img {
width: 200px;
height: 200px;
margin-bottom: 20px;
cursor: pointer;
}
#shirt {
float: left;
}
#pants {
margin: 0 20px;
}
#shoes {
float: right;
}
JavaScript部分：
var shirtColor = "white";
var pantsStyle = "jeans";
var shoesStyle = "sneakers";
document.getElementById("shirt").addEventListener("click", function() {
if (shirtColor === "white") {
document.getElementById("shirt").src = "red_shirt.jpg";
shirtColor = "red";
} else {
document.getElementById("shirt").src = "white_shirt.jpg";
shirtColor = "white";
}
});
document.getElementById("pants").addEventListener("click", function() {
if (pantsStyle === "jeans") {
document.getElementById("pants").src = "khaki_pants.jpg";
pantsStyle = "khaki";
} else {
document.getElementById("pants").src = "jeans_pants.jpg";
pantsStyle = "jeans";
}
});
document.getElementById("shoes").addEventListener("click", function() {
if (shoesStyle === "sneakers") {
document.getElementById("shoes").src = "leather_shoes.jpg";
shoesStyle = "leather";
} else {
document.getElementById("shoes").src = "sneakers.jpg";
shoesStyle = "sneakers";
}
});

在這個(gè)代碼示例中，我們創(chuàng)建了一個(gè)ID為“wardrobe”的DIV元素，其中包含了三個(gè)不同類型的圖像元素：襯衫、褲子和鞋子。CSS部分設(shè)置了這些元素的樣式和位置。例如，我們設(shè)置了所有的圖像元素共用的樣式，以及每個(gè)元素的特定樣式（如利用“float”屬性將襯衫和鞋子對齊）。在JavaScript部分，我們添加了點(diǎn)擊事件監(jiān)聽器，當(dāng)用戶單擊襯衫、褲子或鞋子時(shí)，將更改相應(yīng)元素的圖像。代碼里僅僅是一個(gè)示例，僅供參考。