Pierre papier et ciseaux en JavaScript

Shraddha Paghdar 12 octobre 2023
Pierre papier et ciseaux en JavaScript

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