JavaScript 中的石头剪刀布

Shraddha Paghdar 2023年10月12日
JavaScript 中的石头剪刀布

每个开发人员都从他们生活中的某个地方的 Hello world 开始。剪刀石头布是开发者在学习任何编程语言时构建的。但是编写多个案例成为开发人员的头疼问题。所以在这篇文章中,我们将学习石头剪刀布游戏背后的逻辑。

JavaScript 中的石头剪刀布

这是一个有趣和流行的孩子们玩的游戏。它的逻辑也是如此。那么我们先来了解一下这个游戏的规则。

  1. 一个选择玩石头的玩家会攻击另一个选择剪刀的玩家,因为石头会压碎剪刀或有时会倒角剪刀。
  2. 选择玩石头的玩家输给了玩纸的玩家,因为纸盖住了石头。
  3. 决定玩纸的玩家将输给剪刀玩家,因为剪刀剪纸。

所以规则被清除;现在,让我们编写游戏的逻辑。我们创建了一个对象,其中键作为个人选择,值作为第二选择。例如,如果用户输入是摇滚,而计算机的选择也是摇滚,那么它就是平局。

let choicesObject = {
  'rock': {'rock': 'draw', 'scissor': 'win', 'paper': 'lose'},
  'scissor': {'rock': 'lose', 'scissor': 'draw', 'paper': 'win'},
  'paper': {'rock': 'win', 'scissor': 'lose', 'paper': 'draw'}
}

现在我们可以使用上述对象作为全局规则,并使用函数预测游戏结果。

function checker(input) {
  var choices = ['rock', 'paper', 'scissor'];
  var num = Math.floor(Math.random() * 3);

  let computerChoice = choices[num];
  let result

  switch (choicesObject[input][computerChoice]) {
    case 'win':
      result = 'YOU WIN';
      break;
    case 'lose':
      result = 'YOU LOSE';
      break;
    default:
      result = 'DRAW';
      break;
  }
  console.log(result);
  document.getElementById('result').textContent = result;
}

在上述函数中,我们将用户选择作为输入,并将用户输入与使用 switch case 的计算机生成的选择进行比较。如果没有任何条件匹配,则认为已绘制。现在让我们接受用户的选择并打印结果。

<button onClick="checker('rock')">Rock</button>
<button onClick="checker('paper')">Paper</button>
<button onClick="checker('scissor')">Scissor</button>
<p id="result">
</p>

当你运行上面的代码时,它会打印出类似这样的内容。结果可能因计算机的选择而异。

输出:

YOU LOSE
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn