javascript 中的数字棒球游戏

Question

我正在用 javascript 制作数字棒球游戏。

根据我编写的代码，我在控制台中得到了随机的 3 个数字。

我想使用play功能来比较计算机随机显示的

randomIndexArray

和用户输入的值。

但是，当我将 3 个数字放入输入框中后，我可以在控制台中看到任何数字。

另外，我想输入像 123 这样的数字，并以数组形式显示在控制台上，如

[1, 2, 3]

我该如何解决这个问题？

let inputNumber = document.getElementById("input-number");
let goButton = document.getElementById("go-button");
let userInput = document.getElementById("user-input")
let resultArea = document.getElementById("result-area");
let triesArea = document.getElementById("tries-area");
let gameOver = false;

goButton.addEventListener("click", play);

let randomIndexArray = [];
for (i = 0; i < 3; i++) {
  randomNum = Math.floor(Math.random() * 10);
  if (randomIndexArray.indexOf(randomNum) === -1) {
    randomIndexArray.push(randomNum)
  } else {
    i--
  }
};
console.log(randomIndexArray);

function play() {
  let userValue = userInput.value;
  let strike = 0;
  let ball = 0;

  for (let i = 0; i < randomIndexArray.length; i++) {
    let index = userValue.indexOf(randomIndexArray[i]);
    if (index > -1) {
      strike++;
    } else {
      ball++;
    }

  }

}
play();

<div>number baseball game</div>
<div id="tries-area">tries: 5times</div>
<div id="result-area">result: 1strike 1ball</div>
<input id="user-input" type="number" placeholder="input 3 numbers among 0 to 9">
<button id="go-button">Go!</button>

Answer 1

由于我对棒球不熟悉，如果我弄错了，请告诉我。据我从您提供的简短描述中了解到，您需要以下内容：

1. 用户在输入中填写 3 个数字，以逗号或空格分隔，例如。

   1,2,3

   或

   1 2 3

2. 将逗号分隔/空格分隔的字符串拆分为数组
3. 检查用户输入中是否存在随机生成的数字，并相应地更新

   strike

   或

   ball

   。

在输入上使用

type="number"

属性时，您需要提供一个数字。由于您需要一串分隔的数字，因此您需要设置

type="text"

并随后将输入转换为数组。

您可以使用

split()

方法轻松地将字符串拆分为数组。作为

split

方法的参数，您提供用于分割字符串的字符。该字符将从结果数组中删除。

看看下面我的解决方案，如果您需要任何其他说明，请通过评论告诉我。

let inputNumber = document.getElementById("input-number");
let goButton = document.getElementById("go-button");
let userInput = document.getElementById("user-input")
let resultArea = document.getElementById("result-area");
let triesArea = document.getElementById("tries-area");
let gameOver = false;
let strike = 0;
let ball = 0;

goButton.addEventListener("click", play);

function randomArray() {
  let randomIndexArray = [];
  
  for (i = 0; i < 3; i++) {
    randomNum = Math.floor(Math.random() * 10);
    if (randomIndexArray.indexOf(randomNum) === -1) {
      randomIndexArray.push(randomNum)
    } else {
      i--
    }
  };
  
  return randomIndexArray;
}

function play() {
  let userValue = userInput.value.split(','); // split by comma
  // let userValue = userInput.value.split(' '); // split by space
  
  let randomIndexArray = randomArray();
  
  for (let i = 0; i < randomIndexArray.length; i++) {
    let index = userValue.indexOf(String(randomIndexArray[i])); // items in userValue array are strings so we need to convert randomIndexArray[i] to a String 
    if (index > -1) {
      strike++;
    } else {
      ball++;
    }
  }
  
  console.log('randomArray', randomIndexArray)
  console.log('userValue', userValue)
  console.log('strike', strike)
  console.log('ball', ball)
}

<div>number baseball game</div>
<div id="tries-area">tries: 5times</div>
<div id="result-area">result: 1strike 1ball</div>
<input id="user-input" type="number" placeholder="input 3 numbers among 0 to 9">
<button id="go-button">Go!</button>