Question

我在互联网上搜索但无法解决问题。

我正在编写一个游戏。在游戏开始之前，我提示用户遇到困难，用户必须通过单击其中一个按钮来选择难度来启动游戏。

function GameManager(){
    this.current = 0;
    this.difficulty = 0;
    this.toolbox = new Toolbox();
    this.promptDifficulty();            // Here it should wait for user input
    this.grid = new Grid(this.difficulty);
    this.start();
}

GameManager.prototype.promptDifficulty = function() {
    $("#difficulty").show();
    this.toolbox.center();
    var selected = false;
    $('.selection').click(function(){
        var $diff = $(this).attr('id');
        if($diff === 'easy')
            this.difficulty = 8;
        else if($diff === 'medium')
            this.difficulty = 9;
        else if($diff === 'hard')
            this.difficulty = 10;
        $('#difficulty').hide();
    });
};

但是，它会在用户选择难度之前创建网格，这会弄乱整个设计。如何让它等到用户点击其中一个难度设置？

Answer 1

问题是难度提示是一种异步方法，当你调用promptDifficulty()方法时，它会显示难度选择器，但其余的脚本执行将在用户选择一个项目之前继续。所以你需要使用一个回调来继续，一旦用户选择了一个项目就会调用它。

function GameManager() {
    this.current = 0;
    this.difficulty = 0;
    this.toolbox = new Toolbox();
    this.promptDifficulty($.proxy(function (difficulty) {
        this.grid = new Grid(this.difficulty);
        this.start();
    }, this));
}

GameManager.prototype.promptDifficulty = function (callback) {
    $("#difficulty").show();
    this.toolbox.center();
    var selected = false;
    $('.selection').click($.proxy(function (e) {
        var $diff = e.currentTarget.id;

        if ($diff === 'easy') this.difficulty = 8;
        else if ($diff === 'medium') this.difficulty = 9;
        else if ($diff === 'hard') this.difficulty = 10;
        $('#difficulty').hide();

        callback(this.difficulty);
    }, this));
};

另请注意$.proxy()的使用，因为在点击处理程序中this默认是指单击的元素，因此当您设置this.difficulty时，它不会设置为{{1}实例，您可以通过为回调方法传递自定义执行上下文来解决。

演示：Fiddle

提示并等待回复

1 个答案: