为什么不是'先发球员不是随机分配的吗

Why isn't the starting player randomised?

本文关键字:随机 分配 为什么不      更新时间:2023-09-26

我正在制作一款Tic-Tac-Toe游戏。

我正试图随机选择哪个球员先上场。

加载板时,会生成一个介于1和2之间的随机数。如果数字是1,则player1先到,否则player2先到。然后设置currentPlayer。

然后调用函数currentPlayerFlag。它会将当前玩家的等级设置为"活动"。然后,激活的玩家将通过点亮他们的名字来进行标记。

出于某种原因,无论我重新加载页面多少次,起始播放器总是设置为player1。为什么会这样?

控制台中没有发现任何错误。

这是我的代码:

var currentPlayer;
var player1;
var player2;
// Grab original HTML and hold it as a variable
    var originalHTML = document.body.innerHTML;

// When the page loads, the startup screen should appear.
    window.onload = function() {
        document.body.innerHTML = '<div class="screen screen-start" id="start"><header><h1>Tic Tac Toe</h1><a href="#" class="button">Start game</a></header></div>';
        document.querySelector('a').addEventListener("click", loadBoard);
    };

// playerObject
function Player(name) {
    this.name = name;
    this.currentPlayer = false;
};

// Add programming, so that when the player clicks the start button the start screen disappears, the board appears, and the game begins.
    function loadBoard() {
        document.body.innerHTML = originalHTML;
        player1 = new Player(player1);
        player2 = new Player(player2);
        var startingPlayerNum = Math.floor(Math.random() * 1) + 1 ;
        if(startingPlayerNum = 1){
            player1.currentPlayer = true;
            currentPlayer = player1;
        } else {
            player2.currentPlayer = true;
            currentPlayer = player2
        }
        //Add clickhandlers for boxes
        var a1 = document.getElementById('a1').addEventListener("click", placePiece);
        var a2 = document.getElementById('a2').addEventListener("click", placePiece);
        var a3 = document.getElementById('a3').addEventListener("click", placePiece);
        var b1 = document.getElementById('b1').addEventListener("click", placePiece);
        var b2 = document.getElementById('b2').addEventListener("click", placePiece);
        var b3 = document.getElementById('b3').addEventListener("click", placePiece);
        var c1 = document.getElementById('c1').addEventListener("click", placePiece);
        var c2 = document.getElementById('c2').addEventListener("click", placePiece);
        var c3 = document.getElementById('c3').addEventListener("click", placePiece);
        currentPlayerFlag()
    };

    // The current player is indicated at the top of the page -- the box with the symbol O or X is highlighted for the current player. 
        // Do this by simply adding the class .active to the proper list item in the HTML.
    function currentPlayerFlag() {
        if(currentPlayer === player1){
            document.getElementById('player1').classList.add("active");
            document.getElementById('player2').className = "players";
        }
        if(currentPlayer === player2){
            document.getElementById('player2').classList.add("players active");
            document.getElementById('player1').className = "players";
        }
    };

请告诉我我做错了什么

JavaScript的随机数算法如下:

Math.floor((Math.random() * max)) + min);

所以,你的应该是:

Math.floor((Math.random() * 2) + 1);

您的总是返回1,因为您的范围错误,它正在生成[1,2(,因此总是返回1。您必须允许它返回[1,3(我将Math.random()乘以的值从1更改为2。

您的用例:

var startingPlayerNum = Math.floor((Math.random() * 2) + 1);

Math.floor(Math.random() * 1) + 1返回1的原因是Math.random()从[0,1(生成一个数字。然后,它四舍五入到地板(向下(并加一。

在if语句中,您将其赋值为1,因此它始终为1。==用于比较,=用于分配。如果:

if(startingPlayerNum == 1){
    player1.currentPlayer = true;
    currentPlayer = player1;
} else {
    player2.currentPlayer = true;
    currentPlayer = player2
}

Math.random()返回[0, 1)范围内的值。Math.floor()总是向下舍入值。因此,您的Math.floor(Math.random() * 1)总是返回0

您可以使用Math.round,或者为您的Math.floor提供更宽的范围。

Math.floor(Math.random() * 1) + 1 ;

将始终返回1

发生这种情况是因为Math.random()返回的值在[0; 1)范围内(包括0,不包括1(。

所以CCD_ 19总是在CCD_ 20和CCD_ 21之间。

所以Math.floor(Math.random() * 1)总是0