我需要帮助在 Javascript 中构建基于两人回合的简单骰子游戏

Question

我对编程比较陌生，所以请原谅我的代码。目标是创建一个简单的骰子游戏，其中 Javascript 中有两名玩家。我的问题是，我似乎可以弄清楚如何在掷骰子时将两个骰子掷骰的总和正确地添加到每个玩家的分数中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Andrews awesome dice game</title>
        <script src="diceGame.js"></script>
        <link rel="stylesheet" type="text/css" href="diceGame.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
    <h1 id="gameTitle" class="col-lg-12">The Dice Game</h1>
    <div id="die1" class="dice">0</div>
    <div id="die2" class="dice">0</div>
    <div class="col-lg-12 playerScore">
        <h2>PLAYER 1:</h2>
        <h2 id="player1Score"></h2>
        <h2>PLAYER 2:</h2>
        <h2 id="player2Score"></h2>
    <button onclick="rollDice()" id="rollBtn">Roll Dice</button>
    <h2 id="status" style="clear:left;"></h2>
</body>
</html>

这是 Javascipt：

//global variables
    //Players
    var player1 = prompt("what is your name, player 1?");
    var player2 = prompt("What is your name, player 2?");
    var rollButton = document.getElementById("rollBtn");
    var win = 50;



function rollDice(){

var die1 = document.getElementById("die1");
var die2 = document.getElementById("die2");
var status = document.getElementById("status");
var p1Score = document.getElementById("player1Score");
var p2Score = document.getElementById("player2Score");
var score1 = 0;
var score2 = 0;
var moves = 0;

var d1 = Math.floor(Math.random() * 6) + 1;
var d2 = Math.floor(Math.random() * 6) + 1;
var moves = 1;

var diceTotal = d1 + d2;
die1.innerHTML = d1;
die2.innerHTML = d2;
status.innerHTML = "You rolled "+diceTotal+".";

if (moves == 1) {
    if (d1 == 1 && d2 == 1) { // if both dice equal 1, set the score to equal 0
        diceTotal = 0;
        moves++;
        score1 = score1 + diceTotal;
        p1Score.innerHTML += score1;
        status.innerHTML += " Your score has been reset to zero";
    } else {
        if(d1 == d2) {        //if both dice are the same, double the players score
            diceTotal = diceTotal*2;
            moves++;
            score1 = score1 + diceTotal;
            p1Score.innerHTML += score1;
            status.innerHTML += " Lucky! your total has been doubled to "+(diceTotal)+".";
        } else{
            moves++;
            score1 = score1 + diceTotal;
            p1Score.innerHTML += score1;
            status.innerHTML += " Your Turn "+player2+".";
            console.log(score1);
        }
    }
} else {
    if (d1 == 1 && d2 == 1) { // if both dice equal 1, set the score to equal 0
        diceTotal = 0;
        moves++;
        score2 = score2 + diceTotal;
        p2Score.innerHTML += score2;
        status.innerHTML += player2+" score has been reset to zero";
    } else {
        if(d1 == d2) {        //if both dice are the same, double the players score
            diceTotal = diceTotal*2;
            moves++;
            score2 = score2 + diceTotal;
            p2Score.innerHTML += score2;
            status.innerHTML += " Lucky! your total has been doubled to "+(diceTotal)+".";
        } else{
            moves++;
            score2 = score2 + diceTotal;
            p2Score.innerHTML += score2;
            status.innerHTML += " Your Turn "+player1+"."; 
        }
    }
}

}

原谅我草率的逻辑。我还很新。欢迎任何提示、代码建议或建议

Answer 1

我在这里进行猜测，因为您没有包括代码生成的实际结果（除了预期之外，这是一个很好的起点结果)，但是这里的这些行：

score1 = score1 + diceTotal;
p1Score.innerHTML += score1;

首先，p1Score.innerHTML是一个字符串。如果您使用 + 运算符添加到字符串，javascript 将连接值，而不是 sum 它们，即"1" + 1 = "11"

其次，您已经增加了 score1 变量的值。怎么又加值了？

尝试设置 innerHTML:

p1Score.innerHTML = score1;

我需要帮助在 Javascript 中构建基于两人回合的简单骰子游戏

I need help building a two player turn based simple dice game in Javascript

javascript

logic

if-statement

function