findMe: Dipping my toes into the world of gaming

I’m more of a gardener than a gamer. That being said, I do enjoy pretty things, find pleasure in children's laughter and value learning while having fun.

It was only natural then to dive into this world during my weekend-long stackathon at the Grace Hopper Academy, exploring CSS, animations and transforms. I’ve been putting off the visually pleasing for far too long, always thinking there’ll be time for that later and then being too exhausted once everything’s working! So I built a game, a little card-flipping game, the aim of which is to match pairs of identical cards .

It’s a fairly simple game: cards are arranged randomly on a board, players flip two over in their turn and gain points if the two are the same. The cards can stay face-up and the game continues until all cards are matched. The learning part comes from having to remember what everything was!

I stuck to a pure client-side application, used vanilla React and CSS and coded the game up in Javascript. React’s great for handling such cases, separating functionality and rendering concerns into containers and components. All logic and conditional state changes are dealt with in specific containers that pass relevant game state down to their components. I ended up with 5 containers and components in total, and 5 items on state.

My initial design didn’t seem to challenging, and I tried to work towards it as far as possible as a challenge to style with a purpose. I also kept animations to a minimum so that they enhance game play and don’t distract from it.

Original Design Concept

We begin with players adding their name, and choosing a game difficulty to play. For now, I’ve stuck with adding more cards as the difficulty level increases. Game play then starts and each player is prompted when it’s their turn, scores update and the winner or winners congratulated on game over. Players can then choose to play again at a choice of difficulty.

I used 2D transforms for the current player prompt and game over condition and a 3D animation to flip the cards. It’s a fairly well know “trick”, and has a great impact! For the card layout I went the flex route, since it’s pretty much the simplest way to go here.

Snap shots of the game as it is right now prove that I can actually work to a design!

Working game!

Besides getting really familiar with CSS rules, the different ways in sizing elements also became apparent. For example, using px limits one to exact dimensions, while vh, vw or % scales relative to the view height, width or container in which they’re in. Speaking of containers, I set the CSS box-sizing to be border-box that includes content width, height and padding but not the margins. In this case, if one sets all margins to zero you can use padding in the outer elements to provide margins to their children. The default is content-box that only includes the width and height of the content and not the padding, border or margins and these can become problematic when using flex to wrap items.

For the animations, I used zoomIn and explodeOut with a 3d scale transform and a timing function for the player prompt and game over condition and a transition with preserved 3d transform with perspective for the card flip motion. The rest of the styling was according to the design, although I did change the colors to more of a neutral theme so that the card pictures draw the most attention. I guess, this is also out of consideration for parents who end up playing often with their kids!

We presented the current state of our projects as they were on Monday, 01 May to the whole cohort (a little nerve wracking!) and I’m really proud of what I achieved in four days! I’ll post a link to the recording as soon as it’s available. In the mean time, if you’d like to get the code, go clone it on Github here or follow some of the links in this blog to go to directly to some of the resources I used.

I’ll follow up with another blog soon where I’ll discuss the layout CSS (using vh, vw and % along with border-box) to discuss how the card layout and other components is achieved. In particular, I’ll show how the solution of absolute positioning with vh and vw, mixed with flex and height % overrides is useful and an often overlooked technique in a single-page application design.

We’re into our main capstone projects now, so there’ll be more to come.

Show your support

Clapping shows how much you appreciated Tina Heiligers’s story.