Выбор кристаллов регистрируется как проигрыш после первого выигрыша или проигрыша

Question

Моя проблема с моим кодом заключается в том, что, когда пользователь выигрывает / теряет, он отмечает очко, но после первого выигрыша / проигрыша каждый выбор кристаллов автоматически регистрируется как проигрыш. Я не уверен, сделал ли я ошибку в своем цикле, или, может быть, просто есть информация о моем коде, которая не должна повторяться? Любые идеи относительно того, что я должен исследовать?

$(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();
    }
});

});