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

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

• 
• 

• 
• 
• 
• 

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

 

//种子对象
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;

}