现在的位置: 首页 > 综合 > 正文

JS做农场系列二:工具栏、种子包的实现

2011年10月11日 ⁄ 综合 ⁄ 共 4173字 ⁄ 字号 评论关闭

点击工具栏的种子包,选择相应的种子(白菜或萝卜),给土地添加点击播种事件(暂未实现完全) 

  • 箭头
  • 铲子
  • 种子包
  • 摘取

这里种子对象用到了构造函数原型方式:

 构造函数原型方式

//种子对象
function SEED(event, seedName) {
    
this.mouseDownEvent = event || window.event;  //鼠标按下事件
    this.seedName = seedName;   //种子名称
    this.divSeed = null;        //创建出来的种子
    this.isCanMove = false;     //是否可以移动
    this.isCanSow = false;        //是否可以点击播种
}

//创建SEED根据类型不同
SEED.prototype.createSeed = function() {
    
var e = this.mouseDownEvent;
    
var oSeed = document.createElement("div");

    oSeed.style.width = "51px";
    oSeed.style.height 
= "58px";
    oSeed.style.position 
= "absolute";
    oSeed.style.top 
= document.documentElement.scrollTop + e.clientY - 25 + "px";  //注意取鼠标坐标的时候,还要考虑到有滚动条的情况
    oSeed.style.left = document.documentElement.scrollLeft + e.clientX - 0 + "px";
    oSeed.style.background 
= "url('http://images.cnblogs.com/cnblogs_com/meiqunfeng/农场/种子" + this.seedName + ".png') no-repeat";

    document.getElementById("map").appendChild(oSeed);

    this.divSeed = oSeed;
    
this.isCanMove = true;
    
this.isCanSow = true;
}
//鼠标拖动种子跟着动
SEED.prototype.seedMove = function(e) {
    e 
= e || window.event;
    
this.divSeed.style.top = document.documentElement.scrollTop + e.clientY - 25;
    
this.divSeed.style.left = document.documentElement.scrollLeft + e.clientX - 0;

}
//播种
SEED.prototype.sowSeed = function(id) {
    
//获取鼠标手持的种子的left和top
    //var left = this.divSeed.style.left.substring(0, this.divSeed.style.left.length - 2);
    //var top = this.divSeed.style.top.substring(0, this.divSeed.style.top.length - 2);
    alert("播种成功!");
    
this.isCanMove = false;
    
this.isCanSow = false;

}

 

 

抱歉!评论已关闭.