gemClicker not working

Code Help HTML/CSS/JS
1

Why Is the small cookie not appearing?


Repl link:

document.getElementById("stageOne").addEventListener("click", buyStageOne);
document.getElementById("hideStageTwo").addEventListener("click", buyStageTwo);
document.getElementById("chipProducer").addEventListener("click", chipProducer);
document.getElementById("powerPunch").addEventListener("click", powerPunch);
document.getElementById("chipCollector").addEventListener("click", chipCollector);
document.getElementById("chipCollector").addEventListener("click", chipCollector);
document.getElementById("chipHarvest").addEventListener("click", chipHarvest);
document.getElementById("mightyMallet").addEventListener("click", mightyMallet);
document.getElementById("crunchyCore").addEventListener("click", crunchyCore);
document.getElementById("megaChipProcessor").addEventListener("click", megaChipProcessor);
document.getElementById("chippyHelper").addEventListener("click", chippyHelper);

document.getElementById("hideStageOne").style.display = 'none';
document.getElementById("stageTwoContent").style.display = 'none';

// Capture the right-click event on the tab
window.addEventListener('contextmenu', function(event) {
  // Check if the right-click was performed on a tab element
  var isTab = event.target.classList.contains('tab');

  // If it was a right-click on a tab, prevent the context menu from appearing
  if (isTab) {
    event.preventDefault();
  }
});


var min = 1;
var max = 4;
var hit;

var maxYield = 8;
var minYield = 1;


var percentChance;
var percent = 0;


var chipYield;
var chipOwned = 0;
var cookieBroke = 0;
var cookieClick = 1;




//var maxChipCollector = 0;



const Cookie = {
  health: 50
};

//ITEMS
const PowerPunch = {
	name: "Power Punch",
	damage: "3",
	cost: "20",
	description: "+3 MaxHit."
};

const ChipCollector = {
	name: "Chip Collector",
	click: 2,
	cost: "25",
	percent: 0,
	description: "+10% for +1 Chip/Click"
};

const ChipHarvest = {
	name: "Chip Harvest",
	min: 1,
	cost: 20,
	description: "+3 MaxChip/CookieBroke"
};

const ChipProducer = {
  name: "Chip Producer",
  baseChipsPerSecond: 0.0,
  cost: 20,
  description: "+1 Chips/Second",
};

// Stage One
const StageOne = {
	name: "Stage One",
	cost: 500
};

const MightyMallet = {
	name: "Mighty Mallet",
	damage: "1",
	cost: "75",
	description: "+1 MinHit."
};

const CrunchyCore = {
  name: "Crunchy Core",
  min: 1, 
  cost: 50,
  description: "+1 MinChip/CookieBroke",
};

const MegaChipProcessor = {
	name: "Mega Chip Processor",
	baseChipsPerSecond: 0.0,
	cost: 50,
	description: "+2 Chips/Second",
};

// Stage Two
const StageTwo = {
	name: "Stage Two",
	cost: 1000
};

const ChippyHelper = {
	name: "Chippy Helper",
	baseChipsPerSecond: 0.0,
	cost: 100,
	description: "+5 Chips/Second"
}


var cookieHealth = Cookie.health;

function hitCookie() {
	hit = Math.floor(Math.random() * (max - min) ) + min;
	percentChance = Math.random() * 101;
		if(percentChance < ChipCollector.percent) {
			 chipOwned = parseInt(chipOwned) + parseInt(ChipCollector.click);
		}
	
	document.getElementById("chipOwned").innerHTML = chipOwned;
	
	cookieHealth = cookieHealth - hit;
	document.getElementById("newCookie").innerHTML = cookieHealth;
	
	
	if(cookieHealth <= 0) {
		chipYield = Math.floor(Math.random() * (maxYield - minYield) ) + minYield;
	  cookieHealth = Cookie.health;
		document.getElementById("newCookie").innerHTML = cookieHealth;
		chipOwned = chipOwned + chipYield;
		document.getElementById("chipOwned").innerHTML = chipOwned;
		cookieBroke = cookieBroke + 1;
	}

	if(cookieBroke == 20){
		cookieBroke = 0;
		Cookie.health = Cookie.health + 25;
	}
	
}





//PowerPunch
function powerPunch() {
 	if (chipOwned >= PowerPunch.cost){
 		max = max + 3;
 		chipOwned = chipOwned - PowerPunch.cost;
 		document.getElementById("chipOwned").innerHTML = chipOwned;
 		PowerPunch.cost = Math.round(PowerPunch.cost * 1.5);
 		document.getElementById("powerPunch").innerHTML = PowerPunch.name + ":<br> Cost: " + PowerPunch.cost + ".<br> " + PowerPunch.description;
 	}
 }

