Coding Cookie Clicker in Web JavaScript Console

TheZZL · January 11, 2021

I've been taking an Intro to Computer Science class this last semester, and it's finally coming to an end. For the final project we were tasked with creating a game, and I chose Cookie Clicker. The project is due this Friday, so i've progressed a good amount. I'll update the thread as I finish the project, but here's what I got so far!

Code:

Spoiler


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 autoButtonCounter;
var autoButtonIcon;
var COOKIE_CENTER_X = 200;
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;


//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);
    
    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()*BOX_POS_ALIGN-5);
    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+35, autoButton.getHeight() + autoButtonCounter.getHeight()*15);
    autoButtonCounter.setFont("15pt Arial");
    add(autoButtonCounter);
    
    autoButtonPricePos = new Text("$" + baseAutoButtonPrice + "");
    autoButtonPricePos.setPosition(autoButton.getWidth()*4.35, autoButton.getHeight()*5.65);
    autoButtonPricePos.setFont("15pt Arial");
    add(autoButtonPricePos);
}

//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+=15;
        setTimer(autoButtonAddition, 10000);
        
        autoButtonIcon = new WebImage("https://i.imgur.com/64cOXoM.png");
        autoButtonIcon.setPosition(cookieWidth*3, cookieHeight*3);
        add(autoButtonIcon);
        setTimer(moveArrow, 50);
    }
    autoButtonPricePos.setText("$" + baseAutoButtonPrice + "");
    autoButtonCounter.setText("" + autoButtonUC + " Owned");
    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_XX;
    var yDist = autoButtonIcon.getY() - COOKIE_CENTER_YY;
    var radius = Math.sqrt(xDist * xDist + yDist * yDist);
    var dx = yDist/radius;
    var dy = -xDist/radius;
    autoButtonIcon.move(dx, dy);
    
}

//Timer for auto button cookies
function autoButtonAddition(){
    cookieCounter++;
    displayedCounter.setText(cookieCounter);
}

This is what it looks like:

Spoiler

Currently, you can only buy the Auto Click upgrade, and it gives you 1/10th of a cookie per second (Or one cookie every 10 seconds). Each time you buy the upgrade it costs 15 cookies more.The only issues to note is when the auto click icon (Cursor) is going around the cookie it spawns a static one, then un-uniformly goes around the cookie because I don't have its exact radius since it's a webimage with weird white space around it. Purchasing a new auto clicker makes the current icon freeze, and that's because of how the code is set up. I need to turn the cursor movement into an array and add more upgrades.

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

4

Edited January 20, 2021 by TheZZL

Roddy · January 11, 2021

fucking nerd, anyways your so smart zzl, you should help me with homework sometime

snoopy. · January 11, 2021

lol jb sm coding, nerd

touchy · January 11, 2021

not reading all that just came here to tell you something

just code duh.

RemixedPixel · January 12, 2021

Quote


baseAutoButtonPrice+=15;

If you want to match the game a bit more, you might want to make the auto clicker price increase exponentially, and then rounding to the nearest int.

I myself am terrible at coding for javascript, but here's my best try:

bastAutoButtonPrice = Math.round(baseAutoButton * 1.15);

1

TheZZL · January 20, 2021

Request Title:
my cookie clicker project
Type of request:
Other

Request details:
please help

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);
    
    var circle = new Circle(10);
    circle.setPosition(190,200);
    add(circle);
    
    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);
}

Priority:
High
Deadline:
2 minutes
Upload (optional):

5

Edited January 20, 2021 by TheZZL

Paggos · January 20, 2021

7 minutes ago, TheZZL said:

2 minutes

idk about that man

Bondairy · January 20, 2021

@Chadis really good at coding

Phoenix Rising · January 20, 2021

me when zzl tries to use "array.length = 100" on an array he hasn't defined

1

TheZZL · January 20, 2021

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

Code:

Spoiler


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:

Spoiler

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.

Edited January 20, 2021 by TheZZL

Sign In

Coding Cookie Clicker in Web JavaScript Console

Recommended Posts

TheZZL

Link to comment

Roddy

Link to comment

snoopy.

Link to comment

touchy

Link to comment

RemixedPixel

Link to comment

TheZZL

Link to comment

Paggos

Link to comment

Bondairy

Link to comment

Phoenix Rising

Link to comment

TheZZL

Link to comment

Reply to Thread

Create an account or sign in to comment

Create an account

Sign in

Forums

Donate