Question

我为简单的摇滚，纸和剪刀游戏编写了以下代码。它有效但却给出了意想不到的结果，我无法弄清楚原因。

HTML：

<form action="#" id="form">
<input type="text" id="mypick" placeholder="Rock, paper or scissors?">
<input type="submit" value="Pick" id="button">
</form>

的javascript：

var rock = 0,
paper = 1,
scissors = 2;

function result() {
  var computerPick = Math.floor(Math.random() * 3);
  console.log(computerPick);

  var myPick = document.getElementById('mypick');
  if (myPick == "rock") {
    myPick = 0;
  } else if (myPick == "paper") {
    myPick = 1;
  } else {
    myPick = 2;
  }

  if (myPick === computerPick) {
    alert("The same, try again!");
  } else if (myPick === 0 && computerPick === 1) {
    alert("You lose! Computer had paper!");
  } else if (myPick === 0 && computerPick === 2) {
    alert("You win! Computer had scissors!")
  } else if (myPick === 1 && computerPick === 0) {
    alert("You win! Computer had rock")
  } else if (myPick === 1 && computerPick === 2) {
    alert("You lose! Computer had scissors")
  } else if (myPick === 2 && computerPick === 0) {
    alert("You lose! Computer had rock")
  } else if (myPick === 2 && computerPick === 1) {
    alert("You win! Computer had paper")
  }
  document.getElementById('form').reset();
};

document.getElementById("button").onclick = result;

Answer 1

你只是不使用myPick的真值，因为你写道：

var myPick = document.getElementById('mypick');

获取元素，而不是其值。你应该写：

var myPick = document.getElementById('mypick').value;

所以它确实。

现在，您可以大幅减少代码（同时提高可靠性和可读性）。

编辑：我最好的解决方案

在发布我的第一个答案后（下面仍然可见），我读了@ imsiso的答案，这给了我一个更简单的解决方案的想法。

我的第一个答案中明确详细说明了其中的一些改进，其他一些改进来自@ imsiso的想法，使用<select>而不是<input>，其中我添加了以下更改：< / p>

点击直接执行（不再按钮）
无需检查错误的选择或没有选择（只有3个有效的选择）
无需列出＆＃34;武器＆＃34;在JS中（使用选项的innerHTML）
通过使用结果填充alert()来替换<p>，这样所有游戏都只需点击一下

这是：

＆＃13;

choice.onclick = function() {
  var wins = [0.2, 1.0, 2.1],
      computerPick = Math.floor(Math.random() * 3),
      myPick = +choice.value;
  result.innerHTML = myPick == computerPick ?
    'The same, try again!' :
    'You ' +
      (wins.indexOf(myPick + computerPick / 10) == -1 ? 'lose' : 'win') +
      '! Computer had ' + choice[computerPick].innerHTML + '!';
};

＆＃13;

<select id="choice" style="cursor: pointer;" size="3" multiple autofocus
  title="Click to choose...">
  <option value="0">rock</option>
  <option value="1">paper</option>
  <option value="2">scissors</option>
</select>
<p id="result"></p>

＆＃13;

我的第一个回答（最终版本已弃用）

首先替换：

var rock = 0,
paper = 1,
scissors = 2;

var picks = ['rock', 'paper', 'scissors'];。

然后还替换：

  if (myPick == "rock") {
    myPick = 0;
  } else if (myPick == "paper") {
    myPick = 1;
  } else {
    myPick = 2;
  }

由此：myPick = picks.indexOf(myPick);

并添加第一个控件：

if (myPick == -1) {
  alert('Wrong entry: please enter one of "rock", "paper", or "scissors"!');
  return;
}

最后，您还可以简化计算胜出的方式，因为您可以在下面的完整工作版本中自行分析：

＆＃13;

var picks = ['rock', 'paper', 'scissors'],
    wins = [0.2, 1.0, 2.1];

function result() {
  var computerPick = Math.floor(Math.random() * 3);
  console.log(computerPick);

  var myPick = document.getElementById('mypick').value;
  myPick = picks.indexOf(myPick);
  document.getElementById('form').reset();

  if (myPick == -1) {
    alert('Wrong entry: please enter one of "rock", "paper", or "scissors"!');
    return;
  }
  if (myPick === computerPick) {
    alert("The same, try again!");
    return;
  }
  alert('You ' +
    (wins.indexOf(myPick + computerPick / 10) == -1 ? 'lose' : 'win') +
    '! Computer had ' + picks[computerPick] + '!'
  );
};

document.getElementById("button").onclick = result;

＆＃13;

<form action="#" id="form">
<input type="text" id="mypick" placeholder="Rock, paper or scissors?">
<input type="submit" value="Pick" id="button">
</form>

＆＃13;

Answer 2

这是我认为应该有效的代码。你的错误。

如果您使用提交，那么当您点击时，您的浏览器将会刷新。

此外，无需添加表单标记，因为没有任何请求发送到服务器。

document.getElementById('mypick')将文本框作为对象返回。因此，要获得对象的值，您应该使用document.getElementById('mypick').value

如果用户键入“bla bla”或“Paper”而不是“paper”，该怎么办？然后他们将被视为“摇滚”

还有一些其他的东西，比如使用额外的“;”或使用var来定义您将在函数等中使用的变量。

<HTML>
<head>
<title> best browser game and ever</title>
<script>
function result(){
  var computerPick = Math.floor(Math.random() * 3);
  console.log(computerPick);
  var strs=["Rock","Paper","Scissors"];

  var myPick = document.getElementById('mypick').value;
  if (myPick==-1){
    alert('chooooose!');
  }else{
    var tmp = myPick - computerPick;
    if (top==0){
      alert("The same, try again!");
    }elseif(top==1 || top==-2){
      alert('You Won! Computer choosed:'+strs[computerPick]);
    }elseif(top==-1 || top==2){
      alert('You Lost! Computer choosed:'+strs[computerPick]);
    }else{alert('something is wrong with universe');}
  }
}
</script>
</head>
<body>
<p>If you win this, all hour dreams will come true.</p>
<select Id="mypick">
<option value="-1">choose</option>
<option value="0">R</option>
<option value="1">P</option>
<option value="2">S</option>
</select>
<input Id="kill" type="button" value="kill" onclick="result" />
</body>
</HTML>

岩石，纸张sciccors工作，但没有按计划

2 个答案: