Coding Cookie Clicker in Web JavaScript Console

[Roddy]

  On 1/20/2021 at 6:51 PM, TheZZL said:

Welp, the period's over and this is the final product!

 

Code:

  Reveal hidden contents

var cookieCounter = 0;
var CENTER_IMAGE = 10;
var cookie;
var displayedCounter;
var COUNTER_ALIGN_NUMBER = 17;
var COOKIE_ALIGN_NUMBER = 5;
var cookieWidth = getWidth()/COOKIE_ALIGN_NUMBER;
var cookieHeight = getHeight()/COOKIE_ALIGN_NUMBER;
var autoButton;
var AUTO_BUTTON_W = 75;
var AUTO_BUTTON_H = 75;
var autoButtonText;
var AUTO_BUTTON_ALIGN = 1.1;
var AUTO_BUTTON_TEXT_W = 1.95;
var AUTO_BUTTON_TEXT_H = 2.65;
var baseAutoButtonPrice = 15;
var autoButtonUC = 0;
var grandmaButtonUC = 0;
var autoButtonCounter;
var grandmaButtonCounter;
var autoButtonIcon;
var COOKIE_CENTER_X = 190;
var COOKIE_CENTER_Y = 200;
var COOKIE_CENTER_XX = 203;
var COOKIE_CENTER_YY = 205;
var WORD_ALIGN = 182;
var BOX_POS_ALIGN = 1.25;
var AUTO_BUTTON_TEXT_ALIGN = 105;
var AUTO_BUTTON_TEXT_ALIGN_TWO = 11.25;
var autoButtonCounter;
var autoButtonPricePos;
var baseGrandmaButtonPrice = 100;
var grandmaButtonCounter;
var grandmaButton;
var grandmaButtonPricePos;
var developerCookies;
var arrowArray = [];
var baseFarmButtonPrice = 1100;
var farmButton;
var farmButtonCounter;
var farmButtonPricePos;
var farmButtonUC = 0;
var PRICE_POS_ALIGN = 5.65;
var mineButton;
var mineButtonCounter;
var mineButtonPricePos;
var mineButtonUC = 0;
var baseMineButtonPrice = 12000;
var FarmButtonUC = 0;
var HEIGHT_BOX_ALIGN = 22;
var TEXT_ALIGN_35 = 35;
var TEXT_ALIGN_154 = 154;
var TEXT_ALIGN_123 = 123;
var TEXT_ALIGN_130 = 130;

