版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
仿照qq农场实现了一个简易的开心农场，使我们在开心快乐中学习
在农场里我们可以进行基本的操作播种，生长，开花和结果。
先看一下效果图
生长
结果
一番欣赏之后是不是感觉很有趣很好玩~~~~
**程序解读：**准备好相关的图片和素材，播种 生长 开花和结果都是远行图片div，当点击时，切换为相对应的图片，就实现了点击相应按钮出现播种生长开花结果的过程。
1. Body内容
<div id="bg">
<div id="seed"></div>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>
</div>
2. CSS样式
div{
font-size: 12px;
border: #999 1px solid;
}
#bg{
width: 580px;
height: 439px;
background-image: url(img/farmBackground.png);
}
/*控制图片*/
img{
position: absolute;
top: -155px;
left: 150px;
}
/*控制播种按钮*/
#seed{
background-image: url(img/btn_seed.png);
width: 56px;
height: 56px;
position: absolute;
top: 380px;
left: 99px;
cursor: hand;
}
/*控制生长按钮*/
#grow{
background-image: url(img/btn_grow.png);
width: 56px;
height: 56px;
position: absolute;
top: 380px;
left: 204px;
cursor: hand;
}
/*控制开花按钮*/
#bloom{
background-image: url(img/btn_bloom.png);
width: 56px;
height: 56px;
position: absolute;
top: 380px;
left: 309px;
cursor: hand;
}
/*控制结果按钮*/
#fruit{
background-image: url(img/btn_fruit.png);
width: 56px;
height: 56px;
position: absolute;
top: 380px;
left: 418px;
cursor: hand;
}
3. Script代码
$(document).ready(function(){
$("#seed").bind("click",function(){
$("img").remove();
$("#seed").prepend("<img src='img/seed.png' />")
});
$("#grow").bind("click",function(){
$("img").remove();
$("#seed").append("<img src='img/grow.png' />")
});
$("#bloom").bind("click",function(){
$("img").replaceWith("<img src='img/bloom.png' />")
});
$("#fruit").bind("click",function(){
$("<img src='img/fruit.png' />").replaceAll("img");
});
});
至此农场的全部功能都能实现了！！！
下面展示上面代码结合的总体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.js"></script>
<style type="text/css">
div{
font-size: 12px;
border: #999 1px solid;
}
#bg{
width: 580px;
height: 439px;
background-image: url(img/farmBackground.png);
}
/*控制图片*/
img{
position: absolute;
top: -155px;
left: 150px;
}
/*控制播种按钮*/
#seed{
background-image: url(img/btn_seed.png);
width: 56px;
height: 56px;
position: absolute;
top: 380px;
left: 99px;
cursor: hand;
}
/*控制生长按钮*/
#grow{
background-image: url(img/btn_grow.png);
width: 56px;
height: 56px;
position: absolute;
top: 380px;
left: 204px;
cursor: hand;
}
/*控制开花按钮*/
#bloom{
background-image: url(img/btn_bloom.png);
width: 56px;
height: 56px;
position: absolute;
top: 380px;
left: 309px;
cursor: hand;
}
/*控制结果按钮*/
#fruit{
background-image: url(img/btn_fruit.png);
width: 56px;
height: 56px;
position: absolute;
top: 380px;
left: 418px;
cursor: hand;
}
</style>
</head>
<body>
<div id="bg">
<div id="seed"></div>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#seed").bind("click",function(){
$("img").remove();
$("#seed").prepend("<img src='img/seed.png' />")
});
$("#grow").bind("click",function(){
$("img").remove();
$("#seed").append("<img src='img/grow.png' />")
});
$("#bloom").bind("click",function(){
$("img").replaceWith("<img src='img/bloom.png' />")
});
$("#fruit").bind("click",function(){
$("<img src='img/fruit.png' />").replaceAll("img");
});
});
</script>
</body>
</html>
在编辑代码中创作游戏是一件十分快乐的事呦@@@@