setup()
setup() runs once when the sketch starts. It's where you initialize variables, create buttons, and set up game state. The loop that creates buttons shows a common pattern: for each item in a data array, create a UI element and store a reference to it for later updates.
🔬 This defines the cheapest upgrade. What happens if you change baseCPS from 0.1 to 1? How much faster does the game start? What if you change baseCost to 5?
upgrades.push({
name: "Cursor",
baseCost: 15,
cost: 15,
baseCPS: 0.1,
cps: 0.1,
count: 0,
button: null
});function setup() {
createCanvas(windowWidth, windowHeight);
textAlign(CENTER, CENTER);
textSize(24);
upgrades.push({
name: "Cursor",
baseCost: 15,
cost: 15,
baseCPS: 0.1,
cps: 0.1,
count: 0,
button: null
});
upgrades.push({
name: "Grandma",
baseCost: 100,
cost: 100,
baseCPS: 1,
cps: 1,
count: 0,
button: null
});
upgrades.push({
name: "Farm",
baseCost: 1100,
cost: 1100,
baseCPS: 8,
cps: 8,
count: 0,
button: null
});
upgrades.push({
name: "Mine",
baseCost: 12000,
cost: 12000,
baseCPS: 47,
cps: 47,
count: 0,
button: null
});
upgrades.push({
name: "Factory",
baseCost: 130000,
cost: 130000,
baseCPS: 260,
cps: 260,
count: 0,
button: null
});
upgrades.push({
name: "Bank",
baseCost: 1400000,
cost: 1400000,
baseCPS: 1400,
cps: 1400,
count: 0,
button: null
});
upgrades.push({
name: "Temple",
baseCost: 20000000,
cost: 20000000,
baseCPS: 7800,
cps: 7800,
count: 0,
button: null
});
let buttonY = 50;
for (let i = 0; i < upgrades.length; i++) {
let upgrade = upgrades[i];
let btn = createButton('');
btn.addClass('upgrade-button');
btn.position(width - 200, buttonY);
btn.mouseClicked(() => buyUpgrade(i));
upgrade.button = btn;
buttonY += 70;
}
let resetButton = createButton('Reset Game');
resetButton.addClass('reset-button');
resetButton.position(width - 200, height - 50);
resetButton.mouseClicked(resetGame);
loadGame();
autoSaveInterval = setInterval(saveGame, 5000);
}Line-by-line explanation (8 lines)
🔧 Subcomponents:
createCanvas(windowWidth, windowHeight);
Creates a full-screen canvas that responds to the window size
upgrades.push({...});
Initializes the upgrades array with seven upgrade types, each with name, costs, and production rates
for (let i = 0; i < upgrades.length; i++) {
Creates a p5.Button for each upgrade, assigns a click handler, and positions them vertically on the right side
let resetButton = createButton('Reset Game');
Creates a red button at the bottom right to reset all game progress
autoSaveInterval = setInterval(saveGame, 5000);
Restores previous progress and sets up automatic saving every 5 seconds
createCanvas(windowWidth, windowHeight);- Creates a canvas that fills the entire browser window, allowing the game to be responsive
textAlign(CENTER, CENTER);- Centers all text both horizontally and vertically, so text() commands will be centered at their coordinates
upgrades.push({...});- Each push() adds a new upgrade object to the upgrades array. The object stores the upgrade's name, base cost, current cost, production rate, and count owned
let btn = createButton('');- Creates a p5.Button element with empty text (text will be updated each frame in draw())
btn.mouseClicked(() => buyUpgrade(i));- Assigns a click handler using an arrow function that calls buyUpgrade() with the upgrade's index when clicked
upgrade.button = btn;- Stores a reference to the button object inside the upgrade data, so it can be updated later in draw()
loadGame();- Restores the player's score and upgrade progress from localStorage if a previous game was saved
autoSaveInterval = setInterval(saveGame, 5000);- Sets up automatic saving every 5000 milliseconds (5 seconds) to prevent progress loss
