我试图理解javascript中的这段netsted对象

oiopk7p5  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(397)

我正在关注youtube上关于用javascript构建项目的教程。这段代码应该用来创建一个石头、布和剪刀的游戏。我理解这段代码的大部分内容。但我的挑战是decidewinner函数如何工作。变量yourscore如何将值传递到rpsdatabase?这些函数是如何调用的?

//Rock, Paper, Scissors

function rpsGame(yourChoice) {
    var humanChoice, botChoice, results, message;

    humanChoice = yourChoice.id;
    botChoice = numberToChoice(randToRpsInt());
    results = decideWinner(humanChoice, botChoice);
    console.log(botChoice);
}

function randToRpsInt () {
    return Math.floor(Math.random() * 3);
}

function numberToChoice (number) {
    return ['rock', 'paper', 'scissors'][number];
}

function decideWinner (yourChoice, computerChoice) {
    var rpsDatabase = {
        'rock': {'scissors': 1, 'rock': 0.5, 'paper': 0},
        'paper': {'rock': 1, 'paper': 0.5, 'scissors': 0},
        'scissors': {'paper': 1, 'scissors': 0.5, 'rock': 0},
    };

    var yourScore = rpsDatabase[yourChoice][computerChoice];
    var computerScore = rpsDatabase[computerChoice][yourChoice];

    return [yourScore, computerScore];
}

function finalMessage([yourScore, computerScore]) {
    if (yourScore === 0) {
        return {'message': 'You lost!', 'color': 'red'};
    } else if (yourScore === 0.5) {
        return {'message': 'You tied!', 'color': 'yellow'}; 
    } else {
        return {'message': 'You won!', 'color': 'green'};
    }
}
.container-game {
    border: 1px solid black;
    width: 75%;    
    margin: 0 auto;
    text-align: center;
}

.flex-box-weapons {
    display: flex;
    border: 1px solid black;
    padding: 10px;
    flex-wrap: wrap;
    justify-content: space-around;
}

