效果如图所示:
代码如下所示:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<style type="text/css">
#bg {
width: 500px;
height: 280px;
background-image: url(img/plowland.jpg);
background-repeat: no-repeat;
position: absolute;
}
img {
position: absolute;
width: 56px;
height: 56px;
}
#seed {
width: 56px;
height: 56px;
background-image: url(img/btn_seed.png);
top: 226px;
left: 30px;
position: absolute;
cursor: hand;
}
#grow {
width: 56px;
height: 56px;
background-image: url(img/btn_grow.png);
top: 226px;
left: 110px;
position: absolute;
cursor: hand;
}
#bloom {
width: 56px;
height: 56px;
background-image: url(img/btn_bloom.png);
top: 226px;
left: 190px;
position: absolute;
cursor: hand;
}
#fruit {
width: 56px;
height: 56px;
background-image: url(img/btn_fruit.png);
top: 226px;
left: 270px;
position: absolute;
cursor: hand;
}
#harvest {
width: 56px;
height: 56px;
background-image: url(img/btn_harvest.png);
top: 226px;
left: 350px;
position: absolute;
cursor: hand;
}
.border {
border: 2px solid red;
border-radius: 50px;
}
#reaps{
width: auto;
height: auto;
margin-top: 300px;
position: absolute;
}
#num{
margin-top: 310px;
margin-left: 65px;
position: absolute;
font-size: 30px;
}
</style>
</head>
<body>
<div id="bg"></div>
<span id="seed"></span>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>
<span id="harvest"></span>
<div id="reaps"></div>
<span id="num"></span>
<script type="text/javascript">
$(function(){
//给播种设置点击事件
$("#seed").on("click",function(){
$("#grow").removeClass("border");//移除生长的class的值
$("#bloom").removeClass("border");//移除开花的class的值
$("#fruit").removeClass("border");//移除结果的class的值
$("#harvest").removeClass("border");//移除收获的class的值
$(this).addClass("border");//给播种设置选中样式
//给id为bg的div设置点击事件
$("#bg").on("click", function(e) {
//给图片设置一个class,值为img1
$("<img src='img/seed.png' />").addClass("img1").prependTo("#bg").css("top", e.pageY - 30).css("left", e.pageX - 34);
});
$(this).off("click");//移除播种的点击事件(因为已经有了种子,所以可以不再点击播种就能种了)
});
//给id为seed的span标签设置点击事件
$("#grow").on("click", function() {
$("#seed").removeClass("border");;//移除播种的class的值
$("#bloom").removeClass("border");;//移除开花的class的值
$("#fruit").removeClass("border");;//移除结果的class的值
$("#harvest").removeClass("border");;//移除收获的class的值
$(this).addClass("border");//给生长设置选中样式
//判断如果class值为img1的图片的src路径为img/seed.png,则把src路径改变为img/grow.png,否则让它先播种
if($(".img1").attr("src") == "img/seed.png") {
$(".img1").attr("src", "img/grow.png");
} else {
alert("请先播种!");
}
});
$("#bloom").on("click", function() {
$("#seed").removeClass("border");
$("#grow").removeClass("border");
$("#fruit").removeClass("border");
$("#harvest").removeClass("border");
$(this).addClass("border");
if($(".img1").attr("src") == "img/grow.png") {
$(".img1").attr("src", "img/bloom.png");
} else {
alert("请先生长!");
}
});
$("#fruit").on("click", function() {
$("#seed").removeClass("border");
$("#grow").removeClass("border");
$("#bloom").removeClass("border");
$("#harvest").removeClass("border");
$(this).addClass("border");
if($(".img1").attr("src") == "img/bloom.png") {
$(".img1").attr("src", "img/fruit.png");
} else {
alert("请先开花!");
}
});
$("#harvest").on("click", function() {
$("#seed").removeClass("border");
$("#grow").removeClass("border");
$("#bloom").removeClass("border");
$("#fruit").removeClass("border");
$(this).addClass("border");
//如果class值为img1的图片的src路径为img/fruit.png,则把该图片放到id为reaps的div中,
//然后删除之前的class值,在重新添加一个class值,并设置css样式中的top和left设置为0px
if($(".img1").attr("src") == "img/fruit.png") {
$(".img1").attr("src","img/fruit.png").prependTo("#reaps").removeClass("img1").addClass("reap").css("top",0).css("left",0);
//获取class值为reap的图片的个数,并把个数放到id为num的span标签中
var length = $(".reap").length;
$("#num").text("×" +length);
} else {
alert("作物还没成熟!");
}
$("#harvest").removeClass("border");
});
});
</script>
</body>
</html>