我正在构建一个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";
}
};
请告诉我我做错了什么
答案 0 :(得分:1)
Math.random()
返回[0, 1)
范围内的值。 Math.floor()
总是向下舍入值。因此,您的Math.floor(Math.random() * 1)
始终会返回0
。
您可以改为使用Math.round
,或为Math.floor
提供更广泛的范围。
答案 1 :(得分:1)
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. ==
用于比较,=
用于分配。请尝试以下方法:
if(startingPlayerNum == 1){
player1.currentPlayer = true;
currentPlayer = player1;
} else {
player2.currentPlayer = true;
currentPlayer = player2
}
答案 2 :(得分:1)
Math.floor(Math.random() * 1) + 1 ;
将始终返回1
这是因为Math.random()
返回[0; 1)
范围内的值(0
包含,1
独占)。
因此Math.random() * 1
始终位于0
和1
之间。
所以Math.floor(Math.random() * 1)
总是0