gloopit gloopit - 3 months ago 9
Javascript Question

Why isn't the starting player randomised?

I'm building a Tic-Tac-Toe game.

I am trying to randomise which player gets to go first.

As the board is loaded, a random number between 1 and 2 is generated. If the number is 1, then player1 goes first, else player2 goes first. The currentPlayer is then set.

The function,

currentPlayerFlag
is then called. It will set the class of whichever player is the current to "active". The active player will then be flagged by lighting up their name.

For some reason, no matter how many times I reload the page, the starting player is always set to player1. Why is this?

No errors are being caught in the console.

Here is my code:

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";
}
};


Please tell me what I'm doing wrong

Answer

The random number algorithm for JavaScript goes as follows:

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

So, yours would be:

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

Yours is always returning 1 because your range was wrong, it was generating [1, 2), thus always returning 1. You must allow it to return [1, 3) my changing what you multiply Math.random() with from 1 to 2.

Your usecase:

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

The reason Math.floor(Math.random() * 1) + 1 returns 1 is because Math.random() generates a number from [0, 1). Then, it rounds to the floor (down) and adds one.

In your if statement, you assign it to one, so it's always 1. == is for comparison, = is for assignment. Try this if:

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