Bootcamp, Build Week, iOS Development, Lambda School, Projects, Swift

Building an iOS version of the Conway’s Game Of Life

For the past 6 weeks at Lambda School we have been digging in to the trenches of Computer Science. We were asked to learn Python to solve algorithmic challenges. We learned about different data structures and algorithms. It was fun. Then for our Build Week challenge we were asked to build an application in which users will be able to run different “Game of Life” scenarios. If you are not familiar with the Conway’s Game of Life there is a good wikipedia article that goes over the basics here. To try a website version I would recommend this one.

It took a while to figure out how exactly to code this out so I decided to start with the UI. I knew I had to have a grid and some buttons so to start off with I went on freepik.com, which is a great site for free images. After a few iterations I came up with a style and design that fit things and looked decent. I am not a designer by any means so I moved things around till it looked decent enough. 

I find myself attracted to the blue colors and I found a really nice button set that I wanted to use. So I made the rest of the design use similar/complimentary colors.

My next step was to think about how I would build this application, I feel very comfortable with UIKit but I wasn’t so much with animations so I did some online searching and I kept reading that SwiftUI was the best way to go for animations but I wasn’t sure if that would work for me as I have just started playing around with it. I then remembered the penguin bashing game from Hacking With Swift that was built with using SpriteKit . That was a fun project to build and I would recommend it if you want to dabble with SpriteKit. So I went over the project again to refresh my memory of using SpriteKit. I was ready to get to work on my application. I built my file and then stared at the empty screen not sure where to even start. 

I have found the best way to tackle something like this is to break the whole project down as small as possible so that’s what I did.

I like to plan out with different colored pens on paper. It’s comfortable and familiar plus I can sit outside with a cup of coffee and plan it out. This is only one page of notes there were quite a few more.

I then started coding each individual idea one at a time. 

When I am working from notes I find it very useful to put my notes into my code as comments. This makes coding easier as it’s already all thought out and I just have to fill in with the right syntax.

I created all my functions first and then I needed to connect the UI with the functionality. SpriteKit has a file dedicated for just this and that’s what I worked on next. This was easy as it consisted of adding all my nodes to the file and then connecting the node to a function that I had created before. Once I was done and it was time to test it. yikes

Guess what! It didn’t work the way I had it planned out in my head. So it was debugging time. bug

However I wasn’t up to it that day, so break time. 

I came back to it the next day and with a fresh start I tackled it and eventually got it to work. I had a few more features to add before I could consider it done. 

I needed to add some preset designs to the project and I was feeling overwhelmed so back to my paper and start drawing out some grid patterns and a way to code it. 

Screen Shot 2020-10-21 at 7.27.41 PMIMG_1428

I did that with 3 preset functions and a random preset. I was finally finished with the project and I couldn’t be happier with how it looks and the code behind it.

Here’s a video of the final version of my application

The user can either click on the grid to add their own start design or the can choose one of the 3 that I pre-made. They can also hit the random button and get 100 random bubbles on the grid.

My code can be found on GitHub. 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s