Code Monkey home page Code Monkey logo

projet-cookie-clicker's Introduction

Exercice du cookie cliquable

Instructions

JS Cookie Clicker

Chocolate Chip Cookies

Step 1 : Base structure

Make a basic structure with HTML / CSS / JS. In the HTML, make a button named « Click » with an identifier and a div with an identifier output and set his initial value to 0.

Step 2 : Get the JS ready

Set up variables at the head of your JS that will allow us to manipulate our button and our div. We'll need another variable score initialized at 0.

Step 3 : Increase the score

When we click on the button, increase the value of the variable score by 1, then display that score in the output div.

Step 4 : Get the multiplier ready

Add a button with an identifier multiply. Create another click counter (name the variable multiplier and set it to 1) on that button. Create an associated function to the multiplier click called increaseMultiplier.

Step 5 : Use the multiplier

Make it so the score of the first button click doesn't increase by 1 but by the multiplier value. For example, if i clicked once on the multiplier button, each click on the first button will increase the score by 2 instead of 1.

Step 6 : Multiplier price

The multipier allows you to raise the score more quickly. It shouldn't be free ! Try to decrease the score by 50 when you click on the multiplier button.

Step 7 : No debts

We can't go in debt and the score can't get below 0. Try to update the score output after the multiplier purchase.

Step 8 : Counter output

Display the multiplier counter inside the button. For example, if the counter is at 5, the button text should be « Multiplier x5 ».

Step 9 : Price increasing

Buying a lot of multipliers is too easy. After buying six multipliers you'll figure out why the price should increase with each multiplier bought. For example, the first should be worth 50, the next 100, 200, and so on... Make it simple, you don't need a lot of conditions. Find a good way to raise the price !

Step 10 : Price display

In the button text, in addition to « x5 », add the cost of the next purchase.

Step 11 : Autoclicker

New upgrade to buy: Autoclick. As soon as you hit 200 score, a click is made automatically each second. (setInterval is your friend)

Step 12 : Autoclicker purchase

Autoclicked won't be automatic anymore. From now on you'll need to buy the autoclicker. Add a button with an autoclick identifier. It'll cost 500. Once the autoclicker bought, the button will have to be disabled.

Step 13 : Purchase of a bonus

From now on, we have to be able to buy a bonus that increase the score on each click by 200% for 30 seconds. It means that if you're supposed to get 3 on a click, for next 30 seconds the bonus will increase that click value to 6. After the 30 seconds the score should increase by 3 again. Create the « BONUS » button with an identifier bonus, and set the cost at 5000. Once the bonus bought, the number of seconds will be displayed in the button with the count and the button will have to be desactivated while the bonus is active. Once the bonus is over, the button have to be reactivated with the same text as before pressing it.

Step 14 : Desactivate buttons (if you don't have enough to buy them)

Make it so the buttons multiplier, autoclick and bonus can't be clicked UNLESS you have enough score to buy them.

Step 15 : Some CSS

Make it pretty ! No pictures !

projet-cookie-clicker's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.