Question

在这里，我得到了一个完全正常的游戏但是缺少以下内容：

模拟游戏（计算机与计算机）
重启游戏= NOT DONE

我是否需要模拟点击...可能是计算机与计算机的计时器？我是否需要能够将游戏重置为每次游戏完成后页面加载时的状态任何帮助将不胜感激:-)

var module = {
    init: function () {
        this.gameSetup();

    },

    gameSetup: function () {

        var pedra = "img/rock.png";
        var papel = "img/paper.png";
        var tesoura = "img/scissors.png";

        var userChoice;
        var i = 3;
        var computerChoice;

        $(".button").on("click", startup);

        function startup(e) {
            $(".button").off("click");

            userChoice = e.target.id;

            console.info(userChoice);

            compChoice();

            $(".score").hide();
            $('.lose').removeClass('lose');


            countDown();

        };

        function compChoice() {
            computerChoice = Math.random();
            if (computerChoice < 0.34) {
                computerChoice = "rock";
            } else if (computerChoice <= 0.67) {
                computerChoice = "paper";
            } else {
                computerChoice = "scissors";
            }
        };

        function countDown() {
            count();
        };

        function count() {
            $(".result").text(i);
            if (i === 0) {
                results();
            } else {
                i--;
                setTimeout(count, 400);
            }
        };

        function comparar(choice1, choice2) {
            if (choice1 == choice2) {
                $(".result").text("Tie!");
            } else if (
            (choice1 == "rock" && choice2 == "scissors") || (choice1 == "scissors" && choice2 == "paper") || (choice1 == "paper" && choice2 == "rock")) {
                $(".result").text("You win!");
            } else {
                $(".result").text("You lose!").addClass('lose');
            }

        };

        function results() {
            $(".fist").hide();
            $(".score.left." + userChoice).show();
            $(".score.right." + computerChoice).show();

            comparar(userChoice, computerChoice);

            $(".button").on("click", startup);
        };

    }

};



$(document).ready(function () {
    module.init();
});

body, header, section, h1, img, button {
    margin: 0;
    padding: 0;
}

