Fruit Punch is a game built with Vanilla JavaScript. Similar to Candy Crush, to get points a player must match at least 3 items in a row or column. When the items are matched, they disappear to make room for new items. The player can only switch two items when one is above, below, left, or right of another item. Diagonal moves are not allowed. When a player accumulates the target amount of points they progress to the next level. Each time the game progresses to the next level the number of moves available decreases, the points target increases, and a different type of item is added to the group of items to increase the matching difficulty. The player loses the game if they run out of moves before a level is complete. The player wins if all levels of the game are completed.
JavaScript
CSS
HTML
The most challenging part of this project became understanding the event loop and how it relates to rendering. I wanted there to be fluid animation so the player/user could understand what was happening in the game, instead of the items just magically appearing from nowhere or instantly becoming something else. As someone only familiar with the basics of JavaScript at the beginning of this project, it proved to be more of a challenge than initially expected. Understanding where the setTimeout() method, Promise objects, and rendering fit in the event loop helped me figure out why it looked like my animations weren't working. It wasn't a bug! It was just the event loop doing what it was designed to do.
Video - Jake Archibald: In The Loop
- Conquer Event Loop
- Clean Up Code
- Constructor for Modal
- Change setTimeout to Promises
- Test out animation for drag and drop element switching
- Add a button that solves the game for you
- Add touch events
- Add keyboard accessibility
- Gradient changes on the progress bar
Fruit Images - Image by titusurya on Freepik
Tropical Background - Image by pikisuperstar on Freepik
Bookman JF Font
How To CSS Glyphs & Swashes or "Unleash Hidden Gems in OpenType fonts"
Jake Archibald: In The Loop
Not currently looking for contributors, since this is a personal project meant to improve my JavaScript skills. However, helpful and constructive suggestions are always welcome.