Skip to content

Instantly share code, notes, and snippets.

@Richienb

Richienb/cookie-clicker.markdown

Created March 27, 2018 01:18
Download ZIP

Revisions

  1. Richienb created this gist Mar 27, 2018.
    7 changes: 7 additions & 0 deletions cookie-clicker.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Cookie Clicker
    --------------


    A [Pen](https://codepen.io/Richienb/pen/WzZEpB) by [Richie Bendall](https://codepen.io/Richienb) on [CodePen](https://codepen.io).

    [License](https://codepen.io/Richienb/pen/WzZEpB/license).
    76 changes: 76 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,76 @@
    <html>

    <body>
    <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--1-col">
    <div id="cookie">
    <div id="chip"></div>
    <div id="chip2"></div>
    <div id="chip3"></div>
    <div id="chip4"></div>
    </div>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
    <div id="space"></div>
    </div>
    </div>

    <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--3-col">
    <!-- Textfield with Floating Label -->
    <form action="#">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" name="message" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Your Bakery Name</label>
    </div>
    </form>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
    <!-- Colored mini FAB button -->
    <button id="sub" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button">
    <i class="material-icons">send</i>
    </button></div>
    </div>

    <table class="mdl-data-table mdl-js-data-table mdl-data-table mdl-shadow--2dp">
    <thead>
    <tr>
    <th class="mdl-data-table__cell--non-numeric">Name</th>
    <th>Cookies/Press</th>
    <th>Cost</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td class="mdl-data-table__cell--non-numeric">Granny</td>
    <td>×2 More</td>
    <td>30 Cookies</td>
    </tr>
    <tr>
    <td class="mdl-data-table__cell--non-numeric">Factory</td>
    <td>×10 More</td>
    <td>500 Cookies</td>
    </tr>
    <tr>
    <td class="mdl-data-table__cell--non-numeric">Plant</td>
    <td>×30 More</td>
    <td>1000 Cookies</td>
    </tr>
    <tr>
    <td class="mdl-data-table__cell--non-numeric">Time Machine</td>
    <td>1000× More</td>
    <td>100000 Cookies</td>
    </tr>
    </tbody>
    </table>

    <p>Intructions: Click the cookie, to create more cookies. You upgrade automatically when you have a specifc amount of cookies (see upgrade table)</p>

    <div id="numbers"></div>

    <!-- <svg width = "400" height="900">
    <line x1 ="100" y1 = "200" x2 = "400" y2 = "300" stroke= "red"/>
    </svg>-->
    </body>

    </html>
    53 changes: 53 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@

    var num = 0;

    $(document).ready(function(){

    $("#sub").click(function(){
    var name = $("input[name=message]").val();
    $("#space").append("<h1>"+name+"'s bakery</h1>")
    })

    $("#cookie").on('click',function(){
    num+=1;
    $('#numbers').append("<p class = nm> " + num + " <p>");


    if(num >= 10 ){
    num += 2;
    }

    if(num >= 500) {
    num += 4;
    }
    if(num >= 3000) {
    num += 10;
    }
    if(num >= 10000) {
    num += 40;
    }
    if(num >= 40000) {
    num += 100;
    }
    if(num >= 200000) {
    num += 400;
    }
    });


    $("#cookie").draggable();

    $("#cookie").mouseenter(function(){
    $("#cookie").animate({
    width: '+= 5',
    height: '+= 5'
    });
    });


    //$("#cookie").mouseleave(function(){
    /*$("#cookie").animate({
    width: '-= 5',
    height: '-= 5'
    });*/
    });
    2 changes: 2 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    81 changes: 81 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,81 @@
    body {
    font-family: "Noto Sans", sans-serif;
    background-color: rgb(244, 244, 244);
    color: rgb(33, 33, 33);
    }
    #cookie {
    text-align: center;
    background-color: rgb(115, 63, 0);
    height: 100px;
    width: 100px;
    border-radius: 100%;
    }
    #chip {
    position: absolute;
    top: 20px;
    margin: 50px;
    padding: 0px;
    background-color: rgb(61, 61, 61);
    height: 8px;
    width: 8px;
    border-radius: 100%;
    }
    #chip2 {
    position: absolute;
    top: 40px;
    left: -16px;
    margin: 50px;
    padding: 0px;
    background-color: rgb(61, 61, 61);
    height: 8px;
    width: 8px;
    border-radius: 100%;
    }
    #chip3 {
    position: absolute;
    top: 2px;
    left: -22px;
    margin: 50px;
    padding: 0px;
    background-color: rgb(61, 61, 61);
    height: 8px;
    width: 8px;
    border-radius: 100%;
    }
    #chip4 {
    position: absolute;
    top: -17px;
    left: 23px;
    margin: 50px;
    padding: 0px;
    background-color: rgb(61, 61, 61);
    height: 8px;
    width: 8px;
    border-radius: 100%;
    border-radius: 100%;
    }

    p {
    color: rgb(33, 33, 33);
    z-index: 1;
    display: inline-block;
    margin: 5px;
    }

    #space {
    text-align: center;
    border: 3px solid;
    border-radius: 3px;
    position: absolute;
    left: 122px;
    top: 20px;
    background-color: rgb(238,238,238);
    width: 389px;
    height: 78px;
    }
    table {
    border: 1px solid;
    }
    td {
    border: 1px solid;
    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />