Javascript game: (congo delivery service)
My programming journey began with Ruby, then proceeded to the Sinatra and Ruby On Rails frameworks. And now…the moment I had been waiting for since the beginning of my FlatIron Software Development course…I got to learn Javascript. And upon learning Javascript I got to undertake another desire of mine…to program a game! The requirements for the phase 4 Javascript project were pretty simple, I needed to have a RoR backend and have a single page frontend that used Javascript fetches to communicate with it. To do this I would setup my Rails backend to serve JSON data for the models and associated models I had saved to its database. I would then use this data to populate classes I defined on my Javascript frontend. Thus I was using Rails as my own personal RESTful API. The first problem I immediately ran into is that of asynchronous vs synchronous programming.
You see…Javascript is always in a hurry. It is in such a hurry that if you don’t tell it to wait on something that may take awhile (such as a fetch request to resolve) it just goes straight on to the next line of code and any variable you’re depending on for that fetch will be something called a promise because that is the value of the fetch when the variable was defined. A good workaround I found for this has a few steps.
STEP 1: Utilize Async/Await
When defining a function you can use the async keyword which allows you to use the await keyword to tell the function to hold off until this resolves. In my case I defined my own function in which I could feed any fetch function I would like into it, add a specified key to a previously declared object, console.log a specified message along with the return value, and feed any supplied parameters into the function I was giving it. It sounds complicated…it kind of was, but man it was useful. It looked something like this:
STEP 2: Do Other Work While Fetch Resolves
this is the part where it seems a bit annoying…like why would you want to continue while you are still waiting on this valuable data? Well rest assured it will resolve, but Javascript will no wait for that to happen so it’s time to give it some other things to do, you will reference the return of that fetch later by using the object and key you defined in the fetch.
STEP 3: It’s Time To Collect That Fetches Return Value
in my case I was using the return of each fetch to initialize an instance of a class I defined. After completing the ‘other work’ I assigned Javascript to do it was time to reference the return of the fetch via that object/key I set up earlier. Another way this could have been accomplished is to daisy chain your functions to each execute another one once they have completed, but I found that approach to be much too delicate in that I would have to always bare in mind the order that the functions were being called and hunt down in which function they were being invoked in…anyways that sounded like a nightmare.
For my project I used event listeners to listen to what keys were being pressed on the keyboard. This would result in an object incrementing its x and y attributes (based on what key you pressed) which I would then use as coordinates to render the picture of the object to a canvas element. Another tricky part was to continuously refresh the canvas element so that if an object had different x and y attributes from the last time it was rendered it would be redrawn in the correct position. With all this in mind I made a fun little game in which you are a delivery driver and you must deliver packages from your van to all the houses before the time runs out. I used a service class I defined as ‘Dom’ for any Dom manipulation I needed to perform. Because I didn’t really need a particular instance of this class, everything I defined in it utilized that static keyword which was similar to a class method in ruby.
Making this game was a fun experience and I learned a lot in the short amount of time I was allowed to complete this project. The blessing and the curse of Javascript is how free and open it is in that there are hardly any hard fast rules, just good practices. I hope to someday make more little games like this and improve further. Also eventually I plan on coming back to this game and adding a ton of new features and releasing it for anyone to play.
