当前位置：首页 > article >正文

JavaScript_Pig Game切换当前玩家

article 2024/9/24 3:20:40

const current0El = document.getElementById('current--0');
const current1El = document.getElementById('current--1');
if (dice !== 1) {
    currentScore += dice;
    current0El.textContent = currentScore;
  } else {
  }
});

这是我们上个文章写的代码，这个代码明显是有问题的，当用户不等于1 ，当然分数累计的都是第一个用户，这个用户的累加应该是动态，当我们切换用户的时候，这个条件判断仍然有效

let activePlayer =0;

我们定义这样的一个变量，作用是什么呢？意思是如果为0的话，表示他就是当前的活跃用户

  if (dice !== 1) {
    currentScore += dice;
    document.getElementById( `current--${activePlayer}`).textContent = currentScore;
    current0El.textContent = currentScore;
  } else {
    player0El.classList.toggle('player--active');
    player1El.classList.toggle('player--active');
  }
});

这个代码就是，获取当前为0的用户，将他的当前分数赋值

● 然后如果是掷色子是1的话，我们要去判断如果活跃用户是0的话，就返回真的，返回真就会返回1，如果用户是1的话，就返回假的，将他置于0

activePlayer = activePlayer === 0 ? 1 : 0;

解释一下这个表达式的含义：
● 条件部分：activePlayer === 0，判断 activePlayer 是否等于 0。
● 如果条件为真（即 activePlayer 等于 0），则表达式返回 expression1，也就是 1。
● 如果条件为假（即 activePlayer 不等于 0），则表达式返回 expression2，也就是 0。
这样就巧妙的设置了activePlayer（活跃用户）的值了；也可以动态的给用户计算分数了
在这里插入图片描述

● 切换成功，但是我们还没有把活跃用户的当前分数置为0

  if (dice !== 1) {
    currentScore += dice;
    document.getElementById(`current--${activePlayer}`).textContent =
      currentScore;
  } else {
    activePlayer = activePlayer === 0 ? 1 : 0;
    currentScore = 0;
  }
});

● 但是真正的游戏规则是，当切换用户的话，当前的分数就为0了

  if (dice !== 1) {
    currentScore += dice;
    document.getElementById(`current--${activePlayer}`).textContent =
      currentScore;
  } else {
    document.getElementById(`current--${activePlayer}`).textContent = 0;
    currentScore = 0;
    activePlayer = activePlayer === 0 ? 1 : 0;
  }
});

在这里插入图片描述

当切换用户的时候，编程0
● 接着我们就来切换底色了，谁是活跃用户，谁的底色就是白色

const player0El = document.querySelector('.player--0');
const player1El = document.querySelector('.player--1');
  if (dice !== 1) {
    currentScore += dice;
    document.getElementById(`current--${activePlayer}`).textContent =
      currentScore;
  } else {
    document.getElementById(`current--${activePlayer}`).textContent = 0;
    currentScore = 0;
    activePlayer = activePlayer === 0 ? 1 : 0;
    player0El.classList.toggle('player--active');
    player1El.classList.toggle('player--active');
  }
});