javascript, creating a rock, paper, scissors game [closed]

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

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

2) When any of the buttons are pushed, you should:

1) Generate a random number for the computer that represents the computer's hand (1 - 3)

2) Compare that generated number to the number of the button that was pushed (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>

Answers:

Answer

Why implement something as trivial as rock-paper-scissors? Let's do something more interesting. Something like, Rock-paper-scissors-lizard-Spock.

First we create a list of gestures:

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

Then we write a bunch of rules:

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

Finally we implement the game itself:

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 + ".");
}

See the demo:

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>

Of course if you want to play rock-paper-scissors then go ahead, you inferior life form.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.