Question

我正在尝试编写游戏“摇滚，纸张，剪刀”，到目前为止它正在运作，但当我想展示胜利者时，我似乎无法知道如何。如果你查看我的javascript，你可以看到我尝试过的。

HTML：

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="mycss.css">
<script src="myjavascript2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>
<div id="center">
<button onclick="myFunction1()">Play</button>

<p id="rolled">You rolled:</p>
<p id="test"></p>



<p id="rolled1">Your opponent rolled:</p>
<p id="test1"></p>
<p id="test2"></p>
<p id="test3"></p>
</div>

</body>
</html>

Javascript：

var things = [ 'rock', 'paper', 'scissors'];

function myFunction1() {

var random1 = Math.floor((Math.random()*things.length));
var random2 = Math.floor((Math.random()*things.length));

document.getElementById("test").innerHTML=things[random1];
document.getElementById("test1").innerHTML=things[random2];
document.getElementById("test2").innerHTML='';
document.getElementById("test3").innerHTML='';

画画的展示效果很好。

if (random1 == random2) {

document.getElementById("test2").innerHTML="<h3>It's a draw.</h3>";
}

然而，这不是：

else if (random1 == 1 && random2 == 3) {

document.getElementById("test3").innerHTML="You win!";
}

} //End of myFunction1

我想知道为什么我不能使用这个解决方案，什么是正确的解决方案。感谢。

Answer 1

第一种方式：

switch (random1) {

    case 0: 
         if (random2 == 1)
            // player 1 loses
         else
           // player 1 wins
    case 1:
         //...
}

之前保持相等的情况，将其放在else语句中。

第二种方式：我创建了一个对象来处理这个问题。

function Thing (name) {
    this.Name = name;
    this.LoseOpponents = new Array ();
}
Thing.prototype.AddLoseOpponent = function (obj) {
    this.LoseOpponents.push(obj);
}
Thing.prototype.WinsAgainst = function (obj) {
    for (var i = 0; i < LoseOpponents.length; i++) {
        if (LoseOpponents[i] === obj) {
            return false;
        }
    }
    return true;
}
Thing.prototype.IsDraw = function (obj) {
    if (this.Name == obj.Name)
         return true;
    return false;
}

var paper = new Thing ('paper');
var scissors = new Thing ('scissors');
var rock = new Thing ('rock');

paper.AddLoseOpponent(scissors);
scissors.AddLoseOpponent(rock);
rock.AddLoseOpponent(paper);

//...

var things = [rock, paper, scissors];

var random1 = Math.floor((Math.random()*things.length));
var random2 = Math.floor((Math.random()*things.length));

var player1 = things[random1];
var player2 = things[random2];

document.getElementById("test").innerHTML=player1.Name;
document.getElementById("test1").innerHTML=player2.Name;

//...

if (player1.IsDraw(player2)) {
    //draw
} else {
    if (player1.WinsAgainst(player2)) {
         // player1 wins
    } else {
        // player2 wins
    }
}

通过这种方式，您可以轻松添加新对手，想象更多的绘图案例，添加能量增加......

希望这可以给你一些想法。：）

Answer 2

使用conditional operator ?:和一些常数，你可以像对待一个人一样表达问题：Rock击败剪刀，纸拍摇滚，剪刀击败纸张。

http://jsfiddle.net/E9Ysa/1/

function play() {
    var ROCK = 0;
    var PAPER = 1;
    var SCISSORS = 2;

    var choices = ['rock', 'paper', 'scissors'];

    var yourRoll = Math.floor(Math.random() * choices.length);
    var opponentRoll = Math.floor(Math.random() * choices.length);

    $('#test').text(choices[yourRoll]);
    $('#test1').text(choices[opponentRoll]);
    $('#test2').text('');
    $('#test3').text('');

    if (yourRoll == opponentRoll) {
        $('#test2').text("It's a draw!");
        return
    }

    /*    Rock beats scissors
     *    Paper beats rock
     *    Scissors beats paper
     */
    switch (yourRoll) {
        case ROCK:
            $('#test3').text(opponentRoll == SCISSORS ? 'You win!' : 'You lose!');
            return;
        case PAPER:
            $('#test3').text(opponentRoll == ROCK ? 'You win!' : 'You lose!');
            return;
        case SCISSORS:
            $('#test3').text(opponentRoll == PAPER ? 'You win!' : 'You lose!');
            return;
    }
}

$(document).ready(function () {
    $('#play').click(function () {
        play();
    });
});

如何决定摇滚，纸张，剪刀的胜利者？

2 个答案: