如何为我的剪刀石头布游戏编写更整洁的代码集? [英] How can I write a neater set of code for my rock paper scissors game?

问题描述

下面是我的JS文件，用于我们在Web开发课程中必须做的石头，纸，剪刀游戏活动.我能够使所有功能正常工作，但是我不喜欢我的if-else语句使我的代码花费了多长时间，并且想知道如何才能使它更简洁，用更少的代码行来实现.

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


});

就像我说的那样，一切正常，并且我有html/css文件.但是，我所关心的只是我拥有的if语句.有没有更好的方法可以写它们?

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?

推荐答案

我认为更多类似的方法可以为您节省很多代码行:

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

(这里是使用下面的mod(％)建议的快速重写，请参见Megaptera novaeangliae)

(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>";
	}
});

这篇关于如何为我的剪刀石头布游戏编写更整洁的代码集?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！