Question

我是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时重新加载页面，并且用户可以再次播放。

Answer 1

className可能不完全是“再次播放”。
还有为什么不简单地点击事件呢？

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（）。极差的用户体验。为什么不简单地重新运行最初用于初始化游戏的脚本？

GameOver之后，Gusser Game无法重新加载页面

1 个答案: