Finish Line – A JavaScript SPA

What can I say about this project! like every other project before it, its a massive difficulty spike. Every time I start a new portfolio project, my confidence and understanding of the material takes a dramatic nose dive. However, I feel its at this point, that I learn the most. This project was challenging to say the least. taking on a new language as well as having to refine my CSS and HTML skills. I feel as though I’m finally hitting a turning point in my grasp of what web-stack development is.

I started this project at the end of September, so needless to say this one has taken me way longer than I anticipated. Ultimately I decided to do a game. I decided to make something in the vain of the world’s hardest game from coolmath4kids.com. A simple game where you control a square and you have to avoid other squares while you try to reach the goal. I researched the best way to put animated objects into a web page and stumbled upon canvas. So I used an 800 x 800 canvas container to hold my game.

I began by creating my API back-end, using the rails shortcuts. in order to meet the CRUD and AJAX requirements for the project I decided to add a login, high-score and comment feature to the game. I stubbed out controllers for Users, Sessions, and Comments. I created models and databases for User and Comments, and then configured my routes. I created a custom route for increasing the amount of levels a player had finished, even though there would only be 1 level. Once I had the API working the way I needed it to, I moved on to the far more challenging aspect of this project.

The front-end gave me problem and problem. Everywhere I turned I was met with issues. I’m still working out some of the kinks now for adding the ability to delete comments and adding a time counter. None the less I pressed on, I created classes for the player, the enemies, the goal and the game itself. In the enemy class I wrote code to carryout what would happen if the player piece collided with the enemy or goal. Once I had a working game it was time to create the login, signup and comment features. Using fetch requests and JSON I was able to store and retrieve usernames and comments in the SQLite databases.

Once I finished the front-end, it was time to make it look presentable. CSS and HTML have definitely been my weakness throughout my time in this program. However, I feel that this project has vastly improved my ability with those respective fields. All and all this project was a massive headache, but extremely rewarding. I’m in a bit of a crunch mode now to finish my program before the end of January. But I hope that my time spend on this project will aid my level of understanding when moving on to the React and Redux portion and final project.

Leave a comment

Design a site like this with WordPress.com
Get started