编写石头、纸、剪刀游戏

Posted 2023-05-09

技术标签:

【中文标题】编写石头、纸、剪刀游戏【英文标题】：Programming a rock, paper, scissors game 【发布时间】：2015-05-16 12:22:40 【问题描述】：

我正在做一个小石头剪刀布游戏，我以为我把一切都计划得很完美，但由于某种原因，当你尝试玩的时候什么都没有发生。

基本上，有三个图像，一块石头，一张纸和一些剪刀，然后单击一个。使用我输入的代码，计算机生成一个随机值，并将该值转换为石头、纸或剪刀。当玩家点击图像时，它也会将玩家的选择设置为石头、纸或剪刀。然后 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-JZtfjJpT2M0WUNRRGtWQ250RElDc2QxRUc2aEdzajFERWkzVUVTd0pkNlY3LXc/RPS.html

我认为问题在于，当用户单击图像时，标有“将 computerChoice 与 userChoice 进行比较，决定谁获胜”的 js 代码没有运行。如果是这样，我怎样才能做到这一点？

【问题讨论】：

删除函数convertUserChoice 声明但保留内容。由于该函数从未被调用，因此事件侦听器从未注册。应该是$('#scissors').click(function() userChoice = "scissors"; ); 您还会收到控制台错误 Uncaught ReferenceError: math is not defined 尝试使用大写 m 的数学，Math 每次点击你设置用户选择，然后你需要触发一个比较功能我相信 @dojs 当您按照 codecademy 教程进行操作时，您最终会得到这样的结果。 :) 我儿子现在正在学习和做同样的代码。我注意到可怕的 computerChoice 变量 - 像拇指酸痛一样突出。 【参考方案1】：

你的代码有一些问题：

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>

【讨论】：

以上是关于编写石头、纸、剪刀游戏的主要内容，如果未能解决你的问题，请参考以下文章

python-编写石头剪刀布小游戏

Python Tkinter实战案例，搞定剪刀石头布小游戏，就是这么强！

团队-游戏石头剪子布-需求分析

python小游戏（剪刀石头布）

团队-石头剪刀布-需求分析