运行一个随机数生成器在按钮按下

Question

我创建了一个石头剪刀布游戏来学习JS和jQuery。我想弄清楚的是如何在按钮点击时调用相同的函数，这样数字就会改变，从而为游戏提供不同的结果。

我在这里做了一个jsFiddle演示:

https://jsfiddle.net/iKaleb/v1kbxg2g/3/

基本上，在小提琴的例子中，我想点击蓝色框，计算机的选择每次都会改变。compChoice()是随机数生成器，但是当我通过点击按钮再次调用它时，它不会改变计算机的选择。

任何帮助，这将是非常感激!

var player = "Rock";
var computer = compChoice();
function compChoice() {
    var compMath = Math.floor(Math.random() * 3) + 1;
    switch (compMath) {
        case 1: 
            pick = "Rock"
            break;
        case 2:
            pick = "Paper"
            break;
        case 3:
            pick = "Scissors"
            break;
    }
    return pick;
}
function vsChoice() {
    if (player === "Rock") {
        if (computer === "Scissors") {
            console.log("Win.");
        } else if (player === computer) {
            console.log("Tie.");
        } else {
            console.log("Lose.");
        }
    }
    if (player === "Paper") {
        if (computer === "Rock") {
            console.log("Win.");
        } else if (player === computer) {
            console.log("Tie.");
        } else {
            console.log("Lose.");
        }
    }
    if (player === "Scissors") {
        if (computer === "Paper") {
            console.log("Win.");
        } else if (player === computer) {
            console.log("Tie.");
        } else {
            console.log("Lose.");
        }
    }
}
$('#box').on('click', function() {
    console.log("Players Choice: " + player);
    console.log("Computer Choice: " + computer);
    vsChoice();
});

Answer 1

我刚刚编辑了你的js，它正在为我工作

function compChoice() {
    compMath = Math.floor(Math.random() * 3) + 1;
    switch (compMath) {
        case 1: 
            pick = "Rock"
            break;
        case 2:
            pick = "Paper"
            break;
        case 3:
            pick = "Scissors"
            break;
    }
    return pick;
}
function compChoice() {
    var compMath = Math.floor(Math.random() * 3) + 1;
    switch (compMath) {
        case 1: 
            pick = "Rock"
            break;
        case 2:
            pick = "Paper"
            break;
        case 3:
            pick = "Scissors"
            break;
    }
    return pick;
}
function vsChoice() {
    if (player === "Rock") {
        if (computer === "Scissors") {
            console.log("Win.");
        } else if (player === computer) {
            console.log("Tie.");
        } else {
            console.log("Lose.");
        }
    }
    if (player === "Paper") {
        if (computer === "Rock") {
            console.log("Win.");
        } else if (player === computer) {
            console.log("Tie.");
        } else {
            console.log("Lose.");
        }
    }
    if (player === "Scissors") {
        if (computer === "Paper") {
            console.log("Win.");
        } else if (player === computer) {
            console.log("Tie.");
        } else {
            console.log("Lose.");
        }
    }
}
$('#box').on('click', function() {
    player = compChoice();
    computer = compChoice();
    console.log("Players Choice: " + player);
    console.log("Computer Choice: " + computer);
    vsChoice();
});

Answer 2

您需要调用生成选项的函数，而不是每次都显示相同的值:

$('#box').on('click', function() {
    computer = compChoice(); 
    console.log("Players Choice: " + player);
    console.log("Computer Choice: " + computer);
    vsChoice();
});

注意，最好将choice作为参数传递给vsChoice函数，而不是使用全局变量。

Answer 3

你的错误是

您正在打印初始计算值。

试试这样

$('#box').on('click', function() {   
    console.log("Players Choice: " + player);
    console.log("Computer Choice: " + compChoice());
    vsChoice();
});

或

刷新计算值

function compChoice() {
    var compMath = Math.floor(Math.random() * 3) + 1;
    debugger;
    switch (compMath) {
        case 1: 
            pick = "Rock"
            break;
        case 2:
            pick = "Paper"
            break;
        case 3:
            pick = "Scissors"
            break;
    }
computer = pick;
    return pick;
}

<标题> JSFiddle: https://jsfiddle.net/v1kbxg2g/7/