Home > Back-end >  If statements not working in rock paper scissors game in javascript
If statements not working in rock paper scissors game in javascript

Time：12-03

So I'm making a rock, paper, scissors game using html,css and javascript but it doesn't work properly because it only says draw when I choose the same options for both of the drop down lists but it doesn't say anything when I choose different options but it should say who wins. Here is my html code:

$("#game").submit(function(e) {
  e.preventDefault();
});

function play(cars1, cars2) {
  let result = document.querySelector('.result');
  let player1 = document.getElementById('cars1');
  let PLAYER1 = player1.value;
  let player2 = document.getElementById('cars2');
  let PLAYER2 = player2.value;
  let playeronename = document.getElementById('playeronename')
  let name1 = playeronename.value;
  let playertwoname = document.getElementById('playertwoname')
  let name2 = playertwoname.value;

  if (PLAYER1 === PLAYER2) {
    result.textContent = "Draw"

  }
  if (PLAYER1 === "Paper") {
    if (PLAYER2 === "Rock") {
      result.textContent = `${name1} wins`;
    } else {
      if (PLAYER2 === "Scissors") {
        result.textContent = `${name2} wins`;
      }
    }


    if (PLAYER1 === "Scissors") {
      if (PLAYER2 === "Rock") {
        result.textContent = `${name2} wins`;
      } else {
        if (PLAYER2 === "Paper") {
          result.textContent = `${name1} wins`;
        }
      }


    }


  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="game">
  <table>
    <tr>
      <td style="padding:10px"><label style="color:#FF0000">Player one name:</label></td>

      <td style="padding:10px"><input type="text" name="playeronename" id="playeronename" placeholder="Player one name" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
      </td>
    </tr>
    <tr>
      <td style="padding:10px"><label style="color:#FF0000" for="cars">Choose rock,paper or
                            scissors:</label></td>

      <td style="padding:10px">
        <select name="cars1" id="cars1" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
          <option value="Rock">Rock</option>
          <option value="Paper">Paper</option>
          <option value="Scissors">Scissors</option>

        </select>
      </td>
    </tr>
    <tr>
      <td style="padding:10px"><label style="color:#FF0000">Player two name:</label></td>

      <td style="padding:10px"><input type="text" name="playertwoname" id="playertwoname" placeholder="Player two name" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
      </td>
      <tr>
        <td style="padding:10px"><label style="color:#FF0000" for="cars">Choose rock,paper or
                            scissors:</label></td>

        <td style="padding:10px">
          <select name="cars2" id="cars2" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
            <option value="Rock">Rock</option>
            <option value="Paper">Paper</option>
            <option value="Scissors">Scissors</option>

          </select>
        </td>
      </tr>
      <tr>
        <td style="padding:10px"><button style="background-color:#D4D4D4; color:#FCFF00; padding:10px 15px 10px 15px;width:70px;border-color:#ff0000;border-width:2px" type="button" onclick="play(cars1,cars2)">Play</button></td>

      </tr>

  </table>
</form>

<div style="color:#FF0000;padding:10px" class="result"></div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

So what is wrong with my code? What have I done wrong?

CodePudding user response：

You should use code formatters to make less mistakes.

Here is your code with formatted.


$("#game").submit(function (e) {
  e.preventDefault();
});

function play(cars1, cars2) {
  let result = document.querySelector(".result");
  let player1 = document.getElementById("cars1");
  let PLAYER1 = player1.value;
  let player2 = document.getElementById("cars2");
  let PLAYER2 = player2.value;
  let playeronename = document.getElementById("playeronename");
  let name1 = playeronename.value;
  let playertwoname = document.getElementById("playertwoname");
  let name2 = playertwoname.value;

  // If both are same it is draw
  if (PLAYER1 === PLAYER2) {
    result.textContent = "Draw";
  }

  if (PLAYER1 === "Paper") {
    // If PLAYER 1 === PAPER AND PLAYER 2 === ROCK
    if (PLAYER2 === "Rock") {
      result.textContent = `${name1} wins`;
    } else {
      // If PLAYER 1 === PAPER AND PLAYER 2 === Scissors
      if (PLAYER2 === "Scissors") {
        result.textContent = `${name2} wins`;
      }
    }

    // This if statement is unreachable
    // Because as you see this if statement is covered by PLAYER === PAPER statement
    // So we should move it out of this if statement
    if (PLAYER1 === "Scissors") {
      if (PLAYER2 === "Rock") {
        result.textContent = `${name2} wins`;
      } else {
        if (PLAYER2 === "Paper") {
          result.textContent = `${name1} wins`;
        }
      }
    }
  }
}

I made an implementation with your way. There are so many ways to do this better. But to lighten your mistake, I implemented with your way.


$("#game").submit(function (e) {
  e.preventDefault();
});

function play(cars1, cars2) {
  let result = document.querySelector(".result");
  let player1 = document.getElementById("cars1");
  let PLAYER1 = player1.value;
  let player2 = document.getElementById("cars2");
  let PLAYER2 = player2.value;
  let playeronename = document.getElementById("playeronename");
  let name1 = playeronename.value;
  let playertwoname = document.getElementById("playertwoname");
  let name2 = playertwoname.value;

  // If both are same it is draw
  if (PLAYER1 === PLAYER2) {
    result.textContent = "Draw";
  }

  // If PLAYER1 === PAPER
  // PLAYER2 can be Rock or Scissors
  if (PLAYER1 === "Paper") {
    // IF PLAYER2 === ROCK
    // PLAYER1 wins
    if (PLAYER2 === "Rock") {
      result.textContent = `${name1} wins`;

      // IF PLAYER2 === Scissors
      // PLAYER2 wins
    } else {
      result.textContent = `${name2} wins`;
    }

    // If PLAYER1 === Scissors
    // PLAYER2 can be Rock or Paper
  } else if (PLAYER1 === "Scissors") {
      
    // IF PLAYER2 === ROCK
    // PLAYER2 wins
    if (PLAYER2 === "Rock") {
      result.textContent = `${name2} wins`;

      // IF PLAYER2 === PAPER
      // PLAYER1 wins
    } else {
      result.textContent = `${name1} wins`;
    }

    // If PLAYER1 === Rock
    // PLAYER2 can be Scissors or Paper
  } else {

    // IF PLAYER2 === Scissors
    // PLAYER1 wins
    if (PLAYER2 === "Scissors") {
      result.textContent = `${name1} wins`;

      // IF PLAYER2 === Paper
      // PLAYER2 wins
    } else {
      result.textContent = `${name2} wins`;
    }
  }
}

CodePudding user response：

You are indeed only evaluating anything whenever player1 chose Paper. However evaluating the result in endless cascading if-else-statements you should consider using another approach, maybe like this one:

const winnerMap = {
    'Scissors': 'Paper',
    'Paper': 'Rock',
    'Rock':'Scissors'
}

$("#game").submit(function (e) {
    e.preventDefault();
});


function play(cars1, cars2) {
//...query stuff
if (PLAYER1 === PLAYER2) {
   result.textContent = "Draw"
} else if(winnerMap[PLAYER1] == PLAYER2) {
    result.textContent = `${PLAYER1} wins`;
} else {
    result.textContent = `${PLAYER2} wins`;
}

}

CodePudding user response：

Actually, your code indentation is awful. See the answer below.

$("#game").submit(function (e) {
    e.preventDefault();
});

    function play(cars1, cars2) {
    let result = document.querySelector('.result');
    let player1 = document.getElementById('cars1');
    let PLAYER1 = player1.value;
    let player2 = document.getElementById('cars2');
    let PLAYER2 = player2.value;
    let playeronename = document.getElementById('playeronename')
    let name1 = playeronename.value;
    let playertwoname = document.getElementById('playertwoname')
    let name2 = playertwoname.value;

        if (PLAYER1 === PLAYER2) {
          result.textContent = "Draw"
        }else if (PLAYER1 === "Paper") {
            if (PLAYER2 === "Rock") {
                result.textContent = `${name1} wins`;
            }else if(PLAYER2 === "Scissors") {
                  result.textContent = `${name2} wins`;              
            }else  result.textContent ="Draw";
        }else if(PLAYER1 === "Rock") {
            if (PLAYER2 === "Scissors") {
                result.textContent = `${name1} wins`;
            }else if(PLAYER2 === "Paper") {
                  result.textContent = `${name2} wins`;              
            }else  result.textContent ="Draw";
        }else{         
            if (PLAYER2 === "Paper") {
                result.textContent = `${name1} wins`;
            }else if(PLAYER2 === "Rock") {
                  result.textContent = `${name2} wins`;              
            }else  result.textContent ="Draw";
        } 
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="game">
            <table>
                <tr>
                    <td style="padding:10px"><label style="color:#FF0000">Player one name:</label></td>

                    <td style="padding:10px"><input type="text" name="playeronename" id="playeronename"
                            placeholder="Player one name"
                            style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
                    </td>
                </tr>
                <tr>
                    <td style="padding:10px"><label style="color:#FF0000" for="cars">Choose rock,paper or
                            scissors:</label></td>

                    <td style="padding:10px"> <select name="cars1" id="cars1"
                            style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
                            <option value="Rock">Rock</option>
                            <option value="Paper">Paper</option>
                            <option value="Scissors">Scissors</option>

                        </select></td>
                </tr>
                <tr>
                    <td style="padding:10px"><label style="color:#FF0000">Player two name:</label></td>

                    <td style="padding:10px"><input type="text" name="playertwoname" id="playertwoname"
                            placeholder="Player two name"
                            style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
                    </td>
                <tr>
                    <td style="padding:10px"><label style="color:#FF0000" for="cars">Choose rock,paper or
                            scissors:</label></td>

                    <td style="padding:10px"> <select name="cars2" id="cars2"
                            style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
                            <option value="Rock">Rock</option>
                            <option value="Paper">Paper</option>
                            <option value="Scissors">Scissors</option>

                        </select></td>
                </tr>
                <tr>
                    <td style="padding:10px"><button
                            style="background-color:#D4D4D4; color:#FCFF00; padding:10px 15px 10px 15px;width:70px;border-color:#ff0000;border-width:2px"
                            type="button" onclick="play(cars1,cars2)">Play</button></td>

                </tr>

            </table>
        </form>

        <div style="color:#FF0000;padding:10px" class="result"></div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I'd suggest a simpler approach

const m = ['rock', 'scissors', 'paper'];

function turn(movep1, movep2) {
   let result;
   if (movep1 === movep2) { 
      result = 'Draw';
   }
   else {
      result = ({
         [m[0]]: m[1],
         [m[1]]: m[2],
         [m[2]]: m[0]
      }[movep1] === movep2)? 
         'Player 1 wins' : 'Player 2 wins';
   }
   return result;
}

/* let's simulate a game of 7
   m[0] = rock, m[1] = scissors, m[2] = paper */

/* moves of player 1 */
let mp1 = [m[0], m[1], m[2], m[2], m[0], m[1], m[0]];
/* moves of player 2 */
let mp2 = [m[1], m[2], m[1], m[0], m[0], m[0], m[2]];

let out = '';
for (let i = 0; i < mp1.length; i  ) {
   out  = `<h2>P1 [${mp1[i]}] Vs. P2 [${mp2[i]}]</h2>`;
   out  = `<span>${turn(mp1[i], mp2[i])}</span>`;
}

document.body.innerHTML = out;
h2 {
   border-top: 1px #d8d8d8 solid;
   font: 1.6rem Arial;
   color: #689;
   padding-top: 1rem;
}
span {
   font: 1rem Arial;
   color: yellowgreen;
}
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/Backend/213959.html

Prev:How do I get the ID of the clicked button when using ClipboardJS?
Next:How to have 2 variable size divs side by side, with one on the right
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding