two player rock paper scissors in javascript

Question

I was playing with some javascript when I thought "Lets make a simple game!"
So I started, and now I'm stuck and I could use your help :p
So this is the 'plan' I made:

Ask user1's name var name1 = prompt("what is your name?");
Ask user2's name var name2 = prompt("what is your name?");
Ask user1's choice var user1 = prompt("rock, paper, scissors");
ask user2's choice var user2 = prompt("rock, paper, scissors");

display their choices:

if (user1 === "rock") {
    document.write("<b>rock</b>");
} else if (user1 === "scissors") {
    document.write("<b>scissors</b>");
} else if (user1 === "paper") {
    document.write("<b>paper</b>");
} else {
    alert("DUDE THAT AINT NO OPTION YO");
}

document.write(" vs ");

if (user2 === "rock") {
    document.write("<b>rock</b>");
} else if (user2 === "scissors") {
    document.write("<b>scissors</b>");
} else if (user2 === "paper") {
    document.write("<b>paper</b>");
} else {
    alert("DUDE THAT AINT NO OPTION YO");
}

document.write(" = ");

calculate outcome:

if (user1 === user2) {
    document.write("tie, try again!");
}

if (user1 === "rock") {
    if (user2 === "scissors") {
        document.write("yay " + name1 + "<b> wins!</b>");
    } else if (user2 === "rock") {
        document.write("tie...");
    } else {
        document.write("yay " + name2 + "<b> wins!</b>");
    }
} else if (user1 === "paper") {
    if (user2 === "rock") {
        document.write("yay " + name1 + "<b> wins!</b>");
    } else if (user2 === "rock") {
        document.write("yay " + name2 + "<b> wins!</b>");
    } else {
        document.write("tie...");
    }
} else if (user1 === "scissors") {
    if (user2 === "scissors") {
        document.write("tie...");
    } else if (user2 === "paper") {
        document.write("yay " + name1 + "<b> wins!</b>");
    } else {
        document.write("yay " + name2 + "<b> wins!</b>");
    }
} else {
    document.write("wut");
}

Here is where I get stuck: I want to create a button to restart from step 3. Step 1 and 2 must NOT be repeated! How do I do this?

Thanks in advance!

(code may be messy up there ^ so here's the jsfiddle link: http://jsfiddle.net/robinvandernoord/c0n2wuuf/)

PS: should I use document.write, or something else instead?
//update I used alert() instead, and it's beter, in my opinion.

No offense, but your English is much better than your JS. Talking about having no functions, no app structure, tons of repeating code, using document.write... etc. You could've done it easily if you have, say, a function for init (where you setup the player) and a function for a game turn. You'd call the game turn function after the init and after the turn ends (or if you wish to use replay button, simply attach the game turn function to the button's click event). — Shomz, Nov 16 '14 at 11:08
Iknow my js is bad that's why I'm trying to learn and improve it! — , Nov 16 '14 at 14:46
You can use an element and modify its `textContent` or `innerHTML`. Try to avoid using `document.write` completely. See some of the answers here: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Shomz, Nov 16 '14 at 16:23

score 1 · Accepted Answer · answered Nov 16 '14 at 11:15

Firstly I would put the main game part (everything excepts asking for names) into a function. This will let you just call the function to play another game.

To ask if they want to play you can use a confirm box to ask them. This will return true or false. Just put this at the end of the function and if they click OK, call the function again:

function playGame()
{
    var user1 = prompt("rock, paper, scissors");
    var user2 = prompt("rock, paper, scissors");
    if (user1 === "rock") {
        document.write("<b>rock</b>");
    } else if (user1 === "scissors") {
        document.write("<b>scissors</b>");
    } else if (user1 === "paper") {
        document.write("<b>paper</b>");
    } else {
        alert("DUDE THAT AINT NO OPTION YO");
    }
    
    document.write(" vs ");
    
    if (user2 === "rock") {
        document.write("<b>rock</b>");
    } else if (user2 === "scissors") {
        document.write("<b>scissors</b>");
    } else if (user2 === "paper") {
        document.write("<b>paper</b>");
    } else {
        alert("DUDE THAT AINT NO OPTION YO");
    }
    
    document.write(" = ");
    
    if (user1 === user2) {
        document.write("tie, try again!");
    }
    
    if (user1 === "rock") {
        if (user2 === "scissors") {
            document.write("yay " + name1 + "<b> wins!</b>");
        } else if (user2 === "rock") {
            document.write("tie...");
        } else {
            document.write("yay " + name2 + "<b> wins!</b>");
        }
    } else if (user1 === "paper") {
        if (user2 === "rock") {
            document.write("yay " + name1 + "<b> wins!</b>");
        } else if (user2 === "rock") {
            document.write("yay " + name2 + "<b> wins!</b>");
        } else {
            document.write("tie...");
        }
    } else if (user1 === "scissors") {
        if (user2 === "scissors") {
            document.write("tie...");
        } else if (user2 === "paper") {
            document.write("yay " + name1 + "<b> wins!</b>");
        } else {
            document.write("yay " + name2 + "<b> wins!</b>");
        }
    } else {
        document.write("wut");
    }
    
    var playAgain = confirm("Play Again?");
    if(playAgain) {
        // just run the game again
        playGame();
    }
}

// ask for their names
var name1 = prompt("what is your name?");
var name2 = prompt("what is your name?");

// run the first game
playGame();

The next step would be to move the prompts into <input> elements on the screen, because popup prompts are horrible.

Okay I tested It. But now it asks "try again" before you've seen the result. Should I put the result in a popup too or could I make a button to play again in stead of a prompt? — , Nov 16 '14 at 15:00

score 0 · Answer 2 · answered Nov 16 '14 at 11:03

0

you simply put steps 3-6 in a loop and add a new step in this loop where you print out "To continue press any key" and wait for user input.

answered Nov 16 '14 at 11:03

Mastombord

33
5

Okay but how do I do that last part? The 'press any key' part? – Nov 16 '14 at 11:05
And should I use while or for? – Nov 16 '14 at 11:07
and the 'press any key' thing is simply `var junk= prompt("press any key to continue")` – Mastombord Nov 16 '14 at 11:09
And I don't prefer loops because if anything goes wrong my browser will crash – Nov 16 '14 at 14:47

two player rock paper scissors in javascript

2 Answers2