带图片的JavaScript / jQuery石头，纸或剪刀游戏

Question

因此，即时通讯试图使用一些JavaScript和jQuery代码创建剪刀石头布游戏。

我正在尝试遵循一些游戏玩法规则：

创建一个循环，为用户提供3个与计算机的选择相对应的选择。 每次，您将提示用户选择“石头”，“纸”或“剪刀”（不是通过键入单词，而是通过“选择”图像）。
然后，计算机将随机选择石头，纸张或剪刀。 高亮显示您选择的石头，纸或剪刀的图片，并显示一个单独的图像，显示计算机选择的石头，纸或剪刀。

在3个回合的最后，我想为用户显示一个记分牌，其中显示平局，胜负。

到目前为止，这是我的代码。 到目前为止，我已经尝试过让用户单击石头纸或剪刀，然后将其与计算机随机生成的结果进行比较。 我现在的问题是屏幕上没有弹出警报。 这告诉我，用于比较每个选择的if语句运行不正常。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type = "text/javascript">
$(function() {

for (i=0; i < 3; i++)
{


    var computerChoice = null;
    var userChoice = null;



    $('#rock').click(function(){
        userChoice = "rock";
    });
    $('#paper').click(function(){
        userChoice = "paper";
    });
    $('#scissors').click(function(){
        userChoice = "scissors";
    });


    function newComputerChoice ()
    {
        computerChoice = Math.floor(Math.random() * 3) + 1;
        //take the random number from computerChoice above and assign it rock paper or scissors.
        if (computerChoice == 1)
            {
                computerChoice = "rock";
            }
        else if (computerChoice == 2)
            {
                computerChoice = "paper";
            }
        else 
            {
                computerChoice = "scissors";
            }

    }

    if (userChoice == computerChoice){
        alert ("Tie!");
    } else if (userChoice == "rock" && computerChoice == "scissors"){
        alert ("You win!");
    } else if (userChoice == "paper" && computerChoice == "rock"){
        alert ("You win!");
    } else if (userChoice == "scissors" && computerChoice == "paper"){
        alert ("You win!");
    } else if (computerChoice == "rock" && userChoice == "scissors"){
        alert ("Sorry, you lose.")
    } else if (computerChoice == "paper" && userChoice == "rock"){
        alert ("Sorry, you lose.")
    } else if (computerChoice == "scissors" && userChoice == "paper"){
        alert ("Sorry, you lose.")
    }


}  

}
</script>

</head>
<body>
<h1>Make your choice:</h1>

<img src="rock.jpg" name="rock" id = "rock"/>
<img src="paper.jpg" name="paper" id = "paper"/>
<img src="scissors.jpg" name="scissors" id = "scissors"/>

<h1>Computer Chose:</h1>



</body>
</html>

最后，我需要用相同的图像显示计算机选择，但是我不确定如何一次只显示一个图像，具体取决于随机选择的图像。

Answer 1

这是我的解决方案，应满足您的需求。

    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
    <h1>Make your choice:</h1>

    <img src="rock.jpg" name="rock" id = "rock"/>
    <img src="paper.jpg" name="paper" id = "paper"/>
    <img src="scissors.jpg" name="scissors" id = "scissors"/>

    <h1>Computer Chose:</h1>
    <script language=javascript>
        var userChoice = null;
        var computerChoice = null;
        $(document).ready(
            function ()
            {
                 $('#rock').click(function(){
                    userChoice = "rock";
                    newComputerChoice();
                    computResult();
                });
                $('#paper').click(function(){
                    userChoice = "paper";
                    newComputerChoice ();
                    computResult();
                });
                $('#scissors').click(function(){
                    userChoice = "scissors";
                    newComputerChoice ();
                    computResult();
                });
            }
        );

        function newComputerChoice ()
        {
            computerChoice = Math.floor(Math.random() * 3) + 1;
            //take the random number from computerChoice above and assign it rock paper or scissors.
            if (computerChoice == 1)
                {
                    computerChoice = "rock";
                }
            else if (computerChoice == 2)
                {
                    computerChoice = "paper";
                }
            else 
                {
                    computerChoice = "scissors";
                }

        }
        function computResult()
        {
            var result; 
            if (userChoice == computerChoice){
                result="Tie!";
            } else if (userChoice == "rock" && computerChoice == "scissors"){
                result="You win!";
            } else if (userChoice == "paper" && computerChoice == "rock"){
                result="You win!";
            } else if (userChoice == "scissors" && computerChoice == "paper"){
                result="You win!";
            } else if (computerChoice == "rock" && userChoice == "scissors"){
                result="Sorry, you lose.";
            } else if (computerChoice == "paper" && userChoice == "rock"){
                result="Sorry, you lose.";
            } else if (computerChoice == "scissors" && userChoice == "paper"){
                result="Sorry, you lose.";
            }
            var table=document.getElementById("result");
            var row=table.insertRow(table.rows.length);
            var cell=row.insertCell(row.cells.length);
            var img=document.createElement("img");
            img.src=document.getElementById(computerChoice).src;
            $(cell).append(img);
            cell=row.insertCell(row.cells.length);
            img=document.createElement("img");
            img.src=document.getElementById(userChoice).src;
            $(cell).append(img);
            cell=row.insertCell(row.cells.length);
            cell.innerHTML=result;
        }



    </script>
    <table id="result">
        <tr>
            <td>Computer Choice</td>
            <td>Your Choice</td>
            <td>Result</td>
        </tr>   
    </table>
    </body>
    </html>

Answer 2

要仅显示计算机选择，只需删除以下语句。

        cell=row.insertCell(row.cells.length);
        img=document.createElement("img");
        img.src=document.getElementById(userChoice).src;
        $(cell).append(img);
        cell=row.insertCell(row.cells.length);
        cell.innerHTML=result;

带图片的JavaScript / jQuery石头，纸或剪刀游戏

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-08-15 01:51:02

解决方案2
0 2017-08-15 03:01:07

带图片的JavaScript / jQuery石头，纸或剪刀游戏

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-08-15 01:51:02

解决方案2 0 2017-08-15 03:01:07

解决方案1
0 已采纳 2017-08-15 01:51:02

解决方案2
0 2017-08-15 03:01:07