我正在关注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>
2条答案
按热度按时间1l5u6lss1#
“变量是如何产生的
yourScore
将值传递到rpsDatabase
?"它没有——
yourScore
是在数据库中查找嵌套值的结果。可以使用变量查找对象的属性,方法是
[]
符号-你可以给很多人排序
[][]...
查找嵌套属性的步骤-“这些函数是如何调用的?”
这个
rpsGame
单击其中一个图像时调用函数。发生这种情况是因为img
有onclick="rpsGame(this)"
改进我想为代码提供一些质量改进。
一,
rpsDatabase
每次decideWinner
被称为。这是不必要的,因为rpsDatabase
永远不要改变-2.通过分离
rpsDatabase
,我们可以使用它来减少中的代码重复randToRpsInt
及numberToChoice
. 相反,我们以一个简单的randomChoice
作用-3.选择用于编码赢、输或平局的值是任意的:
1
,0
或0.5
. 考虑这个替代方案结果编码Win1Loss-1tie0
这个新的
rpsDatabase
将写为-现在不需要测试任意数字的相等性,而是允许您编写
finalMessage
以更自然的方式使用比较>
及<
-或使用
switch
. 也许你更喜欢这个表格-4.使用addeventlistener而不是
onclick
属性这使得html和javascript的分离更加清晰,从而提高了两者的可移植性-演示
下面是一个功能演示,其中包含了上述建议-
xyhw6mcr2#
从您的代码中可以很清楚地看到,有三个可单击的图像,当用户单击其中一个图像时,我们调用一个方法rpsgame并将整个图像对象作为参数传递。此rpsgame方法调用另一个decidewinner方法,通过传递两个参数来决定谁是赢家,一个是您选择的参数(如石头、布或剪刀),另一个是通过一些随机方法(如numbertochoice)选择的参数。最后,根据decidewinner方法(如0、0.5或1)返回的结果,您可以调用finalmessage方法并根据finalmessage方法中给定的条件打印结果。