jquery - Crystal 选择在第一次赢或输后记为输

Question

我的代码的问题是，当用户赢/输时，它会标记一个点，但在第一次赢/输之后，每个 Crystal 选择都会自动记录为输。我不确定我是否在我的循环中犯了一个错误，或者我的代码中是否有不应该重复的信息？关于我应该研究什么有什么想法吗？

$(document).ready(function () {
    //Set up variables
    var generatedNum = "";
    var wins = 0;
    var losses = 0;
    var crystalNum1 = "";
    var crystalNum2 = "";
    var crystalNum3 = "";
    var crystalNum4 = "";
    var totalScore = 0;


    var crystalNum1 = Math.floor((Math.random() * 12) + 1);
    var crystalNum2 = Math.floor((Math.random() * 12) + 1);
    var crystalNum3 = Math.floor((Math.random() * 12) + 1);
    var crystalNum4 = Math.floor((Math.random() * 12) + 1);
    var generatedNum = Math.floor((Math.random() * 120) + 19);

    console.log(generatedNum);
    $(".generatedNum").text(generatedNum);
    $(".wins").text("Wins: " + wins);
    $(".losses").text("Losses: " + losses);

    function initializeGame() {

        var crystalNum1 = Math.floor((Math.random() * 12) + 1);
        var crystalNum2 = Math.floor((Math.random() * 12) + 1);
        var crystalNum3 = Math.floor((Math.random() * 12) + 1);
        var crystalNum4 = Math.floor((Math.random() * 12) + 1);
        var generatedNum = Math.floor((Math.random() * 120) + 19);
        $(".generatedNum").text(generatedNum);
        var totalScore = 0;
        $(".totalScore").text(totalScore);
    }

    // wins { totalScore === generatedNum}
    function win() {
        wins++;
        $(".wins").text("Wins: " + wins);
        initializeGame();
    }
    // losses {totalScore > generatedNum}
    function loss() {
        losses++;
        $(".losses").text("Losses: " + losses);
        initializeGame();
    }

    $(".crystal1").click(function () {
        totalScore = totalScore + crystalNum1;
        console.log(" New totalScore= " + totalScore);
        $(".totalScore").text(totalScore);
        if (totalScore === generatedNum) {
            win();
        } else if (totalScore > generatedNum) {
            loss();
        }
    });
    $(".crystal2").click(function () {
        totalScore = totalScore + crystalNum2;
        console.log(" New totalScore= " + totalScore);
        $(".totalScore").text(totalScore);
        if (totalScore === generatedNum) {
            win();
        } else if (totalScore > generatedNum) {
            loss();
        }
    });
    $(".crystal3").click(function () {
        totalScore = totalScore + crystalNum3;
        console.log(" New totalScore= " + totalScore);
        $(".totalScore").text(totalScore);
        if (totalScore === generatedNum) {
            win();
        } else if (totalScore > generatedNum) {
            loss();
        }
    });
    $(".crystal4").click(function () {
        totalScore = totalScore + crystalNum4;
        console.log(" New totalScore= " + totalScore);
        $(".totalScore").text(totalScore);
        if (totalScore === generatedNum) {
            win();
        } else if (totalScore > generatedNum) {
            loss();
        }
    });
});

Answer 1

所以，我终于弄清楚了我的错误，我将我的元素和变量命名为相同的名称，所以我的游戏没有返回新生成的数字和新的总分，而是为每个保持相同的值，只是不断添加损失

$(document).ready(function () {
//Set up variables
var wins = 0;
var losses = 0;
var newtotalScore = 0;
$(".wins").text("Wins: " + wins);
$(".losses").text("Losses: " + losses);
var newgeneratedNum = Math.floor((Math.random() * 101) + 19);
$(".generatedNum").text(newgeneratedNum);
//console.log(generatedNum);
var crystalNum1 = Math.floor((Math.random() * 12) + 1);
var crystalNum2 = Math.floor((Math.random() * 12) + 1);
var crystalNum3 = Math.floor((Math.random() * 12) + 1);
var crystalNum4 = Math.floor((Math.random() * 12) + 1);

function initializeGame() {
    newgeneratedNum = Math.floor((Math.random() * 120) + 19);
    $(".generatedNum").text(newgeneratedNum);
    crystalNum1 = Math.floor((Math.random() * 12) + 1);
    crystalNum2 = Math.floor((Math.random() * 12) + 1);
    crystalNum3 = Math.floor((Math.random() * 12) + 1);
    crystalNum4 = Math.floor((Math.random() * 12) + 1);
    newtotalScore = 0;
    $(".totalScore").text(newtotalScore);
}
// wins { totalScore === newgeneratedNum}
function win() {
    wins++;
    $(".wins").text("Wins: " + wins);
    initializeGame();
}
// losses {totalScore > newgeneratedNum}
function loss() {
    losses++;
    $(".losses").text("Losses: " + losses);
    initializeGame();
}
//on click function for crystals
$(".crystal1").click(function () {
    newtotalScore = newtotalScore + crystalNum1;
    console.log(" New totalScore= " + newtotalScore);
    $(".totalScore").text(newtotalScore);

    if (newtotalScore === newgeneratedNum) {
        win();
    } else if (newtotalScore > newgeneratedNum) {
        loss();
    }
});
$(".crystal2").click(function () {
    newtotalScore = newtotalScore + crystalNum2;
    console.log(" New totalScore= " + newtotalScore);
    $(".totalScore").text(newtotalScore);

    if (newtotalScore === newgeneratedNum) {
        win();
    } else if (newtotalScore > newgeneratedNum) {
        loss();
    }
});
$(".crystal3").click(function () {
    newtotalScore = newtotalScore + crystalNum3;
    console.log(" New totalScore= " + newtotalScore);
    $(".totalScore").text(newtotalScore);

    if (newtotalScore === newgeneratedNum) {
        win();
    } else if (newtotalScore > newgeneratedNum) {
        loss();
    }
});
$(".crystal4").click(function () {
    newtotalScore = newtotalScore + crystalNum4;
    console.log(" New totalScore= " + newtotalScore);
    $(".totalScore").text(newtotalScore);

    if (newtotalScore === newgeneratedNum) {
        win();
    } else if (newtotalScore > newgeneratedNum) {
        loss();
    }
});

});