Question

我正在开发一个基于浏览器的文本风格的游戏（它是一个使用一些图像/动画的文本游戏，但文本传达故事/动作/命令）。我曾经通过prompt("What is your class?");（战士，向导ETC）工作，但是想要创建我自己的功能，使其更漂亮。下面是一些代码：

/*
    1st value: Message being asked
    2nd value: input field being used
    3rd value: message block where question is presented
*/
var _cprompt = cPrompt('What is your class?', 'dialog-input', 'dialog-text');
alert(_cprompt);

这是实际的函数cPrompt（）;

/*
Custom prompt class
message: The message shown
inputField: The ID of the txtfield where the user inputs his answer
messageField: The textarea where the response appears
userInput: Empty variable to store the users input
*/

function cPrompt(mssg, inputFieldId, messageFieldId) {
    var message = mssg;
    var inputField = $('#'+inputFieldId);
    var messageField = $('#'+messageFieldId);
    var userInput = "";

    messageField.append(message);

    // Detect enter space being pressed in inputField
    inputField.keyup(function (e) {
        if (e.keyCode == 13) {
            userInput = inputField.val();
        }
    });
}

到目前为止一切都那么好，但我需要它来阻止其他代码执行，直到用户填写了一个响应并且点击了输入（类似于prompt();），所以在这种情况下它不会执行{{ 1}}直到用户提供了一些输入并按下回车。

我尝试使该功能尽可能动态，但请随意添加任何可能使其更好/更快/更容易使用的功能。

感谢您的帮助。

Answer 1

使用回调。

function cPrompt(mssg, inputFieldId, messageFieldId, callback) {
    var message = mssg;
    var inputField = $('#'+inputFieldId);
    var messageField = $('#'+messageFieldId);

    messageField.append(message);

    // Detect enter space being pressed in inputField
    inputField.keyup(function (e) {
            if (e.keyCode == 13) {
                callback(inputField.val());
            }
    });
}

cPrompt('What is your class?', 'dialog-input', 'dialog-text', function (_cprompt) {
    alert(_cprompt);
});

Answer 2

使用回调是在事件发生后执行操作的好方法。在这种情况下，事件将是“用户填写响应”。在这里查看一个工作示例http://jsfiddle.net/Q2qUK/2/。

<div id="dialog-text"></div>
<input id="dialog-input" />

在cPrompt函数中，当时机成功时，您可以像任何其他函数一样运行回调函数。而不是返回值，而是将结果作为参数传递给回调函数。

function cPrompt(mssg, inputFieldId, messageFieldId, callback){
    var message = mssg;
    var inputField = $('#'+inputFieldId);
    var userInput = "";

    cNotify(messageFieldId, message);

    // Detect enter space being pressed in inputField
    inputField.on('keyup', function (e) {
        if (e.keyCode == 13) {
            userInput = inputField.val();
            callback(userInput);

            // If you want the callback to only be executed once,
            // unbind the keyup event afterwards.
            inputField.off('keyup');

            // Empty the input field after processing the user's message.
            inputField.val('');
        }
    });
}

作为如何让编码响应用户输入的示例，我创建了这个cNotify函数，以在dialog-text元素中显示用户输入。

function cNotify(messageFieldId, message){
    $('#' + messageFieldId).append('<div>' + message + '</div>');
}

要传递回调，请使用匿名函数作为cPrompt函数的参数。

cPrompt('What is your class?', 'dialog-input', 'dialog-text', function(_cprompt){

    // Here you put all the code you want to run after the user pressed enter.
    cNotify('dialog-text', _cprompt);
});

自定义提示功能还没完成

2 个答案: