CreateSmallAnimal.prototype.moveTo = function() {
    var left = parseInt($('#person').css('left')) - 50;
    var top = parseInt($('#person').css('top')) - 50;
    this.shenti.animate({left: $('#person').css('left'), top: $('#person').css('top')}, 10000);
    /*that = this;
    function smallAnimalMoveTo() {
that.shenti.animate({left: $('#person').css('left'), top: $('#person').css('top')}, 10000);
}*/
    setTimeout("CreateSmallAnimal.prototype.moveTo()", 10000);
}大家看看哪儿有错啊,报的错是TypeError: this.shenti is undefined

解决方案 »

  1.   

    整个代码是
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type='text/css'>
    body { margin:0; padding:0; background-color:#fff; }
    #frame { width:500px; height:500px; overflow:hidden; margin:0 auto; border:1px solid #000; position:relative; }
    #game { width:700px; height:1000px; background-color:#000; position:absolute; left:-100px; top:-500px; }
    #gameInner { postion:relative; width:1000px; height:1000px; }
    </style>
    <script type='text/javascript'>
    function CreatePerson(life, mo, shenti) {
        this.life = life;
        this.mo = mo;
        //this.shenti = (new CreateShenTi('50px', '50px', '325px', '950px', 'red', 'person')).returnShenTi();
        this.shenti = shenti;
    }
      
    CreatePerson.prototype.move = function() {
        var that= this;
        document.getElementById('gameInner').onclick = function(e) {
            var e = e || window.event;
            var x = that.shenti.offset().left;
            var y = that.shenti.offset().top;
            var mousex = e.pageX;
            var mousey = e.pageY;
            var _left = mousex - x;
            var _top = y - e.pageY;
            //$('#game').css({left: '+=' + _left, top: '+=' + _top});
            //that.shenti.css({left: '+=' + _left, top: '-=' + _top});
            /*if(_left > 50) {
                _left = 50;
            } else if(_left < -50) {
                _left = -50;
            }
            if(mousey > 50) {
                _left = 50;
            }*/ 
            //$('#game').animate({left: '+=' + _left, top: '+=' + _top}, 5000);
            that.shenti.animate({left: '+=' + _left, top: '-=' + _top}, 5000);
            //alert(x);
            //alert(mousex);
        }
    }
      
    function CreateSmallAnimal(life, mo, shenti) {
        this.life = life;
        this.mo = mo;
        //this.shenti = (new CreateShenTi('50px', '50px', '325px', '600px', 'black')).returnShenTi();
        this.shenti = shenti;
    }
     
    CreateSmallAnimal.prototype.moveTo = function() {
        var left = parseInt($('#person').css('left')) - 50;
        var top = parseInt($('#person').css('top')) - 50;
        this.shenti.animate({left: $('#person').css('left'), top: $('#person').css('top')}, 10000);
        /*that = this;
        function smallAnimalMoveTo() {
    that.shenti.animate({left: $('#person').css('left'), top: $('#person').css('top')}, 10000);
    }*/
        setTimeout("CreateSmallAnimal.prototype.moveTo()", 10000);
    }
      
    function CreateShenTi(width, height, left, top, backgroundColor, id, backgroundImage) {
        this.width = width;
        this.height = height;
        this.left = left;
        this.top = top;
        this.backgroundColor = backgroundColor;
        this.id = id;
        this.backgroundImage= backgroundImage;
    }
    CreateShenTi.prototype.returnShenTi = function() {
        var $shenti = $('<div></div>');
        $shenti.css({width: this.width, height: this.height, position: 'absolute', left: this.left, top: this.top, backgroundColor: this.backgroundColor});
        if(this.id) $shenti.attr('id', this.id);
        $('#gameInner').append($shenti);
        return $('#gameInner').children().last();
    }
     
    CreateShenTi.prototype.returnImageShenTi = function() {
        var $shenti = $('<div></div>');
        var $image = $("<img width='50' height='50' />");
        $image.attr('src', this.backgroundImage);
        $shenti.append($image);
        $shenti.css({width: this.width, height: this.height, position: 'absolute', left: this.left, top: this.top, backgroundColor: this.backgroundColor, overflow:'hidden'});
        if(this.id) $shenti.attr('id', this.id);
        $('#gameInner').append($shenti);
        return $('#gameInner').children().last();
    }
     
    $(function() {
        var createPerson = new CreatePerson(1000, 800, (new CreateShenTi('50px', '50px', '325px', '950px', 'black', 'person', 'http://bbs.game798.com/upload/uploadfile/2006-11/200611261659712522.jpg')).returnImageShenTi());
        var createSmallAnimal1 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '325px', '600px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
        var createSmallAnimal2 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '325px', '700px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
        createPerson.move();
        createSmallAnimal1.moveTo();
        createSmallAnimal2.moveTo();
    });
    </script>
    </head>
      
    <body>
    <div id='frame'>
        <div id='game'>
            <div id='gameInner'>
                  
            </div>
        </div>   
    </div>
    </body>
    </html>
      

  2.   

    setTimeout("CreateSmallAnimal.prototype.moveTo()", 10000); } 
    这句有错
      

  3.   

    CreateSmallAnimal.prototype.moveTo = function() {
        var left = parseInt($('#person').css('left')) - 50;
        var top = parseInt($('#person').css('top')) - 50;
        this.shenti.stop().animate({left: $('#person').css('left'), top: $('#person').css('top')}, 10000);
        /*that = this;
        function smallAnimalMoveTo() {
            that.shenti.animate({left: $('#person').css('left'), top: $('#person').css('top')}, 10000);
        }*/
        var that = this;
        setTimeout(function(){
            that.moveTo();
        }, 10000);
    }
      

  4.   

    为什么that.moveTo();外面要加个function呢
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type='text/css'>
    body { margin:0; padding:0; background-color:#fff; }
    #frame { width:500px; height:500px; overflow:hidden; margin:0 auto; border:1px solid #000; position:relative; }
    #game { width:700px; height:1000px; background-color:#000; position:absolute; left:-100px; top:-500px; }
    #gameInner { postion:relative; width:1000px; height:1000px; }
    </style>
    <script type='text/javascript'>
    function CreatePerson(life, mo, shenti) {
        this.life = life;
        this.mo = mo;
        //this.shenti = (new CreateShenTi('50px', '50px', '325px', '950px', 'red', 'person')).returnShenTi();
        this.shenti = shenti;
    }
      
    CreatePerson.prototype.move = function() {
        var that= this;
        document.getElementById('gameInner').onclick = function(e) {
            var e = e || window.event;
            var x = that.shenti.offset().left;
            var y = that.shenti.offset().top;
            var mousex = e.pageX;
            var mousey = e.pageY;
            var _left = mousex - x;
            var _top = y - e.pageY;
            //$('#game').css({left: '+=' + _left, top: '+=' + _top});
            //that.shenti.css({left: '+=' + _left, top: '-=' + _top});
            /*if(_left > 50) {
                _left = 50;
            } else if(_left < -50) {
                _left = -50;
            }
            if(mousey > 50) {
                _left = 50;
            }*/ 
            //$('#game').animate({left: '+=' + _left, top: '+=' + _top}, 5000);
            that.shenti.animate({left: '+=' + _left, top: '-=' + _top}, 2);
            //alert(x);
            //alert(mousex);
        }
    }
      
    function CreateSmallAnimal(life, mo, shenti) {
        this.life = life;
        this.mo = mo;
        //this.shenti = (new CreateShenTi('50px', '50px', '325px', '600px', 'black')).returnShenTi();
        this.shenti = shenti;
    }var lefts;
    var tops; 
    CreateSmallAnimal.prototype.moveTo = function() {
        lefts = parseInt($('#person').css('left'));
        tops = parseInt($('#person').css('top'));
        this.shenti.animate({left: lefts, top: tops}, 1000);
        var that = this;
        /*function smallAnimalMoveTo() {
    that.shenti.animate({left: $('#person').css('left'), top: $('#person').css('top')}, 10000);
    }*/
        setTimeout(function(){
            that.moveTo();
        }, 1000);
    }
      
    function CreateShenTi(width, height, left, top, backgroundColor, id, backgroundImage) {
        this.width = width;
        this.height = height;
        this.left = left;
        this.top = top;
        this.backgroundColor = backgroundColor;
        this.id = id;
        this.backgroundImage= backgroundImage;
    }
    CreateShenTi.prototype.returnShenTi = function() {
        var $shenti = $('<div></div>');
        $shenti.css({width: this.width, height: this.height, position: 'absolute', left: this.left, top: this.top, backgroundColor: this.backgroundColor});
        if(this.id) $shenti.attr('id', this.id);
        $('#gameInner').append($shenti);
        return $('#gameInner').children().last();
    }
     
    CreateShenTi.prototype.returnImageShenTi = function() {
        var $shenti = $('<div></div>');
        var $image = $("<img width='50' height='50' />");
        $image.attr('src', this.backgroundImage);
        $shenti.append($image);
        $shenti.css({width: this.width, height: this.height, position: 'absolute', left: this.left, top: this.top, backgroundColor: this.backgroundColor, overflow:'hidden'});
        if(this.id) $shenti.attr('id', this.id);
        $('#gameInner').append($shenti);
        return $('#gameInner').children().last();
    }
     
    $(function() {
        var createPerson = new CreatePerson(1000, 800, (new CreateShenTi('50px', '50px', '325px', '950px', 'black', 'person', 'http://bbs.game798.com/upload/uploadfile/2006-11/200611261659712522.jpg')).returnImageShenTi());
        var createSmallAnimal1 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '325px', '600px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
        var createSmallAnimal2 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '325px', '700px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
        createPerson.move();
        createSmallAnimal1.moveTo();
        createSmallAnimal2.moveTo();
    });
    </script>
    </head>
      
    <body>
    <div id='frame'>
        <div id='game'>
            <div id='gameInner'>
                  
            </div>
        </div>   
    </div>
    </body>
    </html>
      

  6.   

    http://www.cnblogs.com/zhangzheny/archive/2007/12/03/981200.html setTimeout()在js类中的使用方法  
    setTimeout (表达式,延时时间)
    setTimeout(表达式,交互时间)
    延时时间/交互时间是以豪秒为单位的(1000ms=1s)setTimeout  在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
    setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式1,基本用法:
       执行一段代码:
       var i=0;
       setTimeout("i+=1;alert(i)",1000);
       执行一个函数:
       var i=0;
       setTimeout(function(){i+=1;alert(i);},1000);
      
       //注意比较上面的两种方法的不同。   下面再来一个执行函数的:
       var i=0;
       function test(){
           i+=1;
           alert(i);
       }
       setTimeout("test()",1000);
       也可以这样:
       setTimeout(test,1000);   总结:
       setTimeout的原型是这样的:
       iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
      
      setTimeout有两种形式  setTimeout(code,interval)
      setTimeout(func,interval,args)  其中code是一个字符串
      func是一个函数.  注意"函数"的意义,是一个表达式,而不是一个语句.
      比如你想周期性执行一个函数
      function a(){
          //...
      }
      可写为
      setTimeout("a()",1000)
      或
      setTimeout(a,1000)  这里注意第二种形式中,是a,不要写成a(),切记!!!
      展开来说,不管你这里写的是什么,如果是一个变量,一定是一个指向某函数的变量;如果是个函数,那它的返回值就  要是个函数  2,用setTimeout实现setInterval的功能
        思路很简单,就是在一个函数中调用不停执行自己,有点像递归
        var i=0;
        function xilou(){
            i+=1;
            if(i>10){alert(i);return;}
            setTimeout("xilou()",1000);
            //用这个也可以
            //setTimeout(xilou,1000);
        }
       
        3,在类中使用setTimeout
        终于到正题了,其实在类中使用大家遇到的问题都是关于this的,只要解决了这个this的问题就万事无忧了。
    呵呵。让我们来分析一下:
       
        function xilou(){        this.name="xilou";
            this.sex="男";
            this.num=0;
        }
        xilou.prototype.count=function(){
            this.num+=1;
            alert(this.num);
            if(this.num>10){return;}
            //下面用四种方法测试,一个一个轮流测试。
            setTimeout("this.count()",1000);//A:当下面的x.count()调用时会发生错误:对象不支持此属性或方法。
            setTimeout("count()",1000);//B:错误显示:缺少对象
            setTimeout(count,1000);//C:错误显示:'count'未定义
            //下面是第四种
            var self=this;
            setTimeout(function(){self.count();},1000);//D:正确
           
        }
       
        var x=new xilou();
        x.count();
       
        错误分析:
        A:中的this其实指是window对象,并不是指当前实例对象
        B:和C:中的count()和count其实指的是单独的一个名为count()的函数,但也可以是window.count(),因为window.count()可以省略为count()
        D:将变量self指向当前实例对象,这样js解析引擎就不会混肴this指的是谁了。
       
        话说回来,虽然我们知道setTimeout("this.count()",1000)中的this指的是window对象,但还是不明白为什么会是
        window对象^_^(有点头晕...)
        那我们可以想象一下这个setTimeout是怎样被定义的:
        setTimeout是window的一个方法,全称是这样的:window.setTimeout()
        那应该是这样被定义的:
        window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
            //.....代码
            return timer//返回一个标记符
        }
        所以当向setTimeout()传入this的时候,当然指的是它所属的当前对象window了。 
      

  7.   

    setTimeout("CreateSmallAnimal.prototype.moveTo()", 10000);
    prototype的方法不是这样调的(moveTo前面是prototype,shenti前面是this 你没感觉很怪吗)
    -》
    var me = this;
    setTimeout(function(){me.moveTo();}, 10000);
      

  8.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type='text/css'>
    body { margin:0; padding:0; background-color:#fff; }
    #frame { width:500px; height:500px; overflow:hidden; margin:0 auto; border:1px solid #000; position:relative; }
    #game { width:700px; height:1000px; background-color:#000; position:absolute; left:-100px; top:-500px; }
    #gameInner { postion:relative; width:1000px; height:1000px; }
    </style>
    <script type='text/javascript'>
    function CreatePerson(life, mo, shenti) {
        this.life = life;
        this.mo = mo;
        //this.shenti = (new CreateShenTi('50px', '50px', '325px', '950px', 'red', 'person')).returnShenTi();
        this.shenti = shenti;
    }
     
    var vPerson = 0.02;
    var tPerson;
    var x;
    var y;
    var mousex;
    var mousey;
    var _left;
    var _top;
    CreatePerson.prototype.move = function() {
        var that= this;
        document.getElementById('gameInner').onclick = function(e) {
            var e = e || window.event;
            x = parseInt(that.shenti.offset().left);
            y = parseInt(that.shenti.offset().top);
            mousex = e.pageX;
            mousey = e.pageY;
            _left = mousex - x;
            _top = y - e.pageY;
    tPerson = Math.round(Math.sqrt(_left*_left + _top*_top) / vPerson);
    //alert(tPerson);
            //$('#game').css({left: '+=' + _left, top: '+=' + _top});
            //that.shenti.css({left: '+=' + _left, top: '-=' + _top});
            /*if(_left > 50) {
                _left = 50;
            } else if(_left < -50) {
                _left = -50;
            }
            if(mousey > 50) {
                _left = 50;
            }*/ 
            //$('#game').animate({left: '+=' + _left, top: '+=' + _top}, 5000);
            that.shenti.animate({left: '+=' + _left, top: '-=' + _top}, tPerson);
            //alert(x);
            //alert(mousex);
        }
    }
      
    function CreateSmallAnimal(life, mo, shenti) {
        this.life = life;
        this.mo = mo;
        //this.shenti = (new CreateShenTi('50px', '50px', '325px', '600px', 'black')).returnShenTi();
        this.shenti = shenti;
    }var lefts;
    var tops; 
    var vSmallAnimal = 0.1;
    var tSmallAnimal;
    CreateSmallAnimal.prototype.moveTo = function() {
        lefts = parseInt($('#person').css('left'));
        tops = parseInt($('#person').css('top'));
    tSmallAnimal = Math.round(Math.sqrt(lefts*lefts + tops*tops) / vSmallAnimal);
    //alert(tSmallAnimal);
        this.shenti.animate({left: lefts, top: tops}, tSmallAnimal);
        var that = this;
        /*function smallAnimalMoveTo() {
    that.shenti.animate({left: $('#person').css('left'), top: $('#person').css('top')}, 10000);
    }*/
        setTimeout(function(){
         that.shenti.stop(true);
            that.moveTo();
        }, 1000);
    }
      
    function CreateShenTi(width, height, left, top, backgroundColor, id, backgroundImage) {
        this.width = width;
        this.height = height;
        this.left = left;
        this.top = top;
        this.backgroundColor = backgroundColor;
        this.id = id;
        this.backgroundImage= backgroundImage;
    }
    CreateShenTi.prototype.returnShenTi = function() {
        var $shenti = $('<div></div>');
        $shenti.css({width: this.width, height: this.height, position: 'absolute', left: this.left, top: this.top, backgroundColor: this.backgroundColor});
        if(this.id) $shenti.attr('id', this.id);
        $('#gameInner').append($shenti);
        return $('#gameInner').children().last();
    }
     
    CreateShenTi.prototype.returnImageShenTi = function() {
        var $shenti = $('<div></div>');
        var $image = $("<img width='50' height='50' />");
        $image.attr('src', this.backgroundImage);
        $shenti.append($image);
        $shenti.css({width: this.width, height: this.height, position: 'absolute', left: this.left, top: this.top, backgroundColor: this.backgroundColor, overflow:'hidden'});
        if(this.id) $shenti.attr('id', this.id);
        $('#gameInner').append($shenti);
        return $('#gameInner').children().last();
    }
     
    $(function() {
        var createPerson = new CreatePerson(1000, 800, (new CreateShenTi('50px', '50px', '325px', '950px', 'black', 'person', 'http://bbs.game798.com/upload/uploadfile/2006-11/200611261659712522.jpg')).returnImageShenTi());
        var createSmallAnimal1 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '325px', '600px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
        var createSmallAnimal2 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '325px', '700px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
        createPerson.move();
        createSmallAnimal1.moveTo();
        createSmallAnimal2.moveTo();
    });
    </script>
    </head>
      
    <body>
    <div id='frame'>
        <div id='game'>
            <div id='gameInner'>
                  
            </div>
        </div>   
    </div>
    </body>
    </html>
      

  9.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type='text/css'>
    body { margin:0; padding:0; background-color:#fff; }
    #frame { width:500px; height:500px; overflow:hidden; margin:0 auto; border:1px solid #000; position:relative; }
    #game { width:700px; height:1000px; background-color:#000; position:absolute; left:-100px; top:-500px; }
    #gameInner { postion:relative; width:1000px; height:1000px; }
    </style>
    <script type='text/javascript'>
    function CreatePerson(life, mo, shenti) {
        this.life = life;
        this.mo = mo;
        //this.shenti = (new CreateShenTi('50px', '50px', '325px', '950px', 'red', 'person')).returnShenTi();
        this.shenti = shenti;
    }
     
    var vPerson = 0.02;
    var tPerson;
    var x;
    var y;
    var mousex;
    var mousey;
    var _left;
    var _top;
    CreatePerson.prototype.move = function() {
        var that= this;
        document.getElementById('gameInner').onclick = function(e) {
            var e = e || window.event;
            x = parseInt(that.shenti.offset().left);
            y = parseInt(that.shenti.offset().top);
            mousex = e.pageX;
            mousey = e.pageY;
            _left = mousex - x;
            _top = y - e.pageY;
    tPerson = Math.round(Math.sqrt(_left*_left + _top*_top) / vPerson);
    //alert(tPerson);
            //$('#game').css({left: '+=' + _left, top: '+=' + _top});
            //that.shenti.css({left: '+=' + _left, top: '-=' + _top});
            /*if(_left > 50) {
                _left = 50;
            } else if(_left < -50) {
                _left = -50;
            }
            if(mousey > 50) {
                _left = 50;
            }*/ 
            //$('#game').animate({left: '+=' + _left, top: '+=' + _top}, 5000);
            that.shenti.animate({left: '+=' + _left, top: '-=' + _top}, tPerson);
            //alert(x);
            //alert(mousex);
        }
    }
      
    function CreateSmallAnimal(life, mo, shenti) {
        this.life = life;
        this.mo = mo;
        //this.shenti = (new CreateShenTi('50px', '50px', '325px', '600px', 'black')).returnShenTi();
        this.shenti = shenti;
    }var lefts;
    var tops; 
    var vSmallAnimal = 0.1;
    var tSmallAnimal;
    CreateSmallAnimal.prototype.moveTo = function() {
        lefts = parseInt($('#person').css('left'));
        tops = parseInt($('#person').css('top'));
    tSmallAnimal = Math.round(Math.sqrt(lefts*lefts + tops*tops) / vSmallAnimal);
    //alert(tSmallAnimal);
        this.shenti.animate({left: lefts, top: tops}, tSmallAnimal);
        var that = this;
        /*function smallAnimalMoveTo() {
    that.shenti.animate({left: $('#person').css('left'), top: $('#person').css('top')}, 10000);
    }*/
        setTimeout(function(){
         that.shenti.stop(true);
            that.moveTo();
        }, 1000);
    }
      
    function CreateShenTi(width, height, left, top, backgroundColor, id, backgroundImage) {
        this.width = width;
        this.height = height;
        this.left = left;
        this.top = top;
        this.backgroundColor = backgroundColor;
        this.id = id;
        this.backgroundImage= backgroundImage;
    }
    CreateShenTi.prototype.returnShenTi = function() {
        var $shenti = $('<div></div>');
        $shenti.css({width: this.width, height: this.height, position: 'absolute', left: this.left, top: this.top, backgroundColor: this.backgroundColor});
        if(this.id) $shenti.attr('id', this.id);
        $('#gameInner').append($shenti);
        return $('#gameInner').children().last();
    }
     
    CreateShenTi.prototype.returnImageShenTi = function() {
        var $shenti = $('<div></div>');
        var $image = $("<img width='50' height='50' />");
        $image.attr('src', this.backgroundImage);
        $shenti.append($image);
        $shenti.css({width: this.width, height: this.height, position: 'absolute', left: this.left, top: this.top, backgroundColor: this.backgroundColor, overflow:'hidden'});
        if(this.id) $shenti.attr('id', this.id);
        $('#gameInner').append($shenti);
        return $('#gameInner').children().last();
    }
     
    $(function() {
        var createPerson = new CreatePerson(1000, 800, (new CreateShenTi('50px', '50px', '325px', '950px', 'black', 'person', 'http://bbs.game798.com/upload/uploadfile/2006-11/200611261659712522.jpg')).returnImageShenTi());
        var createSmallAnimal1 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '325px', '600px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
        var createSmallAnimal2 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '325px', '700px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
    var createSmallAnimal3 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '315px', '600px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
    var createSmallAnimal4 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '300px', '600px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
    var createSmallAnimal5 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '500px', '600px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
    var createSmallAnimal6 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '520px', '700px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
    var createSmallAnimal7 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '520px', '620px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
    var createSmallAnimal8 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '520px', '625px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
        createPerson.move();
        createSmallAnimal1.moveTo();
        createSmallAnimal2.moveTo();
    createSmallAnimal3.moveTo();
    createSmallAnimal4.moveTo();
    createSmallAnimal5.moveTo();
    createSmallAnimal6.moveTo();
    createSmallAnimal7.moveTo();
    createSmallAnimal8.moveTo();
    });
    </script>
    </head>
      
    <body>
    <div id='frame'>
        <div id='game'>
            <div id='gameInner'>
                  
            </div>
        </div>   
    </div>
    </body>
    </html>