.flex-box-weapons img:hover {
    box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="content/css/style.css">    
    <title>RPS</title>
</head>
<body>
    <div class="container-game">
        <h2>Challenge 3: Rock, Paper, Scissors</h2>
        <div class="flex-box-weapons" id="flex-box-weapons-div">
            <img id="Rock" alt="Rock" src="http://images.clipartpanda.com/rock-clipart-clipart-harvestable-resources-rock.png" width="150" height="150" onclick="rpsGame(this)">
            <img id="Paper" alt="Paper" src="
http://images.clipartpanda.com/paper-clipart-nexxuz-Loose-Leaf-Paper.png" width="150" height="150" onclick="rpsGame(this)">
            <img id="Scissors" alt="Scissors" src="https://thumbs.dreamstime.com/b/female-hand-sign-victory-sign-peace-sing-scissors-vector-color-flat-illustration-isolated-white-background-web-83128345.jpg" width="150" height="150" onclick="rpsGame(this)">
        </div>
    </div>

    <script src="content/Js/script.js">

    </script>
</body>
</html>
1l5u6lss

1l5u6lss1#

“变量是如何产生的 yourScore 将值传递到 rpsDatabase ?"
它没有—— yourScore 是在数据库中查找嵌套值的结果。
可以使用变量查找对象的属性,方法是 [] 符号-

const myObject = { hello: "world", foo: "bar" }
const key = "hello"
console.log(myObject[key])
// "world"

你可以给很多人排序 [][]... 查找嵌套属性的步骤-

const myObject = { hello: { world: "earth" }}
const key1 = "hello"
const key2 = "world"
console.log(myObject[key1][key2])
// "earth"

“这些函数是如何调用的?”
这个 rpsGame 单击其中一个图像时调用函数。发生这种情况是因为 imgonclick="rpsGame(this)" 改进
我想为代码提供一些质量改进。
一, rpsDatabase 每次 decideWinner 被称为。这是不必要的,因为 rpsDatabase 永远不要改变-

const rpsDatabase = {
  rock: {scissors: 1, rock: 0.5, paper: 0},
  paper: {rock: 1, paper: 0.5, scissors: 0},
  scissors: {paper: 1, scissors: 0.5, rock: 0},
}

function decideWinner (yourChoice, computerChoice) {
  var yourScore = rpsDatabase[yourChoice][computerChoice]
  var computerScore = rpsDatabase[computerChoice][yourChoice]
  return [yourScore, computerScore]
}

2.通过分离 rpsDatabase ,我们可以使用它来减少中的代码重复 randToRpsIntnumberToChoice . 相反,我们以一个简单的 randomChoice 作用-

function randomChoice () {
  const rand = Math.floor(Math.random() * 3)
  // no need to redefine ["rock", "paper", "scissors"] on each call!
  return Object.keys(rpsDatabase)[rand]
}

3.选择用于编码赢、输或平局的值是任意的: 1 , 00.5 . 考虑这个替代方案
结果编码Win1Loss-1tie0
这个新的 rpsDatabase 将写为-

const rpsDatabase = {
  rock: {scissors: 1, rock: 0, paper: -1},
  paper: {rock: 1, paper: 0, scissors: -1},
  scissors: {paper: 1, scissors: 0, rock: -1},
};

现在不需要测试任意数字的相等性,而是允许您编写 finalMessage 以更自然的方式使用比较 >< -

function finalMessage ([yourScore, computerScore]) {
  if (yourScore > computerScore)
    return {message: 'You won!', color: 'green'}
  else if (computerScore > yourScore)
    return {message: 'You lost!', color: 'red'}
  else 
    return {message: 'You tied!', color: 'yellow'}
}

或使用 switch . 也许你更喜欢这个表格-

function finalMessage ([yourScore, computerScore]) {
  switch (true) {
    case yourScore > computerScore:
      return {message: 'You won!', color: 'green'}
    case computerScore > yourScore:
      return {message: 'You lost!', color: 'red'}
    default:
      return {message: 'You tied!', color: 'yellow'}
  }
}

4.使用addeventlistener而不是 onclick 属性这使得html和javascript的分离更加清晰,从而提高了两者的可移植性-

<form id="game">
  <button type="button" value="rock">🪨</button>
  <button type="button" value="paper">📃</button>
  <button type="button" value="scissors">✂️</button>
  <br>
  <output name="result"></output>
</form>
const game = document.forms.game

// attach `rpsGame` to `click` event on each `button`
for (const button of game.querySelectorAll("button"))
  button.addEventListener("click", rpsGame)

演示
下面是一个功能演示,其中包含了上述建议-

const game = document.forms.game

const rpsDatabase = {
  rock: {scissors: 1, rock: 0, paper: -1},
  paper: {rock: 1, paper: 0, scissors: -1},
  scissors: {paper: 1, scissors: 0, rock: -1},
}

function rpsGame (event) {
  const humanChoice = event.target.value
  const botChoice = randomChoice()
  const result = decideWinner(humanChoice, botChoice)
  game.result.value = JSON.stringify(finalMessage(result))
}

function randomChoice () {
  const rand = Math.floor(Math.random() * 3)
  return Object.keys(rpsDatabase)[rand]
}

function decideWinner (yourChoice, computerChoice) {
  const yourScore = rpsDatabase[yourChoice][computerChoice]
  const computerScore = rpsDatabase[computerChoice][yourChoice]
  return [yourScore, computerScore]
}

function finalMessage ([yourScore, computerScore]) {
  if (yourScore > computerScore)
    return {message: 'You won!', color: 'green'}
  else if (computerScore > yourScore)
    return {message: 'You lost!', color: 'red'}
  else 
    return {message: 'You tied!', color: 'yellow'}
}

for (const button of game.querySelectorAll("button"))
  button.addEventListener("click", rpsGame)
<form id="game">
  <button type="button" value="rock">🪨</button>
  <button type="button" value="paper">📃</button>
  <button type="button" value="scissors">✂️</button>
  <br>
  <output name="result"></output>
</form>
xyhw6mcr

xyhw6mcr2#

从您的代码中可以很清楚地看到,有三个可单击的图像,当用户单击其中一个图像时,我们调用一个方法rpsgame并将整个图像对象作为参数传递。此rpsgame方法调用另一个decidewinner方法,通过传递两个参数来决定谁是赢家,一个是您选择的参数(如石头、布或剪刀),另一个是通过一些随机方法(如numbertochoice)选择的参数。最后,根据decidewinner方法(如0、0.5或1)返回的结果,您可以调用finalmessage方法并根据finalmessage方法中给定的条件打印结果。

相关问题