Skip to content

Adding new features #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
suhhhho wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Adding new features #4

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0eaccae
Adding new features
suhhhho Mar 24, 2025
9c54e40
improving issues
suhhhho Mar 25, 2025
380779c
improving golden cookie
suhhhho Mar 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
189 changes: 166 additions & 23 deletions src/pages/CookieClicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,191 @@
import { computed, ref } from 'vue';

const cookies = ref(0);

const buildings = ref([
{ name: 'Cursor', price: 15, cps: 0.1, count: 0},
{ name: 'Grandma', price: 100, cps: 1, count: 0},
{ name: 'Farm', price: 1000, cps: 10, count: 0},
{ name: 'Factory', price: 10_000, cps: 100, count: 0},
{ name: 'Cursor', price: 15, cps: 0.1, count: 0 },
{ name: 'Grandma', price: 100, cps: 1, count: 0 },
{ name: 'Farm', price: 1000, cps: 10, count: 0 },
{ name: 'Factory', price: 10_000, cps: 100, count: 0 },
]);

const upgrades = ref([
{ name: 'Better Ovens', effect: () => multiplyCps(2), price: 500, bought: false },
{ name: 'Fertilized Fields', effect: () => multiplyCps(2), price: 5000, bought: false },
]);

function buyBuilding(building){
cookies.value -= building.price;
building.price += Math.ceil(building.price / 100 * 15);
building.count++;
// Achievements list
const achievements = ref([]);
const achieved = ref([]);

// Shiny cookie state
const shinyCookie = ref({ visible: false, x: 0, y: 0 });

// Function to buy a building
function buyBuilding(building) {
if (cookies.value >= building.price) {
cookies.value -= building.price;
building.price = Math.ceil(building.price * 1.15);
building.count++;
checkAchievements(); // Check achievements after purchasing
}
}

// Function to buy an upgrade
function buyUpgrade(upgrade) {
if (cookies.value >= upgrade.price && !upgrade.bought) {
cookies.value -= upgrade.price;
upgrade.effect();
upgrade.bought = true;
}
}

// Function to multiply CPS (used for upgrades)
function multiplyCps(factor) {
buildings.value.forEach(building => {
building.cps *= factor;
});
}

// Computed total CPS
let cps = computed(() => {
let cps = 0;
let totalCps = 0;
buildings.value.forEach(building => {
cps+=building.cps*building.count;
totalCps += building.cps * building.count;
});
return cps;
return totalCps;
});
setInterval(()=>{
cookies.value+=cps.value;

document.title ='🍪' + +cookies.value.toFixed(1) + ' Cookies!';
},1000);
// Function to check achievements
function checkAchievements() {
const newAchievements = [
Copy link
Copy Markdown
Owner

@Kasparsu Kasparsu Mar 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move this with rest of objects and refs

{ name: "100 Cookies!", condition: () => cookies.value >= 100 },
Comment thread
Kasparsu marked this conversation as resolved.
{ name: "10,000 Cookies!", condition: () => cookies.value >= 10_000 },
{ name: "1 Million Cookies!", condition: () => cookies.value >= 1_000_000 },
{ name: "First Cursor!", condition: () => buildings.value[0].count >= 1 },
{ name: "10 Grandmas!", condition: () => buildings.value[1].count >= 10 },
{ name: "25 Farms!", condition: () => buildings.value[2].count >= 25 },
{ name: "50 Factories!", condition: () => buildings.value[3].count >= 50 }
];

newAchievements.forEach(achievement => {
if (achievement.condition() && !achieved.value.includes(achievement.name)) {
achieved.value.push(achievement.name);
}
});
}

// Auto-generate cookies based on CPS every second
setInterval(() => {
cookies.value += cps.value;
document.title = '🍪 ' + cookies.value.toFixed(1) + ' Cookies!';
checkAchievements(); // Check achievements regularly as cookies accumulate
}, 1000);

// Function to spawn a shiny cookie randomly
function spawnShinyCookie() {
// Random X and Y position (20% to 80% of screen for better positioning)
shinyCookie.value.x = Math.random() * 60 + 20; // X between 20% and 80% of the screen width
shinyCookie.value.y = Math.random() * 60 + 20; // Y between 20% and 80% of the screen height
shinyCookie.value.visible = true;

console.log("Shiny Cookie Spawned at:", shinyCookie.value.x, shinyCookie.value.y); // Debugging output

setTimeout(() => {
shinyCookie.value.visible = false; // Hide after 5 seconds if not clicked
spawnNextShiny(); // Schedule next shiny spawn
}, 5000); // Adjust the time as needed
}

// Function to collect shiny cookie
function collectShinyCookie() {
console.log("Shiny Cookie Collected!");
cookies.value += cps.value * 20;
shinyCookie.value.visible = false;
spawnNextShiny();
}

// Function to schedule the next shiny cookie spawn
function spawnNextShiny() {
const delay = Math.random() * 20000 + 10000;
console.log("Next Shiny Cookie Spawn in:", delay / 1000, "seconds");
setTimeout(spawnShinyCookie, delay);
}

spawnNextShiny();

</script>

<template>
<div class="columns">
<!-- Main cookie counter -->
<div class="column is-4 has-background-primary has-text-centered">
<h1 class="is-size-1">{{ +cookies.toFixed(1) }} cookies</h1>
<h3 class="is-size-3">{{ +cps.toFixed(1) }} cps</h3>
<h1 class="is-size-1">{{ cookies.toFixed(1) }} cookies</h1>
<h3 class="is-size-3">{{ cps.toFixed(1) }} cps</h3>
<figure class="image is-square" @click="cookies++">
<img src="https://sweetlorens.com/cdn/shop/products/Copy-of-Chocolate-Chunk-Full-Cookie-transparent-background.png?v=1687811511" />
</figure>
</div>
<div class="column is-6 has-background-link">
asdas
</div>
<div class="column is-2 has-background-warning">
<button v-for="building in buildings" :disabled="cookies<building.price" @click="buyBuilding(building)" class="button is-primary is-large is-fullwidth">

<!-- Upgrades and Buildings section -->
<div class="column is-4 has-background-info">
<h2 class="is-size-2">Upgrades</h2>
<button v-for="upgrade in upgrades"
:disabled="cookies < upgrade.price || upgrade.bought"
@click="buyUpgrade(upgrade)"
class="button is-success is-fullwidth">
{{ upgrade.name }} 🍪{{ upgrade.price }}
<span v-if="upgrade.bought">✅</span>
</button>

<h2 class="is-size-2">Buildings</h2>
<button v-for="building in buildings"
:disabled="cookies < building.price"
@click="buyBuilding(building)"
class="button is-primary is-fullwidth">
{{ building.name }} 🍪{{ building.price }} #{{ building.count }}
</button>
</div>

<!-- Achievements section moved to the bottom -->
<div class="column is-4 has-background-warning">
<h2 class="is-size-2">Achievements</h2>
<ul>
<li v-for="achievement in achieved" class="has-text-white">
🎉 {{ achievement }}
</li>
</ul>
</div>
</div>

<!-- Shiny Cookie -->
<div v-if="shinyCookie.visible"
class="shiny-cookie"
:style="{ top: shinyCookie.y + 'vh', left: shinyCookie.x + 'vw' }"
@click="collectShinyCookie">
✨🍪✨
</div>
</template>
</template>

<style scoped>
.columns {
margin: 1.5rem;
}

/* Shiny cookie styles */
.shiny-cookie {
position: fixed;
font-size: 2.5rem;
cursor: pointer;
animation: glow 1s infinite alternate;
}

@keyframes glow {
from {
text-shadow: 0 0 0.625rem gold;
}
to {
text-shadow: 0 0 1.25rem orange, 0 0 1.875rem yellow;
}
}
</style>