一、功能介绍
1、首先该小游戏,主要由HTML、css和jQuery写出来的,功能可以实现控制播种、生长、开花、结果。收获功能,让我们来看下效果图:
2、下面就来看代码的具体实现:
HTML代码:
<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><!-- 个数-->
CSS样式代码:
<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: 50px;
position: absolute;
cursor: hand;
}
#grow {
width: 56px;
height: 56px;
background-image: url(img/btn_grow.png);
top: 226px;
left: 130px;
position: absolute;
cursor: hand;
}
#bloom {
width: 56px;
height: 56px;
background-image: url(img/btn_bloom.png);
top: 226px;
left: 210px;
position: absolute;
cursor: hand;
}
#fruit {
width: 56px;
height: 56px;
background-image: url(img/btn_fruit.png);
top: 226px;
left: 290px;
position: absolute;
cursor: hand;
}
#harvest {
width: 56px;
height: 56px;
background-image: url(img/btn_harvest.png);
top: 226px;
left: 370px;
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>
jQuery代码(这里写了每个功能的点击事件,代码比较累赘):
<script type="text/javascript">
//自定义一个移除id值的方法
function f1(id1,id2,id3,id4) {
$(id1).removeClass("border");
$(id2).removeClass("border");
$(id3).removeClass("border");
$(id4).removeClass("border");
}
$(function() {
//给播种设置点击事件
$("#seed").on("click", function() {
f1("#grow","#bloom","#fruit","#harvest");
$(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() {
f1("#seed","#bloom","#fruit","#harvest");
$(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() {
f1("#seed","#grow","#fruit","#harvest");
if($(".img1").attr("src") == "img/grow.png") {
$(".img1").attr("src", "img/bloom.png");
} else {
alert("请先生长!");
}
});
$("#fruit").on("click", function() {
f1("#seed","#grow","#bloom","#harvest");
$(this).addClass("border");
if($(".img1").attr("src") == "img/bloom.png") {
$(".img1").attr("src", "img/fruit.png");
} else {
alert("请先开花!");
}
});
$("#harvest").on("click", function() {
f1("#seed","#grow","#bloom","#fruit");
$(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>
二、
代码基本就这些了,如果想要源代码,请扫下面的二维码,回复:js1024 领取源代码地址