原生js面向对象写法

Posted 2020-11-07 居家懒人

Mouse就是一个类，有自己的成员变量和成员方法，成员方法一定加上prototype,避免js原型的坑。

var Mouse = function(id)
{

    this.id = id;
    this.name = "";
    this.mes = null;//被创建的那个div
    this.con = null;
    this.runAwayInterval = null;

    this.init();
};

Mouse.prototype.init = function()
{
    // console.log("初始化id为 " + this.id + " 的mouse");
    this.show();

}

Mouse.prototype.show = function()
{
    this.mes = document.createElement("div");
    this.mes.setAttribute("id","mickey");
    this.con = document.getElementById("container");
    this.mes.style.opacity = 1;
    this.con.appendChild(this.mes);

    
    this.mes.onclick = function()
    {
        getScore();
        this.con.removeChild(this.mes);
        clearInterval(this.runAwayInterval);
        removeOneMouse(this.id);
    }.bind(this);
    // console.log(this.con.offsetWidth - 100);
    this.mes.style.left = Math.random()*(this.con.offsetWidth - 100).toString()+"px";
    var targetTop = Math.random()*(this.con.offsetHeight - 100) +50;
    this.mes.style.top =targetTop  +"px";
    // this.mes.style.top = 0 +"px";

    this.runAwayInterval = setInterval(this.runAway.bind(this),200);
}

Mouse.prototype.runAway = function()
{
    // console.log("我是‘ "+ this.id +" ‘我正在跑...");

    var opa = parseFloat(this.mes.style.opacity);
    opa -= 0.1;
    this.mes.style.opacity = opa;
    if(opa<=0)
    {
       this.lose();
    }
}

// Mouse.prototype.beCatch = function()
// {
//     this.con.removeChild(this.mes);
//     clearInterval(this.runAwayInterval);
// }

Mouse.prototype.lose = function()
{
    // console.log("我是‘ "+ this.id +" ‘我成功跳走了...");
    this.con.removeChild(this.mes);
    clearInterval(this.runAwayInterval);
    removeOneMouse(this.id);
    loseScore();
}