Rock paper scissors game

Rock paper scissors game
0

#1


hey guys im focusing on javascript a lot more now , i really want to step foot in the tech industry any feedback will help thanks


#2

any advice on how i could make this better?


#3

I am writing up some suggestions and will post soon.


#4

This is a solid project! There are improvements that can be made to enhance the experience

I would first implement something to keep track of the score. Then, maybe set a timer for the end of the round / how long the string lasts in the <p> element and make the buttons disabled until a new round starts. Then the feedback can disappear, the selected border goes back to normal, and a new round begins.

I’m suggesting this because as it stands, it is a bit confusing if I were to select “Rock” twice in a row and the computer selects the same object as the previous round. I’m not sure if the game is stuck, or if I’m getting the same feedback because there is no way of telling. I hope that makes sense…

After a quick glance of the code, the first thing that stands out to me is that you can select the DOM elements and place them in a variable

var rock = document.getElementById('rock');
rock.addEventListener('click', function(){ console.log('Dave rocks'); }

#5

Dave, thanks for your feedback i am definitely going to put a way to set score and tell whether or not the round is over … im kinda mad i didnt think of that before! lol but thanks for your feedback ive been working with javascript heavily as i read the eloquent javascriot book i hope to get a job as a dev soon thank you !


#6

I refactored your JavaScript down to 24 lines of code. See comments below code for explanations of why and how the code works.

var thisBeats = { "rock": "scissors", "paper": "rock", "scissors": "paper"};

document.getElementById('center').addEventListener('click', function(event) {
  var usersWeapon = event.target.id; // gets the id of the element clicked
  if (usersWeapon !== '') { // if has an id then it it has to be a button and not the h1 element
    var botsWeapon = computerThrows();
    checkWhoWon(botsWeapon , usersWeapon);
  }
});

function computerThrows(){
  var choices = Object.keys(thisBeats);
  var randomNumber = Math.floor(Math.random() * 3); // int  0-2 representing random choices index
  return choices[randomNumber];
}

function checkWhoWon(botsWeapon , usersWeapon) {
  var message = "There was a tie!" // assumes it will be a tie
  if (usersWeapon !== botsWeapon) {  // it was not a tie so create appropriate message
    message = thisBeats[usersWeapon] === botsWeapon ? "You win!" : "You lose!";
    message += " Computer chose " + botsWeapon;
  }
  document.getElementById("p").innerHTML = message;
}

Also, instead of having three different button click event handlers, I create one click event handler for the div with id=“center”. Since there was three button elements and one h1 element, I had to use the fact the buttons were given IDs and checked for a non-blank id to confirm it was a button element clicked and not the h1 element clicked. You could simplify this more by only putting button elements in that div.

You had a lot of repeated code in the checkWhoWon function (19 lines) which is now only 8 lines. The main difference you will see is how I used the thisBeats object for determining who won. Each object property (rock, paper, scissors) represents what the usersWeapon is and the value of the property represents what it beats.
This one line of code below allowed me to get rid of almost all of your if statements.

message = thisBeats[usersWeapon] === botsWeapon ? "You win!" : "You lose!";

The above uses a ternary operator and checks if the thisBeats object’s value for the usersWeapon is equal to the botsWeapon. If these two values are equal, that means the bot was using a weapon that is beatable as defined in the thisBeats object (hence the user wins), otherwise the bot wins.

The only other refactor was simplifying your random number logic which is now use to select one of the keys in the beatsThis object.

If you have any questions about the logic I used, let me know.

I mainly focused on the JavaScript, because I like refactoring code. However, from a visual perspective, I just wanted to show you what your project looks like on a smaller width screen at various sizes. Make sure to click on the images below to see the actual image (the forum only shows part of it). A lot of the problems you see are because you have defined fixed heights and widths instead of relative heights and widths. I will let you figure those out.