Geek asks and answers

How to determine the winner in rock, paper, scissors?

I try to program the game "rock, paper, scissors" while it works, but when I want to show the winner, I can not figure out how to do it. If you look at my javascript, you will see what I tried.

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='';

The image display works great.

if (random1 == random2) {

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

However, it is not:

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

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

} //End of myFunction1

I want to know why I cannot use this solution and what will be right. Thank.

+3
source share
2 answers

First way:

switch (random1) {

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

Continue to consider equality, put this in the else statement.

Second way: I would create an object to handle this.

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
    }
}

Thus, you can easily add new opponents, imagine more cases of drawing, add bonuses ...

, .:)

0

?: , : 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 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();
    });
});
0

More articles:


All Articles