javascript - 而不是提示从石头、剪刀、布等游戏的图像中进行选择

Question

我是 javascript 新手，正在开发一个简单的石头、剪刀、布、蜥蜴、斯波克游戏。我想让用户从 5 张图像中进行选择，而不是在提示中填写。有谁知道我该怎么做？警报和确认消息最终也应该是

或类似的内容。

var userChoice = prompt("Fill in one of these:\n\n- Rock\n- Paper\n- Scissors\n- Lizard\n- Spock \n");

userChoice = userChoice.toLowerCase();

var computerChoice = Math.random();

if (computerChoice < 0.20) {
    computerChoice = "rock";
} else if(computerChoice <= 0.40) {
    computerChoice = "paper";
} else if(computerChoice <= 0.60) {
    computerChoice = "scissors";
} else if(computerChoice <= 0.80) {
    computerChoice = "lizard";
} else {
    computerChoice = "spock";
}

if ((userChoice === "rock")||(userChoice === "paper")||(userChoice === "scissors")||(userChoice === "lizard")||(userChoice === "spock")){
alert("Computer chose: " + computerChoice);
} else { if (alert('Oops! Looks like you made a typo!')){}
else {document.location.reload(true); }};

var compare = function (choice1, choice2) {

if (choice1 === choice2) {
alert("The result is a tie!");
}


else if (choice1 === "rock") {
    if (choice2 === "scissors") {
        alert("Rock crushes scissors! You win!");
    } else if (choice2 === "paper") {
        alert("Paper covers rock! You lose!");
    } else if (choice2 === "lizard") {
        alert("Rock crushes lizard! You win!");
    } else {
        alert("Spock vaporizes rock! You lose!");
    }
}

else if (choice1 === "paper") {
    if (choice2 === "scissors") {
        alert("Scissors cuts paper! You lose!");
    } else if (choice2 === "rock") {
        alert("Paper covers rock! You win!");
    } else if (choice2 === "lizard") {
        alert("Lizard eats paper! You lose!");
    } else {
        alert("Paper disproves Spock! You Win!");
    }
}

else if (choice1 === "scissors") {
    if (choice2 === "paper") {
        alert("Scissors cuts paper! You win!");
    } else if (choice2 === "rock") {
        alert("Rock crushes scissors! You lose");
    } else if (choice2 === "lizard") {
        alert("Scissors decapitates lizard! You win!");
    } else {
        alert("Spock smashes scissors! You lose!");
    }
}


else if (choice1 === "lizard") {
    if (choice2 === "scissors") {
        alert("Scissors decapitates lizard! You lose!");
    } else if (choice2 === "rock") {
        alert("Rock crushes lizard! You lose!");
    } else if (choice2 === "paper") {
        alert("Lizard eats paper! You win!");
    } else {
        alert("Lizard poinsons Spock! You win!");
    }
}


else if (choice1 === "spock") {
    if (choice2 === "scissors") {
        alert("Spock smashes scissors! You win!");
    } else if (choice2 === "rock") {
        alert("Spock vaporizes rock! You win!");
    } else if (choice2 === "lizard") {
        alert("Lizard poinsons Spock! You lose!");
    } else {
        alert("Paper disproves Spock! You lose!");
    }
}
};

compare(userChoice, computerChoice);

if ((userChoice === "rock")||(userChoice === "paper")||(userChoice === "scissors")||(userChoice === "lizard")||(userChoice === "spock")){
if(confirm('Do you want to play Again?')){document.location.reload(true);}
}

Answer 1

您可以使用 addEventLister 函数附加 onclick 处理程序。您可以使用可能组合的 map ，它更短且更具可读性。此外，您可以避免编写重复的组合 - 例如。石头 -> 剪刀，剪刀 -> 石头

var combinations = {
  'scissors': {
    'paper': 'cuts',
    'lizard': 'decapitates'
  },
  'paper': {
    'rock': 'covers',
    'spock': 'disproves'
  },
  'rock': {
    'lizard': 'crushes',
    'scissors': 'crushes'
  },
  'lizard': {
    'spock': 'poisons',
    'eats': 'paper'
  },
  'spock': {
    'smashes': 'scissors',
    'rock': 'vaporizes'
  }
}
var calculate = function (computer, player)
{
  if (combinations[computer][player]) {
    return computer + ' ' + combinations[computer][player] + ' ' + player + '! You lose!';
  } else if (combinations[player][computer]) {
    return player + ' ' + combinations[player][computer] + ' ' + computer + '! You win!';
  }
  return 'The result is a tie!';
}
var computerChoice = function()
{
  var choice = Math.random();
  if (choice < 0.20) {
        return "rock";
  } else if(choice <= 0.40) {
        return "paper";
  } else if(choice <= 0.60) {
        return "scissors";
  } else if(choice <= 0.80) {
        return "lizard";
  } else {
        return "spock";
  }
}
window.onload = function ()
{
  var links = document.getElementsByClassName('rpssl');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function()
    {
      var comp = computerChoice();
      alert("Computer chose: " + comp);
      alert(calculate(comp, this.getAttribute('rel')))
    })
  }
}

JSFiddle