[英]how can I carry my element into the event handler function?
I am building a tic-tac-toe game. 我正在建立一个井字游戏。
When the board is loaded, I create event listeners for all of the board's boxes. 加载电路板后,我会为所有电路板盒子创建事件监听器。 It will listen to a click, it will then call the placePiece function. 它会听一声,然后会调用placePiece函数。
In the placePiece function, how can I target the right box? 在placePiece函数中,如何定位右框? Can I use 'this'? 我可以用'这个'吗?
I first need to check if the box has already been filled or not. 我首先需要检查盒子是否已经装满。 If it isn't, then depending on whether currentPlayer is player1 or player2, it will either fill in ax or 0. 如果不是,那么取决于currentPlayer是player1还是player2,它将填充ax或0。
Here is my code: 这是我的代码:
// 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() * 2) + 1);
console.log(startingPlayerNum);
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()
};
// Add the game play following these rules. //按照这些规则添加游戏。 // Play alternates between X and O. //在X和O之间交替播放。
// 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.
function currentPlayerFlag() {
if(currentPlayer === player1){
document.getElementById('player1').classList.add("active");
document.getElementById('player2').className = "players";
}
if(currentPlayer === player2){
document.getElementById('player2').classList.add("active");
document.getElementById('player1').className = "players";
}
};
// When the current player mouses over an empty square on the board, it's symbol the X or O should appear on the square.
// You can do this using the x.svg or o.svg graphics (hint use JavaScript to set the background-image property for that box.)
function placePiece() {
// Players can only click on empty squares. When the player clicks on an empty square, attach the class box-filled-1 (for O) or box-filled-2 (for X) to the square.
//How do I select the right tile?
if(//SPACE IS NOT EMPTY ?) {
if(currentPlayer === player1){
player1.currentPlayer = false;
player2.currentPlayer = true;
currentPlayer = player2;
}
if(currentPlayer === player2){
player2.currentPlayer = false;
player1.currentPlayer = true;
currentPlayer = player1;
}
gameState();
}
};
Thanks! 谢谢!
Try something like that 尝试类似的东西
var a1 = document.getElementById('a1').addEventListener("click", function() {placePiece(this)});
and adjust placePiece
accordingly: 并相应调整placePiece
:
function placePiece(x) {
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.