Javascript 而不是提示从图像中选择石头、布、剪刀等游戏

我是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);}
}

var userChoice=prompt（“填写其中一项：\n\n-Rock\n-Paper\n-剪刀\n-Lizard\n-Spock\n”）；
userChoice=userChoice.toLowerCase（）；
var computerChoice=Math.random（）；
如果（计算机选择<0.20）{
computerChoice=“rock”；
}else if（computerChoice这里有一种方法：

HTML

<img onclick="compare('rock')" src="http://lorempixel.com/200/200/animals/Rock/" alt="" />
<img onclick="compare('paper')" src="http://lorempixel.com/200/200/animals/Paper/" alt="" />
<img onclick="compare('scissors')" src="http://lorempixel.com/200/200/animals/Scissors/" alt="" />



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

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')))
    })
  }
}

var组合={
“剪刀”：{
"纸":"剪",，
“蜥蜴”：“斩首”
},
“文件”：{
“岩石”：“覆盖物”，
“斯波克”：“反驳”
},
“摇滚乐”：{
“蜥蜴”：“压碎”，
“剪刀”：“压碎”
},
“蜥蜴”：{
斯波克：“毒药”，
“吃”：“纸”
},
斯波克：{
"砸":"剪刀",，
“岩石”：“蒸发”
}
}
var计算=功能（计算机、播放器）
{
if（组合[计算机][播放器]）{
返回计算机+''+组合[计算机][玩家]+''+玩家+'！你输了；
}else if（组合[玩家][计算机]）{
返回玩家+''+组合[玩家][计算机]+''+计算机+'！你赢了；
}
返回“结果是平局！”；
}
var computerChoice=函数（）
{
var choice=Math.random（）；
如果（选择<0.20）{
返回“岩石”；
}否则如果（选择此选项实际上不属于StackOverlow。这并不意味着让其他人为您编写代码。但因为我心情很好，我会在路上帮助您。使用包含每个选项值的
rel
属性将图像插入锚点。您需要在html中设置这5个图像，并为它们附加一个单击处理程序事件。如图所示。）你在开始你的项目时做了一个很好的尝试，我建议你看看这里，你看起来需要指向正确的方向，而不仅仅是填鸭式的代码，所以希望这会有用！我尝试了以下方法：HTML JAVASCRIPT rock.onclick=function（）{return userChoice=“rock”；}，但没有成功。