jQuery实现一个非常简单的农场游戏

一、功能介绍
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 领取源代码地址