警报不起作用

Question

我 JavaScript 结束时的警报不起作用，我不知道为什么。我认为我已经正确连接，但我不知道为什么代码在到达警报时没有做任何事情。

这是 HTML 的代码：

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="css/style.css">

    <title>Play Battleship Free Online!</title>

</head>

<body>

    <h1>Play Battleship!</h1>

    <script src="battleship.js"></script>

    <button onclick="startGame()">Play!</button>

</body>

这是 CSS 的代码（可能不需要）：

body {
    font-family: sans-serif;
    text-align: center;
    background-color: mediumseagreen;
}

h1 {
    margin-top: 48px;
    margin-bottom: 48px;
    color: black;

}

这是我的 JavaScript:

的代码

var randomLoc = Math.floor(Math.random() * 5);
var location1 = randomLoc;
var location2 = location1 + 1;
var location3 = location2 + 1;

var guess;
var hits = 0;
var guesses = 0;
var isSunk = false;

function startGame() {
    while (isSunk == false){
        guess = prompt("Ready, aim, fire! (Enter a number between 1 and 6): ")
        if (guess < 0 || guess > 6){
            alert("Please enter a valid number!");
        }else{
            guesses = guesses + 1;
        }

        if (guess == location1 || guess == location2 || guess == location3) {
            hits++;
            alert("HIT!");
        } if (hits == 3) {
            isSunk = true;
            alert("You sank my battleship!");
        } else {
            alert("MISS!");
        }
    }

    var stats = "You took " + guesses + "guesses to sink the battleship, " + "which means your shooting accuracy was " + (3/guesses);

    alert(stats);

    return;
}

感谢任何帮助。

Answer 1

我在您的 JavaScript 代码中发现了一些错误，请参阅下面的评论：

var randomLoc = Math.floor(Math.random() * 5);
var location1 = randomLoc;
var location2 = location1 + 1;
var location3 = location2 + 1;

var guess;
var hits = 0;
var guesses = 0;
var isSunk = false;

function startGame() {
    while (isSunk == false){
        guess = prompt("Ready, aim, fire! (Enter a number between 1 and 6): ")
        if (guess < 0 || guess > 6){
            alert("Please enter a valid number!");
        }else{
            guesses = guesses + 1;
        }

        if (guess == location1 || guess == location2 || guess == location3) {
            hits == hits + 1;
            alert("HIT!");
        } if (hits == 3) {
            isSunk = true;
            alert("You sank my battleship!");

            // Missing a closing curly brace
            else {
                alert("MISS!");
            }
        } // End of while-loop
    } // End of startGame()

在 startGame() 之外：

    var stats = "You took " + guesses + "guesses to sink the battleship, " + "which means your shooting accuracy was " + (3/guesses);

    alert(stats);

    return;
}

Answer 2

您的 javascript 代码中存在主要问题，请检查以下内容：

var randomLoc = Math.floor(Math.random() * 5);
var location1 = randomLoc;
var location2 = location1 + 1;
var location3 = location2 + 1;
var guess;
var hits = 0;
var guesses = 0;
var isSunk = false;
function startGame() {
 while (isSunk == false) {
  guess = prompt("Ready, aim, fire! (Enter a number between 1 and 6): ")
  if (guess < 0 || guess > 6) {
   alert("Please enter a valid number!");
  } else {
   guesses = guesses + 1;
  }

  if (guess == location1 || guess == location2 || guess == location3) {
   hits == hits + 1;
   alert("HIT!");
  }
  if (hits == 3) {
   isSunk = true;
   alert("You sank my battleship!");
  } else {
   alert("MISS!");
  }
 }


 var stats = "You took " + guesses + "guesses to sink the battleship, " + "which means your shooting accuracy was " + (3 / guesses);
 alert(stats);
 return;
}

body {
    font-family: sans-serif;
    text-align: center;
    background-color: mediumseagreen;
}

h1 {
    margin-top: 48px;
    margin-bottom: 48px;
    color: black;

}

<h1>Play Battleship!</h1>
<button onclick="startGame()">Play!</button>

Answer 3

FTFY.

注意几点：

Math.random 生成一个介于 0 和 1 之间的数字，包括 0 但不包括 1。在您的原始代码中，您编写了 Math.random() * 5。这将得到一个从 0 到 5 的数字，但不包括 5。将这个数字取底将使你得到 0 到 4。因此，location1 可以获得 0 的值。这可能是不可取的。
正确的代码格式很重要。在 "Hit"/"Miss"/"Sank" 代码块中，else 应该与 "Hit" 块匹配，但由于格式原因，它错误地与 [= 匹配50=] 块。格式使得这很难被发现。
对于布尔变量检查，最好只使用条件中的变量而不使用比较运算符。 while (isSunk == false) 最好写成 while (!isSunk)。您不必担心打错双等号，而且它更易于阅读。事实上，在您的代码中，您甚至不需要标志。 while (hits < 3) 同样有效。
谨慎声明全局变量。在您的示例中，最好将变量放入 startGame 方法中。这会将您的变量本地化到使用它们的位置，同时还具有在您单击播放时能够 "restart the game" 的额外好处！按钮。

function startGame() {
    // Randomly generate a number between 0 to 3, and 
    // add 1, 2, 3 to it to get 1 to 6.
    var randomLoc = Math.floor(Math.random() * 4);
    var location1 = randomLoc + 1;
    var location2 = location1 + 1;
    var location3 = location2 + 1;

    var guess;
    var hits = 0;
    var guesses = 0;
    var isSunk = false;

    while (!isSunk){
        guess = prompt("Ready, aim, fire! (Enter a number between 1 and 6): ")
        if (guess < 0 || guess > 6){
            alert("Please enter a valid number!");
        } else {
            guesses = guesses + 1;
        }

        if (guess == location1 || guess == location2 || guess == location3) {
            hits++;
            alert("HIT!");

            if (hits == 3) {
                isSunk = true;
                alert("You sank my battleship!") 
            }
        } else {
            alert("MISS!");
        }             
    }
    var stats = "You took " + guesses + " guesses to sink the battleship, " + "which means your shooting accuracy was " + (3/guesses);    
    alert(stats);    
    return; //Optional
}

body {
    font-family: sans-serif;
    text-align: center;
    background-color: mediumseagreen;
}

h1 {
    margin-top: 48px;
    margin-bottom: 48px;
    color: black;

}

<html>
    <head>    
        <meta charset="utf-8">    
        <link rel="stylesheet" href="css/style.css">    
        <title>Play Battleship Free Online!</title>    
    </head>

    <body>    
        <h1>Play Battleship!</h1>    
        <script src="battleship.js"></script>    
        <button onclick="startGame()">Play!</button>    

    </body>
</html>

警报不起作用

Alert not working

html

javascript

css

alert