loading...

Easter Tile Game with VueJS and Confetti Celebration

tecknerd profile image tecknerd Updated on ・1 min read

A little late, but I used Vue JS to make a tile game where the user must reorganize the tiles to complete the image. I remember seeing these in Easter baskets as a child. Complete the puzzle to get make the confetti drop.

I've come to see the game isn't mobile friendly, so my next step will be to make it so. Meanwhile, please enjoy it on a laptop or desktop. Thanks and apologies.

Update: The background images in the tiles respond to changes in screen size now. I did this by making the appropriate changes from

background: url('./happy-48398.png') no-repeat 0 0;

to

background: url('./happy-48398.png') no-repeat top left;
background-size: 300%;

for each tile. The tile container also works a little better by changing from a static pixel size to a relative size.

Update: Added a countdown timer.

Update: After adding the timer I never implemented any feedback to the user when time was up, other than the timer displaying 0:00. Now a layer appears over the tile area and gives a Game Over. Still need to polish some of the CSS and sizing. Think I might change the image also.

Discussion

pic
Editor guide
Collapse
gertvdv profile image
Gert Van de Ven

Awesome! Now add a timer and a leaderboard ;)

Collapse
tecknerd profile image
tecknerd Author

That's a great idea! Thank you!