isaice
November 7, 2017, 12:15am
#1
Guys, I’m writing up a simple rock paper scissors game, but (see code) the decider function’s “if” statement isn’t working. Can someone tell me why?
var powerTri = new Object()
powerTri.weakness = {"rock": "Paper",
"paper": "Scissors",
"scissors": "Rock"};
powerTri.strength = {"rock": "Scissors",
"paper": "Rock",
"scissors": "Paper"};
// Decider
var decider = function(tac, user){
tac = tac.toLowerCase()
alert("Tac chose " + tac + "!");
if (powerTri.weakness[tac] === user){
alert("You win!")
} else if (powerTri.strength[tac] === user){
if (powerTri.strength[tac] === "Rock"){
alert("You were smothered in paper...")
} else if (powerTri.strength[tac] === "Paper") {
alert("You were diced by scissors...")
} else if (powerTri.strength[tac] === "Scissors"){
alert("You were smashed by rock...")
} else {
}
}
}
// Random RPS!
rpsStarter.addEventListener("click", function () {
// Assigning variables to buttons
var x = Math.random();
var ai
// AI Randomly picks its sign, battle is determined
if (x <= 0.33){ // AI gets Rock
ai = "Rock";
decider(ai, currentChoice.textContent);
} else if (x <= 0.66){ // AI gets Paper
ai = "Paper";
decider(ai, currentChoice.textContent);
} else { // AI gets Scissors
ai = "Scissors";
decider(ai, currentChoice.textContent);
}
});
PS: If you need my HTML or more info, I got it! Plz help!
Given html code is needed to make this game work, the full code would be very useful
1 Like
isaice
November 7, 2017, 10:14pm
#3
Here u go:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<meta charset="UTF-8">
<title> Tac </title>
</head>
<!-- R.P.S. container -->
<div id="container">
<!-- Title -->
<p id="title"> Rock, Paper, Scissors!</p>
<!-- R.P.S. selectors -->
<table id="userSelector">
<th id="userHead" colspan="3" style="background-color: black"> Select Your Pose </th>
<tbody>
<tr>
<td><button id="rock"> Rock </button></td>
<td><button id="paper"> Paper </button></td>
<td><button id="scissors"> Scissors </button></td>
</tr>
<tr>
<td colspan="3" id="currentChoice"></td>
</tr>
</tbody>
</table>
<table id="aiSelector">
<th id="aiHead" colspan="3" style="background-color: black"> A.I.'s Pose </th>
<tr>
<td id="aiRock"> Rock </td>
<td id="aiPaper"> Paper </td>
<td id="aiScissors"> Scissors </td>
</tr>
<tr>
<td colspan="3" id="aiChoice"></td>
</tr>
</table>
<!-- Buttons -->
<button id="rpsStarter">
Click to lock your choice and start the battle!
</button>
<table id="scoreboard">
<th colspan="4" id="scoreboardTitle"> Scoreboard </th>
<tr>
<td id="userWinsTitle"> Your Wins </td>
<td id="tiesTitle"> Ties </td>
<td id="aiWinsTitle"> AI Wins </td>
<td id="totalGamesTitle"> Total Games</td>
</tr>
<tr>
<td id="userWins"> 0 </td>
<td id="ties"> 0 </td>
<td id="aiWins"> 0 </td>
<td id="totalGames"> 0 </td>
</tr>
</table>
</div>
<script src='script.js'>
</script>
<body>
</body>
</html>
HTML at ur service!
isaice
November 7, 2017, 10:15pm
#4
If u don’t want ur eyes to melt, I’ve got CSS to make it look cool (c what I did there?).
the problem is here:
<td colspan="3" id="currentChoice"></td>
its blank, so decider(ai, currentChoice.textContent);
the textContent of currentChoice is blank, so your comparison won’t work.
1 Like
isaice
November 8, 2017, 7:26pm
#6
I’ll try it and get back 2 u.
isaice
November 9, 2017, 8:20pm
#7
K, mtf, that doesn’t work. The function can read the ai part, and understands the currentChoice.textContent still, it’s just that the problem was it wouldn’t conduct the ‘if’ statement to display who won. Off of this JS I gave you, there are button handlers to fill the currentChoice space with “Rock”, “Paper”, or “Scissors” based on what the user picks. Do you have a solution?
The button handling:
// Buttons
const currentChoice = document.querySelector('#currentChoice');
const buttonRock = document.querySelector('#rock');
const buttonPaper = document.querySelector('#paper');
const buttonScissors = document.querySelector('#scissors');
const rpsStarter = document.querySelector('#rpsStarter')
// Scoreboard
const userWins = document.querySelector('#userWins')
const aiWins = document.querySelector('#aiWins')
const ties = document.querySelector('#ties')
const totalGames = document.querySelector('#totalGames')
// Button Functions
buttonRock.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
buttonPaper.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
buttonScissors.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
If you need more info, just lemme know plz.
isaice
November 9, 2017, 8:22pm
#8
P.S.: when I say function, I mean decider(tac, user)
please post full code, otherwise i have to guess how you implemented the new code
If you want to make things easier, you can put the code in a bin like jsbin and share the bin here
1 Like
isaice
November 11, 2017, 2:01am
#10
I don’t know how to use the bins… could I just send u the pieces?
then post the full code on the forum, i need to see the full code so i can see the changes you made
1 Like
isaice
November 12, 2017, 8:59pm
#12
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<meta charset="UTF-8">
<title> Tac </title>
</head>
<!-- R.P.S. container -->
<div id="container">
<!-- Title -->
<p id="title"> Rock, Paper, Scissors!</p>
<!-- R.P.S. selectors -->
<table id="userSelector">
<th id="userHead" colspan="3" style="background-color: black"> Select Your Pose </th>
<tbody>
<tr>
<td><button id="rock"> Rock </button></td>
<td><button id="paper"> Paper </button></td>
<td><button id="scissors"> Scissors </button></td>
</tr>
<tr>
<td colspan="3" id="currentChoice"> --- </td>
</tr>
</tbody>
</table>
<table id="aiSelector">
<th id="aiHead" colspan="3" style="background-color: black"> A.I.'s Pose </th>
<tr>
<td id="aiRock"> Rock </td>
<td id="aiPaper"> Paper </td>
<td id="aiScissors"> Scissors </td>
</tr>
<tr>
<td colspan="3" id="aiChoice"></td>
</tr>
</table>
<!-- Buttons -->
<button id="rpsStarter">
Click to lock your choice and start the battle!
</button>
<table id="scoreboard">
<th colspan="4" id="scoreboardTitle"> Scoreboard </th>
<tr>
<td id="userWinsTitle"> Your Wins </td>
<td id="tiesTitle"> Ties </td>
<td id="aiWinsTitle"> AI Wins </td>
<td id="totalGamesTitle"> Total Games</td>
</tr>
<tr>
<td id="userWins"> 0 </td>
<td id="ties"> 0 </td>
<td id="aiWins"> 0 </td>
<td id="totalGames"> 0 </td>
</tr>
</table>
</div>
<script src='script.js'>
</script>
<body>
</body>
</html>
// Buttons
const currentChoice = document.querySelector('#currentChoice');
const buttonRock = document.querySelector('#rock');
const buttonPaper = document.querySelector('#paper');
const buttonScissors = document.querySelector('#scissors');
const rpsStarter = document.querySelector('#rpsStarter')
// Scoreboard
const userWins = document.querySelector('#userWins')
const aiWins = document.querySelector('#aiWins')
const ties = document.querySelector('#ties')
const totalGames = document.querySelector('#totalGames')
// Button Functions
buttonRock.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
buttonPaper.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
buttonScissors.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
// The triangle of power
var powerTri = new Object()
powerTri.weakness = {"rock": "Paper",
"paper": "Scissors",
"scissors": "Rock"};
powerTri.strength = {"rock": "Scissors",
"paper": "Rock",
"scissors": "Paper"};
// Decider
var decider = function(tac, user){
tac = tac.toLowerCase()
alert("Tac chose " + tac + "!");
alert(user)
if (powerTri.weakness[tac] === user){
alert("You win!")
} else if (powerTri.strength[tac] === user){
if (powerTri.strength[tac] === "Rock"){
alert("You were smothered in paper...")
} else if (powerTri.strength[tac] === "Paper") {
alert("You were diced by scissors...")
} else if (powerTri.strength[tac] === "Scissors"){
alert("You were smashed by rock...")
} else {
}
}
}
// Random RPS!
rpsStarter.addEventListener("click", function () {
// Assigning variables to buttons
/*** var uW = userWins.textContent
var aW = aiWins.textContent
var t = ties.textContent
var tG = totalGames.textContent
var cC = currentChoice.textContent; ***/
var x = Math.random();
var ai
// AI Randomly picks its sign, battle is determined
if (x <= 0.33){ // AI gets Rock
ai = "Rock";
decider(ai, currentChoice.textContent);
} else if (x <= 0.66){ // AI gets Paper
ai = "Paper";
decider(ai, currentChoice.textContent);
} else { // AI gets Scissors
ai = "Scissors";
decider(ai, currentChoice.textContent);
}
// Battle is determined
/*** if (var ai === "Rock"){ //AI gets Rock
if (currentChoice.textContent === "Paper"){
alert("You Win!" + ai)
} else if (cC === "Scissors"){
alert("You get smashed with rock...")
}
} else if (ai === "Paper"){ //AI gets Paper
if (cC === "Scissors"){
alert("You Win!")
} else if (cC === "Rock"){
alert("You get smothered by paper...")
}
} else if (ai === "Scissors"){ //AI gets Scissors
if (cC === "Rock"){
alert("You Win!")
} else if (cC === "Paper"){
alert("You get shredded with scissors...")
}
} else if (ai === currentChoice.textContent) {
alert("Tie!")
} else {
} ***/
});
/* Main Box */
#container {
background-color: whitesmoke;
border: 3px aqua solid;
height: 600px;
width: 700px;
text-align: center;
font-size: 30px;
color: white;
}
/* Title */
#title {
color: black;
font-family: Rockwell;
font-size: 30px;
}
/* Selectors */
#userSelector {
font-family: Rockwell;
border: 3px solid black;
/* top, right, bottom, left */
margin: 70px 0px 0px 30px;
}
#userHead, #aiHead {
font-family: Rockwell;
color: white;
border: 3px solid darkgray;
}
#aiSelector, td, th {
font-family: Rockwell;
border: 3px solid black;
margin: -153px 0px 0px 370px;
}
/* Inner Pieces of Selector */
/* -User- */
#rock, #paper, #scissors {
font-family: Rockwell;
width: 90px;
height: 40px;
font-size: 20px;
border: 3px solid;
}
#rock {
color: sandybrown
}
#paper {
color: deepskyblue
}
#scissors {
color: dimgray
}
#currentChoice {
width: 270px;
height: 40px;
border: 3px solid black;
color: black;
font-family: Rockwell;
font-size: 20px;
}
/* -AI- */
#aiRock, #aiPaper, #aiScissors {
font-family: Rockwell;
width: 90px;
height: 40px;
font-size: 20px;
border: 3px solid;
}
#aiRock {
color: darkgray
}
#aiPaper {
color: darkgray
}
#aiScissors {
color: darkgray
}
#aiChoice {
width: 270px;
height: 40px;
border: 3px dashed darkgray;
color: black;
}
/* Battle Button */
#rpsStarter {
width: 300px;
height: 50px;
margin: 40px;
font-family: Rockwell;
border: 5px solid black;
background-color: darkgray;
color: white;
font-size: 17px;
}
/* Stats Board */
#scoreboard {
background-color: whitesmoke;
border: 5px dashed darkgray;
height: 170px;
width: 600px;
text-align: center;
font-size: 30px;
color: black;
margin: 0px 0px 0px 50px;
font-family: Rockwell;
padding: 10px;
}
#scoreboardTitle, #userWinsTitle, #tiesTitle, #aiWinsTitle, #totalGamesTitle {
background-color: black;
color: white;
}
#userWinsTitle{
color: deepskyblue;
}
#tiesTitle {
color: gold;
}
#aiWinsTitle {
color: red
}
#scoreboardTitle {
border: 3px solid darkgrey;
}
#userWins {
border: 3px solid deepskyblue;
color: deepskyblue;
}
#ties {
border: 3px solid gold;
color: gold;
}
#aiWins {
border: 3px solid red;
color: red;
}
isaice
November 12, 2017, 9:00pm
#13
I put the HTML, then the JS starting at “//Buttons”, then the CSS starting at “/* Main Box */”.
the use of Rock and rock can work really confusing, i recommend to make all rocks, papers and scissors all lowercase to prevent mistakes in string comparison (which is case sensitive
here is the code in a bin:
http://jsbin.com/jonerukeji/edit?js,console,output
then you can share it again after you made the changes
1 Like
isaice
November 17, 2017, 2:23am
#15
I can’t see the bin… (like, it’s not anywhere on ur post)
it was, it was the big white space in the middle of my post.
but i didn’t make any changes, i just did a suggestion
1 Like
isaice
November 19, 2017, 3:06am
#17
I FINALLY GOT IT! I FIGURED IT OUT! Ur inspiration about case sensitivity got me sparked. I figured out the issue, and am on a role again! Thnx, bro!
isaice
November 19, 2017, 3:12am
#18
Also, as a sign of my thanks, if u can tell me how to get u the code in a bin, you can play the rock paper scissors I made (I know that sounds pretty small of a gift, but it’s the best thing I thought of since u helped me so much ).