Update 3 – Flipping, Colouring and Bomb Disarming

This week I wanted to get the flipping/colouring mechanic working. The first thing I did was make sure you can flip tiles. In order to flip tiles, I check if you are hovering over the tile and then if you press on the tile then flip it. When a tile is flipped it is animated to its stored colour and scaled to create a nice flip effect.

Here’s a gif of the flipping so far: https://gyazo.com/96517cd6c931f123882a8d03c09a9934

The tiles stored colour is set from the bombs. So, the bombs cycle through 3 layers of neighbours around them and then set the colour of the tiles on those layers in accordance with the distance away from the bomb. So, if the tile is 1 layer away from the bomb it is red, orange if it is 2 layers away and yellow if it is 3 layers away.

This is what the colour generation looks like at the moment: https://gyazo.com/8b61ba7eb5ace15682bc9e0c092f78eb

This week I also implemented the disarm logic. This logic is for when the user has successfully flipped all the bombs surrounding tiles, it disarms the bomb and creates a nice effect. If the user has disarmed all bombs, then the game is finished. When the user disarms a bomb the colours of the tiles are redone so that they can hint towards another bomb that the user has not yet found.

This is my animation for when a bomb is disarmed: https://gyazo.com/427cad950556da4c9e43c96211de55b5

Also, this is my animation for when the final bomb is disarmed: https://gyazo.com/e101f303298551623f1f1600d4e8cdc7

I also implemented the logic for when the user clicks on a bomb. When a user clicks on a bomb, the bomb will detonate and blow up the grid in a nice animation. When a user detonates a bomb, the grid will be regenerated, and they will have to start the level again.

This is my bomb detonation animation: https://gyazo.com/447e1f930ec510db2dbc8a60bc98d220

Here is a screenshot of a coloured grid:

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