A fully responsive touch-screen edition of original Tetris. My first IOS project, written entirely in Swift using UIKit.

Storyboard, Swift, UIKit
Scroll Down

Focal Points.

  • Make a functioning touch screen version of Tetris
  • Create a menu screen and the ability to adjust level/difficulty
  • Integrate a scoring system that stores high scores in UserDefaults
  • Create a high score viewer for each respective level

The Process.

For my first actual project in the IOS realm, I wanted to create something unique that would allow me to learn a lot of the fundamentals with the Swift language and IOS frameworks. I had recently seen a video of a web developer describing some of the projects that got him his first job. He mentioned that he had recreated Tetris from scratch in JavaScript. I thought that was a cool idea that I could replicate in an IOS project.

I started by designing the game-board. I used Xcode's Storyboard tool to make a ViewController that contained a game-board made of 160 ImageViews. These ImageViews were aligned in a 10x16 grid. I constrained them using UIKit features called StackViews. It essentially allows you to constrain one view (or views in this case) next to another in a horizontal or vertical direction. Putting one 16 horizontal StackViews with 10 ImageViews each inside of 1 Vertical StackView creates the 10x16 grid.

Now that the main UI screen was done, it was time to make the pieces. I made them each in a 2D array of Images. Take the simplest piece for example; all I had to do was make a 2x2 array, with each Image being a colored block. Some of the more complicated pieces required adding blank default images that matched the background to make it appear as if the piece was an "L" or a zigzag shape.

Following this, I started on the game logic. This was by far the most challenging part of this whole project, but it was probably the most valuable to the learning experience as a whole. I had to come up with functions that would allow pieces to move in the game. For example, a function that would "drop" a piece from the top of the grid (i.e. placing a piece on the top). A game function would be running at this point with a timer, so that every half second or so a "move down" function would be called, moving the piece down.

When a user swipes in specific direction, a function is called to move the piece in whatever direction they swiped in, whether it be left, right, down, or even up. In my version of the game, whenever a user swiped up, it would rotate the piece. When designing all these functions, I often sketched out visual interpretations of them before coding them to help imagine what I was actually doing.

Upon completing the game logic and getting the basic elements of the game to work, I added a scoring a system. Each piece successfully landed would increase your score by 10, and a completed row would add 100 to your score. I expanded further, adding a leveling system that would allow the user to increase the difficulty of the game. Some other things I included were a game over screen, a main menu, the level editor, and high score viewer.

It was incredibly satisfying to complete this project after working on it for a month and a half. It was a packed learning experience and it greatly increased my knowledge on IOS programming. If it were not for the Tetris game being trademarked in the App Store, I would have submitted to learn about the process of getting an app in the App Store. That would have to wait for another project.

Things I would change or improve.

  • Better UX for the main menu, level changer, and high score views
  • Integrate a better design
  • Add the ability to play on iPad
  • Add different gamemodes
  • Revisit the way I made the game screen and perhaps use something like SpriteKit instead