使用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);
	width:56px;
	height:56px;
	position:absolute;
	top:229px;
	left:368px;
	cursor:hand;
	.border{
		border:opx ;
	}
}

JS代码

var img="seed.png";
	
	$(document).ready(function(){
		$("#bg").bind("click",function(e){			//绑定播种按钮的单击事件
								
			$("<img src='images/"+img+"'/>").prependTo("#bg").css("top",e.pageY-60)	.css("left",e.pageX-40);				
		//	$("#bg").prepend("<img src='images/seed.png' />");
		});	
		$("#grow").bind("click",function(){			//绑定生长按钮的单击事件
								//移除img元素
			$(this).addClass("border");
			img="grow.png";
			//$("#bg").append("<img src='images/grow.png' />");
		});	
		$("#bloom").bind("click",function(){	
			//绑定开花按钮的单击事件
			$(this).addClass("border");
			img="bloom.png";
		//	$("img").replaceWith("<img src='images/bloom.png' />");
		});
		$("#fruit").bind("click",function(){
			//绑定结果按钮的单击事件
			img="fruit.png"
		//	$("<img src='images/fruit.png' />").replaceAll("img");
		});								
	});

HTML代码

<div id="bg">
    <span id="seed"></span>
    <span id="grow"></span>
    <span id="bloom"></span>
    <span id="fruit"></span>
</div>

代码有些小BUG，如点击播种，开花等图片出有植物出现在后面，植物不仅可以种在土里，图片任意位置都能种，点击四个图标无样式

本人初学者，评论区欢迎各路大佬赐教

标签：img,top,农场,JS,做出,按钮,56px,png,left
来源： https://blog.csdn.net/Mr_hanghang/article/details/102732371