码迷,mamicode.com
首页 > Web开发 > 详细

原生js面向对象写法

时间:2018-05-22 00:03:51      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:对象   creat   rand   idt   ring   ini   append   pen   dom   

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

 

原生js面向对象写法

标签:对象   creat   rand   idt   ring   ini   append   pen   dom   

原文地址:https://www.cnblogs.com/JD85/p/9069976.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!