[英]Programming a rock, paper, scissors game
我正在做一个石头剪刀布游戏,我认为我的计划很完美,但是由于某些原因,当您尝试玩游戏时什么也没发生。
基本上,有三个图像,一块岩石,一张纸和一些剪刀,然后单击一个。 使用我输入的代码,计算机将生成一个随机值,并将该值转换为石头,纸张或剪刀。 当玩家单击图像时,也会将玩家的选择设置为石头,纸或剪刀。 然后,javascript将运行一些if else语句来比较这两个选择,并确定获胜者。
码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rock Paper Scissors</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
font-family: Roboto, Arial;
}
.choose img {
width: 150px;
margin: 20px;
}
</style>
</head>
<body>
<div class="choose" align="center">
<h2 id="question">Rock, paper, or scissors?"</h2>
<img src="http://img2.wikia.nocookie.net/__cb20141120133208/epicrapbattlesofhistory/images/4/4b/A_Rock!.gif" id="rock"><img src="http://www.clipartpal.com/_thumbs/pd/education/paper_sheet.png" id="paper"><img src="http://www2.fiskars.com/var/fiskars_amer/storage/images/frontpage2/sewing-quilting/products/scissors-and-sharpeners/the-original-orange-handled-scissors-8/16933-6-eng-US/The-Original-Orange-Handled-Scissors-8_product_main.png" id="scissors">
</div>
<script>
var computerChoice = math.random();
var userChoice = null;
//Change randomly generated number to rock, paper, or scissors
if (computerChoice < .33) {
computerChoice == "rock";
} else if (computerChoice < .66) {
computerChoice == "paper";
} else {
computerChoice == "scissors";
};
//Set userChoice variable to rock, paper, or scissors
function convertUserChoice() {
$('#rock').click(function() {
userChoice == "rock";
});
$('#paper').click(function() {
userChoice == "paper";
});
$('#scissors').click(function() {
userChoice == "scissors";
});
};
//Compare computerChoice with userChoice, decide who wins
if (userChoice == computerChoice) {
alert ("Tie!");
} else if (userChoice == "rock") {
if (computerChoice == "scissors") {
alert ("You win!");
} else {
alert ("You lose.");
};
} else if (userChoice == "paper") {
if (computerChoice == "rock") {
alert ("You win!");
} else {
alert ("You lose.");
};
} else if (userChoice == "scissors") {
if (computerChoice == "paper") {
alert ("You win!");
} else {
alert ("You lose");
};
};
</script>
</body>
</html>
以下是指向实际html页面的链接: https : //747d6108ac1130fc3601936220515b351efca1a4.googledrive.com/host/0B4rWYiw5-JZtfjJpT2M0WUNRRGtWQ250RElDc2QxRUc2aEdzajFERWkzVUVTd0pkNRP
我认为问题在于,当用户单击图像时,标有“比较computerChoice与userChoice,决定谁获胜”的js代码没有运行。 如果是这样,我怎么做呢?
您的代码中存在一些问题:
convertUserChoice()
。 只需删除该功能,它将起作用。 =
代替==
。 需要分配,而不是比较。 computerChoice
和checkChoise
创建函数,以便可以在需要时调用它们。 Math
大写是必需的。 请在下面的jsFiddle中找到您的代码。
更新
您可以通过使用支票对象来改善中奖支票。 对象为用户存储每个获胜情况。 例如,如果用户选择了rock,那么winningCombinations['rock']
将返回值scissors
,如果computerChoice
是剪刀,则这是一种获胜情况,比较将返回true,并且字符串win
将成为结果。 (请参见下面的更新代码。)
这比您的if / else条件容易。
var computerChoice = null, userChoice = null; var newComputerChoice = function () { computerChoice = Math.random(); //Change randomly generated number to rock, paper, or scissors if (computerChoice < .33) { computerChoice = "rock"; } else if (computerChoice < .66) { computerChoice = "paper"; } else { computerChoice = "scissors"; }; console.log('pc choice: ', computerChoice); }; //Set userChoice variable to rock, paper, or scissors //function convertUserChoice() { $('.choose>img').click(function () { var id = $(this).attr('id'); userChoice = id.substring(0, id.length); //#rock --> remove # console.log('user choice: ', userChoice); newComputerChoice(); checkChoice(); }); var checkChoice = function () { var message = function(msgType) { var msgTypes = ['win', 'lose'], index = msgTypes.indexOf(msgType), format = ( index != -1 ) ? 'You %1$s!': 'Tie!'; alert(sprintf(format, msgTypes[index])); }; var winningCombinations = { // userchoice: computerchoice rock: 'scissors', // you win paper: 'rock', // you win scissors: 'paper' // you win }; var result; //Compare computerChoice with userChoice, decide who wins if (userChoice == computerChoice) { message('tie'); } else { result = ( winningCombinations[userChoice] == computerChoice ) ? 'win': 'lose'; message(result); } };
body { font-family: Roboto, Arial; } .choose img { width: 150px; margin: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="choose" align="center"> <h2 id="question">Rock, paper, or scissors?"</h2> <img src="http://img2.wikia.nocookie.net/__cb20141120133208/epicrapbattlesofhistory/images/4/4b/A_Rock!.gif" id="rock"> <img src="http://www.clipartpal.com/_thumbs/pd/education/paper_sheet.png" id="paper"> <img src="http://www2.fiskars.com/var/fiskars_amer/storage/images/frontpage2/sewing-quilting/products/scissors-and-sharpeners/the-original-orange-handled-scissors-8/16933-6-eng-US/The-Original-Orange-Handled-Scissors-8_product_main.png" id="scissors"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.