//Cookie drawing
//clickmethod 
//drawing cookie counter
//autobutton upgrade box & text
function start() {
    cookie = new WebImage("https://i.imgur.com/BR2pge1.png");
    cookie.setPosition(cookieWidth, cookieHeight);
    add(cookie);
    
    mouseClickMethod(clickCookies);
    
    developerCookies = new Rectangle(2,2);
    developerCookies.setPosition(getWidth()/2.15, getHeight()/15);
    developerCookies.setColor(Color.gray);
    add(developerCookies);
    
    displayedCounter = new Text(cookieCounter);
	displayedCounter.setPosition(getWidth() / 2 - displayedCounter.getWidth(), getHeight() - displayedCounter.getHeight() *COUNTER_ALIGN_NUMBER);
	add(displayedCounter);
	
	autoButton = new Rectangle(AUTO_BUTTON_W, AUTO_BUTTON_H);
    autoButton.setPosition(getWidth() - autoButton.getWidth()*BOX_POS_ALIGN, getHeight() - autoButton.getHeight()-HEIGHT_BOX_ALIGN);
    autoButton.setColor(Color.gray);
    add(autoButton);
    
    var autoButtonText = new Text("Auto Click");
    autoButtonText.setPosition(autoButton.getWidth() + autoButtonText.getWidth()+AUTO_BUTTON_TEXT_ALIGN, autoButton.getHeight() + autoButtonText.getHeight()*AUTO_BUTTON_TEXT_ALIGN_TWO);
    autoButtonText.setFont("15pt Arial");
    add(autoButtonText);
    
    autoButtonCounter = new Text("" + autoButtonUC + " Owned");
    autoButtonCounter.setPosition(autoButton.getWidth() + autoButtonText.getWidth()+AUTO_BUTTON_TEXT_ALIGN+TEXT_ALIGN_35, autoButton.getHeight() + autoButtonCounter.getHeight()*15);
    autoButtonCounter.setFont("15pt Arial");
    add(autoButtonCounter);
    
    autoButtonPricePos = new Text("$" + baseAutoButtonPrice + "");
    autoButtonPricePos.setPosition(autoButton.getWidth()*4.35, autoButton.getHeight()*PRICE_POS_ALIGN);
    autoButtonPricePos.setFont("15pt Arial");
    add(autoButtonPricePos);
    
    grandmaButton = new Rectangle(AUTO_BUTTON_W, AUTO_BUTTON_H);
    grandmaButton.setPosition(getWidth() - grandmaButton.getWidth() -125, getHeight()- grandmaButton.getHeight() -HEIGHT_BOX_ALIGN);
    grandmaButton.setColor(Color.green);
    add(grandmaButton);
    
    var grandmaButtonText = new Text("Grandmas");
    grandmaButtonText.setPosition(grandmaButton.getWidth() + grandmaButtonText.getWidth()-5, grandmaButton.getHeight() + grandmaButtonText.getHeight()*11+10);
    grandmaButtonText.setFont("15pt Arial");
    add(grandmaButtonText);
    
    grandmaButtonCounter = new Text("" + grandmaButtonUC + " Owned");
    grandmaButtonCounter.setPosition(grandmaButton.getWidth() + grandmaButtonText.getWidth()+29, grandmaButton.getHeight() + grandmaButtonCounter.getHeight()*15);
    grandmaButtonCounter.setFont("15pt Arial");
    add(grandmaButtonCounter);
    
    grandmaButtonPricePos = new Text("$" + baseGrandmaButtonPrice + "");
    grandmaButtonPricePos.setPosition(grandmaButton.getWidth()*2.5+25, grandmaButton.getHeight()*PRICE_POS_ALIGN);
    grandmaButtonPricePos.setFont("15pt Arial");
    add(grandmaButtonPricePos);
    
    farmButton = new Rectangle(AUTO_BUTTON_W, AUTO_BUTTON_H);
    farmButton.setPosition(getWidth() - farmButton.getWidth()*4, getHeight() - farmButton.getHeight()-HEIGHT_BOX_ALIGN);
    farmButton.setColor(Color.blue);
    add(farmButton);
    
    var farmButtonText = new Text("Farms");
    farmButtonText.setPosition(farmButton.getWidth() + farmButtonText.getWidth()/2, farmButton.getHeight() + farmButtonText.getHeight()*11+10);
    farmButtonText.setFont("15pt Arial");
    add(farmButtonText);
    
    farmButtonCounter = new Text("" + farmButtonUC + " Owned");
    farmButtonCounter.setPosition(farmButton.getWidth() + farmButtonText.getWidth()-30, farmButton.getHeight() + farmButtonCounter.getHeight()*15);
    farmButtonCounter.setFont("15pt Arial");
    add(farmButtonCounter);
    
    farmButtonPricePos = new Text("$" + baseFarmButtonPrice + "");
    farmButtonPricePos.setPosition(farmButton.getWidth() + farmButtonPricePos.getWidth()/2, farmButton.getHeight()*PRICE_POS_ALIGN);
    farmButtonPricePos.setFont("15pt Arial");
    add(farmButtonPricePos);
    
    mineButton = new Rectangle(AUTO_BUTTON_W, AUTO_BUTTON_H);
    mineButton.setPosition(getWidth() - mineButton.getWidth()*5.25, getHeight() - mineButton.getHeight()-HEIGHT_BOX_ALIGN);
    mineButton.setColor(Color.red);
    add(mineButton);
    
    var mineButtonText = new Text("Mines");
    mineButtonText.setPosition(mineButton.getWidth() + mineButtonText.getWidth()-TEXT_ALIGN_130, mineButton.getHeight() + mineButtonText.getHeight()*11+10);
    mineButtonText.setFont("15pt Arial");
    add(mineButtonText);
    
    mineButtonCounter = new Text("" + mineButtonUC + " Owned");
    mineButtonCounter.setPosition(mineButton.getWidth() + mineButtonText.getWidth()-TEXT_ALIGN_123, mineButton.getHeight() + mineButtonCounter.getHeight()*15);
    mineButtonCounter.setFont("15pt Arial");
    add(mineButtonCounter);
    
    mineButtonPricePos = new Text("$" + baseMineButtonPrice + "");
    mineButtonPricePos.setPosition(mineButton.getWidth() + mineButtonPricePos.getWidth()-TEXT_ALIGN_154, mineButton.getHeight()*PRICE_POS_ALIGN);
    mineButtonPricePos.setFont("15pt Arial");
    add(mineButtonPricePos);
}

