个人中心
gpt4 book ai didi

javascript - 编写石头、剪刀、布游戏

转载 作者：行者123 更新时间：2023-12-03 10:34:56 42 4
gpt4 key购买 nike

我正在制作一个小剪刀石头布游戏，我以为我已经完美地计划了一切，但由于某种原因，当你尝试玩时什么也没有发生。

基本上，有三张图像，一 block 石头、一张纸和一些剪刀，然后你单击一个。使用我输入的代码，计算机会生成一个随机值，并将该值转换为石头、布或剪刀。当玩家点击图像时，它也会将玩家的选择设置为石头、布或剪刀。然后 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 代码没有运行。如果是这样，我怎样才能让它这样做？

最佳答案

您的代码存在一些问题:

  1. 您的点击处理程序未附加到 DOM 元素，因为您尚未调用 convertUserChoice()。只需删除该功能即可运行。
  2. 使用=而不是==。需要的是赋值而不是比较。
  3. 您需要为 computerChoice 和 checkChoise 创建函数，以便在需要时调用它们。
  4. 当然，正如评论中提到的，Math 需要大写。

请在此 jsFiddle 中找到您的代码及以下。

<小时/>

更新

您可以通过使用检查对象来改善您的获胜检查。该对象存储用户的每个获胜情况。例如如果用户选择 rock，则 WinningCombinations['rock'] 将返回值 scissors，如果 computerChoice 是 scissors，则比较将获胜返回 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>

关于javascript - 编写石头、剪刀、布游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29042069/

42 4 0
文章推荐： javascript - 可以动态创建 getJSON url 字符串吗？
文章推荐： javascript - 多个javascript子程序的实时DOM显示
文章推荐： javascript - 使用 jQuery .load() 加载的内容不起作用
文章推荐： javascript - 一个简单的 JavaScript 计算，用于在表单字段中显示结果
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com