Question

我正在处理一段代码，这段代码是/oceatoon/pen/CGfrj的代码。我试图让它变得更复杂，以便当用户点击他的选择时，所选择的图标将从菜单中消失并显示在左上角的容器中，同时CU的选择将显示在顶部 - 正确的容器。

我尝试了一种更简单的方法，只是让div浮起来。但现在我不知道如何使CPU的选择浮动到右上以及如何重置游戏。如何告诉我的代码哪一个是CPU的选择？我试图创建一个变量

var = cpuChoice 
CpuChoice = gameArea[Math.floor(Math.random() * gameArea.length)];

然后我尝试通过这样做使其浮动：

 cpuChoice.animate({ top:"5px", left:"70px" }, 1500 );

我收到一个错误，cpuChoice.animate不是一个函数，但它在

中

 $('#rock.choice').click(function() {

然后我尝试添加一个重置按钮并创建一个.onclick函数，但它没有做任何事情。正如您将看到的，当您单击纸张时，其他选项将消失，因为我认为我将重置按钮并按顺序显示所有选项。但按钮不起作用。有人有什么建议吗？

这是小提琴 Demo

Answer 1

您可能想尝试这里https://jsfiddle.net/rdLyb79p/33/

以下是javascript代码：

$(document).ready(function() {

    $('.choice').click(function(){
        var $this = $(this);
        var choices = ['rock', 'paper', 'scissors', 'lizard', 'spock'];
        var userChoice = $(this).data("index");
        var cpuChoice = parseInt(Math.random() * 10) % 5; 

        var matchResult = match(choices[userChoice], choices[cpuChoice]);

        $("#blowupUser").html(
            '<div class="choice">\
                <i class="fa fa-hand-rock-o" style="font-size:50px;color:#000;"></i>\
                <span class="color"></span>\
                <span class="name">'+choices[userChoice]+'</span>\
            </div>'
        );

        $("#blowupCPU").html(
            '<div class="choice">\
                <i class="fa fa-hand-rock-o" style="font-size:50px;color:#000;"></i>\
                <span class="color"></span>\
                <span class="name">'+choices[cpuChoice]+'</span>\
            </div>'
        );

        $('#info').html('<h3>You <span class="' + matchResult.toLowerCase() + 's">' + matchResult + '</span></h3>');
    });


    function match(userChoice, cpuChoice) {
        var matchResult = ['lost', 'win', 'tied'];
        var result;

        if(userChoice == 'rock') {
            if (cpuChoice == 'rock') {
                result = 2;
            } else if (cpuChoice == 'spock' || cpuChoice == 'paper') {
                result = 0;
            } else {
                result = 1;
            }
        } else if(userChoice == 'paper') {
            if (cpuChoice == 'paper') {
                result = 2;
            } else if (cpuChoice == 'scissors' || cpuChoice == 'lizard') {
                result = 0;
            } else {
                result = 1;
            }
        } else if(userChoice == 'scissors') {
            if (cpuChoice == 'scissors') {
                result = 2;
            } else if (cpuChoice == 'rock' || cpuChoice == 'spock') {
                result = 0;
            } else {
                result = 1;
            }
        } else if(userChoice == 'lizard') {
            if (cpuChoice == 'lizard') {
                result = 2;
            } else if (cpuChoice == 'rock' || cpuChoice == 'scissors') {
                result = 0;
            } else {
                result = 1;
            }
        } else if(userChoice == 'spock') {
            if (cpuChoice == 'spock') {
                result = 2;
            } else if (cpuChoice == 'paper' || cpuChoice == 'lizard') {
                result = 0;
            } else {
                result = 1;
            }
        } else {
            result = false;
        }

        return matchResult[result];
    }

}); // End $(document).ready

注意：我删除了一些设计和评分。

如何使div在点击时消失，并在Jquery的另一个父级中重新出现？

1 个答案: