Geek asks and answers

Javascript, creating a game of rock, paper, scissors

I want to create a rock paper scissors game by following the instructions here, looking at my code where I made a mistake.

1) Create a form using 3 buttons. All 3 buttons must have an onClick event and a function associated with each of them.

2) When any of the buttons is pressed, you must:

1) Create a random number for the computer representing the computer hand (1 - 3)

2) Compare this generated number with the number of the button that was pressed (i.e. 1 for rock, 2 for paper, etc.)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" 
<script>
function Random(choice) {
var system = Math.floor((Math.random() * 2) + 1);
display.innerHTML = system == choice ? 'draw' : system;
  }
</script>
</head>
<body>
<form>
<input id="rock" type="button" onclick="Random(1)" value="Rock"/>
<input id="paper" type="button" onclick="Random(2)" value="Paper"/>
<input id="scissors" type="button" onclick="Random(3)" value="Scissors"/>
</form>
<span id="display"></span>
</body>
</html>
-2
source share
1 answer

Why introduce something as trivial as rock paper scissors? Let me do something more interesting. Something like Rock-paper-scissors-lizard-Spock .

:

var gestures = ["rock", "paper", "scissors", "lizard", "spock"];

:

var rules = {
    rock:     { scissors: "breaks",  lizard: "crushes"     },
    paper:    { rock:     "covers",  spock:  "disproves"   },
    scissors: { paper:    "cuts",    lizard: "decapitates" },
    lizard:   { paper:    "eats",    spock:  "poisons"     },
    spock:    { scissors: "smashes", rock:   "vaporizes"   }
};

, :

function play(index) {
    var your = gestures[index];
    var mine = gestures[Math.floor(5 * Math.random())];
    if (your === mine) return alert("Draw. We both played " + your + ".");
    var win = rules[your].hasOwnProperty(mine);
    var result = win ? "win" : "lose";
    var a = win ? your : mine;
    var b = win ? mine : your;
    alert("You " + result + ": " + a + " " + rules[a][b] + " " + b + ".");
}

. :

var gestures = ["rock", "paper", "scissors", "lizard", "spock"];

var rules = {
    rock:     { scissors: "breaks",  lizard: "crushes"     },
    paper:    { rock:     "covers",  spock:  "disproves"   },
    scissors: { paper:    "cuts",    lizard: "decapitates" },
    lizard:   { paper:    "eats",    spock:  "poisons"     },
    spock:    { scissors: "smashes", rock:   "vaporizes"   }
};

function play(index) {
    var your = gestures[index];
    var mine = gestures[Math.floor(5 * Math.random())];
    if (your === mine) return alert("Draw. We both played " + your + ".");
    var win = rules[your].hasOwnProperty(mine);
    var result = win ? "win" : "lose";
    var a = win ? your : mine;
    var b = win ? mine : your;
    alert("You " + result + ": " + a + " " + rules[a][b] + " " + b + ".");
}
<button onclick="play(0);">Rock</button>
<button onclick="play(1);">Paper</button>
<button onclick="play(2);">Scissors</button>
<button onclick="play(3);">Lizard</button>
<button onclick="play(4);">Spock</button>
Hide result

, - , , .

+8

More articles:


All Articles