JavaScript/jQuery rock, paper, or scissors game with pictures -


so, im trying create rock paper scissors game using javascript , jquery code.

i'm trying follow rules on how game should play out:

  1. create loop gives user 3 picks against computer's pick. each time, prompt user select “rock”, “paper”, or “scissors” (not typing out word, "selecting" image).

  2. the computer randomly choose rock, paper, or scissors. highlight picture of rock, paper, or scissors choice, show separate image shows computer’s choice of rock, paper, or scissors.

in end of 3 rounds display score board of how many ties, wins, , loses user.

here's code far. far have tried making user click on either rock paper, or scissors , compare randomly generated outcome computer. problem right there no alerts popping on screen. tells me if statements comparing each choice isn't working properly.

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script type = "text/javascript"> $(function() {  (i=0; < 3; i++) {       var computerchoice = null;     var userchoice = null;        $('#rock').click(function(){         userchoice = "rock";     });     $('#paper').click(function(){         userchoice = "paper";     });     $('#scissors').click(function(){         userchoice = "scissors";     });       function newcomputerchoice ()     {         computerchoice = math.floor(math.random() * 3) + 1;         //take random number computerchoice above , assign rock paper or scissors.         if (computerchoice == 1)             {                 computerchoice = "rock";             }         else if (computerchoice == 2)             {                 computerchoice = "paper";             }         else              {                 computerchoice = "scissors";             }      }      if (userchoice == computerchoice){         alert ("tie!");     } else if (userchoice == "rock" && computerchoice == "scissors"){         alert ("you win!");     } else if (userchoice == "paper" && computerchoice == "rock"){         alert ("you win!");     } else if (userchoice == "scissors" && computerchoice == "paper"){         alert ("you win!");     } else if (computerchoice == "rock" && userchoice == "scissors"){         alert ("sorry, lose.")     } else if (computerchoice == "paper" && userchoice == "rock"){         alert ("sorry, lose.")     } else if (computerchoice == "scissors" && userchoice == "paper"){         alert ("sorry, lose.")     }   }    } </script>  </head> <body> <h1>make choice:</h1>  <img src="rock.jpg" name="rock" id = "rock"/> <img src="paper.jpg" name="paper" id = "paper"/> <img src="scissors.jpg" name="scissors" id = "scissors"/>  <h1>computer chose:</h1>    </body> </html> 

lastly, need display computer choice same images, i'm not sure how display 1 @ time depending on randomly chosen.

here solution, should fullfill need.

    <html>     <head>         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>     </head>     <body>     <h1>make choice:</h1>      <img src="rock.jpg" name="rock" id = "rock"/>     <img src="paper.jpg" name="paper" id = "paper"/>     <img src="scissors.jpg" name="scissors" id = "scissors"/>      <h1>computer chose:</h1>     <script language=javascript>         var userchoice = null;         var computerchoice = null;         $(document).ready(             function ()             {                  $('#rock').click(function(){                     userchoice = "rock";                     newcomputerchoice();                     computresult();                 });                 $('#paper').click(function(){                     userchoice = "paper";                     newcomputerchoice ();                     computresult();                 });                 $('#scissors').click(function(){                     userchoice = "scissors";                     newcomputerchoice ();                     computresult();                 });             }         );          function newcomputerchoice ()         {             computerchoice = math.floor(math.random() * 3) + 1;             //take random number computerchoice above , assign rock paper or scissors.             if (computerchoice == 1)                 {                     computerchoice = "rock";                 }             else if (computerchoice == 2)                 {                     computerchoice = "paper";                 }             else                  {                     computerchoice = "scissors";                 }          }         function computresult()         {             var result;              if (userchoice == computerchoice){                 result="tie!";             } else if (userchoice == "rock" && computerchoice == "scissors"){                 result="you win!";             } else if (userchoice == "paper" && computerchoice == "rock"){                 result="you win!";             } else if (userchoice == "scissors" && computerchoice == "paper"){                 result="you win!";             } else if (computerchoice == "rock" && userchoice == "scissors"){                 result="sorry, lose.";             } else if (computerchoice == "paper" && userchoice == "rock"){                 result="sorry, lose.";             } else if (computerchoice == "scissors" && userchoice == "paper"){                 result="sorry, lose.";             }             var table=document.getelementbyid("result");             var row=table.insertrow(table.rows.length);             var cell=row.insertcell(row.cells.length);             var img=document.createelement("img");             img.src=document.getelementbyid(computerchoice).src;             $(cell).append(img);             cell=row.insertcell(row.cells.length);             img=document.createelement("img");             img.src=document.getelementbyid(userchoice).src;             $(cell).append(img);             cell=row.insertcell(row.cells.length);             cell.innerhtml=result;         }        </script>     <table id="result">         <tr>             <td>computer choice</td>             <td>your choice</td>             <td>result</td>         </tr>        </table>     </body>     </html> 

Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -