Can you please help me with rock paper scissors game javascript and some HTML?

Question

Hi everyone, I am trying to make a rock paper scissors game that does all the things in the images placed above. I can only post two links here but if you would like more images please let me know. The game is supposed to start with no images showing until something is selected. I have some code created but its not working out well for me. I would really really appreciate it if you could help me with this! Below is my code.

<body>
<div class="game">
        <div class= "choice">
            <input name="player" type="radio" id="rock"
                    value = "0"  checked="checked"/> <img src="rock.png" width="268" height="291" alt=""/>ROCK <br />


            <input name="player" type="radio" id="paper"
                value = "1" data-photo-url="http://www.clker.com/cliparts/Y/t/o/V/q/F/paper-md.png"/>
                                         PAPER <br />


            <input name="player"  type="radio" id="scissors"
                value = "2" data-photo-url="http://www.clker.com/cliparts/8/B/i/M/Y/Z/scissors-md.png" /> SCISSORS <br />
            <button id = "play">
                    PLAY
            </button>
        </div>

         <div class="players">
            <div>
                <H3>PLAYER</H3> <img class="player-pick" src="scissors-purple.png" width="268" height="291" alt=""/></div>
           <div>
               <H3>COMPUTER</H3><img class="computer-pick" src="http://www.clker.com/cliparts/Y/t/o/V/q/F/paper-md.png"></img> 
           </div>
        </div>

        <div class = "answers">
            <li>YOUR WINS:<input type="text" id= "output" size="5" /></li>
            <li>MY WINS:<input type="text" id = "output" size="5" /></li>
            <li>DRAWS:<input type="text" id = "output" size="5" /></li>
            <button id = "newgame">
                    NEW GAME
            </button>
        </div>
       <h3 class="instructions">Make your pick and click PLAY</h3>

    </div>
    <script src = "projectt.js"> </script>
</body>

This is the CSS

.game {
    width: 100%;
    min-width: 500px;
}
.game > div {
    float: left;
}
.choice {
    width: 25%;
}
.players {
    width: 50%;    
}
.answers {
    width: 25%;
}

.players > div {
    width: 50%;
    float: left;
    min-height: 200px;
}
h3 {
    text-align: center;
}

.instructions {
    clear: both;
}

.players img {
    display: block;
    max-width: 100%;
}

I am having the biggest problem with the javascript. This is what I have:

var choiceArray = ["paper", "rock", "scissors"];
var computerChoice = Math.floor(3*Math.random());
console.log(computerChoice);
if(computerChoice=0){
    computerChoice="rock";
}else if(computerChoice>1){
    computerChoice="paper";
}else{
    computerChoice="scissors";
}

console.log(computerChoice);

The problem is that the images aren't changing and I don't know if they should be in the HTML or javascript. The text boxes also aren't outputting any numbers and the play button isn't working yet. I know I have to use a document.getelementbyid(‘play’).onclick = function(){ for the buttons but it gives me an error — Rowena, Mar 20 '15 at 14:04

score 3 · Answer 1 · answered Mar 20 '15 at 14:01

3

At first, i would suggest you change

if(computerChoice=0){

to

if(computerChoice==0){

answered Mar 20 '15 at 14:01

Tien Nguyen

599
4
13

score 1 · Answer 2 · edited May 23 '17 at 12:01

1

Your javascript is not right. It should be like this

var computerChoice = Math.floor(3*Math.random());
console.log(computerChoice);

if(computerChoice==0){
    computerChoice="rock";
}else if(computerChoice==1){
    computerChoice="paper";
}else{
    computerChoice="scissors";
}

Also, if you implement this way, you don't need the variable choiceArray.

Another thing I noticed is that you get your images from the websites. You can keep them in the local. It would be faster.

For the image not changing have a look at this post.

edited May 23 '17 at 12:01

Community

1
1

answered Mar 20 '15 at 14:11

stolen_leaves

1,441
11
19

Thanks, I did that. Do you know what I have to put inside the "document.getelementbyid(‘play’).onclick = function(){ " in order for the play button to work? – Rowena Mar 20 '15 at 14:15
Call a javascript function which gets the computer choice (your function) and changes the image src (in the same way done in the link I gave you). Then compare the result. If its the same, post draw, or compute who wins and post it. – stolen_leaves Mar 20 '15 at 14:19

score 1 · Answer 3 · answered Mar 20 '15 at 14:20

Your if statements are completely wonky. You're using an assignment in the first if instead of a comparison. When you're comparing variables in javascript use "===" or "!==". (Yes, 3 equals. 2 does a type conversion before comparing, which usually isn't what you want.)

The second case, you're checking if it's > 1, not if it's equal to 1. Which is true only if computerChoice === 2. This should be a check also.

But, instead of doing all that checking, you could simply access the array option at the random index you're creating.

var computerChoice = choiceArray[Math.floor(3*Math.random())];

or

var choiceIndex = Math.floor(3*Math.random())
var computerChoice = choiceArray[choiceIndex];

if you want to be a bit more explicit.

Why access array positions by performing if-else checks on an array index?

score 1 · Answer 4 · answered Mar 20 '15 at 14:30

var choiceArray = ["paper", "rock", "scissors"];
var computerChoice = Math.floor(3*Math.random());
console.log(computerChoice);
switch(parseInt(computerChoice)) {
case 0:
    computerChoice="rock";
    break;
case 1:
    computerChoice="paper";
    break;
case 2:
    computerChoice="scissors";
    break;
default:
    console.log('how it just happened?');
}

console.log(computerChoice);

Try that way? It more readable, that elsif, i guess.

Can you please help me with rock paper scissors game javascript and some HTML?

4 Answers4