DEV Community

tecknerd
tecknerd

Posted on • Updated on

Easter Tile Game with VueJS and Confetti Celebration

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.

Top comments (2)

Collapse
 
gertvdv profile image
Gert Van de Ven

Awesome! Now add a timer and a leaderboard ;)

Collapse
 
tecknerd profile image
tecknerd

That's a great idea! Thank you!