Хотите выбрать персонажей до начала игры

Question

У меня есть несколько вопросов о выборе персонажей перед началом игры. Теперь вы можете проверить демо с помощью этой ссылки , а также сделать репо с этой ссылкой

Я использую VEX Library для использования диалога, но я слышал, что в jQuery я могу использовать собственный диалог, но в версии 3.3.1 они не работают, поэтому я сейчас использую VEX Library.

Во-первых, я хочу, чтобы он выбрал персонажа, которого я хочу. Когда я захожу в свой проект, я вижу эту страницу.

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

// To choose Character with VEX Library
function CharacterChoose() {
    vex.dialog.open({
        message: 'Which character do you want to play?',
        input: [
            '<label for="char-boy"><img src="images/char-boy.png" class="imagepadding" /></label>',
            '<img src="images/char-cat-girl.png" class="imagepadding" />',
            '<img src="images/char-pink-girl.png" class="imagepadding" />',
            '<img src="images/char-horn-girl.png" class="imagepadding" />',
            '<img src="images/char-princess-girl.png" class="imagepadding" />'
        ].join(''),
        buttons: [
            $.extend({}, vex.dialog.buttons.NO, {
                text: 'Char-Princess-Girl',
                click: function () {
                    this.value = 'char-princess-girl';
                    this.close();
                }
            }),
            $.extend({}, vex.dialog.buttons.NO, {
                text: 'Char-Horn-Girl',
                click: function () {
                    this.value = 'char-horn-girl';
                    this.close();
                }
            }),
            $.extend({}, vex.dialog.buttons.NO, {
                text: 'Char-Pink-Girl',
                click: function () {
                    this.value = 'char-pink-girl';
                    this.close();
                }
            }),
            $.extend({}, vex.dialog.buttons.NO, {
                text: 'Char-Cat-Girl',
                click: function () {
                    this.value = 'char-cat-girl';
                    this.close();
                }
            }),
            $.extend({}, vex.dialog.buttons.NO, {
                text: 'Char-Boy',
                click: function () {
                    this.value = 'char-boy';
                    this.close();
                }
            })
        ],
        callback: function (value) {
            // char-boy','char-cat-girl','char-horn-girl','char-pink-girl','char-princess-girl
            switch (value) {
                case "char-boy":
                    console.log('You choose Char-boy');
                    break;
                case "char-cat-girl":
                    console.log('You choose Char-Cat-Girl');
                    break;
                case "char-horn-girl":
                    console.log('you choose Char-Horn-Girl');
                    break;
                case "char-pink-girl":
                    console.log('You Choose Char-Pink-Girl');
                    break;
                case "char-princess-girl":
                    console.log('You Choose Char-Princess-Girl');
                    break;
                default:
                case "char-boy":
                    console.log('You choose Char-boy');
                    break;
            }
        }
    })
}

так что значение важно, но на самом деле я не знаю, как я могу получить это значение в переменной Player.

let Player = function (x, y, speed, value) {
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.sprite = 'images/' + value + '.png';

};

Я пишу такой код, потому что когда я запускаю проект и выбираю символ, я хочу получить туда значение, чтобы this.sprite мог прочитать правильный URL. Но я не знаю, как я могу думать о логике и получить значение оттуда.