How to stop the loop after same choices?

Question

my code looks something like this, but i have a problem. Whenever the choices are the same the game restarts. After finishing a game I get an "undefined" alert, because the startGame() function runs again with the parameters from the first round (where the choices were the same).

I am new to the word of JS and would like to keep this as simple as possible. Can someone help me by providing a solution on how to stop the 'undefined'?

// the game starts here
function startGame() {
  // the user
  var userChoice = prompt("Do you choose rock, paper or scissors?");

  // if invalid input
  while ((userChoice != "rock") && (userChoice != "paper") && (userChoice != "scissors")) {
    userChoice = prompt("Please select again, this time correctly!");
  }

  alert("You chose " + userChoice);

  // computer
  var computerChoice = Math.random();
  if (computerChoice < 0.34) {
    computerChoice = "rock";
  } else if (computerChoice <= 0.67) {
    computerChoice = "paper";
  } else {
    computerChoice = "scissors";
  }
  alert("Computer pick: " + computerChoice);

  // comparison between user and computer
  var compare = function(choice1, choice2) {

    // if both selections are the same
    if (choice1 == choice2) {
      alert("Tie, restart the game!");
      startGame();
    }

    // if the user selects rock
    else if (choice1 == "rock") {
      if (choice2 == "scissors") {
        return "You have won the game!";
      } else {
        return "LOOOOOSSEEER!";
      }
    }

    // if the user selects scissors
    else if (choice1 == "scissors") {
      if (choice2 == "rock") {
        return "You have won the game!";
      }
    } else {
      return "LOOOOOSSEEER";
    }
  };

  alert(compare(userChoice, computerChoice));
}

// startGame();

Answer 1

You use a recursion here. The startGame() function starts again and the first call of compare() expects a return statement. But in this if clause you have no return statement at all.

// if both selections are the same
if (choice1 == choice2) {
  alert("Tie, restart the game!");
  startGame();
}

You solve this by instead of returning the result just alert withing the if statements. here is a jsfiddle (function call commented):

http://jsfiddle.net/v5poL9cm/

Edit:

Another approach is to return the message in all cases and let the startGame() function have a return statement as well. jsfiddle here (function call commented):

http://jsfiddle.net/65sg7mcL/

Answer 2

I agree with @Escobear! The problem is that you do not return anything from your tie section, but restarts the game. At some point that will come back to you, and try to alert an undefined.

I think I would do something like this:

// comparison between user and computer NOTE: This method is global, but it seemed pointless to redefine it for every game
function compare(choice1, choice2) {
  // if both selections are the same
  if (choice1 == choice2) {
    return -1;
  }

  // if the user selects rock
  else if (choice1 == "rock") {
    if (choice2 == "scissors") {
      return 1;
    }
    return 0;
  }

  // if the user selects scissors
  else if (choice1 == "scissors") {
    if (choice2 == "rock") {
      return 0;
    }
    return 1;
  }

  else if (choice1 == "paper") {
    if (choice2 == "rock") {
      return 1;
    }
    return 0
  }
};

// the game starts here
function startGame() {
  // the user
  var userChoice = prompt("Do you choose rock, paper or scissors?");

  // if invalid input
  while ((userChoice != "rock") && (userChoice != "paper") && (userChoice != "scissors")) {
    userChoice = prompt("Please select again, this time correctly!");
  }

  alert("You chose " + userChoice);

  // computer
  var computerChoice = Math.random();
  if (computerChoice < 0.34) {
    computerChoice = "rock";
  } else if (computerChoice <= 0.67) {
    computerChoice = "paper";
  } else {
    computerChoice = "scissors";
  }
  alert("Computer pick: " + computerChoice);

  var result = compare(userChoice, computerChoice);

  if (result === -1) {
    alert('Tie, restart the game!');
    startGame();
  } else {
    alert(result ? 'You have won the game!' : 'LOOOOOSSSEEER!');
  }
}

startGame();

(I have also corrected some of the logic for winning, and added user input = paper)

Answer 3

$(function () {
    startGame();
});

// the game starts here
function startGame() {
    // the user
    var userChoice = prompt("Do you choose rock, paper or scissors?");

    // if invalid input
    while ((userChoice != "rock") && (userChoice != "paper") && (userChoice != "scissors")) {
        userChoice = prompt("Please select again, this time correctly!");
    }

    alert("You chose " + userChoice);

    // computer
    var computerChoice = Math.random();
    if (computerChoice < 0.34) {
        computerChoice = "rock";
    } else if (computerChoice <= 0.67) {
        computerChoice = "paper";
    } else {
        computerChoice = "scissors";
    }
    alert("Computer pick: " + computerChoice);

    // comparison between user and computer
    var result = compare(userChoice, computerChoice);
    if (result == "1") {
        alert("Tie, restart the game!");
        startGame();
    } else if (result == "2") {
        alert("You have won the game!");
    } else {
        alert("LOOOOOSSEEER");
    }
}

// return 1 -- > Tie
// return 2 -- > You have won
// return 3 -- > LOOOOOSSEEER
function compare(choice1, choice2) {

    // if both selections are the same
    if (choice1 == choice2) {
        return "1";
    }
    // if the user selects rock
    else if (choice1 == "rock") {
        if (choice2 == "scissors") {
            return "2";
        } else {
            return "3";
        }
    }
    // if the user selects scissors
    else if (choice1 == "scissors") {
        if (choice2 == "rock") {
            return "2";
        }
    } else {
        return "3";
    }
};