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