//Chip Collector
 function chipCollector() {
	if (chipOwned >= ChipCollector.cost){
		ChipCollector.percent = parseInt(ChipCollector.percent) + parseInt(10);
		chipOwned = chipOwned - ChipCollector.cost;
		document.getElementById("chipOwned").innerHTML = chipOwned;
		ChipCollector.cost = Math.round(ChipCollector.cost * 1.5);
		document.getElementById("chipCollector").innerHTML = ChipCollector.name + ":<br> Cost: " + ChipCollector.cost + ".<br> " + ChipCollector.description;
		
		}
	}

//Chip Harvest
function chipHarvest() {
	if (chipOwned >= ChipHarvest.cost){
		maxYield = maxYield + 3;
		chipOwned = chipOwned - ChipHarvest.cost;

		document.getElementById("chipOwned").innerHTML = chipOwned;
		ChipHarvest.cost = Math.round(ChipHarvest.cost * 1.5);
		document.getElementById("chipHarvest").innerHTML = ChipHarvest.name + ":<br> Cost: " + ChipHarvest.cost + ".<br> " + ChipHarvest.description;
	}
}

//Chip Producer
function chipProducer() {
  if (chipOwned >= ChipProducer.cost) {
    chipOwned -= ChipProducer.cost;
    ChipProducer.cost = Math.round(ChipProducer.cost * 1.5);
		ChipProducer.baseChipsPerSecond += 1 / 200;
    document.getElementById("chipOwned").innerHTML = chipOwned;
    document.getElementById("chipProducer").innerHTML =
      ChipProducer.name +
      ":<br> Cost: " +
      ChipProducer.cost +
      ".<br> " +
      ChipProducer.description;
  }
}

// Mega Chip Processor
function megaChipProcessor() {
  if (chipOwned >= MegaChipProcessor.cost) {
    MegaChipProcessor.level += 1;
    chipOwned -= MegaChipProcessor.cost;
    MegaChipProcessor.cost = Math.round(MegaChipProcessor.cost * 1.75);
		MegaChipProcessor.baseChipsPerSecond += 2 / 200;
    document.getElementById("chipOwned").innerHTML = chipOwned;
    document.getElementById("megaChipProcessor").innerHTML =
      MegaChipProcessor.name +
      ":<br> Cost: " +
      MegaChipProcessor.cost +
      ".<br> " +
      MegaChipProcessor.description;
  }
}

//Mighty Mallet
function mightyMallet() {
 	if ((chipOwned >= MightyMallet.cost) && (min + 1 != max)){
 		min = min + 1;
 		chipOwned = chipOwned - MightyMallet.cost;
 		document.getElementById("chipOwned").innerHTML = chipOwned;
 		MightyMallet.cost = Math.round(MightyMallet.cost * 1.5);
 		document.getElementById("mightyMallet").innerHTML = MightyMallet.name + ":<br> Cost: " + MightyMallet.cost + ".<br> " + MightyMallet.description;
	
 	}
 }

//Crunchy Core
function crunchyCore() {
	if ((chipOwned >= CrunchyCore.cost) && (minYield + 1 != maxYield)){
		minYield = minYield + 1;
		chipOwned = chipOwned - CrunchyCore.cost;
		document.getElementById("chipOwned").innerHTML = chipOwned;
		CrunchyCore.cost = Math.round(CrunchyCore.cost * 1.5);
		document.getElementById("crunchyCore").innerHTML = CrunchyCore.name + ":<br> Cost: " + CrunchyCore.cost + ".<br> " + CrunchyCore.description;
	}
}

//Chippy Helper 
function chippyHelper() {
	if (chipOwned >= ChippyHelper.cost) {
    chipOwned -= ChippyHelper.cost;
    ChippyHelper.cost = Math.round(ChippyHelper.cost * 1.75);
		ChippyHelper.baseChipsPerSecond += 5/200;
    document.getElementById("chipOwned").innerHTML = chipOwned;
    document.getElementById("chippyHelper").innerHTML =
      ChippyHelper.name +
      ":<br> Cost: " +
      ChippyHelper.cost +
      ".<br> " +
      ChippyHelper.description;
  }
}



function play() {
  document.getElementById("gameBoard").style.display = 'block';
  document.getElementById("newCookie").innerHTML = Cookie.health;
	// gemClicker();
	gemClicker();
	

	
}