//Checks if mouseclick is on the cookie or on an upgrade, 
//and if so adds correct number of cookies to counter, increases price by double, displays clickIcon and starts timer for motion
function clickCookies(e){
    if(cookie == getElementAt(e.getX(), e.getY())){
         cookieCounter++;
    }
    if((autoButton == getElementAt(e.getX(), e.getY()) || autoButtonPricePos == getElementAt(e.getX(), e.getY())) && cookieCounter >= baseAutoButtonPrice){
        autoButtonUC++;
        cookieCounter-=baseAutoButtonPrice;
        baseAutoButtonPrice = Math.round(baseAutoButtonPrice * 1.15);
        setTimer(autoButtonAddition, 10000);
        
        autoButtonIcon = new WebImage("https://i.imgur.com/64cOXoM.png");
        autoButtonIcon.setPosition(cookieWidth*3, cookieHeight*3);
        add(autoButtonIcon);
        setTimer(moveArrow, 50);
        arrowArray.push(1);
    }
    if((grandmaButton == getElementAt(e.getX(), e.getY()) || grandmaButtonPricePos == getElementAt(e.getX(), e.getY())) && cookieCounter >= baseGrandmaButtonPrice){
        grandmaButtonUC++;
        cookieCounter-=baseGrandmaButtonPrice;
        baseGrandmaButtonPrice = Math.round(baseGrandmaButtonPrice * 1.15);
        setTimer(grandmaButtonAddition, 1000);
        
    }
    if((farmButton == getElementAt(e.getX(), e.getY()) || farmButtonPricePos == getElementAt(e.getX(), e.getY())) && cookieCounter >= baseFarmButtonPrice){
    
        farmButtonUC++;
        cookieCounter-=baseFarmButtonPrice;
        baseFarmButtonPrice = Math.round(baseFarmButtonPrice * 1.15);
        setTimer(farmButtonAddition, 800);
    }
     if((mineButton == getElementAt(e.getX(), e.getY()) || mineButtonPricePos == getElementAt(e.getX(), e.getY())) && cookieCounter >= baseMineButtonPrice){
    
        mineButtonUC++;
        cookieCounter-=baseMineButtonPrice;
        baseMineButtonPrice = Math.round(baseMineButtonPrice * 1.15);
        setTimer(mineButtonAddition, 470);
    }
    if(developerCookies == getElementAt(e.getX(), e.getY())){
        cookieCounter = 999999;
    }
    
    autoButtonPricePos.setText("$" + baseAutoButtonPrice + "");
    autoButtonCounter.setText("" + autoButtonUC + " Owned");
    grandmaButtonCounter.setText("" + grandmaButtonUC + " Owned");
    grandmaButtonPricePos.setText("$" + baseGrandmaButtonPrice + "");
    farmButtonCounter.setText("" + farmButtonUC + " Owned");
    farmButtonPricePos.setText("$" + baseFarmButtonPrice + "");
    mineButtonCounter.setText("" + mineButtonUC + " Owned");
    mineButtonPricePos.setText("$" + baseMineButtonPrice + "");
    displayedCounter.setText(cookieCounter);
	displayedCounter.setPosition(getWidth() / 2 - displayedCounter.getWidth(), getHeight() - displayedCounter.getHeight() *COUNTER_ALIGN_NUMBER);
    
	//for(var i = 0; i > autoButtonUC)
}
////make array and proper going around cookie
//Moving autobuttonIcon around cookie
function moveArrow(){
    var xDist = autoButtonIcon.getX() - COOKIE_CENTER_X;
    var yDist = autoButtonIcon.getY() - COOKIE_CENTER_Y;
    var radius = Math.sqrt(xDist * xDist + yDist * yDist);
    var dx = yDist/radius;
    var dy = -xDist/radius;
    autoButtonIcon.move(dx, dy);
    
}

//Timers
function autoButtonAddition(){
    cookieCounter++;
    displayedCounter.setText(cookieCounter);
}

function grandmaButtonAddition(){
    cookieCounter++;
    displayedCounter.setText(cookieCounter);
}

function farmButtonAddition(){
    cookieCounter++;
    displayedCounter.setText(cookieCounter);
}

function mineButtonAddition(){
    cookieCounter++;
    displayedCounter.setText(cookieCounter);
}

 

 

What it looks like:

  Reveal hidden contents

 

The final thing I really wanted to get done was properly getting the auto clickers (cursors) to go around the cookie, and not in the fucked way I had it set up. This is what it looks like since I created the cursor/icons speed based on the previous cursors:

 

As you can see, not only does it move out of the orbit of the cookie, but if this was a recording you could see how fast it was moving.

Another issue you can notice is how as I bought more of the Auto Clickers the price moved off the square, that's because all the graphics were put into roughly the right spot, then moved over to where i liked using magic numbers (i know i know).

I found out is if I had created a function to create new upgrades instead of typing it all out manually I would've saved time and 87 lines of code. 

Finally, the last things I would've added if I had proper time management would've been a cookies per second counter, and a button that wipes all your progress but starts you off with some type of bonus.

 

I'll post again sometime later when I get the grade and comments for the project. 

Expand  

can I play it

 

[TheZZL]

  On 1/20/2021 at 8:18 PM, Technoblade said:

can I play it

 

Expand  

You can have the code I linked above, but I can't like link you a website to play it on. The real cookie clicker is here

[Dreamz]

This is cool as shit. Javascript is a good language to know.

[Fl1ck]

Sick game 
 

  On 1/11/2021 at 4:54 PM, TheZZL said:

Apologies in advance for shit looking code that makes no sense to anyone except me

Expand  

var str = "I'm a beginner :)"; 
console.log(str); 

[fantastic]

  On 1/24/2021 at 5:48 PM, Fl1ck said:

Sick game 
 

var str = "I'm a beginner :)"; 
console.log(str); 

Expand  

we haven't used var in years, use const or let

 

bad meme, -2