HOWTO · JavaScript

Pierre papier et ciseaux en JavaScript

Dans cet article, nous allons apprendre à écrire du code pour Rock, Paper and Scissors en JavaScript.

Sur cette page

Chaque développeur commence par le monde Hello quelque part dans sa vie. Rock Paper Scissor est l’un des développeurs de jeux populaires construits tout en apprenant n’importe quel langage de programmation. Mais écrire plusieurs cas devient un casse-tête pour les développeurs. Donc, dans cet article, nous allons apprendre la logique derrière le jeu de la pierre, du papier et des ciseaux.

Pierre, papier et ciseaux en JavaScript

C’est un jeu intéressant et populaire joué par les enfants. Et sa logique aussi. Alors, commençons par comprendre la règle de ce jeu.

  1. Un joueur qui choisit de jouer la pierre frappera un autre joueur qui a choisi les ciseaux car la pierre écrase les ciseaux ou parfois les ciseaux chanfreinés.
  2. Un joueur qui choisit de jouer la pierre perd face à un autre qui a joué la feuille parce que la feuille recouvre la pierre.
  3. Un joueur qui décide de jouer au papier perdra contre un joueur de ciseaux parce que les ciseaux coupent le papier.

Ainsi, les règles sont effacées ; maintenant, écrivons la logique du jeu. Nous avons créé un objet avec une clé comme choix individuel et des valeurs comme deuxième choix. Par exemple, si l’entrée de l’utilisateur est rock et que le choix de l’ordinateur est également rock, alors c’est un match nul.

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

Nous pouvons maintenant utiliser l’objet ci-dessus comme règle globale et prédire le résultat d’un jeu en utilisant la fonction.

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;
}

Dans la fonction ci-dessus, nous prenons le choix de l’utilisateur comme entrée et comparons l’entrée de l’utilisateur avec le choix généré par ordinateur à l’aide d’un boîtier de commutation. Si aucune des conditions n’est satisfaite, il est considéré comme nul. Prenons maintenant le choix de l’utilisateur et imprimons le résultat.

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

Lorsque vous exécutez le code ci-dessus, il imprimera quelque chose comme ceci. Le résultat peut varier en fonction du choix de l’ordinateur.

Production :

YOU LOSE