Subscribe to Akasen's Blog        RSS Feed
-----

Less is More: An Observation on When to Comment and What To Say

Icon Leave Comment
While working on a project in the Odin Project, I was working on a simple Rock Paper Scissors game as they ask you to make so to get your feet wet with Javascript.

Here's the code:

<!doctype html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <script>
 	// Your Javascript goes here!\
    function computerPlay() {
        let x = Math.floor((Math.random()*3)+1)
        let choice = ""
        if(x == 1) {
          choice = "rock"
        }
        if(x == 2) {
          choice = "paper"
        }
        if(x == 3) {
          choice = "scissor"
        }
        return choice
    }
    function playRound(playerSelection, computerSelection) {
      let winner
      // Inital check for if the player and the computer chose the same choice
      // This is probably, so far as I know the most effective way of handling
      // a draw. If a draw is the first thing to happen, all other code doesn't
      // need to be checked and it goes straight to the end of the function
      if(playerSelection == computerSelection) {
        console.log("IT'S A DRAW!")
      }
      // Win-Lose conditions
      // Personally, I am highly perturbed by the amount of if-statements
      // in this else-block. DRY concepts tell me that there is a much simpler
      // way of going about this, but I fail to think of anything.
      // Is this because the rules of a game as simple as RPS requires very
      // specific instructions for all possible actions?
      else {
          if(playerSelection == "rock") {
            if(computerSelection == "paper") {
              console.log("You Lose! Paper beats Rocks!")
              winner = 0
            }
            else {
              console.log("You Win! Rock beats Scissors!")
              winner = 1
            }
            // ---------------------
            // ---END IF-STATEMENT--
            // ---------------------
            }
          if((playerSelection == "scissor") || (playerSelection == "scissors")) {
            if(computerSelection == "rock") {
              console.log("You Lose! Rock beats Scissors!")
              winner = 0
            }
            else {
              console.log("You Win! Paper beats Scissors!")
              winner = 1
            }
            // ---------------------
            // --END IF-STATEMENT--
            // ---------------------
          }
          if(playerSelection == "paper") {
            if(computerSelection == "scissor") {
              console.log("You Lose! Scissors beats Paper!")
              winner = 0
            }
            else {
              console.log("You Win! Rock beats Scissors!")
              winner = 1
            }
            // ---------------------
            // --END IF-STATEMENT--
            // ---------------------
          }
        }
        // End of function
        // Return result
        return winner
    }
    function checkWinner(player, computer) {
      let FinalWinner
      if(player > computer) {
        console.log("You won against the computer!")
      }
      else {
        console.log("The computer wins!")
      }
      // ---------------------
      // ----END FUNCTION-----
      // ---------------------
      return 0
    }
    function playerChoice() {
      // This function checks to make sure the player input is a valid
      // choice.
      let playerPrompt
      function getChoice() {
        while(playerPrompt != "rock" && playerPrompt != "paper" &&
                playerPrompt != "scissors" && playerPrompt != "scissor") {
        playerPrompt = prompt("Decide a gesture").toLowerCase()
        if(playerPrompt != "rock" && playerPrompt != "paper" &&
                playerPrompt != "scissors" && playerPrompt != "scissor") {
                  playerPrompt = prompt("Not a valid input").toLowerCase()
                }
        }
        //-----------------
        //end of getChoice
        //-----------------
        return playerPrompt
      }
      return getChoice()
    }
    function game() {
      let playerWin = 0
      let computerWin = 0
      for(i=0; i<5; i++) {
        // Initialize variables
        // Get player and computer actions
        let winner
        const playerSelection = playerChoice()
        const computerSelection = computerPlay()
        winner = playRound(playerSelection, computerSelection)
        if(winner == 1) {
          playerWin++
        }
        else {
          computerWin++
        }
        // ---------------------
        //  -- END FOR-LOOP --
        // ---------------------
        }
        checkWinner(playerWin, computerWin)
    }
    // Begin game
    game()
  </script>
</body>
</html>



Now mind you, I didn't have too much care for cleanliness in all this. I might also have been rusty as well. But I suppose most importantly, I just wanted this to be done and do what it needs to do. My commenting though was done as an exercise to make sure that if I ever looked at this code in the future, I knew exactly what did what. I was trying to instill good practices in my current (re)education

However, I was making a fatal flaw. Certainly, this code could be understood by someone, but it was ugly to look at. Even for myself, it was an eye sore. It was unnecessary lines that I'd have to skim across, even if they were nothing more than something like " //---------- ", it looked horrendous.

Later on in the bootcamp, you are asked to make something like an Etch and Sketch as a means of exercising your understanding of DOM. I didn't personally do it myself though, the whole DOM stuff isn't something I particularly well get right now and I'm still trying to wrap my head around it even now. Hopefully I'll figure it out soon enough.

But back on topic, what I found while I was looking through many solutions was one persons javascript that was highly legible and able to be understood just by looking at it. No need to read comments, you could easily look at the functions and know how things were interacting, or look into the functions themselves and understand what was going on inside.

It was eye opening. If I learned anything in from that project, it was the importance of writing legible code.

I was reading some random persons code and understanding what he was doing. I was also realizing just from reading his code a better implementation than what I had in mind (it was a mess of container.append(child), let me tell you that)

As of this writing, I'm currently trying to edit the Rock Paper Scissors code to be cleaner and more legible, with far less (in this case almost no) comments. It's probably not the best exercise though, considering that I'm doing this to a game of rock paper scissors, but I wanted to see how far I can go.

No I don't have any lessons on how to make your code more legible. Style guides are probably your best bet, Steve McConnel's Code Complete may be another.

0 Comments On This Entry

 

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

July 2018

S M T W T F S
1234567
891011121314
15 16 1718192021
22232425262728
293031    

Recent Comments

Search My Blog

0 user(s) viewing

0 Guests
0 member(s)
0 anonymous member(s)