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

Post a Comment

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m
Read more

javascript - Z-index in d3.js -

i have map , when hover effect on region of map below yellow line , circle, last ones disappear. how can solve problem? http://jsfiddle.net/ot21n9qx/ var arc = g.append("path") .style("fill", "none") .style("stroke", "yellow") .style("stroke-width", 2) .attr("d", "m" + pathorigin[0] + "," + pathorigin[1] + " q" + svgpoint[0] + "," + pathorigin[1] + " " + svgpoint[0] + "," + svgpoint[1]); var circlesize = d3.scale.linear() .domain([0, 0.5, 1]) .range([4, 10, 4]); svg not have z order draws objects in order created. need create path , circle after create highlight regions. here forked fiddle: http://jsfiddle.net/o00fzgaf/1/
Read more