点击事件中设置数组对象isAttacker布尔属性并获取攻击值的实现

没问题，我来帮你搞定这个需求。咱们先理清楚核心逻辑，再给出具体的代码实现：

首先明确数据结构示例 #

先确认你的chosenChar数组结构大概是这样的（如果有差异可以按需调整）：

// 你的 chosenChar 数组初始状态
const chosenChar = [
  {
    isAttacker: false,
    attacks: [12, 18, 24] // 每个角色的攻击数值集合
  },
  {
    isAttacker: false,
    attacks: [15, 21, 27]
  }
];

完整的点击事件实现代码 #

下面是绑定到“attack”按钮的处理函数，包含所有需求逻辑：

// 获取页面上的攻击按钮和用于显示数值的元素
const attackButton = document.getElementById('attackButton');
const attackValueElement = document.getElementById('attackValueDisplay');

// 点击攻击按钮触发的函数
attackButton.addEventListener('click', function() {
  // 1. 随机选中数组中的一个角色对象
  const randomCharIndex = Math.floor(Math.random() * chosenChar.length);
  const selectedAttacker = chosenChar[randomCharIndex];

  // 2. 重置所有角色的isAttacker状态（确保每次只有一个攻击者）
  chosenChar.forEach(char => {
    char.isAttacker = false;
  });
  // 将选中的角色标记为攻击者
  selectedAttacker.isAttacker = true;

  // 3. 从攻击者的攻击数组中随机获取一项数值
  const randomAttackIndex = Math.floor(Math.random() * selectedAttacker.attacks.length);
  const attackValue = selectedAttacker.attacks[randomAttackIndex];

  // 4. 将攻击数值显示到屏幕上
  attackValueElement.textContent = `本次攻击数值：${attackValue}`;
  // 可选：如果你需要显示是哪个角色发起的攻击，可以改成下面这样
  // attackValueElement.textContent = `角色${randomCharIndex + 1}发起攻击，数值：${attackValue}`;
});

关键细节说明 #

• 重置所有isAttacker：这一步很重要，避免之前被选中的角色仍保持true状态，确保每次点击只有一个攻击者。
• 攻击数值的获取方式：上面代码是随机取攻击数组中的一项，如果你需要按顺序依次获取（比如先取第一个，再第二个，循环往复），可以用下面的修改版：

// 新增变量记录当前攻击项的索引，初始为0
let currentAttackIndex = 0;

attackButton.addEventListener('click', function() {
  // ... 前面的随机选角色、重置状态步骤不变 ...

  // 按顺序获取攻击数值
  const attackValue = selectedAttacker.attacks[currentAttackIndex];
  // 更新索引，超出数组长度时重置为0，实现循环
  currentAttackIndex = (currentAttackIndex + 1) % selectedAttacker.attacks.length;

  // ... 显示数值步骤不变 ...
});

内容的提问来源于stack exchange，提问作者J.G.Sable