js实现简单开心农场

点击对应按钮放置相应的东西

效果图：

css代码

div{
   font-size:12px;
   border:#999 1px solid;
   padding:5px;
  }
  #bg{  /*控制页面背景*/
   width:456px;
   height:266px;
   background-image:url(img/plowland.jpg);
  }
  img{  /*控制图片*/
   position:absolute;
   /* top:85px;
   left:195px; */
  }
  #seed{  /*控制播种按钮*/
   background-image:url(img/btn_seed.png);
   width:56px;
   height:56px;
   position:absolute;
   top:229px;
   left:49px;
   cursor:hand;
  }
  #grow{  /*控制生长按钮*/
   background-image:url(img/btn_grow.png);
   width:56px;
   height:56px;
   position:absolute;
   top:229px;
   left:154px;
   cursor:hand;
  }
  #bloom{  /*控制开花按钮*/
   background-image:url(img/btn_bloom.png);
   width:56px;
   height:56px;
   position:absolute;
   top:229px;
   left:259px;
   cursor:hand;
  }
  #fruit{  /*控制结果按钮*/
   background-image:url(img/btn_fruit.png);
   width:56px;
   height:56px;
   position:absolute;
   top:229px;
   left:368px;
   cursor:hand;
  }

js代码

<div id="bg">
      <span id="seed"></span>
      <span id="grow"></span>
      <span id="bloom"></span>
      <span id="fruit"></span>
  </div>
  <script>
   var  img= "";
    $(document).ready(function(){
     $("#seed").on("click",function(){
       img= "seed.png";
      $("#bg").on("click",function(e){
       //绑定播种按钮的单击事件
       $("<img src='img/"+img+"'/>").prependTo("#bg").css("top",e.pageY-60).css("left",e.pageX-50); 
      });      
     }); 
     $("#grow").on("click",function(){
      img="grow.png";
      //绑定生长按钮的单击事件
      $("img").remove();
      $("#bg").on("click",function(e){
       //绑定播种按钮的单击事件
       $("<img src='img/"+img+"'/>").prependTo("#bg").css("top",e.pageY-60).css("left",e.pageX-50);       
      });            
     }); 
     $("#bloom").on("click",function(){  //绑定开花按钮的单击事件
      img="bloom.png";
      $("img").remove();
      $("#bg").on("click",function(e){
       //绑定播种按钮的单击事件
       $("<img src='img/"+img+"'/>").prependTo("#bg").css("top",e.pageY-60).css("left",e.pageX-50);       
      });
     });
     $("#fruit").on("click",function(){   //绑定结果按钮的单击事件
      img="fruit.png";
      $("img").remove();
      $("#bg").on("click",function(e){
       //绑定播种按钮的单击事件
       $("<img src='img/"+img+"'/>").prependTo("#bg").css("top",e.pageY-60).css("left",e.pageX-50);       
      });
     });        
    });

来源：https://blog.csdn.net/LiAngels/article/details/102732273