HTML5換裝小游戲是一種很有趣的學(xué)習(xí)HTML5的方式，它可以使初學(xué)者更快地了解HTML5標(biāo)簽的使用方法和CSS樣式的應(yīng)用。下面我們來看一下這個小游戲的代碼：
<!doctype html>
<html>
<head>
<title>HTML5換裝小游戲</title>
<style>
/* 設(shè)置頁面背景顏色為淺灰色 */
body {
background-color:#f2f2f2;
}
/* 設(shè)置圖片尺寸和定位 */
img {
width:100px;
height:100px;
margin:10px;
position:absolute;
cursor:pointer;
}
</style>
</head>
<body>
<img src="images/hair1.png" id="hair" onclick="changeImage('hair')"/>
<img src="images/shirt1.png" id="shirt" onclick="changeImage('shirt')"/>
<img src="images/pants1.png" id="pants" onclick="changeImage('pants')"/>
<img src="images/shoes1.png" id="shoes" onclick="changeImage('shoes')"/>
<script>
/* 定義函數(shù)，實現(xiàn)圖片的更換 */
function changeImage(type) {
var imgObj = document.getElementById(type);
var i = imgObj.src.indexOf(".png");
var j = imgObj.src.indexOf(type);
var num = imgObj.src.substring(i-1, i);
num++;
if (num>4) {
num = 1;
}
imgObj.src = imgObj.src.substring(0, j-1) + num + ".png";
}
</script>
</body>
</html>在這段代碼中，我們首先使用了<style>標(biāo)簽來設(shè)置頁面背景顏色和圖片樣式，同時給每一張圖片設(shè)置了一個onclick事件，當(dāng)用戶點擊圖片時，調(diào)用changeImage()函數(shù)更換圖片。函數(shù)中，我們使用了JavaScript的substring()方法和indexOf()方法來實現(xiàn)字符串的處理和拼接，以獲取圖片的名稱和編號。
總之，這是一個很簡單的HTML5小游戲，但它卻能夠很好地幫助初學(xué)者掌握基本的HTML5和JavaScript開發(fā)技巧，是很好的練手項目。
上一篇mysql5命令行安裝
下一篇html5換鏈接地址代碼