Javascript Rock Paper Scissors 游戏语法问题 [关闭]

Question

我正在开发一个石头剪刀布游戏，但在显示获胜者时遇到了问题。我认为这与我的语法有关，但我研究它太久了，我需要一些新的眼光。我所有的代码都在这里 enter code herehttps://jsfiddle.net/akosuak/L03spu70/1/。

Answer 1

function showResult()

没有正确关闭它缺少一个}

//已编辑

我注意到您从未将 userChoice 设置为新值，因此我为您更改了该值。

另一个人使用正则表达式的解决方案非常酷，但我认为我认为这并不是真正需要的。

他改变你的语法的方式很酷，我认为你应该多看看。

这是小提琴 https://jsfiddle.net/L03spu70/8/

我没有添加语法更改，但现在可以使用

Answer 2

@Bob-Thomas 是正确的，在 showResult() 末尾添加缺少的 } 似乎可以解决问题：

var $rockButton = $('#rock').text();
var $paperButton = $('#paper').text();
var $scissorsButton = $('#scissor').text();
var $resetButton = $('#reset');
var $resultsText = $('#results-text');

// var rpsArray = ['Rock', 'Paper', 'Scissors']

var userChoice = 'Rock' || 'Paper' || 'Scissors';
var computerChoice = 'Rock' || 'Paper' || 'Scissors';


function setComputerChoice() {
  computerChoice = Math.random();

  if (computerChoice < 0.34) {
    computerChoice = 'Rock';
  } else if (computerChoice <= 0.67) {
    computerChoice = 'Paper';
  } else {
    computerChoice = 'Scissors';
  }
  $('#computer-text').text(computerChoice);
};

var deactivateButton = function(currentButton) {
  var buttonid = "#" + currentButton;
  var buttons = ['#rock', '#scissor', '#paper'];
  buttons.forEach(function(button) {
    if (button != buttonid) {
      $(button).css({
        'visibility': 'hidden'
      })
    };
  });
};


function showResult() {
    if (userChoice == computerChoice) {
      $('#results-text').text('Tie');
    };

    if (userChoice == 'Rock') {
      if (computerChoice == 'Paper')
        $('#results-text').text('Paper Wins!!');
    } else {
      if (computerChoice == 'Scissors') {
        $('#results-text').text('Rock Wins!!');
      };

      if (userChoice == 'Scissors') {
        if (computerChoice == 'Rock') {
          $('#results-text').text('Rock Wins!!');
        } else {
          if (computerChoice == 'Paper') {
            $('#results-text').text('Scissors Wins!!');
          }
        }
      }

    }
  } //end of function

$(function() {
  $('#rock').on('click', function() {
    $('#user-text').text('Rock');
    deactivateButton(this.id);
    setComputerChoice();
    showResult();
  })

  $('#scissor').on('click', function() {
    $('#user-text').text('Scissors');
    deactivateButton(this.id);
    setComputerChoice();
    showResult();
  })

  $('#paper').on('click', function() {
    $('#user-text').text('Paper');
    deactivateButton(this.id);
    setComputerChoice();
    showResult();
  })

  $('#reset').on('click', function() {
    $('#user-text').text('');
    $('#computer-text').text('');
    $('#results-text').text('');

    $('#rock').css({
      'visibility': 'visible'
    });
    $('#paper').css({
      'visibility': 'visible'
    });
    $('#scissor').css({
      'visibility': 'visible'
    });

  })


})

body {
  font-family: sans-serif;
  background: #5D6377;
  color: #fff;
}
#game-container {
  margin: 0 auto;
  margin-top: 5%;
}
#rock,
#paper,
#scissor,
#reset {
  width: 200px;
  height: 100px;
  border: 2px solid #fff;
  border-radius: 3px;
  padding: 10px;
  cursor: pointer;
}
#rock:hover,
#paper:hover,
#scissor:hover,
#reset:hover {
  width: 200px;
  height: 100px;
  border: 2px solid red;
  border-radius: 3px;
  padding: 10px;
  cursor: pointer;
}
#button-group {
  text-align: center;
  margin: 0 auto;
}
#choice-group {
  text-align: center;
  margin-left: 25%;
}
#user-choice,
#computer-choice {
  border: 2px solid #fff;
  border-radius: 3px;
  width: 300px;
  height: 300px;
  float: left;
  margin-top: 5%;
  margin-right: 5%;
}
#results {
  clear: both;
  text-align: center;
}
#user-text,
#computer-text {
  margin-top: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="game-container">

  <div id="button-group">
    <span id="rock">Rock</span>
    <span id="paper">Paper</span>
    <span id="scissor">Scissors</span>
    <span id="reset">Reset</span>
  </div>

  <div id="choice-group">
    <div id="user-choice">
      <h1 id="user-text"></h1>
    </div>

    <div id="computer-choice">
      <h1 id="computer-text"></h1>
    </div>
  </div>

  <div id="results">
    <h1 id="results-text"></h1>
  </div>
</div>