How can I make an image randomly pop up on screen, and when clicked rewards the player

I want a feature similar to “golden cookies” in cookie clicker. https://replit.com/@BluebayStudios/Ples-nerd

Well, I have absolutely no experience in HTML/JS :slight_smile:
I can outline the basic idea though (or at least how’d I’d go about designing it)

I assume you’d have 3 basic components to this:

  1. The random appearance
  2. The actual reward
  3. Some sort of delay

The easiest way I can think of is to have a Math.random() run every tick, and say:

  • If Math.random = X, CreateClickable().

  • The clickable (or whatever you want to call it), would have a position.

  • Clicking code is just detecting if it’s clicked.

  • If it is clicked, then delete the Clickable, and apply some reward… (tracked as in x times production for y ticks, where default for x is one, and you times the per second by x). You could also add say 20% of their current value or something.

  • Another possibility is to have a timer before it appears, then set the timer to a random amount of time between 5 - 12 minutes (for example).

An idea to differentiate it from Cookie Clicker might be to make upgrades cheaper or something. A really cool idea (but hard to implement), would be some sort of minigame, where the better you do, the higher the reward you get (based on current reward per click or reward per tick)

I guess for implementation, I could do some research and supply some actual code. It might take me a while though :sweat_smile:, depending on the amount of time I have (finals in school are coming up).

1 Like

First you have to check the player’s screen size using window.innerWidth and window.innerHeight. Then, pick two random numbers in between 0 and the width and height respectively. Then, make the image and add it into an img tag. Make its CSS have position:absolute; so you can move it around programmatically. Then, set theImageElement.style.left to <THE RANDOM WIDTH NUMBER> + "px". Do the same but for the random height number and use .style.top. Then, you can add your own looping to spawn multiple and you can use similar code from the Nerds image to detect when the image is clicked and do stuff based on it.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.