Javascript 当所有设置完成时查找

查看我正在制作的演示/游戏

我想知道所有的运动员什么时候跑完。游戏课需要知道所有玩家何时停止，谁先来

我的问题是，是否有一种方法可以在所有设置超时之后，在每个动画完成时通知调用类

玩家等级

function Players(ele, ptimeout)
{
    this.movePositions  = [0, 40, 80, 120],
    this.moveBy         = 5
    this.el = ele;
    this.i = 0;
    this.stop = 1;
    this.timeout = ptimeout;
    this.position = 0;

    this.animate = function(){
        /* Stop if stopped */
        playerPosition = this.el.getBoundingClientRect();
        if(this.stop || playerPosition.left > (racetrack.offsetWidth - 30)){
            this.el.style.backgroundPosition = '120px 0px';
            return ;
        }

        playerPosition = this.el.getBoundingClientRect();
        if(this.stop || playerPosition.left > (racetrack.offsetWidth - 30)){
            this.el.style.backgroundPosition = '120px 0px';
            return ;
        }

    /* Prepare Next Move */
        setTimeout(function(_this){ 
            if(_this.i < _this.movePositions.length ){
                _this.i ++;
            }
            else{
                _this.i = 0;
            }
            _this.move();
            _this.animate();
        },this.timeout,this);
    };

    this.play = function(){
        if(this.stop === 1){
            this.stop = 0;
            this.animate();
        }
    };

    this.move = function(to,positionIndex){
        this.position = to;
        this.el.style.backgroundPosition = '-'+this.movePositions[positionIndex]+'px 0px';
        this.el.style[getSupportedPropertyName('transform')] = 'translate('+to+'px)';
    }
}

function Game(noOfPlayers){

    var track_tmpl      = '<div class="track"><div id="player{{ x }}" class="runner"></div></div>';
    this.noOfPlayers = noOfPlayers;

    this.players = new Array();

    for (var i = 0; i < this.noOfPlayers ; i++){
        var timeout = 120 + getRandomInt(1, (this.noOfPlayers*2));
        racetrack.appendChild(createNode(track_tmpl.replace('{{ x }}', i)));
        this.players.push(new Players(document.getElementById('player' + i), timeout));
    }



    this.play = function(){
        for (var i = 0; i < this.noOfPlayers; i++){
            this.players[i].play();
        }
    };
}

功能播放器（ele、ptimeout）
{
this.movePositions=[0,40,80,120]，
这个。moveBy=5
this.el=ele；
这个。i=0；
这是1.stop=1；
this.timeout=ptimeout；
这个位置=0；
this.animate=函数（）{
/*停了就停*/
playerPosition=this.el.getBoundingClientRect（）；
如果（this.stop | | playerPosition.left>（racetrack.offsetWidth-30））{
this.el.style.backgroundPosition='120px 0px'；
返回；
}
playerPosition=this.el.getBoundingClientRect（）；
如果（this.stop | | playerPosition.left>（racetrack.offsetWidth-30））{
this.el.style.backgroundPosition='120px 0px'；
返回；
}
/*准备下一步行动*/
setTimeout（函数（_this）{
if（_this.i<_this.movePositions.length）{
_这个.i++；
}
否则{
_这个。i=0；
}
_这个。移动（）；
_这个。动画（）；
}，this.timeout，this）；
};
this.play=函数（）{
如果（this.stop==1）{
此值为0.stop=0；
这个。动画（）；
}
};
this.move=函数（to，positionIndex）{
这个位置=到；
this.el.style.backgroundPosition='-'+this.movePositions[positionIndex]+'px 0px'；
this.el.style[getSupportedPropertyName（'transform'）]='translate（'+to+'px'）；
}
}

游戏类

function Players(ele, ptimeout)
{
    this.movePositions  = [0, 40, 80, 120],
    this.moveBy         = 5
    this.el = ele;
    this.i = 0;
    this.stop = 1;
    this.timeout = ptimeout;
    this.position = 0;

    this.animate = function(){
        /* Stop if stopped */
        playerPosition = this.el.getBoundingClientRect();
        if(this.stop || playerPosition.left > (racetrack.offsetWidth - 30)){
            this.el.style.backgroundPosition = '120px 0px';
            return ;
        }

        playerPosition = this.el.getBoundingClientRect();
        if(this.stop || playerPosition.left > (racetrack.offsetWidth - 30)){
            this.el.style.backgroundPosition = '120px 0px';
            return ;
        }

    /* Prepare Next Move */
        setTimeout(function(_this){ 
            if(_this.i < _this.movePositions.length ){
                _this.i ++;
            }
            else{
                _this.i = 0;
            }
            _this.move();
            _this.animate();
        },this.timeout,this);
    };

    this.play = function(){
        if(this.stop === 1){
            this.stop = 0;
            this.animate();
        }
    };

    this.move = function(to,positionIndex){
        this.position = to;
        this.el.style.backgroundPosition = '-'+this.movePositions[positionIndex]+'px 0px';
        this.el.style[getSupportedPropertyName('transform')] = 'translate('+to+'px)';
    }
}

function Game(noOfPlayers){

    var track_tmpl      = '<div class="track"><div id="player{{ x }}" class="runner"></div></div>';
    this.noOfPlayers = noOfPlayers;

    this.players = new Array();

    for (var i = 0; i < this.noOfPlayers ; i++){
        var timeout = 120 + getRandomInt(1, (this.noOfPlayers*2));
        racetrack.appendChild(createNode(track_tmpl.replace('{{ x }}', i)));
        this.players.push(new Players(document.getElementById('player' + i), timeout));
    }



    this.play = function(){
        for (var i = 0; i < this.noOfPlayers; i++){
            this.players[i].play();
        }
    };
}

功能游戏（noOfPlayers）{
var轨道_tmpl=“”；
this.noOfPlayers=noOfPlayers；
this.players=新数组（）；
对于（var i=0；i

在

播放器上。播放
传递
此
参数，从玩家调用游戏中的函数。
所以你会有这样的代码

this.play = function(){
    for (var i = 0; i < this.noOfPlayers; i++){
        this.players[i].play(this);
    }
};

this.play = function(game){
    if(this.stop === 1){
        this.stop = 0;
        this.animate(game);
    }
};

打开方法动画后调用游戏。playerFinished（玩家）

关于游戏类的编写方法

var i = 0;
this.playerFinished = function(player) {
    console.log(player.name + " finished on position " + (i++));
}

where player.name您在players类中给出的名称
当然有，不要被我的示例搞糊涂。首先完成的选手将被第一个完成的选手叫到。如果你想用一些漂亮的支票忽略其他的电话，快去吧。。。但是除了传递游戏外，还有其他方法吗？这是一种oop方法……要与另一个类的对象“对话”，您必须拥有该实例并调用其公共方法。函数式编程的方法是创建一个全局函数（可以从任何地方访问），并在找到赢家时调用该函数。如果您只有一个game类实例，那么您可以创建一个静态方法，而不必在逻辑中的任何地方传递该实例。因此，您可以调用
Game.playerFinished（player）