A tribute to Cookie Clicker
You have been contracted by Coo Coo Computing Challengers to take a concept, Click Counter Calamity, from the drawing board to the browser. Coo Coo Computing Challengers is a company that spends more time creating alliterative puns than actual writing software and they need our help. They want you to create a webpage that keeps track of user clicks, but they have some strange requirements for 'Clicking Companions' and 'Collective Culmination Multipliers'. They have a list of requirements for us, but they are too busy trying to change the words in their company's mission statement to words that start with the letter 'C' exclusively to give us guidance on how to implement these requirements.
- You must create a website that tracks the amount of times the clicking button has been clicked.
- Create a button in the browser to click.
- Create a section on the page that interacts with the 'Clicking Companions'.
- Displays the amount of Clicking Companions purchased.
- Provides a button to purchase Clicking Companions.
- Button is disabled when you do not have enough clicks to buy a Clicking Companion.
- Create a section on the page that interacts with the 'Collective Culmination Multiplier'.
- Displays the amount of Collective Culmination Multiplier purchased.
- Provides a button to purchase Collective Culmination Multiplier.
- Button is disabled when you do not have enough clicks to buy a Collective Culmination Multiplier.
- Have a function that returns the click count.
- You must implement a feature called 'Clicking Companions'.
- Clicking Companions are bought with clicks from your click total.
- Each Clicking Companion that is purchased increases the cost of the next Clicking Companion.
- The initial cost should be around 100 clicks.
- For each Clicking Companion that has been purchased the count of clicks goes up by one every second. This is a cumulative effect, so having 100 Clicking Companions would result in having 100 clicks automatically added to the total every second.
- Have a function that adds the amount of Clicking Companions to the click total.
- Inside your game loop, call the above function every second.
- You must implement a feature called 'Collective Culmination Multipliers'.
- Collective Culmination Multipliers are bought with clicks from your click total.
- Each Collective Culmination Multiplier that is purchased increases the cost of the next Collective Culmination Multiplier.
- The initial cost should be around 10 clicks.
- The first Collective Culmination Multiplier increases the value of a click from
1xto1.2x. - Every subsequent Collective Culmination Multiplier increases the value of a click exponentially. For example, the second Collective Culmination Multiplier will increase the value of a click to
1.2x * 1.2xor1.44x.
- You must be able to reset the game state. This action should reset the game to zero clicks, zero Clicking Companions, and zero Collective Culmination Multipliers.
- This website also has some other requirements:
- Use semantic html and BEM when writing your html so that in the future we have a solid base to expand upon.
- You must have a header for this page. It should have a few of the following features:
- It should have a hamburger button that expands a navigation menu.
- A navigation menu that when clicked will expand sections about:
- Coo Coo Computing Challengers
- The inspiration for this game, Cookie Clicker.
- Your contact info.
- Deploy your project so that it is reachable on the internet.
Each iteration will focus on building out a part ot the game. The first iterations will focus on the logic that is needed to have a game. The latter will take us into linking the JavaScript into our website.
This iteration covers project setup and starting the creation of the game. Are first iterations are going to focus on the logic that is needed to have a game. The JavaScript for this iteration will be solely in a ClickCounter.js file and not pertain to the html page. We need to code some behavior before we can code the way the user interacts with the project.
As a developer, I want to use TDD to create this game, so that I know it is working as intended.
- Create a ClickCounter.spec.js file in the
/spec/jsfolder. - Create and set up a Jasmine spec runner for ClickCounter.js.
As a user, I want to know how many clicks I have clicked, so that I know what my score is.
- Can record a click.
- Can retrieve a click count.
As a user, I want to be able to purchase Clicking Companions, so that I don't have to keep clicking a button all day.
- Can retrieve a Clicking Companion count.
- Can add to the Clicking Companion count.
- Subtract the amount of the Clicking Companion cost from your click count.
As a game designer, I want the game to become more difficult as the game progresses, so that users will continue to play the game.
- Increase the cost of the second Clicking Companion by an additional ten percent to 110.
- Increase the cost of every additional Clicking Companion by an additional ten percent.
As the game designer, I want to ensure that players have to put the game into a proper state to be able to purchase a Clicking Companion, so that the game has a challenge.
- Prevent the Clicking Companion count from going up if there are not enough clicks to purchase a Companion.
FEATURE : The amount of Clicking Companions affect the amount of clicks added when an 'Add auto clicks' event is called.
As a user, I want to be able to purchase Clicking Companions, so that I don't have to keep clicking a button all day.
- When the 'add auto clicks' event is executed, add the amount of Clicking Companions to the click total.
This iteration covers the creation of the Collective Culmination Multipliers, the higher your Collective Culmination Multipliers count the more each click you take is worth.
FEATURE : Be able to purchase the first Collective Culmination Multiplier with 10 clicks from your click count.
As a user, I want to make my clicks more powerful, so that I can make the work to get more Clicking Companions easier.
- Can retrieve a Collective Culmination Multiplier count.
- Can add to the Collective Culmination Multiplier count.
- Subtract the amount of the Collective Culmination Multiplier cost from the click count.
As a game designer, I want the game to become more difficult as the game progresses, so that users will continue to play the game.
- Increase the cost of the second _Collective Culmination Multiplier by an additional ten percent to 11.
- Increase the cost of every additional Collective Culmination Multiplier by an additional ten percent.
As the game designer, I want to ensure that players have to put the game into a proper state to be able to purchase a Collective Culmination Multiplier, so that the game has a challenge.
- Prevent the Collective Culmination Multiplier count from going up if there are not enough clicks to purchase a Multiplier.
As a user, I want to make my clicks more powerful, so that I can make the work to get more Clicking Companions easier.
- Increase the amount of clicks added to the click count by 1.2 after the first Multiplier is purchased.
FEATURE : The amount the subsequent Collective Culmination Multipliers click bonus will go up exponentially.
As a CEO, I want my players hard earned Collective Culmination Multipliers to make a big impact, so that they keep playing the game.
- Increase the click value multiplier to 1.2 to the _x_th power, where x is the amount of the Multipliers count.
FEATURE : The Collective Culmination Multipliers click bonus will apply to clicks from the Click Companions.
As a user, I want to see my click investments work together to get me more clicks, so that I can have all the clicks.
- When an 'Add auto clicks' event is executed, increase the value of each auto click by the amount of the click value multiplier.
This iteration will prepare the html document for the game. Open the index.html file and start adding the elements you'll need. Maintain the structure of the HTML with semantic html elements and use BEM to give useful class attribute names to your elements. Use a combination of HTML, CSS, and JavaScript to achieve the trickier features below.
As a player, I want to have a button to click, so that I can start clicking things.
- In the main section of the page, create a button element.
- Label the button clearly as the button that needs to be clicked.
As a player, I want to know how many clicks I have, so that I can track my progress.
- Create an element that will provide the user with the click count.
As a user, I want to be able to buy and see how many Clicking Companions I have, so that I don't have to keep clicking all the time.
- Create an section of elements that include a purchase button and a count of Clicking Companions.
As a user, I want to be able to buy and see how many Collective Culmination Multipliers I have, so that my clicks can become super powered.
- Create an section of elements that include a purchase button and a count of Collective Culmination Multipliers.
As the marketing director, I want the customers to be able to find out more information about Coo Coo Computing Challengers, so that they will buy more stuff from us.
- Create a header and add a link that will make a box of company info popup for the user.
As the game designer, I want to give gamers a reference to our inspiration, the original Cookie Clicker game, so that the legal department will stop complaining that we stole the idea.
- Create another link that will open a new tab with Cookie Clicker's address.
As the developer, I want credit for writing this application, so that I can get a job.
- Create a modal element that is centered over the application and has a quick bio link about yourself and links to your portfolio and GitHub.com account.
This iteration will wire up your ClickCounter.js file to the index.html file and use the app.js file to link the two.
As a user, I want to see my click score go up when I click the clicker button, so that I can be rewarded for my hard work.
- When the clicker button is pressed the click count element should change value.
FEATURE : The Clicking Companions and Collective Culmination Multipliers purchase button should be grayed out and unresponsive if there are not enough clicks to buy the next item.
As a game designer, I want the user to have a visual clue that they cannot perform a game action, so that the user isn't frustrated by clicking buttons that can not do anything.
- When the click count is below the cost of a purchasable item, grey out or change the appearance of the button.
- Clicking the button when an item is cannot be purchased should not perform any action.
FEATURE : The Clicking Companion count and the Collective Culmination Multipliers count should be displayed.
As a user, I want to know how many Companions and Multipliers I have, so that I can brag to my friends.
- The amount of items purchased should be displayed in the same area as the button to purchase them.
- The amount of items purchased should be updated after each purchase.
As a user, I want to know how many clicks each click on the clicker button is worth, so that I can see the effect of the Multipliers on my clicking.
- Display the click multiplier value in the clicker button text or in an element somewhere close to the clicker button.
FEATURE : The Clicking Companions and Collective Culmination Multipliers price in clicks should be displayed.
As a user, I want to know how many clicks I have to click before I can purchase a Clicking Companion or Collective Culmination Multiplier, so that I know when I get to stop clicking.
- Display the cost of the Clicking Companions and Collective Culmination Multipliers in their purchase button or in an element nearby.
- Update the costs whenever the price is changed.
This iteration is for you to individualize your project. Use JavaScript to affect change to how your elements are displayed, add new features, document and make changes to the above rules, or make elements move across the screen.
As a CEO, I want this app to be on the INTERWEBS, so that I can collect my bonus.
- Use GitHub pages to deploy your project to the internet.
As a user, I want to be able to reset my game, so that my coworkers won't know how much time I wasted on clicking a button.
- Have a way to stay on the same page, but reset the state of the game.
As a game designer, I want to have a random element that creates starts a Click Storm, so that users will be engaged in the page.
- On random intervals have a button pop up and when clicked it starts an event where random buttons worth 10 - 100 clicks appear on the screen and fade away after a few seconds.
- This event should end after a minute, maybe provide a timer.
- Be able to change the appearance of the page, at a cost.
- Put on a set of headphones and add some sound to the clicks and click count milestones.
- Document the changes to the requirements you want to do and try to bring a better balance to the game.