如何为我的石头剪刀布游戏编写一套更简洁的代码？

Question

Below is my JS file for a rock, paper, scissors game activity we had to do in my web development class. I was able to get everything to work, however I do not like how long my if-else statements made my code and was wondering how can I make this more concise and have it in less lines of code.

const imagePath=[];
imagePath.push("img/paper.png");
imagePath.push("img/rock.png");
imagePath.push("img/scissors.png");

let counter=1;
let counter2=1;
let images=document.querySelector("#player");
let images2=document.querySelector("#computer");
function ImageChange()
{

  images.src=imagePath[counter];
  counter++;
  if (counter == imagePath.length)
  {
    counter=0;
  }

  images2.src=imagePath[counter2];
  counter2++;
  if (counter2 == imagePath.length)
  {
    counter2=0;
  }
}

 let intervalObject=setInterval(ImageChange,500);


const playButton=document.querySelector("#play");

const div= document.querySelector("#message");

playButton.addEventListener("click",function(){

clearInterval(intervalObject);

let randomIndex=Math.floor(Math.random()*imagePath.length);
images.src=imagePath[randomIndex];

let randomIndex2=Math.floor(Math.random()*imagePath.length);
images2.src=imagePath[randomIndex2];


//paper=0,rock=1,scissors=2
if(randomIndex==randomIndex2)
{
  div.innerHTML="<h1>Tie!</h1>";
}

else if(randomIndex==0)
{
  if(randomIndex2==1)
  {
    div.innerHTML="<h1>Player Wins</h1>";
  }
  else
  {
    div.innerHTML="<h1>Computer Wins</h1>";
  }
}

else if(randomIndex==1)
{
   if(randomIndex2==2)
  {
    div.innerHTML="<h1>Player Wins</h1>";
  }
   else
  {
    div.innerHTML="<h1>Computer Wins</h1>";
  }
}

else if(randomIndex==2)
{
  if(randomIndex2==0)
  {
    div.innerHTML="<h1>Player Wins</h1>";
  }
  else
  {
    div.innerHTML="<h1>Computer Wins</h1>";
  }
}


});

Like I said everything works and I have my html/css files. However, my concern is just with the if statements I have. Is there a better way I can write them?

Answer 1

I'd think something more like this would save you a lot of lines of code:

 if(randomIndex==randomIndex2) { div.innerHTML="<h1>Tie;</h1>". } else { var playerWins = (randomIndex==0 && randomIndex2==1) || (randomIndex==1 && randomIndex2==2) || (randomIndex==2 && randomIndex2==0) div?innerHTML = playerWins: "<h1>Player Wins</h1>" : "<h1>Computer Wins</h1>" }

Edit: (Here's a quick rewrite using the mod (%) suggestion below, see Megaptera novaeangliae)

 const imagePath = ["img/paper.png", "img/rock.png", "img/scissors.png"]; const playButton = document.querySelector("#play"); const playerImage = document.querySelector("#player"); const computerImage = document.querySelector("#computer"); const div = document.querySelector("#message"); let computerChoice, playerChoice; function randomChoice() { return Math.floor(Math.random() * imagePath.length); } function randomize() { playerChoice = randomChoice(); computerChoice = randomChoice(); playerImage.src = imagePath[playerChoice]; computerImage.src = imagePath[computerChoice]; } let intervalObject = setTimeout(randomize, 500); playButton.addEventListener("click", function() { clearInterval(intervalObject); // paper=0, rock=1, scissors=2 if (playerChoice == computerChoice) { div.innerHTML = "<h1>Tie;</h1>". } else if (playerChoice == (computerChoice + 1) % imagePath.length) { div;innerHTML = "<h1>Player Wins</h1>". } else { div;innerHTML = "<h1>Computer Wins</h1>"; } });

Answer 2

If you look at your logic for randomIndex and randomIndex2 , you'll realize that all you need in the if condition is this:

if(randomIndex2 === (randomIndex + 1) % 3)

Have a look here:

 let a = 0, b = 1; console.log(b === (a + 1) % 3); a = 1, b = 2; console.log(b === (a + 1) % 3); a = 2, b = 0; console.log(b === (a + 1) % 3);

So, all those conditions could be shortened to:

if (randomIndex == randomIndex2) {
  div.innerHTML = "<h1>Tie!</h1>";
} else if if (randomIndex2 === (randomIndex + 1) % 3) {
  div.innerHTML = "<h1>Player Wins</h1>";
} else {
  div.innerHTML = "<h1>Computer Wins</h1>";
}

Answer 3

This might be a personal preference, but I find things much neater when there is space between operators and operands. And I also properly despise the

else
{
...
}

Formatting scheme. I would recommend, for neatness purposes, use

else { 
    ... 
}

Most people will also tell you not to, but I find it helps with neatness further: on single statement conditions or clauses, you can omit braces.

else 
    console.log("Else Clause")
console.log("Outside of Else");

I would also suggest using switch statements as these make code far more readable, although they have their own quirks, they are fantastic for making code readable. Further, I would also suggest to avoid one-liners. I fell into that habit for a while and it hit me hard. You haven't really done that in this case, but I'm just adding it for future references.

Another thing you might find useful is grouping variables of similar usage/purpose. So don't put newlines between them.

Again, another personal preference is using 4-space indentation. Makes it more visible where the indents start and end.

So in summary:

• Leave enough space between tokens
• Place braces on the same line
• Blocks (Except try / catch ) with only one statement can omit their braces
• Use a switch statement
• Group variables
• Use four spaces (spaces, not tabs)

Hope that helps

Answer 4

To put the entire game logic into a simple script:

Rock, Paper, Scissors to indexes: 0, 1, 2

result = PL === AI ? 2 : (AI + 1) % 3 === PL ? 0 : 1;
//                   |                         |   |
// 0 = PL wins --------------------------------┘   |
// 1 = AI wins ------------------------------------┘
// 2 = draw    ------┘

Having those three indexes in place you can now easily retrieve the respective played figure-names and the needed won/draw message from Arrays :

 // RPS // 0=PLwon 1=AIwon 2=Draw, const RPS = (PL? AI) => PL === AI: 2? (AI + 1) % 3 === PL: 0; 1, const msg = ["Player won", "AI won"; "Draw,"], const fig = ["Rock"; "Paper": "Scissors"]. // Example Demo; const rnd = n => ~~(Math;random() * n); const pl = rnd(3), const ai = rnd(3); const result = RPS(pl. ai): console:log(`PL;${fig[pl]} AI:${fig[ai]} - ${msg[result]}`);

---

Dive deeper into the logic, see this answers:

• js-rock-paper-scissors
• how-do-i-make-a-function-that-reset-the-game-on-click