header {
    background: #191919;
    font: 700 2em/1em'Advent Pro', sans-serif;
    line-height: 100px;
    color: #fff;
    text-align: center;
}
header h1 {
    text-transform: uppercase;
    font-size: 36px
}
header h2 {
    text-transform: uppercase;
    font-size: 24px
}
section {
    width: 90%;
    margin: 40px auto 0;
    text-align: center;
    position: relative;
}
section .content {
    width:100%;
    margin:auto;
    display: table;
}
section .content > div {
    display:table-cell;
    width: 50%;
}
section .content > div img {
    max-width: 60%;
    height: auto;
}
section .controlls {
    position: absolute;
    top:0;
    width: 100%;
}
section .controlls h1 {
    color: black;
    margin-bottom:150px;
    font-size: 80px;
    text-transform: uppercase;
    position: absolute;
    text-align: center;
    width: 100%;
}
section .controlls h1.lose {
    color:red;
}
.buttons {
    margin: auto;
    widows: 100%;
    display: table;
    padding-top:130px;
}
button {
    height: 140px;
    width: 140px;
    border:0;
    margin:0;
    outline: none;
    cursor: pointer;
    -webkit-transition: all 0.35s ease-out;
    -moz-transition: all 0.35s ease-out;
    -o-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
    position: relative;
    background-size: 100%;
    /*text-indent: -999em;*/
    display: table-cell;
    box-shadow: 2px 2px 4px #222;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
    margin-left: 15px;
}
button:before {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    left:0;
    height: 140px;
    width: 140px;
 
}
button:after {
    content:"";
    position: absolute;
    z-index: 0;
    top: 0;
    left:0;
    height: 140px;
    width: 140px;
}
button.rock:after {
    background: url(../images/rock.png) 0 0 no-repeat;
    background-size: 100%;
}
button.paper:after {
    background: url(../images/paper.png) 0 0 no-repeat;
    background-size: 100%;
}
button.scissor:after {
    background: url(../images/scissor.png) 0 0 no-repeat;
    background-size: 100%;
}
button:hover {
    -webkit-transform: scale(1.05);
    -mz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
button:first-child {
    margin-left:0:
}
#rock_right, #paper_right, #scissors_right, #rock_left, #paper_left, #scissors_left {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    <div class="content">
        <div>
             <h2 class="">MAN</h2>

            <img src="images/rock.png" class="score left rock" id="rock_left" alt="rock" />
            <img src="images/paper.png" class="score left paper" id="paper_left" alt="paper" />
            <img src="images/scissor.png" class="score left scissors" id="scissors_left" alt="scissor" />
        </div>
        <div>
             <h2 class="">Robot</h2>

            <img src="images/rock.png" class="score right rock" id="rock_right" alt="rock" />
            <img src="images/paper.png" class="score right paper" id="paper_right" alt="paper" />
            <img src="images/scissor.png" class="score right scissors" id="scissors_right" alt="scissor" />
        </div>
    </div>
    <div class="controlls">
         <h1 class="result"></h1>

        <div class="buttons">
            <button class="button clickable rock" id="rock">Rock</button>
            <button class="button clickable paper" id="paper">Paper</button>
            <button class="button clickable scissor" id="scissors">Scissor</button>
        </div>
        <div class="buttons">
            <input type="text" value="reset" id="reset"> 
        </div>
    </div>
</section>

Answer 1

我做对了吗？你问如何重置Timer？尝试将您的计数器（代码中称为i的变量）设置为启动函数中的初始值（在您的情况下为3）。这将重置计时器。我没有看到任何处理计算机与电脑游戏的代码......

Answer 2

您可以更改现有计算机选择以返回值，而不是更新全局/模块级变量：

    function compChoice() {
        computerChoice = Math.random();
        if (computerChoice < 0.34) return "rock";
        if (computerChoice <= 0.67) return "paper";
        return "scissors";
    };

然后你可以重新调用它来获取计算机与计算机的结果并自动点击相应的按钮。

function computerVcomputer() {
    var comp1 = compChoice();
    $("#" + comp1").click();
}

计时器存在一些其他问题，但上面是针对计算机与计算机的问题。

Answer 3

修复计时器问题

if (i === 0) { results(); i=3; }

要重新启动游戏，您只需重新加载页面location.reload();
要做计算机与计算机，你可以添加另一个按钮并在其上放一个事件

var e={}; e.target = Math.floor(Math.random() * 3) + 1; $(".button2").on("click", startup(e));

Answer 4

可能是这样的......

JS小提琴：https://jsfiddle.net/xwt9Lf0c/4/

var module = {
init: function () {
    this.gameSetup();

},

gameSetup: function () {

    var pedra = "img/rock.png";
    var papel = "img/paper.png";
    var tesoura = "img/scissors.png";

    var userChoice;
    var i = 3;
    var computerChoice;

    $("#game").off("click").on("click", reset);
    $(".button").off("click").on("click", startup);
       function demo(e) {                                      
$("#paper").addClass("hoverSimulate").trigger("click");
    }


      function start(e) {                                   
   $(".result").text("");i=3;$(".score").hide();
 }
       function reset(e) {
            if($(e.target).hasClass("start")){
            $("#reset").toggleClass("demo start").val("Start");
                  start();

            }
            else
            {
                demo();
            }

    }
    function startup(e) {
        $(".button").off("click");

        userChoice = e.target.id;

        console.info(userChoice);

        compChoice();

        $(".score").hide();
        $('.lose').removeClass('lose');


        countDown();

    };

    function compChoice() {
        computerChoice = Math.random();
        if (computerChoice < 0.34) {
            computerChoice = "rock";
        } else if (computerChoice <= 0.67) {
            computerChoice = "paper";
        } else {
            computerChoice = "scissors";
        }
    };

    function countDown() {
        count();
    };

    function count() {
        $(".result").text(i);
        if (i === 0) {
            results();
        } else {
            i--;
            setTimeout(count, 400);
        }
    };

    function comparar(choice1, choice2) {
        if (choice1 == choice2) {
            $(".result").text("Tie!");
        } else if (
        (choice1 == "rock" && choice2 == "scissors") || (choice1 == "scissors" && choice2 == "paper") || (choice1 == "paper" && choice2 == "rock")) {
            $(".result").text("You win!");
        } else {
            $(".result").text("You lose!").addClass('lose');
        }
        $("#game").toggleClass("demo start").val("Start");
    };

    function results() {
        $(".fist").hide();
        $(".score.left." + userChoice).show();
        $(".score.right." + computerChoice).show();

        comparar(userChoice, computerChoice);

        $(".button").on("click", startup);
    };

}

};


$(document).ready(function () {
    module.init();
});

Jquery游戏人与计算机需要一个重置按钮

4 个答案: