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)
Awesome! Now add a timer and a leaderboard ;)
That's a great idea! Thank you!