问题描述
我有两个模块:boardobject和displayController ...以及一个工厂函数:playerFactory ...我想用playerFactory的函数更新数组,但是出现了不是函数的错误。
const playerFactory = () => {
const playTurn = (event) => {
const id = boardobject.cells.indexOf(event.target);
boardobject.boardArray[id] = currentPlayer;
boardobject.render();
return id;
};
return { playTurn };
};
const displayController = (() => {
const playerOne = 'X';
const playerTwo = 'O'
const gameBoard = document.querySelector(".game_board");
let currentPlayer = playerOne;
const switchPlayer = () => {
currentPlayer = currentPlayer === playerOne ? playerTwo : playerOne;
}
gameBoard.addEventListener("click",(event) => {
if (event.target.classList.contains("cell")) {
if (event.target.textContent === "") {
event.target.textContent = currentPlayer;
switchPlayer();
// const id = boardobject.cells.indexOf(event.target);
// boardobject.boardArray[id] = currentPlayer;
// boardobject.render();
currentPlayer.playTurn(event.target);
}
}
});
})();
可能是什么问题? 如果有人想查看所有代码,这也可能会有所帮助:
// player factory...
const playerFactory = () => {
const playTurn = (event) => {
const id = boardobject.cells.indexOf(event.target);
boardobject.boardArray[id] = currentPlayer;
boardobject.render();
};
return {
playTurn
};
};
// Gameboard object...
const boardobject = (() => {
let boardArray = ['','',''];
const cells = Array.from(document.querySelectorAll(".cell"));
// displays the content of the boardArray...
const render = () => {
boardArray.forEach((mark,idx) => {
cells[idx].textContent = boardArray[idx];
});
};
return {
boardArray,render,cells
};
})();
// display controller ...
const displayController = (() => {
const playerOne = 'X';
const playerTwo = 'O'
const gameBoard = document.querySelector(".game_board");
let currentPlayer = playerOne;
const switchPlayer = () => {
currentPlayer = currentPlayer === playerOne ? playerTwo : playerOne;
}
gameBoard.addEventListener("click",(event) => {
if (event.target.classList.contains("cell")) {
if (event.target.textContent === "") {
event.target.textContent = currentPlayer;
switchPlayer();
// const id = boardobject.cells.indexOf(event.target);
// boardobject.boardArray[id] = currentPlayer;
// boardobject.render();
////////
currentPlayer.playTurn(event); // this is the problem,dunno why?!?!?!?
}
}
});
})();
*,*::before,*::after {
Box-sizing: border-Box;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto',sans-serif;
background: #BEE9E8;
}
header {
background: #1B4965;
text-align: center;
color: #62B6CB;
padding-top: 20px;
padding-bottom: 10px;
}
.game_board {
display: grid;
width: 500px;
height: 500px;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
margin: 0 auto;
margin-top: 40px;
border: 5px solid #1B4965;
border-radius: 10px;
}
.cell {
border: 5px solid #1B4965;
display: flex;
justify-content: center;
align-items: center;
background: #62b6cb;
color: #1b4965;
font-size: 4em;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Tic - Tac - Toe<br>The Odin Project</h1>
</header>
<div class="game_board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<script src="./index.js" defer></script>
</body>
</html>
解决方法
currentPlayer
只是一个字符串X
或O
,没有playTurn()
方法。
您需要调用playerFactory()
来获取对象。在下面的代码中,我使用
const player = playerFactory();
我不太确定为什么首先需要这个对象。它不保持任何状态。但这也许是您打算以后添加的东西。
此外,playTurn()
需要传递currentPlayer
字符串,以便可以将其分配给grid元素。它是gameController
中的局部变量,因此无法直接访问它。
// player factory...
const playerFactory = () => {
const playTurn = (event,currentPlayer) => {
const id = boardObject.cells.indexOf(event.target);
boardObject.boardArray[id] = currentPlayer;
boardObject.render();
};
return {
playTurn
};
};
// Gameboard object...
const boardObject = (() => {
let boardArray = ['','',''];
const cells = Array.from(document.querySelectorAll(".cell"));
// displays the content of the boardArray...
const render = () => {
boardArray.forEach((mark,idx) => {
cells[idx].textContent = boardArray[idx];
});
};
return {
boardArray,render,cells
};
})();
// Display controller ...
const displayController = (() => {
const player = playerFactory();
const playerOne = 'X';
const playerTwo = 'O'
const gameBoard = document.querySelector(".game_board");
let currentPlayer = playerOne;
const switchPlayer = () => {
currentPlayer = currentPlayer === playerOne ? playerTwo : playerOne;
}
gameBoard.addEventListener("click",(event) => {
if (event.target.classList.contains("cell")) {
if (event.target.textContent === "") {
event.target.textContent = currentPlayer;
switchPlayer();
// const id = boardObject.cells.indexOf(event.target);
// boardObject.boardArray[id] = currentPlayer;
// boardObject.render();
////////
player.playTurn(event,currentPlayer);
}
}
});
})();
*,*::before,*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto',sans-serif;
background: #BEE9E8;
}
header {
background: #1B4965;
text-align: center;
color: #62B6CB;
padding-top: 20px;
padding-bottom: 10px;
}
.game_board {
display: grid;
width: 500px;
height: 500px;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
margin: 0 auto;
margin-top: 40px;
border: 5px solid #1B4965;
border-radius: 10px;
}
.cell {
border: 5px solid #1B4965;
display: flex;
justify-content: center;
align-items: center;
background: #62b6cb;
color: #1b4965;
font-size: 4em;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Tic - Tac - Toe<br>The Odin Project</h1>
</header>
<div class="game_board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<script src="./index.js" defer></script>
</body>
</html>