我正在制作四连环游戏，现在我可以单击游戏板上的；运行一些逻辑以确定哪个插槽已打开，然后将当前播放器放置在该插槽中。现在，我想切换到其他播放器。我试图通过一个switchPlayer(player);函数来做到这一点
function switchPlayer(player) {
if (player === 'p1')
player = 'p2';
else if (player ==='p2')
player = 'p1';
}
这没有做任何事情，因为我将玩家设置为全局玩家，所以它停留在玩家='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>
答案 0 :(得分：2)
您已将玩家声明为const，因此无法更改其值，请使用let或var。
将代码更改为
var player = "p1";
答案 1 :(得分：2)
您有两个问题：
const，因此您无法更改其指向的内容。将变量减速度更改为let。...
let player = 'p1';
...
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！