如何打印结果"computer wins“或"user wins”

Question

显然，这将打印出石头/布/剪刀胜利或这是平局。

要达到“石头打败剪刀--电脑赢了！”这样的结果，最好的方法是什么？诸如此类？

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
} console.log("Computer: " + computerChoice);

var compare = function(choice1, choice2) {
    if (choice1 === choice2) {
        return "The result is a tie!";
    } else if (choice1 === "rock") {
        if (choice2 === "scissors") {
            return "rock wins";
        } else {
            return "paper wins";
        }
    } else if (choice1 === "paper") {
        if (choice2 === "rock") {
            return "paper wins";
        } else {
            return "scissors wins";
        }
    } else if (choice1 === "scissors") {
        if (choice2 === "paper") {
            return "scissors wins";
        } else {
            return "rock wins";
        }
    }
}

compare(userChoice,computerChoice);

我有一些函数和变量的知识，我认为足以解决这个问题--我就是搞不懂。我只有不到8小时的javascript经验。

还有，这不是我的作业，我刚上完codecademy的一课，想知道这一点。

Answer 1

我会考虑改变程序中的字符串，而不仅仅是“剪刀获胜”，我会把它改为“剪刀节拍(在这里插入相应的选择)-玩家获胜！”

您可以通过试错调试或遵循嵌套的if和else的逻辑来找到相应的选择。

希望这能有所帮助;)

Answer 2

下面是一种通过附加到DOM的简单方法。

此示例使用do {} while ()循环不断询问玩家是否想玩游戏，如果想玩，则询问他的选择。然后，它将结果(平局或玩家/ cpu获胜)显示到页面上的output元素。这种方法很好，因为它为你记录了比赛，所以如果你需要做一个“五局三胜”，你可以看到谁最终赢了！

jQuery jsFiddle示例： http://jsfiddle.net/edahqpho/3/

纯javascript jsFiddle示例：http://jsfiddle.net/edahqpho/1/

HTML

<div id='output'></div>

Javascript (纯JS示例)

function play() {
    var userChoice = prompt("Do you choose rock, paper or scissors?");
    var computerChoice = Math.random();
    if (computerChoice < 0.34) {
        computerChoice = "rock";
    } else if (computerChoice <= 0.67) {
        computerChoice = "paper";
    } else {
        computerChoice = "scissors";
    }
    console.log("Computer: " + computerChoice);
    return compare(userChoice, computerChoice);
}
var compare = function (choice1, choice2) {
    if (choice1 === choice2) {
        return "The result is a tie!";
    } else if (choice1 === "rock") {
        if (choice2 === "scissors") {
            return "rock wins";
        } else {
            return "paper wins";
        }
    } else if (choice1 === "paper") {
        if (choice2 === "rock") {
            return "paper wins";
        } else {
            return "scissors wins";
        }
    } else if (choice1 === "scissors") {
        if (choice2 === "paper") {
            return "scissors wins";
        } else {
            return "rock wins";
        }
    }
}

var output = document.getElementById('output');
do {
    var result = play();
    var display = document.createElement("DIV");
    var text = document.createTextNode(result);
    display.appendChild(text);
    output.appendChild(display);
}
while (window.confirm("Play again?"));

下一个片段使用类似的DOM注入技术演示了更高级的游戏可视化(使用像jQuery这样的库会更容易)。

​

function play() {
do {
    var userChoice = prompt("Do you choose rock, paper or scissors?").toLowerCase();
} while (userChoice != "rock" && userChoice != "paper" && userChoice != "scissors");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if (computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
var playResult = {
    User: userChoice,
    CPU: computerChoice,
    Winner: compare(userChoice, computerChoice)
};
return playResult;
}
var compare = function (choice1, choice2) {
if (choice1 === choice2) {
    return "tie";
} else if (choice1 === "rock") {
    if (choice2 === "scissors") {
        return "player";
    } else {
        return "cpu";
    }
} else if (choice1 === "paper") {
    if (choice2 === "rock") {
        return "player";
    } else {
        return "cpu";
    }
} else if (choice1 === "scissors") {
    if (choice2 === "paper") {
        return "player";
    } else {
        return "cpu";
    }
}
}

function getIcon(shape) {
    var url = "";
    switch (shape) {
        case "paper":
            url = "http://megaicons.net/static/img/icons_sizes/8/178/256/rock-paper-scissors-paper-icon.png";
            break;
        case "rock":
            url = "http://megaicons.net/static/img/icons_sizes/8/178/256/rock-paper-scissors-rock-icon.png";
            break;
        case "scissors":
            url = "http://megaicons.net/static/img/icons_sizes/8/178/256/rock-paper-scissors-scissors-icon.png";
            break;
    }
    return url;
}

function game() {
    var $output = $("#output");
    var result = play();
    $output.append("<tr><td><img src='" + getIcon(result.User) + "'/></td><td><img src='" + getIcon(result.CPU) + "'/></td><td>" + result.Winner.toUpperCase() + "</td></tr>");
    setTimeout(function () {
        if (window.confirm("Play again?")) {
            game()
        }
    }, 10);
}
// start the game of all games...
game();

#output th, #output td {
margin: 10px;
padding: 10px;
font-size: 14px;
font-family:"Segoe UI", Arial, "Sans serif";
}
img {
width: 20px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='output'>
<tr>
    <th>Player</th>
    <th>CPU</th>
    <th>Winner</th>
</tr>
</table>

​