www.webdeveloper.com
Results 1 to 13 of 13

Thread: Paper - Rock - Scissors help

  1. #1
    Join Date
    Nov 2013
    Posts
    5

    Unhappy Paper - Rock - Scissors help

    All,

    First I am a amateur with JavaScript but I trying to fix that. I am working on a Rock Paper Scissors game and I have ran into one issue. The logic of the game works but I am trying to add an error check for when the player 1 or player 2 enters the data.

    Logic -
    User must enter Rock or Paper or Scissors if they enter rock or paper or scissors they will be asked to enter their selection again and be reminded it is case sensitive.

    Problem-
    I have tried to use a while loop but the game never runs and it never makes it to the alerts. I have used an IF statement and the game works but it does not prompt the user to enter their choice again if the first letter is not in capitalized.

    At this point I am lost and any help would be greatly appreciated.

    Code -
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="utf-8" />
    <title> Paper - Rock - Scissors </title>
    <link rel="stylesheet" href="extraCredit.css" />

    <script>

    function playGame(){

    var firstPlayer = document.getElementById("p1").value;
    var secondPlayer = document.getElementById("p2").value;




    if(firstPlayer != "Rock" && firstPlayer != "Paper" && firstPlayer != "Scissors"){
    document.getElementById("repeat").innerHTML= "Enter Rock - Paper - Scissors. **It is case sensitive**";

    alert(firstPlayer);
    }

    if(secondPlayer != "Rock" && secondPlayer != "Paper" && secondPlayer != "Scissors"){
    document.getElementById("repeat").innerHTML= "Enter Rock - Paper - Scissors. **It is case sensitive**";

    alert(secondPlayer);
    }


    if(firstPlayer === secondPlayer){
    document.getElementById("repeat").innerHTML= "tie";
    }else{
    if(firstPlayer === "Paper" && secondPlayer === "Rock" || firstPlayer === "Rock" && secondPlayer === "Scissors" || firstPlayer === "Scissors" && secondPlayer === "Paper"){
    document.getElementById("repeat").innerHTML= "First Player Wins";
    }else{
    document.getElementById("repeat").innerHTML= "Second Player Wins";
    }
    }


    }

    </script>


    </head>
    <body>


    <h1> Paper - Rock - Scissors</h1>
    <p> Enter Paper Rock or Scissors. ***It is case sesonsitive***.</p>
    <h3><img src="rock-paper-scissors.jpg" alt="Rock-Paper-Scissors" /></h3>
    <h4 id = "repeat">&nbsp;</h4>



    player 1: <input id = "p1" type="text" name="firstPlayer">
    player 2: <input id = "p2" type="text" name="secondPlayer">
    <input onclick = "playGame()" type="submit" value="Submit">



    <footer class="footer">
    <p> <medium> Choose Your Weapon Image: Take from www.prlog.org.</medium></p>
    <p><small>&copy; 2013 Mark C Lowrey. All Rights Reserved.</small></p>

    </footer>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    What about Lizard and Spock? :P

    index.html
    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Paper - Rock - Scissors</title>
    		<link rel="stylesheet" href="extraCredit.css" />
    
    		<script type="text/javascript">
    
    			function playGame()
    			{
    				var
    					firstPlayer  = document.getElementById('p1').value,
    					secondPlayer = document.getElementById('p2').value,
    					repeat       = document.getElementById('repeat');
    
    				switch (({
    
    					Rock    : {Rock : 3, Paper : 2, Sissors : 1},
    					Paper   : {Rock : 1, Paper : 3, Sissors : 2},
    					Sissors : {Rock : 2, Paper : 1, Sissors : 3}
    
    				}[firstPlayer] || {})[secondPlayer] || 0) {
    
    					case 1  : repeat.innerHTML = 'First Player Wins'; break;
    					case 2  : repeat.innerHTML = 'Second Player Wins'; break;
    					case 3  : repeat.innerHTML = 'Tie'; break;
    					default : repeat.innerHTML = '<b style="color: red;">Enter Rock - Paper - Scissors. **It is case sensitive**</b>'; break;
    
    				}
    			}
    
    		</script>
    
    	</head>
    	<body>
    
    		<h1>Paper - Rock - Scissors</h1>
    		<p>Enter Paper Rock or Scissors. ***It is case sesonsitive***.</p>
    		<h3><img src="rock-paper-scissors.jpg" alt="Rock-Paper-Scissors" /></h3>
    		<h4 id = "repeat">&nbsp;</h4>
    
    		player 1: <input id = "p1" type="text" name="firstPlayer" />
    		player 2: <input id = "p2" type="text" name="secondPlayer" />
    		<input onclick = "playGame();" type="submit" value="Submit" />
    
    		<footer class="footer">
    			<p><medium>Choose Your Weapon Image: Take from www.prlog.org.</medium></p>
    			<p><small>&copy; 2013 Mark C Lowrey. All Rights Reserved.</small></p>
    		</footer>
    
    	</body>
    </html>
    Last edited by bionoid; 11-19-2013 at 01:14 PM.
    JavaScript: Learn | Validate | Compact

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,205
    This is a repeat of another post on the same subject and IMHO is more of a homework question.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    or (the Martian approach):

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Paper - Rock - Scissors </title>
    <link rel="stylesheet" href="extraCredit.css" />
    <script>
    var keywords=['Paper','Rock','Scissors'],
    firstWins=['PaperRock','RockScissors','ScissorsPaper'],
    msg=['','Enter Rock - Paper - Scissors. **It is case sensitive**','tie','First Player Wins','Second Player Wins'],
    cols=['#000','Crimson','Green','Darkorange'];
    
    function doc(id){return document.getElementById(id);}
    function message(n){doc("repeat").innerHTML=msg[n];}
    function col(obj,n){obj.style.color=cols[n];}
    
    function playGame(){
    message(0);
    var fP=doc("p1").value,sP=doc("p2").value,spn1=doc("p1").previousSibling,spn2=doc("p2").previousSibling;
    col(spn1,0);col(spn2,0);
    if(keywords.indexOf(fP)==-1){message(1);doc("p1").value='';doc("p1").focus();col(spn1,1);return;}
    if(keywords.indexOf(sP)==-1){message(1);doc("p2").value='';doc("p2").focus();col(spn2,1);return;}
    if(fP===sP){message(2);col(spn1,3);col(spn2,3);return;}
    var sum=fP+sP;
    if(firstWins.indexOf(sum)!=-1){message(3);col(spn1,2);col(spn2,3);}
    else{message(4);col(spn1,3);col(spn2,2);}
    }
    
    window.onload=function(){doc('go').onclick=playGame;}
    </script>
    </head> 
    <body>
    <h1>Paper - Rock - Scissors</h1>
    <p> Enter Paper Rock or Scissors. ***It is case sesonsitive***.</p>
    <h3><img src="rock-paper-scissors.jpg" alt="Rock-Paper-Scissors" /></h3>
    <h4 id = "repeat">&nbsp;</h4>
    <span>player 1:</span><input id="p1" type="text" name="fP" />
    <span>player 2:</span><input id="p2" type="text" name="sP" />
    <input id="go" type="button" value="Submit" />
    <footer class="footer">
    <p> <medium> Choose Your Weapon Image: Take from www.prlog.org.</medium></p>
    <p><small>&copy; 2013 Mark C Lowrey. All Rights Reserved.</small></p>
    </footer>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    hahaha, I just realised... I spelt "Scissors" wrong flipping everywhere
    I blame copy-and-paste! lol

    I like the colours Padonak
    JavaScript: Learn | Validate | Compact

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    when I was in school, even a simple calculator was a rarity ... I envy today's students
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Nov 2013
    Posts
    5

    Bionoid - I have a couple questions

    Bionoid,

    First thank you. Can you (or anyone else who reads this) please answer some question?


    1) In your switch statement are the numbers 1, 2 ,3 tied to the case numbers?
    I have written switch statements but it has always been more linear roughly like I have roughly outline below.
    Switch()
    case 1:

    break;

    case2:

    break;
    2) Can you please explain this statement? - [firstPlayer] || {})[secondPlayer] || 0) -or do you have link I can read to help better understand this?

    Regards,

    <MCL

  8. #8
    Join Date
    Nov 2013
    Posts
    5
    I posted two time because I did not see I had to wait for my post to be reviewed and thought I did something wrong. This was the first time I posted to any forum on this site. The help is appreciated.

  9. #9
    Join Date
    Nov 2013
    Posts
    5
    Hopefully your teachers taught you better back then. I feel my foundation is not solid...yet.

    Can someone here point me to a good book or site to learn JavaScript? JQuery? I know it takes time but if I was about to find simple examples on different uses I hope to be able to gain the confidence and knowledge to code.

    Thank you.

  10. #10
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    In the example I am using an object for the First Players list of possible options, and for each option there is a child object for the Second Players possibilities.

    Code:
    {
    
    	Rock     : {Rock : 3, Paper : 2, Scissors : 1},
    	Paper    : {Rock : 1, Paper : 3, Scissors : 2},
    	Scissors : {Rock : 2, Paper : 1, Scissors : 3}
    
    }
    Accessing object members are handled the same way as an array, using either dot notation or []. Because I'm using a variable (firstPlayer|secondPlayer) the [] method must be used.

    Code:
    {key : 'value'}.key                 // 'value'
    {key : 'value'}.one                 // undefined
    {key : 'value'}.one || 'default'    // 'default'
    
    {key : 'value'}['key']              // 'value'
    {key : 'value'}['one']              // undefined
    {key : 'value'}['one'] || 'default' // 'default'
    If you request an object member that does not exist 'undefined' will be returned. Using the || operator will return the first True based value.

    -------

    Code:
    {MAIN_OBJECT}[firstPlayer] || {}
    The code above means I want to retrieve the object by index `firstPlayer`, but if you don't find it return a blank object instead {}.

    Code:
    {FIRST_PLAYER_OBJECT}[secondPlayer] || 0
    From there I request the `secondPlayer` member value from the first players object, or default to 0 if it wasn't found. The reason I pass a default blank object {} from the first player is because it would cause an error accessing a member from `undefined`.

    Code:
    {Rock : {Paper : 1}}['Rock']['Paper'] // 1
    So an overview without defaulting values using || {} and || 0, it's really just a multi-dimensional object.
    Last edited by bionoid; 11-21-2013 at 01:23 AM.
    JavaScript: Learn | Validate | Compact

  11. #11
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    thank you very much for the explanation
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  12. #12
    Join Date
    Nov 2013
    Posts
    5
    bionoid,

    Thank you for the explanation.

  13. #13
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    You're more than welcome.
    JavaScript: Learn | Validate | Compact

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles