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

Question

我正在制作一个四连环游戏，现在我可以单击游戏板上的； 运行一些逻辑以确定哪个插槽已打开，然后将当前播放器放置在该插槽中。 现在，我想切换到其他播放器。 我试图用switchPlayer(player);做到这一点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

您已将player声明为const ，因此无法更改其值，请使用let或var 。

将您的代码更改为

var player = "p1";

Answer 2

您有两个问题：

1. 您的global是const ，因此您无法更改其指向的内容。 将变量减速度更改为let 。

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

2. 您的函数正在遮盖全局名称，因此您需要确保名称不会冲突，否则只会更新范围最接近的名称。

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！