Подсказка и ожидание ответа

Question

Подсказка и ожидание ответа

0

Я искал по всему Интернету, но не смог решить проблему.

Я кодирую игру. Перед началом игры я предлагаю пользователю затрудниться, и пользователь должен выбрать трудность для запуска игры, нажав одну из кнопок.

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

Тем не менее, он создает сетку, прежде чем пользователь выберет сложность, и это испортит весь дизайн. Как я могу заставить его ждать, пока пользователь не нажмет один из параметров сложности?

Burak Özmen 27 март 2014, в 04:40

Источник

Теги:

javascript

jquery

css

html5

scripting

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-03-27T00-11-00.000Z

Проблема заключается в том, что запрос сложности представляет собой метод async, когда вы вызываете метод 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, поэтому, когда вы устанавливаете this.difficulty он не устанавливает экземпляр GameManager, вы можете решить, передав собственный контекст выполнения для метода обратного вызова.

Демо: скрипка

Можете ли вы объяснить код, чтобы я мог это исправить? Потому что у меня никогда не было концепции обратных вызовов, и код, похоже, снова не работает должным образом. this.difficulty, кажется, присваивается элементу div вместо целого числа (8,9 или 10).
$ .proxy (), похоже, не помогает. По-прежнему присваивает неверное значение сложности.
@ BurakÖzmen пропустил передачу this в $.proxy() - смотрите обновление