我正在尝试理解Javascript中的这段Netsted对象

我正在YouTube上学习一个关于用Javascript构建项目的教程。这段代码应该创建一个Rock，Paper&剪刀游戏。我理解这个代码的大部分内容。但我面临的挑战是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>

"变量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函数。发生这种情况是因为每个img都有onclick="rpsGame(this)"

改进

我想对代码进行一些质量改进。

1。每次调用decideWinner时，都会重新定义rpsDatabase。这是不必要的，因为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，我们可以使用它来减少randToRpsInt和numberToChoice中的代码重复。相反，我们最终得到了一个简单的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、0或0.5。考虑这个替代方案-

output	编码
获胜	1
损失	-1
tie	0

从您的代码中可以清楚地看到，有三个可点击的图像，当用户点击其中任何一个图像时，我们调用一个方法rpsGame，并将整个图像对象作为参数传递。这个rpsGame方法调用另一个方法decateWinner，通过传递两个参数来决定谁是赢家，一个参数由你选择(如石头、纸或剪刀(，另一个参数则由一些随机方法选择，如numberToChoice。最后，根据deceeWinner方法返回的结果，如0、0.5或1，您可以调用finalMessage方法，并根据finalMessage中给出的条件打印任何结果。

相关内容

最新更新

热门标签：