javascript - 如何切换播放器变量以在播放器一和播放器二之间切换？

Question

我正在制作一个连接四的游戏，现在我可以点击游戏面板；运行一些逻辑来确定哪个插槽是打开的，然后将当前玩家放在该插槽中。现在我想切换到另一个播放器。我试图用一个看起来像这样的 switchPlayer(player); 函数来做到这一点

function switchPlayer(player) {
    if (player === 'p1') 
        player = 'p2';
    else if (player ==='p2') 
        player = 'p1';
}

这没有做任何事情，因为我将玩家设置为全局，所以它停留在 player = 'p1';

有什么想法吗？

//grab all slot positions on the board
const slots = document.querySelectorAll('.board div');
const player = 'p1';
const board = [ 
	0, 1, 2, 3, 4, 5, 6,
	7, 8, 9, 10, 11, 12, 13,
	14, 15, 16, 17, 18, 19, 20,
	21, 22, 23, 24, 25, 26, 27,
	28, 29, 30, 31, 32, 33, 34,
	35, 36, 37, 38, 39, 40, 41,
]


//assign a class to each slot to represent its position
for(let i = 0; i < slots.length; i++) {
	slots[i].classList.add('c' + i);
	//add the function with the game logic to each slot
	slots[i].addEventListener('click', runGame); 
}

function runGame() {
	//figure out which column the selected slot sits in
	const slotColumn = (Number(this.className.slice(1, 3)) % 7);
	//create an array to store all the slots that share the above column
	const columnArray = [];

	//grab all the slots that sit in that column
	for(let i = 0; i < board.length; i++) {
		if(board[i] % 7 === slotColumn) columnArray.push(board[i]);
	}

	//drop chip in the chosen column
	dropChip(columnArray);

	function dropChip(column) {
		//select bottom most slot that's available in the column
		for(let i = column.length - 1; i > 0; i--) {
			if(column[i] !== 'p1' || column[i] !== 'p2') {
				board[column[i]] = player;
				slots[column[i]].classList.add(player);
				switchPlayer(player);
				break;
			}	
		}

		function switchPlayer(player) {
			if(player === 'p1') player = 'p2';
			else if(player ==='p2') player = 'p1';
		}
		console.log(board);
	}
}

/** {
	outline: 1px solid red;
}*/

*, *:before, *:after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	background-color: #e5e6e8;
}

body {
	display: flex;
	justify-content: center;
	min-height: 100vh;
}

.board-wrapper {
	padding-top: 100px;
	display: flex;
	justify-content: center;
	margin: auto auto 0 auto; /*ask why this is needed*/
	position: relative;
}

.board {
	display: flex;
	flex-wrap: wrap;
	max-width: 706px;
	background-color: #00c;
	padding: 3px;
}

.board div {
	width: 100px;
	height: 100px;
	background-color: blue;
	border: 3px solid #00c;
	position: relative;
}

.board div:after {
	content: "";
	display: inline-block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #00c;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	box-shadow: inset 0px 0px 13px #0606aa;
}

.board .chip {
	display: block;
	position: absolute;
	background-color: transparent;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;
}

.board .chip:after {
	content: "";
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: red;
	position: absolute;
	left: 3px;
	top: 0;
	opacity: 0;
	transition: all .5s ease;
}

.board .chip:before {
	content: "";
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: red;
	position: absolute;
	left: 18px;
	top: 15px;
	z-index: 1;
	box-shadow: inset 0px 0px 20px #cc0000;
	opacity: 0;
	transition: all .5s ease;	
}

.board div:nth-of-type(7n+1):hover ~ .chip:after{transform: translateX(10px); opacity: 1;}
.board div:nth-of-type(7n+1):hover ~ .chip:before{transform: translateX(10px); opacity: 1;}
.board div:nth-of-type(7n+2):hover ~ .chip:after{transform: translateX(110px); opacity: 1;}
.board div:nth-of-type(7n+2):hover ~ .chip:before{transform: translateX(110px); opacity: 1;}
.board div:nth-of-type(7n+3):hover ~ .chip:after{transform: translateX(210px); opacity: 1;}
.board div:nth-of-type(7n+3):hover ~ .chip:before{transform: translateX(210px); opacity: 1;}
.board div:nth-of-type(7n+4):hover ~ .chip:after{transform: translateX(310px); opacity: 1;}
.board div:nth-of-type(7n+4):hover ~ .chip:before{transform: translateX(310px); opacity: 1;}
.board div:nth-of-type(7n+5):hover ~ .chip:after{transform: translateX(410px); opacity: 1;}
.board div:nth-of-type(7n+5):hover ~ .chip:before{transform: translateX(410px); opacity: 1;}
.board div:nth-of-type(7n+6):hover ~ .chip:after{transform: translateX(510px); opacity: 1;}
.board div:nth-of-type(7n+6):hover ~ .chip:before{transform: translateX(510px); opacity: 1;}
.board div:nth-of-type(7n+7):hover ~ .chip:after{transform: translateX(610px); opacity: 1;}
.board div:nth-of-type(7n+7):hover ~ .chip:before{transform: translateX(610px); opacity: 1;}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Connect Four</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="board-wrapper">
		<div class="board">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<span class="chip"></span>
		</div>
	</div>
	<script src="script.js"></script>
</body>
</html>

Answer 1

你有两个问题:

1. 您的全局变量是const，因此您无法更改它指向的内容。将可变减速更改为 let。

...
let player = 'p1';
...

1. 您的函数正在隐藏全局名称，因此您需要确保名称不会发生冲突，否则它只会更新范围最接近的名称。

function switchPlayer(currentPlayer) {
  if (currentPlayer === 'p1) {
    player = 'p2';
  } else {
    player = 'p1';
  }
}

进行这两项更改至少应该可以解决该问题。

---

注意事项

隐藏一个变量

let a = 1;

function test (a) {
  a = 2; // sets the argument, NOT the same named global
}

test(a);
a; // 1

其他需要研究的事情

• 声明函数的位置
  • 它们需要在那里申报，还是可以在其他地方申报？
• 您还能如何代表董事会？
  • 有没有一种方法可以代表董事会，这样您就不必每次都构建一个数组？

游戏是构建一种有趣的交互式方式来表示与 HTML DOM 相关的 JS 状态的好方法!接下来你应该尝试制作 MineSweeper!