<html>
<head>
<title>My Tic Tac Toe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.Row {
display:table-row;
}
.cell {
display: table-cell;
border: solid black;
border-width: medium;
padding: 0 3px;
height: 95px;
width: 95px;
text-align: center;
font-size: 40px;
vertical-align: middle;
}
</style>
<script>
var xPlayer = prompt("Player x what is your name?");
var oPlayer = prompt("Player o what is your name?");
var currentPlayer = "X";
var xGameTotal = 0;
var oGameTotal = 0;
var xWins = 0;
var oWins = 0;
var xMessage = 0;
var oMessage = 0;
var winsArray = [7, 56, 448, 73, 146, 292, 273, 84];
function playerMoved(id,value){
changeMarker(id);
updatePlayerTotal(value);
if (checkWinner(xGameTotal)){
xWins ++;
if (xWins ===1)
{
xMessage = " time";
}
else
{
xMessage = " times";
}
resetBoard();
}
if (checkWinner(oGameTotal)) {
oWins ++;
if (oWins ===1)
{
oMessage = " time";
}
else
{
oMessage = " times";
}
resetBoard();
}
switchPlayers();
}
function changeMarker(box){
if (currentPlayer === "X")
{
box.innerHTML = 'X';
}
else
{
box.innerHTML = 'O';
}
}
function switchPlayers(){
if (currentPlayer === "X")
{
currentPlayer = 'X';
}
else
{
currentPlayer = 'O';
}
}
function updatePlayerTotal(score){
if (currentPlayer === "X")
{
xGameTotal = xGameTotal + score;
}
else
{
oGameTotal = oGameTotal + score;
}
}
function checkWinner(score){
for (var index = 0; index < winsArray.length; index += 1)
{
if ((winsArray[index] & score) === winsArray[index])
return true;
}
return false;
}
function resetBoard(){
var board = document.getElementsByClassName("cell");
for (var i=0; i < board.length; i++){
board[i].innerHTML="";
}
oGameTotal=0;
xGameTotal=0;
}
</script>
</head>
<body onload="start()">
<h1>Tic Tac Toe</h1>
<div class="Row">
<div class="cell" onClick="playerMoved(this,1)"></div>
<div class="cell" onClick="playerMoved(this,2)"></div>
<div class="cell" onClick="playerMoved(this,4)"></div>
</div>
<div class="Row">
<div class="cell" onClick="playerMoved(this,8)"></div>
<div class="cell" onClick="playerMoved(this,16)"></div>
<div class="cell" onClick="playerMoved(this,32)"></div>
</div>
<div class="Row">
<div class="cell" onClick="playerMoved(this,64)"></div>
<div class="cell" onClick="playerMoved(this,128)"></div>
<div class="cell" onClick="playerMoved(this,256)"></div>
</div>
</body>
我无法让玩家切换。当你点击方块时,总是玩家X。我错过了什么?我想也许我的筑巢是错误的,但我似乎找不到任何东西。任何帮助都会很感激。谢谢你!
if条件(switchPlayers)是错误的。您正在检查当前播放的内容是否为x,然后将当前播放的内容再次设置为x。
只需改变这些行:
function switchPlayers(){
if (currentPlayer === "X") {
currentPlayer = 'X';
} else {
currentPlayer = 'O';
}
}
:
function switchPlayers(){
if (currentPlayer === "X") {
currentPlayer = 'O';
} else {
currentPlayer = 'X';
}
}
让Tommy建议的编辑为我修复了这个问题!
如果希望使代码更简洁,还可以使用三元操作符在一行中完成此操作,如下所示:
function switchPlayers() {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}
如果你愿意,你也可以在代码的其他部分使用三元格式,以帮助避免重复的if else
语句。
基本上,你可以替换:
if(a === 'b') {
c = 'foo';
}
else {
c = 'bar';
}
With: c = a === 'b' ? 'foo' : 'bar'
.
三元格式一开始可能看起来有点令人困惑,但是习惯它们可以帮助防止将来出现这类简单的错误,因为代码更简洁。