LinkedIn | Website | Email | Github
Repository for coursework for TechEd Software Development Bootcamp - Week 02.
Recreate the famous Cookie Clicker game. The theme can be custom, but it must have persistence of user data (using local storage), increment both actively and passively (via input and intervals). It can optionally have upgrades and items.
All requirements and stretch goals were achieved. No specific difficulties.- Persistent Sugar Level: Save/Load user data from local storage - COMPLETE
- Make 'em Chewy: Gain cookies passively - COMPLETE
- Make 'em Crispy: Gain cookies by actively interacting with the webpage (ideally via clicking on a button) - COMPLETE
- Customer's Choice: Have different upgrades available for purchase that modify cookies per second or cookies per click - COMPLETE
- Rainbow Sprinkles: Add additional styles to the webpage to make it look fancy - COMPLETE
- Automated Bakery: Add new upgrades that have a prerequisite on other upgrades (eg: you need a grandma for every oven, or you can't buy more ovens) - COMPLETE
- Rest that CTRL+S Finger: Local Storage is pulled from on load to populate the player object. If playerdata is undefined, it is populated with defaults values. Additionally, if any invalid values are found, they are individually replaced with a default value. The local storage is updated with the most recent values in an adjustable period of time (from within code) via autosave. It can also be manually saved via the Save Data button. The local storage and current player state can also be cleared via the Reset Data button.
- Welfare Chocolate: Kitties are gained passively by a rate of 1 per sec initially. Items and upgrades can increase the KPS (kitties per sec). This is achieved simply through setInterval.
- Mandated Petting: Kitties are gained actively at a rate of 1 per click initially. Items and upgrades can increase the KPC (kitties per click). This is achieved simply through onClick listeners.
- Capitalism, baby!: Items change the rate of gain of passive kitties and active kitties, but they cost a portion of the kitty count.
- Petting, but with Style: My website is literally pink and full of cats. What more do you need?! The main clickable cat has animations, img switching and particle effects. The page layout uses a Grid layout to align at a high-level, then flex boxes to align elements at small-scale. I use drop-shadows uniformly across text to produce very readable text. I have added transparency to high-level grid elements to expose the background while still defining the overall shape of the grid elements. A border on these grid items helps to encapsulate the inner area cleanly.
- Sketchy Catnip Dealer: Upgrades are basically Items that have a prerequisite of having an equivalent Item already purchased. For example, you cannot buy a tenth Catnip without having a tenth Kitten.
- Happy Vibrations: The happy kitty creates love hearts when you click him! They have random direction, sizing, and a bunch of other attributes.
- RNG: The Risky Name Generator: A randomised new name for the player is generated every new user data (so first time, on data clear, on invalid name, etc) from two separate lists; adjectives and nouns. Which create a name following the structure of "ADJECTIVE NOUN".
- Fluffy Library: I encapsulated common behaviour and data used by both Items and Upgrades into a separate storeCommon.js to be used by both.
- Super Caticality: For every Item you buy, a new kitty shows up in your sandbox!