function shopScene() {
	document.getElementById("shopScene").style.display = 'block';
	document.getElementById("powerPunch").innerHTML = PowerPunch.name + ":<br> Cost: " + PowerPunch.cost + ".<br> " + PowerPunch.description;
	document.getElementById("chipCollector").innerHTML = ChipCollector.name + ":<br> Cost: " + ChipCollector.cost + ".<br> " + ChipCollector.description;
	document.getElementById("chipHarvest").innerHTML = ChipHarvest.name + ":<br> Cost: " + ChipHarvest.cost + ".<br> " + ChipHarvest.description;
	document.getElementById("chipProducer").innerHTML = ChipProducer.name + ":<br> Cost: " + ChipProducer.cost + ".<br> " + ChipProducer.description;
	document.getElementById("stageOne").innerHTML = StageOne.name + "<br> Cost: " + StageOne.cost + " to Unlock.";
}	

function back() {
	document.getElementById("shopScene").style.display = 'none';
}



function generation() {
	
  
    let totalChipGeneration = 0;
    let intervalID = setInterval(() => {
      let currentChipGeneration =
        ChipProducer.baseChipsPerSecond +
        MegaChipProcessor.baseChipsPerSecond +
				ChippyHelper.baseChipsPerSecond;

      totalChipGeneration += currentChipGeneration;
      let chipsToAdd = Math.floor(totalChipGeneration);
      
      chipOwned += chipsToAdd;
      totalChipGeneration -= chipsToAdd;

      document.getElementById("chipOwned").innerHTML = chipOwned;

    }, 1);

}

generation();

function buyStageOne() {
	if (chipOwned >= StageOne.cost){
		chipOwned = chipOwned - StageOne.cost;
 		document.getElementById("chipOwned").innerHTML = chipOwned;
		document.getElementById("stageOne").style.display = 'none';
		document.getElementById("hideStageOne").style.display = 'flex';
		document.getElementById("mightyMallet").innerHTML = MightyMallet.name + ":<br> Cost: " + MightyMallet.cost + ".<br> " + MightyMallet.description;
		document.getElementById("crunchyCore").innerHTML = CrunchyCore.name + ":<br> Cost: " + CrunchyCore.cost + ".<br> " + CrunchyCore.description;
		document.getElementById("megaChipProcessor").innerHTML = MegaChipProcessor.name + ":<br> Cost: " + MegaChipProcessor.cost + ".<br> " + MegaChipProcessor.description;
		document.getElementById("stageTwo").innerHTML = StageTwo.name + "<br> Cost: " + StageTwo.cost + " to Unlock.";
	}
}

function buyStageTwo() {
	if (chipOwned >= StageTwo.cost){
		chipOwned = chipOwned - StageTwo.cost;
 		document.getElementById("chipOwned").innerHTML = chipOwned;
		document.getElementById("hideStageTwo").style.display = 'none';
		document.getElementById("stageTwoContent").style.display = 'flex';
		document.getElementById("chippyHelper").innerHTML = ChippyHelper.name + ":<br> Cost: " + ChippyHelper.cost + ".<br> " + ChippyHelper.description;
	}
}


// store the number of gems collected

 function gemClicker() {
 let gems = 0;

 // create a cookie image element
 const cookieArt = document.createElement("img");

 // set its width so it's not too big
 cookieArt.width = 50;

 // make sure the cookie is hidden
 cookieArt.hidden = true;
 // remove any margins/padding
 cookieArt.style.margin = 0;
 cookieArt.style.padding = 0;
 // enable us to set x and y coordinates for the cookie
 cookieArt.style.position = "fixed";
 cookieArt.style.left = 0;
 cookieArt.style.top = 0;
	// set a high z-index to make it appear in front
cookieArt.style.zIndex = 9999;
 
 // set the cookies source
 cookieArt.src = "./Cookie.webp";

 // remember the current timeout (so we can cancel it)
 let timeoutID = null;

 // create a recursive timeout loop to show/hide the cookie
function cookieTimeout() {
 	timeoutID = window.setTimeout(function loop() {
		// move cookie to random position
 		cookieArt.style.left = Math.floor(Math.random() * (window.innerWidth - cookieArt.width)) + "px";
 		cookieArt.style.top = Math.floor(Math.random() * (window.innerHeight - cookieArt.height)) + "px";
		// show the cookie
 		cookieArt.hidden = false;
 		// wait to hide the cookie again
 		timeoutID = window.setTimeout(function() {
 			// hide the cookie
 			cookieArt.hidden = true;
 			// wait to repeat this loop
 			timeoutID = window.setTimeout(loop, Math.round(Math.random() * 7000 + 3000)); // 3 to 10 seconds
 		}, Math.round(Math.random() * 7000 + 3000)); // 3 to 10 seconds
 	}, Math.round(Math.random() * 7000 + 3000)); // 3 to 10 seconds
 }

 // only start when the DOM is loaded and ready
 window.addEventListener("load", function() {
 	// get the gem display
 	const gemDisplay = document.getElementById("gem-display");

 	// add a click event to the cookie
 	cookieArt.addEventListener("click", function() {
 		gems += Math.round(Math.random() * 1 + 2); // + 5 to 10 gems on click
 		// update the gem display
 		gemDisplay.textContent = "Gems: " + gems;
 		// stop the timeout loop
 		window.clearTimeout(timeoutID);
 		// hide the cookie
 		cookieArt.hidden = true;
 		// restart the timeout loop
 		cookieTimeout();
 	});

 	// add the cookie to the DOM
 	document.body.append(cookieArt);

 	// start the timeout loop
 	cookieTimeout();
 });
 }
