JavaScript Pogs

Remember Pogs? After reminiscing over this childhood game at dinner, it occurred to me that
it would be a fun challenge to recreate it as a browser-based JavaScript game. Here, I document my first attempt at an original program.

The Approach

My first step was to write down the mechanics of the game on a piece of paper. I figured that the list generated would help me create the necessary functions to make the game work. The list I came up with was:

  1. Player 1 selects number of pogs to play with
  2. Player 2 selects number of pogs to play with
  3. Player 1 makes a “throw”:
    • If pogs side = up { add to Player 1’s set of pogs}
    • Otherwise do nothing
  4. Player 2 makes a “throw”:
    • If pogs side = up { add to Player 2’s set of pogs}
    • Otherwise do nothing
  5. Repeat steps 3 & 4 until number of Pogs === 0

Writing the game process down also made me think about the logic and assumptions of the game. However, as I began writing the program, I realized that this step-by-step approach was somewhat flawed. This helped me think about my players as Objects with properties I could set:

Click here for the complete source code for this version of the game.

I gave the Player object properties for name, their total number of pogs, and the number of pogs to play with during a game. I also realized I would need logic that forced the player to choose a positive integer that was not greater than their total pogs, so I added a while loop to continue prompting the Player until the condition was met. This doesn’t feel like a very elegant solution, and I have a feeling that there is a better way to this. Not sure what it is yet though.

After writing (and then deleting) a few functions, I realized I would need another Object to represent the pogs my Player instances were using:

From there, I added code to update a player’s pog count:

In hindsight, I realize that this function is a symptom of the problem in my approach. It’s awkward, global, and directly changes the Object’s property in a way that would prove frustrating later in my code.

The rest of my program included the logic for whether a pog should be added to a player’s total pogs, and created turn() and game() functions to execute the game.

Testing the Code

I found myself testing the program everytime I added a function. Even though I’m aware of (and have occasionally used) the browser console, I did most of my testing with jsfiddle.
It was somewhat buggy and crashed on me more than once, but the TidyUp and linting features were really helpful for catching common mistakes like missing semicolons or parens. Hopefully these tools are helping me learn best practices and not serving as a crutch.

Problems & Next Steps

Experienced developers reading this post have no doubt spotted numerous problems with the code. I have A LOT of var statements and pretty much everything is globally accessible, which I understand to be a bad thing. I don’t use a single method in this program, which I now realize is due to the fact that I don’t really understand them. I’m also not entirely sure if the naming conventions I’ve used are best practices.

Many (ok, probably all) of the problems I ran into while testing my program were self-inflicted. Rebecca Murphey recently helped me see the program differently though – rather than tackle these steps one at a time, I need to consider how each Object uses and accesses the other’s data. Implementing a Game Object rather than a Pogs Object might make more sense, as Game could act as the referee that tells each player instance what data to update.

I’m going to rewrite my program with this Object-oriented approach in mind. I’m also going to think about how I can use methods in place of all those funky functions that directly change Object properties. This iteration of JavaScript Pogs showed me that I have a lot to learn about code organization, structure, and Objects. I hope the next iteration illustrates some advancement in these areas.

Leave a Reply

Your email address will not be published. Required fields are marked *