Игра Gusser не перезагружает страницу после завершения игры

ProgramBox

Игра Gusser не перезагружает страницу после завершения игры

Post author:admin
Запись опубликована:21 августа, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я новичок в javascript, и я пытался создать небольшое приложение для игры в угадайку; однако все в порядке, за исключением перезагрузки страницы после окончания игры, страница не перезагружается при нажатии «Воспроизвести снова», и кнопка в конечном итоге просто отключается.

Пожалуйста, помогите мне с этой проблемой, я не могу разобраться самостоятельно.

 let min = 1, max = 10, winnerNum = RandNum(max,min), gussNum = 3;

// UI vars

let game = document.querySelector('#game'),
    minNum = document.querySelector('.min-num'),
    maxNum = document.querySelector('.max-num'),
    gussBtn = document.querySelector('#gussBtn'),
    gussInput = document.querySelector('#input'),
    message = document.querySelector('.msg');

// assign min and max

minNum.textContent = min;
maxNum.textContent = max;

// reload the game

game.addEventListener('mousedown', function(e){
    if(e.target.className ==='play-again'){
        window.location.reload();
        // Why is the page is not reloaded ??
    }
});

// listent to the gussed number

gussBtn.addEventListener('click', function(){
    let guss = parseInt(gussInput.value);
    console.log(guss);

    //validate

    if(guss===winnerNum){
        gameOver(true,`Winner Winner Chicken Dinner, Yes ${winnerNum} is the correct number`)
    } else{
        gussNum -= 1;

        if(gussNum===0){
            gameOver(false,`You lost game over, the correct number is ${winnerNum}`)
        } else if(gussNum<0){
            gussBtn.disabled=true;
            gussInput.disabled=true;
        } else {
            gussInput.disabled=true;
            gussInput.style.borderColor = 'red';
            gussInput.value = '';
            setMessage(`You have ${gussNum} left!`, 'red')
        }
    }
});

function gameOver(won,msg){
    let color;
    won === true ? color = 'green' : color='red';
    gussInput.disabled=true;
    gussInput.style.borderColor = color;
    // gussBtn.disabled=true;
    setMessage(msg, color);
    gussBtn.value='Play Again';
    gussBtn.classList.add('play-again');

}

function RandNum(max,min) {
    return Math.floor(Math.random()*(max-min 1)-min);
}


function setMessage(msg, color) {
    message.textContent = msg;
    message.style.color = color;
}

HTML

 <body>
<div class="container">
<div class="row">
    <div class="col-md-6 mx-auto">
        <div class="card card-body text-center mt-5">
            <h1 class="heading display-5 pb-3">Game Gusser</h1>
            <p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p>
                <div class="form-group" id="game">
                    <div class="input-group">
                        <input type="number" class="form-control" id="input" placeholder="Enter your guess...">
                        <input type="submit" class="btn btn-dark btn-block mt-4" id="gussBtn">
                    </div>
                    <p class="msg mt-4"></p>
                </div>
        </div>            
    </div>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>

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

Ответ №1:

Возможно, что имя класса не совсем «повторное воспроизведение».
Кроме того, почему бы просто не щелкнуть событие?

 function hasClass ( elem , klass ) {
    return (" "   elem.className   " " ).indexOf( " "   klass   " " ) > -1
}; 

let game = document.getElementById('game');
game.addEventListener('click', function(e){
    if (hasClass(e.target , 'play-again')){
        window.location.reload();
    }
});

Также не рекомендую использовать location.reload(). Крайне плохой пользовательский интерфейс. Почему бы просто не перезапустить скрипт, который инициализирует игру в первую очередь?

1. Спасибо за ваш ответ, 1- «щелчок» перезагружает страницу без прямого отображения измененного значения кнопки отправки, я хочу, чтобы значение кнопки отправки изменилось, чтобы снова воспроизводиться, затем, когда я нажимаю на нее, страница перезагружается. 2- «воспроизвести снова» написано правильно, я дважды проверил, чтобы убедиться, что нет опечаток. 3- Мне понравилось ваше кодовое решение, но я был бы признателен, если бы вы помогли мне понять, что не так с моим кодом. Еще раз спасибо

2. Theraot, 1. он не вернет true для ‘play-again-fake’, поскольку он заключает данный ‘класс’ в пробелы. 2. Contains является более современным решением и имеет меньшую поддержку, чем indexOf — с точки зрения производительности, в лучшем случае, в этом состоянии она крайне незначительна. 3. Он использовал classList и проверял, точно ли он соответствует строке ‘play-again’. Он также обновил свой код после того, как был сделан мой пост.

3. Спасибо вам обоим, Андру и Тераот, я понял, теперь вы научили меня кое-чему сегодня 🙂

Метки: Игра Gusser не перезагружает страницу после завершения игры