Javascript: MVP Step by Step

02/05/15

Step One: The Blank Screen

So, the very first step to any web-based thing is the empty web-page. Which in this case is going to be an empty index.html in the directory where the game will live.

Step Two: Defining the Game Space

At this point I have some library decisions to make. I could use Crafty, maybe even Construct (though that may be more for 3D games?), or I could just go pure javascript (the MVP may be simple enough that this is the easiest way to go for now). This isn't about long-term capability, this is about reaching the MVP and then I can see where I need to go from there. In all likelihood, this is a throwaway prototype.

I think I'll collect a list of plausible libraries that can help me meet my goal quickly, and then rotate through them everytime I get stuck along a certain path. Maybe define "getting stuck" as taking longer than an allotted time to do some task (which should maybe help me get better at assessing time-cost of implementation).

With my library, I need to define an area that contains the game (aka make a div that contains the game elements). This is really just the blank screen with some javascript hiding underneath.

Step Three: Static Game Elements

Populate the div with elements that don't do anything. Just put in some colored squares and rectangles.

Step Four: Generated Game Elements

Randomly generate more game elements.

Step Five: Dynamic Game Elements

Make it so some game elements move. I'm thinking falling pink squares. And keep the player-element static. The player element will be a tall, red rectangle. What is it you called a red rectangle, Stephan? Ah, that's right, a redtangle. The player will be a redtangle.

Step Six: Player Input

Make it so where the player clicks is where the redtangle's position will be.

Step Seven: Velocity

Make it so where the player clicks is where the redtangle will move towards at a constant velocity.

Step Eight: Gravity

Make the redtangle fall towards the bottom of the screen, but not fall past it.

Step Nine: Intelligent Jump Arc

Make it so the point the player clicks on the game div will be a point along the arc that the redtangle jumps.

Minimal Viable Product Done

At this point we have:

• Randomly generated falling pink squares
• Player-controlled redtangle
• Point-and-click jumping mechanics

This should be everything necessary to find the fun in this game idea, and also work on getting the jump mechanics just right.

Time to get to work.