使用js制作简单的农场游戏

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 ;
	}
}

首先是CSS样式，四个按钮，播种，生长，开花结果。

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

然后是HTML代码

$(document).ready(function(){
		$("#bg").bind("click",function(e){			
			$("<img src='images/"+img+"'/>").prependTo("#bg").css("top",e.pageY-60)	.css("left",e.pageX-40);				
		
		});	
		$("#grow").bind("click",function(){			
			$(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");
		});								
	});

然后是js代码绑定四个事件