Webleb - UI Elements - Mega Clicker

HTML CSS JS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ultra Clicker</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div id="top">
    <div id="bigPoints">0</div>
    <div id="stats">
        CPS: <span id="ps">0</span> |
        Click: <span id="pc">1</span> |
        Prestige: <span id="pr">0</span> |
        Multi: <span id="mu">1x</span>
    </div>
</div>

<div id="wrap">

<div id="left">
        <div id="cookieArea">
            <button id="cookie">CLICK</button>
        </div>
        <canvas id="fx"></canvas>
    </div>

<div id="right">

<div class="panel">
            <h2>Upgrades</h2>
            <div id="upgrades"></div>
        </div>

<div class="panel">
            <h2>Skills</h2>
            <div id="skills"></div>
        </div>

<div class="panel">
            <h2>Achievements</h2>
            <div id="ach"></div>
        </div>

<div class="panel">
            <button onclick="prestige()">Prestige</button>
            <button onclick="ascend()">Ascend</button>
        </div>

</div>

body {
margin:0;
font-family:Arial;
background:#111;
color:#fff;
overflow:hidden;
}

/* TOP BAR */
#top {
text-align:center;
padding:10px;
background:#1a1a1a;
border-bottom:2px solid #333;
}

#bigPoints {
font-size:42px;
font-weight:bold;
}

/* MAIN LAYOUT */
#wrap {
display:flex;
height:90vh;
}

/* LEFT */
#left {
flex:1;
display:flex;
justify-content:center;
align-items:center;
position:relative;
background:#151515;
}

#cookieArea {
display:flex;
justify-content:center;
align-items:center;
}

/* BIG CLICK BUTTON */
#cookie {
width:220px;
height:220px;
border-radius:50%;
border:none;
font-size:26px;
background:#2b2b2b;
color:white;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
transition:0.1s;
}

#cookie:active {
transform:scale(0.92);
}

/* RIGHT PANEL */
#right {
width:380px;
background:#1b1b1b;
overflow-y:auto;
padding:10px;
}

.panel {
background:#222;
margin-bottom:10px;
padding:10px;
border-radius:8px;
}

.panel h2 {
margin:5px 0 10px;
}

/* ITEMS */
.item {
background:#2a2a2a;
padding:6px;
margin:4px 0;
cursor:pointer;
border-radius:5px;
font-size:13px;
}

.item:hover {
background:#333;
}

/* CANVAS FX */
#fx {
position:absolute;
width:100%;
height:100%;
pointer-events:none;
}

// =====================
// GAME STATE
// =====================

let game = {
points: 0,
click: 1,
cps: 0,
multi: 1,
prestige: 0,
ascend: 0,

rgb: false,
particles: true,
ai: true,

upgrades: [],
buildings: [],
skills: [],
pets: [],
achievements: [],
events: [],
floating: [],
saveVersion: 1
}

// =====================
// DOM
// =====================

const pointsEl = document.getElementById("points")
const cpsEl = document.getElementById("cps")
const clickEl = document.getElementById("click")
const prestigeEl = document.getElementById("prestige")
const multiEl = document.getElementById("multi")

const cookieBtn = document.getElementById("cookieBtn")

// =====================
// CORE CLICK SYSTEM
// =====================

cookieBtn.onclick = (e) => {
let gain = game.click * game.multi

// crit system
if(Math.random() < 0.1) gain *= 2

// golden click
if(Math.random() < 0.02) gain *= 10

game.points += gain

spawnParticles(e.clientX, e.clientY)
}

// =====================
// GENERATORS (CONTENT ENGINE)
// =====================

// UPGRADES (300+)
const upgradeNames = [
"Finger Training",
"Stone Click Technique",
"Golden Hand",
"Quantum Tap Engine",
"Neural Click Sync",
"Time Loop Tap",
"Infinity Cookie Reactor"
]

for(let i=0;i<300;i++){
game.upgrades.push({
name: upgradeNames[i % upgradeNames.length] + " Lv." + i,
cost: Math.floor((i+1) * (i+1) * 12),
power: i % 2 === 0 ? i+1 : (i+2),
type: i % 2 ? "click" : "cps"
})
}

// BUILDINGS
for(let i=0;i<50;i++){
game.buildings.push({
name:"Building "+i,
cost:100 * i*i,
cps:i*2,
owned:0
})
}

// SKILLS (TREE)
for(let i=0;i<80;i++){
game.skills.push({
name:"Skill Node "+i,
cost:i,
unlocked:false,
effect:()=>game.multi += 0.05
})
}

// PETS
for(let i=0;i<30;i++){
game.pets.push({
name:"Pet "+i,
cost:i*2000,
owned:false,
bonus:i
})
}

// ACHIEVEMENTS
for(let i=0;i<120;i++){
game.achievements.push({
name:"Milestone "+i*1000,
goal:i*1000,
unlocked:false
})
}

// EVENTS
for(let i=0;i<40;i++){
game.events.push({
name:"Event "+i,
trigger:Math.random()*10000
})
}

// =====================
// GAME LOOP
// =====================

function tick(){
game.points += game.cps * game.multi

updateUI()
checkAchievements()
}

setInterval(tick, 1000)

// =====================
// UI UPDATE
// =====================

function updateUI(){

pointsEl.innerText = Math.floor(game.points)
cpsEl.innerText = game.cps
clickEl.innerText = game.click
prestigeEl.innerText = game.prestige
multiEl.innerText = game.multi.toFixed(2) + "x"

renderUpgrades()
renderBuildings()
renderSkills()
renderPets()
renderAchievements()
}

