js拳皇特效

js拳皇特效

效果图

---

很简单的特效，运用了面向对象，原型等简单的方法。
废话不多说，上代码：

<script>
    /*
     * 前进 39
     * 后退 37
     * 集气 o 79
     * */
    function Yagami(player) {
        //类 构造函数
        this.player=player;
        this.left=0;
        this.time=null;
    }
    var skilllist = {
        39: function () {
            //前进
            this.player.src="quanhuang/advance.gif";
            this.time=setInterval(function () {
                this.left+=3;
                if(this.left>=500){
                    this.left=500;
                }
                this.player.style.left=this.left+"px";
            }.bind(this),13)
        },
        37: function () {
            //后退
            this.player.src="quanhuang/retreat.gif";
            this.time=setInterval(function () {
                this.left-=3;
                if(this.left<=0){
                    this.left=0;
                }
                this.player.style.left=this.left+"px";
            }.bind(this),13)
        },
        79: function () {
            //机器
            this.player.src="quanhuang/jiqi.gif";
        },
        38: function () {
            //跳跃
            this.player.src="quanhuang/advance.gif";
        },
    };
    Yagami.prototype.action = function (code) {
        if (skilllist[code]) {
            skilllist[code].call(this);
        }
    }
    Yagami.prototype.stop = function () {
        this.player.src="quanhuang/stand.gif";
        clearInterval(this.time);
    }
    var yage=document.getElementById("MC");
    var yaga=new Yagami(yage);
    document.onkeydown = play;
    document.onkeyup = function (e) {
        yaga.stop();
        document.onkeydown = play;
    }
    function play(e) {
        var code = e.keyCode;
        yaga.action(code);
        document.onkeydown=null;;
    }
</script>

下载位置http://download.csdn.net/download/weixin_38023551/10228295