(javascript)Rock Paper Scissors:如何在用户选择后显示计算机的选择

时间:2016-05-02 15:52:22

标签: javascript function if-statement random onclick

我想创建一个简单的石头剪刀游戏桌。我需要一个快速的帮助:当用户点击(onclick)摇滚,纸张或剪刀的图像时,计算机的选择图像将与用户一起显示&#39的选择。这将更新得分获胜,失败和关系。我在显示计算机的随机选择图像以及要显示的分数更新时遇到问题。如果有人可以帮助我,我真的很感激。以下是我的代码:

<table>
   <tr>
      <th colspan = "3">
         <h1>Rock Paper Scissors</h1>
      </th>
   </tr>
   <tr>
      <td onclick="hand(1)"><img src="rock.jpg" alt="rock" id= "pic1" /></td>
      <td rowspan ="3"><img src ="leftPaperHand.jpg" id="userpick"/></td>
      <!--starting image for user-->
      <td rowspan ="3"><img src ="rightRockHand.jpg" id="comppick"/></td>
      <!--starting image for comp-->
   </tr>
   <tr>
      <td onclick="hand(2)"><img src="paper.jpg" alt="paper" id="pic2"/></td>
   </tr>
   <tr>
      <td onclick="hand(3)"><img src="scissors.jpg" alt="scissor" id="pic3"/></td>
   </tr>
   <tr>
      <td colspan = "3">
         <h2>Win:<span id="win">0</span> Loses: <span id="lose">0</span> Ties:<span id="tie">0</span></h2>
      </td>
   </tr>
</table>
<script>
   /////////////////////////// convert user's choice picture and show it up on userpick
   var userChoice = "leftPaperHand.jpg";
   var compChoice = "rightRockHand.jpg";
   drawComputer();

   function hand(choice) {
       switch (choice) {
           //if user chooses rock
           case 1:
               document.getElementById("userpick").src="leftRockHand.jpg";
               if (comp==1){
                   updateScore("tie");
               }
               else if (comp== 2) {
                   updateScore("lose");
               }
               else{
                   updateScore("win");
               break;
               }
           //if user chooses paper
           case 2:
               document.getElementById("userpick").src="leftPaperHand.jpg";
               if (comp==2){
                   updateScore("tie");
               }
               else if (comp==1) {
                   updateScore("win");
               }
               else {
                   updateScore("lose");
               break;
               }
           //is user chooses scissor
           case 3:
               document.getElementById("userpick").src="leftScissorHand.jpg";
               if (comp==3){
                   updateScore("tie");
               }
               else if (comp== 1) {
                   updateScore("lose");
               }
               else {
                   updateScore("win");
               break;
               }
       }
   }

   ////////////////////////////computer's pick
   var comp = Math.floor(Math.random()*3)+1; //starts the counter from 1,2,3

   function drawComputer() {
       if (comp===1) {
           comppick.src="rightRockHand.jpg";
       }
       else if (comp ===2) {
           comppick.src="rightPaperHand.jpg";
       }
       else{
           comppick.src ="rightScissorHand.jpg";
       }
   }

   //////////////////////////updating the score 
   var ties = 0;
   var wins = 0;
   var losses = 0;

   function updateScore(result) {
   var tie = document.getElementById("tie");
   var win = document.getElementById("win");
   var lose = document.getElementById("lose");

   //updating the counter for tie
   if (result === "tie") {
       ties++;
       tie.innerHTML = ties;
   }
   //updating the counter for win
   if (result === "win") {
       wins++;
       win.innerHTML = wins;
   }
   //updating the counter for lose
   if (result === "lose") {
       losses++;
       lose.innerHTML = losses;
   }
   }                  

</script>

0 个答案:

没有答案