// =====================
// RENDER SYSTEMS
// =====================

function renderUpgrades(){
const el = document.getElementById("upgrades")
el.innerHTML=""

game.upgrades.forEach(u=>{
let div = document.createElement("div")
div.className="item"
div.innerText = `${u.name} (${u.cost})`

div.onclick = () => {
if(game.points >= u.cost){
game.points -= u.cost

if(u.type==="click") game.click += u.power
else game.cps += u.power

u.cost *= 1.15
}
}

el.appendChild(div)
})
}

function renderBuildings(){
const el = document.getElementById("buildings")
if(!el) return
el.innerHTML=""
}

function renderSkills(){
const el = document.getElementById("skills")
el.innerHTML=""

game.skills.forEach(s=>{
let div=document.createElement("div")
div.className="item"
div.innerText=s.name

div.onclick=()=>{
if(!s.unlocked && game.prestige >= s.cost){
s.unlocked=true
s.effect()
}
}

el.appendChild(div)
})
}

function renderPets(){
const el=document.getElementById("pets")
el.innerHTML=""

game.pets.forEach(p=>{
let div=document.createElement("div")
div.className="item"
div.innerText=p.name

div.onclick=()=>{
if(!p.owned && game.points>=p.cost){
p.owned=true
game.cps += p.bonus
}
}

el.appendChild(div)
})
}

function renderAchievements(){
const el=document.getElementById("achievements")
el.innerHTML=""

game.achievements.forEach(a=>{
if(!a.unlocked && game.points >= a.goal){
a.unlocked = true
}

let div=document.createElement("div")
div.className="item"
div.style.opacity = a.unlocked ? 1 : 0.4
div.innerText=a.name

el.appendChild(div)
})
}

// =====================
// PRESTIGE SYSTEM
// =====================

function prestige(){
if(game.points < 20000) return

game.prestige++
game.points = 0
game.click = 1 + game.prestige
game.cps = 0
}

// =====================
// ASCENSION
// =====================

function ascend(){
if(game.prestige < 10) return

game.ascend++
game.multi += 1
game.prestige = 0
game.points = 0
}

// =====================
// RGB TOGGLE
// =====================

function toggleRGB(){
document.body.classList.toggle("rgb")
}

// =====================
// PARTICLES
// =====================

const fx = document.getElementById("fx")
const ctx = fx.getContext("2d")

function resize(){
fx.width = window.innerWidth
fx.height = window.innerHeight
}
resize()
window.onresize = resize

function spawnParticles(x,y){
for(let i=0;i<12;i++){
game.floating.push({
x,y,
vx:(Math.random()-0.5)*5,
vy:(Math.random()-0.5)*5,
life:40
})
}
}

function draw(){
ctx.fillStyle="rgba(0,0,0,0.2)"
ctx.fillRect(0,0,fx.width,fx.height)

game.floating.forEach(p=>{
p.x+=p.vx
p.y+=p.vy
p.life--

ctx.fillStyle="white"
ctx.fillRect(p.x,p.y,2,2)
})

game.floating = game.floating.filter(p=>p.life>0)

requestAnimationFrame(draw)
}
draw()

// =====================
// SAVE SYSTEM
// =====================

setInterval(()=>{
localStorage.setItem("cookieGame", JSON.stringify(game))
},5000)

// =====================
// OFFLINE PROGRESS
// =====================

window.onload = () => {
let data = localStorage.getItem("cookieGame")
if(data){
game = JSON.parse(data)
}
}

// =====================
// AI DIRECTOR (CORE SYSTEM)
// =====================

setInterval(()=>{
if(!game.ai) return

for(let i=0;i<50;i++){
game.upgrades.push({
name:"AI Expansion "+Date.now()+i,
cost:1000+i*10,
power:i,
type:"cps"
})
}

},60000)
game.systems = {
intervals: [],
modules: {},
hooks: {}
}

function registerSystem(name, fn){
game.systems.modules[name] = fn
}
function addHook(event, fn){
if(!game.systems.hooks[event]){
game.systems.hooks[event] = []
}
game.systems.hooks[event].push(fn)
}

function runHook(event, data){
if(game.systems.hooks[event]){
game.systems.hooks[event].forEach(fn => fn(data))
}
}
addHook("click", (gain)=>{
game.points += gain
})

addHook("tick", ()=>{
game.points += game.cps * game.multi
})
 cookieBtn.onclick = (e) => {

let gain = game.click * game.multi

if(Math.random() < 0.1) gain *= 2

if(Math.random() < 0.02) gain *= 10

runHook("click", gain)

spawnParticles(e.clientX, e.clientY)
}
 registerSystem("comboSystem", ()=>{
game.combo = 0

addHook("click", (gain)=>{
game.combo++
if(game.combo > 10){
game.multi += 0.01
}
})
})
 registerSystem("aiDirector", ()=>{

setInterval(()=>{

let pack = {
upgrades: [],
skills: [],
events: []
}

for(let i=0;i<50;i++){
pack.upgrades.push({
name:"AI Upgrade "+Date.now()+i,
cost:1000+i*20,
power:i+1,
type:"cps"
})
}

game.upgrades.push(...pack.upgrades)

console.log("AI injected 50+ new upgrades")

},60000)

})
function initSystems(){

Object.values(game.systems.modules).forEach(fn=>{
fn()
})

console.log("All systems loaded")
}

initSystems()

Preview

Open Advanced Editor Full Screen