使用JS做出小农场

使用JS做出小农场

效果图

效果简单的小农场
点击播种是播种的图片
点击生长是生长的图片
点击开花是开花的图片

代码如下

CSS样式

div{font-size:12px;border:#999 1px solid;padding:5px;
}#bg{		/*控制页面背景*/width:456px;height:266px;background-image:url(images/plowland.jpg);
}
img{		/*控制图片*/position:absolute;top:2000px;left:2000px;
}
#seed{		/*控制播种按钮*/background-image:url(images/btn_seed.png);width:56px;height:56px;position:absolute;top:229px;left:49px;cursor:hand;
}
#grow{		/*控制生长按钮*/background-image:url(images/btn_grow.png);width:56px;height:56px;position:absolute;top:229px;left:154px;cursor:hand;
}
#bloom{		/*控制开花按钮*/background-image:url(images/btn_bloom.png);width:56px;height:56px;position:absolute;top:229px;left:259px;cursor:hand;
}
#fruit{		/*控制结果按钮*/background-image:url(images/btn_fruit.png);wid