Skip to content

Instantly share code, notes, and snippets.

@GoldenretriverYT

GoldenretriverYT/chatgpt.html

Last active December 5, 2022 07:44
Show Gist options
  • Save GoldenretriverYT/f21f74f032e6adb2dd21edb5af3cf8c9 to your computer and use it in GitHub Desktop.
Save GoldenretriverYT/f21f74f032e6adb2dd21edb5af3cf8c9 to your computer and use it in GitHub Desktop.
Download ZIP
A full idle game generated by ChatGPT
Raw
chatgpt.html
<!DOCTYPE html>
<html>
<head>
<title>Candy Factory</title>
<style>
/* Add some basic styling for the game */
body {
font-family: sans-serif;
}
.game-container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.candy-counter {
font-size: 32px;
font-weight: bold;
}
.upgrade-container {
margin-top: 20px;
}
.upgrade {
display: inline-block;
padding: 10px;
margin: 5px;
background-color: #eee;
border-radius: 5px;
cursor: pointer;
}
.upgrade:hover {
background-color: #ddd;
}
.upgrade-name {
font-size: 18px;
font-weight: bold;
}
.upgrade-description {
font-size: 14px;
margin-top: 5px;
}
.upgrade-cost {
font-size: 14px;
margin-top: 10px;
color: #888;
}
.upgrade-button {
display: block;
margin-top: 10px;
padding: 10px 20px;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.upgrade-button:hover {
background-color: #222;
}
</style>
</head>
<body>
<div class="game-container">
<h1>Candy Factory</h1>
<div class="candy-counter">
Candy: <span id="candy-count">0</span>
</div>
<div class="upgrade-container">
<div class="upgrade" data-upgrade="faster-production">
<div class="upgrade-name">Faster Production</div>
<div class="upgrade-description">
Increase the production rate of the factory.
</div>
<div class="upgrade-cost">
Cost: 100 candy
</div>
<button class="upgrade-button" disabled>Upgrade</button>
</div>
<div class="upgrade" data-upgrade="bigger-factory">
<div class="upgrade-name">Bigger Factory</div>
<div class="upgrade-description">
Increase the maximum amount of candy the factory can hold.
</div>
<div class="upgrade-cost">
Cost: 200 candy
</div>
<button class="upgrade-button" disabled>Upgrade</button>
</div>
<div class="upgrade" data-upgrade="more-workers">
<div class="upgrade-name">More Workers</div>
<div class="upgrade-description">
Increase the number of workers in the factory, allowing it to produce more candy.
</div>
<div class="upgrade-cost">
Cost: 300 candy
</div>
<button class="upgrade-button" disabled>Upgrade</button>
</div>
</div>
</div>
<script>
// Define some variables to store game data
let candyCount = 0;
let productionRate = 1;
let maxCandy = 100;
let workerCount = 1;
// Define the cost of each upgrade
const UPGRADE_COSTS = {
"faster-production": 100,
"bigger-factory": 200,
"more-workers": 300,
};
// Define the effect of each upgrade
const UPGRADE_EFFECTS = {
"faster-production": () => {
productionRate *= 2;
},
"bigger-factory": () => {
maxCandy *= 2;
},
"more-workers": () => {
workerCount++;
},
};
// Update the candy counter on the page
const updateCandyCounter = () => {
document.getElementById("candy-count").innerHTML = candyCount;
};
// Update the availability of upgrades
const updateUpgradeAvailability = () => {
// Get all of the upgrade elements
const upgradeElements = document.querySelectorAll(".upgrade");
// Loop through each upgrade element
upgradeElements.forEach((upgradeElement) => {
// Get the name of the upgrade
const upgradeName = upgradeElement.getAttribute("data-upgrade");
// Get the button for the upgrade
const upgradeButton = upgradeElement.querySelector(".upgrade-button");
// If the player has enough candy to purchase the upgrade, enable the button
if (candyCount >= UPGRADE_COSTS[upgradeName]) {
upgradeButton.removeAttribute("disabled");
} else {
upgradeButton.setAttribute("disabled", true);
}
});
};
// Purchase an upgrade
const purchaseUpgrade = (upgradeName) => {
// Check if the player has enough candy to purchase the upgrade
if (candyCount >= UPGRADE_COSTS[upgradeName]) {
// Deduct the cost of the upgrade from the player's candy count
candyCount -= UPGRADE_COSTS[upgradeName];
// Apply the effects of the upgrade
UPGRADE_EFFECTS[upgradeName]();
// Update the candy counter and upgrade availability
updateCandyCounter();
updateUpgradeAvailability();
}
};
// Add event listeners to the upgrade buttons
const upgradeButtons = document.querySelectorAll(".upgrade-button");
upgradeButtons.forEach((upgradeButton) => {
upgradeButton.addEventListener("click", (event) => {
// Get the upgrade element that the button belongs to
const upgradeElement = event.target.parentElement;
// Get the name of the upgrade
const upgradeName = upgradeElement.getAttribute("data-upgrade");
// Purchase the upgrade
purchaseUpgrade(upgradeName);
});
});
// Create a function to produce candy at a regular interval
const produceCandy = () => {
// Increase the candy count by the production rate
candyCount += productionRate * workerCount;
// If the candy count exceeds the maximum, set it to the maximum limit
if (candyCount > maxCandy) {
candyCount = maxCandy;
}
// Update the candy counter and upgrade availability
updateCandyCounter();
updateUpgradeAvailability();
};
// Set an interval to produce candy every 1000 milliseconds (1 second)
setInterval(produceCandy, 1000);
// Initialize the game by updating the candy counter and upgrade availability
updateCandyCounter();
updateUpgradeAvailability();
</script>
</body>
</html>
Raw
improved-chatgpt.html
<!DOCTYPE html>
<html>
<head>
<title>Candy Factory</title>
<style>
/* Add some basic styling for the game */
body {
font-family: sans-serif;
}
.game-container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.candy-counter {
font-size: 32px;
font-weight: bold;
}
.upgrade-container {
margin-top: 20px;
}
.upgrade {
display: inline-block;
padding: 10px;
margin: 5px;
background-color: #eee;
border-radius: 5px;
cursor: pointer;
}
.upgrade:hover {
background-color: #ddd;
}
.upgrade-name {
font-size: 18px;
font-weight: bold;
}
.upgrade-description {
font-size: 14px;
margin-top: 5px;
}
.upgrade-cost {
font-size: 14px;
margin-top: 10px;
color: #888;
}
.upgrade-button {
display: block;
margin-top: 10px;
padding: 10px 20px;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.upgrade-button:hover {
background-color: #222;
}
</style>
</head>
<body>
<div class="game-container">
<h1>Candy Factory</h1>
<div class="candy-counter">
Candy: <span id="candy-count">0</span>
</div>
<div class="upgrade-container">
<div class="upgrade" data-upgrade="faster-production">
<div class="upgrade-name">Faster Production</div>
<div class="upgrade-description">
Increase the production rate of the factory.
</div>
<div class="upgrade-cost">
Cost: 100 candy
</div>
<button class="upgrade-button" disabled>Upgrade</button>
</div>
<div class="upgrade" data-upgrade="bigger-factory">
<div class="upgrade-name">Bigger Factory</div>
<div class="upgrade-description">
Increase the maximum amount of candy the factory can hold.
</div>
<div class="upgrade-cost">
Cost: 200 candy
</div>
<button class="upgrade-button" disabled>Upgrade</button>
</div>
<div class="upgrade" data-upgrade="more-workers">
<div class="upgrade-name">More Workers</div>
<div class="upgrade-description">
Increase the number of workers in the factory, allowing it to produce more candy.
</div>
<div class="upgrade-cost">
Cost: 300 candy
</div>
<button class="upgrade-button" disabled>Upgrade</button>
</div>
</div>
</div>
<script>
// Define some variables to store game data
let candyCount = 0;
let productionRate = 1;
let maxCandy = 200;
let workerCount = 1;
let UPGRADE_DATA = {
"faster-production": {
level: 0
},
"bigger-factory": {
level: 0
},
"more-workers": {
level: 0
},
}
// Define the base cost of each upgrade
const UPGRADES = {
"faster-production": {
baseCost: 100,
coefficient: () => coefficientCurve("faster-production", 0.95, 100, 600),
cost: () => calculateCost("faster-production"),
canUpgrade: () => isAbleToUpgrade("faster-production"),
upgradeEffect: () => {
productionRate *= 2;
},
upgrade: () => purchaseUpgrade("faster-production")
},
"bigger-factory": {
baseCost: 200,
coefficient: () => coefficientCurve("bigger-factory", 0.95, 100, 600),
cost: () => calculateCost("bigger-factory"),
canUpgrade: () => isAbleToUpgrade("bigger-factory"),
upgradeEffect: () => {
maxCandy *= 2;
},
upgrade: () => purchaseUpgrade("bigger-factory")
},
"more-workers": {
baseCost: 300,
coefficient: () => coefficientCurve("bigger-factory", 0.95, 100, 600),
cost: () => calculateCost("more-workers"),
canUpgrade: () => isAbleToUpgrade("more-workers"),
upgradeEffect: () => {
productionRate *= 2;
},
upgrade: () => purchaseUpgrade("more-workers")
},
}
const calculateCost = (upgradeName) => {
return Math.round(UPGRADES[upgradeName].baseCost + (UPGRADES[upgradeName].baseCost * (Math.pow(UPGRADE_DATA[upgradeName].level, UPGRADES[upgradeName].coefficient()))));
}
const isAbleToUpgrade = (upgradeName) => {
return candyCount >= calculateCost(upgradeName);
}
const coefficientCurve = (upgradeName, coMin, coMax, coMaxLevel) => {
let upgradeLevel = UPGRADE_DATA[upgradeName].level;
if(upgradeLevel <= 0) upgradeLevel = 1;
if(upgradeLevel >= coMaxLevel) return coMax;
let percentage = upgradeLevel / (coMaxLevel / 100) / 100;
let coDiff = coMax - coMin;
return coMin + (coDiff * percentage);
}
// Define a function to save the game data
const saveGame = () => {
// Create an object to store the game data
const gameData = {
candyCount: candyCount,
productionRate: productionRate,
maxCandy: maxCandy,
workerCount: workerCount,
upgradeData: UPGRADE_DATA
};
// Convert the game data object to a JSON string
const gameDataString = JSON.stringify(gameData);
// Save the game data string to local storage
localStorage.setItem("cf-data", gameDataString);
};
// Define a function to load the game data
const loadGame = () => {
// Get the game data string from local storage
const gameDataString = localStorage.getItem("cf-data");
// If the game data string exists, parse it to an object and update the game variables
if (gameDataString) {
const gameData = JSON.parse(gameDataString);
candyCount = gameData.candyCount;
productionRate = gameData.productionRate;
maxCandy = gameData.maxCandy;
workerCount = gameData.workerCount;
if(gameData.upgradeData != undefined) UPGRADE_DATA = gameData.upgradeData;
// Update the candy counter and upgrade availability
updateCandyCounter();
updateUpgradeAvailability();
}
};
// Update the candy counter on the page
const updateCandyCounter = () => {
document.getElementById("candy-count").innerHTML = candyCount;
};
// Update the availability of upgrades
const updateUpgradeAvailability = () => {
// Get all of the upgrade elements
const upgradeElements = document.querySelectorAll(".upgrade");
// Loop through each upgrade element
upgradeElements.forEach((upgradeElement) => {
// Get the name of the upgrade
const upgradeName = upgradeElement.getAttribute("data-upgrade");
// Get the cost element for the upgrade
const upgradeCostElement = upgradeElement.querySelector(
".upgrade-cost"
);
// Update the cost element with the current cost of the upgrade
upgradeCostElement.innerHTML = `Cost: ${UPGRADES[upgradeName].cost()} candy`;
// Get the button for the upgrade
const upgradeButton = upgradeElement.querySelector(".upgrade-button");
// If the player has enough candy to purchase the upgrade, enable the button
if (isAbleToUpgrade(upgradeName)) {
upgradeButton.removeAttribute("disabled");
} else {
upgradeButton.setAttribute("disabled", true);
}
});
};
// Purchase an upgrade
const purchaseUpgrade = (upgradeName) => {
if(!isAbleToUpgrade(upgradeName)) return;
candyCount -= calculateCost(upgradeName);
UPGRADES[upgradeName].upgradeEffect();
UPGRADE_DATA[upgradeName].level++;
updateUpgradeAvailability();
updateCandyCounter();
};
// Add event listeners to the upgrade buttons
const upgradeButtons = document.querySelectorAll(".upgrade-button");
upgradeButtons.forEach((upgradeButton) => {
upgradeButton.addEventListener("click", (event) => {
// Get the upgrade element that the button belongs to
const upgradeElement = event.target.parentElement;
// Get the name of the upgrade
const upgradeName = upgradeElement.getAttribute("data-upgrade");
// Purchase the upgrade
purchaseUpgrade(upgradeName);
});
});
// Create a function to produce candy at a regular interval
const produceCandy = () => {
// Increase the candy count by the production rate
candyCount += productionRate * workerCount;
// If the candy count exceeds the maximum, set it to the maximum limit
if (candyCount > maxCandy) {
candyCount = maxCandy;
}
// Update the candy counter and upgrade availability
updateCandyCounter();
updateUpgradeAvailability();
};
// Set an interval to produce candy every 1000 milliseconds (1 second)
setInterval(produceCandy, 1000);
setInterval(saveGame, 5000);
loadGame();
// Initialize the game by updating the candy counter and upgrade availability
updateCandyCounter();
updateUpgradeAvailability();
</script>
</body>
</html>
@GoombaProgrammer
Copy link

chatgpt is a css pro

@GoldenretriverYT
Copy link
Author

I added a (partly manually/partly through AI) improved version

Its not very balanced though

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment