Creating I’m Bored

Introduction
I’m Bored was made with one goal, to provide entertainment. The site was created for anyone interested in playing simple games to relax. In order to have the experience be as intuitive as possible, the design of the website and the selection of games was carefully considered. Navigating around should be quick and feel satisfying, the games should also be easy to learn. The team consisted of two people: Sofia Cheung and myself. Sofia mainly handled linking the pages together along with the appearance of the site while I mostly worked on the game logic. Our project was completed within the span of three weeks. The first week was primarily focused towards learning React, the second week; implementing the games, and the third; handling bugs and finalising the front end.
Background
At the start of the project, we sat down to brainstorm potential ideas on what to work on. After some time we both agreed that we definitely wanted some kind of website in order to increase accessibility. What we couldn’t decide on however was just what purpose the website would serve. After some discussion, we both agreed that it would be cool to see if we would be able to create games and host it on the website. We decided that designing a new game while learning to implement it online would take more time than we had. In the end we settled with creating retro style games. Creating games has always been a dream of mine. I have many fond memories of playing games growing up and was interested in experiencing what it would be like to create one. Games with movement also require performance to be close to real time as possible so snake was definitely a solid choice on games to create.
Project Results

The majority of our project was written in JavaScript using the React library. We decided on just using JavaScript with React since we wanted to further develop our understanding of JavaScript but at the same time learn something new that would allow us the rerender the page. Heroku is free and we heard good things about the ease of setup which is why we deployed our site using it. No frameworks were used and we structured and styled our website using HTML and CSS.
Our website has Tic Tac Toe and Snake as games available to play. Tic Tac Toe currently supports player vs computer. Snake is fully functional and both games support tracking of scores.
Technical Challenges
Towards the end of our deadline, once we got the snake moving and successfully implemented the ability for the snake to grow, we noticed that the application would crash after the snake became around 15 segments long. After some debugging we discovered that our random function wasn’t performing fast enough. Although the function was successfully generating a random number and excluding positions that the snake occupied, the way we went about it wasn’t ideal. Our random function essentially kept generating a random number until it didn’t match any position that the snake was occupying. As the snake increased in length, the function took more time to return a value.
We then set out to rewrite the function to return a value more quickly. After several failed iterations, we realised that there was a problem. Our snake position was divided into 3 separate objects: the head, neck, and tail. To resolve this we eventually combined the objects into one snake position array and generated another grid array containing all possible positions in the play space. We then removed positions in the grid array in which the snake was occupying by comparing it our snake array. Once this was done, we generated a random number from 0 up to but excluding the length of the grid array. We then use this as an index to grab a position from the grid array. By doing this we successfully generated a random number excluding the snake position in a reasonable amount of time.
Insights
Working on this project has taught me a lot. I learned how to use npm and how to use React along with implementing hooks. Working with an API, I learned how to implement async/await along with promises. We chose Heroku for hosting our website so I also learned how to use that. Running into issues with our random function taught me a lot concerning writing efficient algorithms.
If I were to redo the project, I would set up the snake differently. Dividing the snake into 3 separate objects and having to combine them later wasn’t ideal. Although using a 2D array allowed us to easily read and understand the snake movement, storing the grid in a 1D array would have been more efficient. The logic for the tail following the head of the snake might also be improved. The snake movement could be removing an element from the end of the array and adding an element to the head based on the direction it’s going.
Thinking back on the project I learned that I definitely focus a lot on the small details of something which could definitely be a detriment when working with a looming deadline. I was glad to have spent the time commenting and refactoring code as we developed the project however as less cleanup was required open deployment. I’m definitely more interested in the logical side of things and working with algorithms to write efficient code.
About Me
My name Tim Assavarat, I am a passionate believer in lifelong learning and enjoy coding.