3

It works if I put the gemClicker() out of the play function. but not when it’s in the function.

4

can you tell us why it doesn’t work?

5

that is what I’m trying to figure out.

gemClicker();

If I put that outside any function the cookie will appear on the main screen but if I have it inside the play function it doesn’t appear. it be because it appearing behind the game scene but I tried z index and that didn’t help

6

https://cookiecrusher.killercl0wn.repl.co/ that is the game. ill place it outside the functions so you can see what happens just don’t click play

7

could you explain what you are trying to do, what is happening, and why you think it’s not working as well as the most relevant pieces of code?

3 Likes
8

open the link i gave you and you’ll see what I want it to do

 function gemClicker() {
 let gems = 0;

 // create a cookie image element
 const cookieArt = document.createElement("img");

 // set its width so it's not too big
 cookieArt.width = 50;

 // make sure the cookie is hidden
 cookieArt.hidden = true;
 // remove any margins/padding
 cookieArt.style.margin = 0;
 cookieArt.style.padding = 0;
 // enable us to set x and y coordinates for the cookie
 cookieArt.style.position = "fixed";
 cookieArt.style.left = 0;
 cookieArt.style.top = 0;
	// set a high z-index to make it appear in front
cookieArt.style.zIndex = 9999;
 
 // set the cookies source
 cookieArt.src = "./Cookie.webp";

 // remember the current timeout (so we can cancel it)
 let timeoutID = null;

 // create a recursive timeout loop to show/hide the cookie
function cookieTimeout() {
 	timeoutID = window.setTimeout(function loop() {
		// move cookie to random position
 		cookieArt.style.left = Math.floor(Math.random() * (window.innerWidth - cookieArt.width)) + "px";
 		cookieArt.style.top = Math.floor(Math.random() * (window.innerHeight - cookieArt.height)) + "px";
		// show the cookie
 		cookieArt.hidden = false;
 		// wait to hide the cookie again
 		timeoutID = window.setTimeout(function() {
 			// hide the cookie
 			cookieArt.hidden = true;
 			// wait to repeat this loop
 			timeoutID = window.setTimeout(loop, Math.round(Math.random() * 7000 + 3000)); // 3 to 10 seconds
 		}, Math.round(Math.random() * 7000 + 3000)); // 3 to 10 seconds
 	}, Math.round(Math.random() * 7000 + 3000)); // 3 to 10 seconds
 }

 // only start when the DOM is loaded and ready
 window.addEventListener("load", function() {
 	// get the gem display
 	const gemDisplay = document.getElementById("gem-display");

 	// add a click event to the cookie
 	cookieArt.addEventListener("click", function() {
 		gems += Math.round(Math.random() * 1 + 2); // + 5 to 10 gems on click
 		// update the gem display
 		gemDisplay.textContent = "Gems: " + gems;
 		// stop the timeout loop
 		window.clearTimeout(timeoutID);
 		// hide the cookie
 		cookieArt.hidden = true;
 		// restart the timeout loop
 		cookieTimeout();
 	});

The code Below is not in any function so it is working and causing the cookie to appear.

// store the number of gems collected
	gemClicker();
9

I want to know what you want to do in your own words … is there text on the website, I generally don’t ;lick on random websites

10

its a cookie clicker and yes there is text in my website

1 Like
11

well its a cookie that pops up then disappears then pops up and disappears and so on

1 Like
14

nvm, srry for confusing post. Anyways, to confirm, you want to make a cookie periodically appear on and off screen but it’s not working because of a specific function

15

correct it doesn’t work when it is called in a function

1 Like
16

i can invite you to my program if you want

1 Like
17

is there any errors?

18

no, i do not think so

19

can you confirm you are calling this function as well as the parent function

20

hang on let me use a alert to check

1 Like
21

what function is this again

22

gemClicker needs to work when its called in the play function

1 Like
23

k what is gemClicker supposed to do