HTML5農場游戲源代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5農場游戲</title>
<style type="text/css">
/* 游戲場景 */
#game {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
background: url(images/bg.png) no-repeat;
}
/* 農場角色 */
.role {
position: absolute;
display: block;
width: 50px;
height: 50px;
background: url(images/role.png) no-repeat;
cursor: pointer;
}
/* 植物 */
.plant {
position: absolute;
display: block;
width: 50px;
height: 50px;
background: url(images/plant.png) no-repeat;
}
/* 物品 */
.item {
position: absolute;
display: block;
width: 50px;
height: 50px;
background: url(images/item.png) no-repeat;
}
</style>
</head>
<body>
<div id="game">
<div class="role" id="farmer" style="left: 100px; top: 200px;"></div>
<div class="plant" id="plant1" style="left: 200px; top: 300px;"></div>
<div class="plant" id="plant2" style="left: 400px; top: 100px;"></div>
<div class="item" id="item1" style="left: 300px; top: 400px;"></div>
</div>
<script type="text/javascript">
var farmer = document.getElementById("farmer");
var plant1 = document.getElementById("plant1");
var plant2 = document.getElementById("plant2");
var item1 = document.getElementById("item1");
/* 農場角色移動 */
farmer.onclick = function() {
farmer.style.left = parseInt(farmer.style.left) + 50 + "px";
};
/* 收獲植物 */
plant1.onclick = function() {
plant1.style.display = "none";
};
plant2.onclick = function() {
plant2.style.display = "none";
};
/* 拾取物品 */
item1.onclick = function() {
item1.style.display = "none";
};
</script>
</body>
</html>上一篇純css3 環形百分比
下一篇純css3 數字時鐘