{"id":34,"date":"2026-04-27T18:53:54","date_gmt":"2026-04-27T18:53:54","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/h_yusko\/?p=34"},"modified":"2026-04-27T18:53:54","modified_gmt":"2026-04-27T18:53:54","slug":"free-friday-4-24-26","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/h_yusko\/2026\/04\/27\/free-friday-4-24-26\/","title":{"rendered":"Free Friday 4\/24\/26"},"content":{"rendered":"\n

This Free Friday, I worked on developing my clicker game in which players earn points by clicking a button. As players accumulate points, they can purchase an auto clicker that automatically generates clicks over time, increasing their point total even when they’re not actively playing. Additionally, players can buy multipliers that boost the effectiveness of both manual and auto clicks. Both the manual clicking and auto clicker upgrades can be leveled up to a maximum of 10, allowing for greater efficiency and higher point gains. However, the multiplier upgrade does not have a cap, so players can continue increasing it indefinitely to maximize their score.
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

  }<\/p>\n\n\n\n

}<\/p>\n\n\n\n

const scoreDiv = document.getElementById(‘score’);<\/p>\n\n\n\n

\/\/ Generate multipliers UI<\/p>\n\n\n\n

const container = document.getElementById(‘multiplierContainer’);<\/p>\n\n\n\n

for (let i=0; i<4; i++) {<\/p>\n\n\n\n

  const div = document.createElement(‘div’);<\/p>\n\n\n\n

  div.className = ‘multiplier’;<\/p>\n\n\n\n

  div.id = ‘multiplierDiv’ + i;<\/p>\n\n\n\n

  div.innerHTML = `<\/p>\n\n\n\n

    <strong>${multipliers[i].name}<\/strong><br><\/p>\n\n\n\n

    Level: <span id=”multiplierLevel${i}”>0<\/span><br><\/p>\n\n\n\n

    Effect: x${Math.round(Math.pow(2, multipliers[i].level))}<br><\/p>\n\n\n\n

    Cost: $<span id=”multiplierCost${i}”>100<\/span><br><\/p>\n\n\n\n

    <button id=”buyMultiplier${i}”>Buy Level<\/button><\/p>\n\n\n\n

  `;<\/p>\n\n\n\n

  container.appendChild(div);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

function updateUI() {<\/p>\n\n\n\n

  document.getElementById(‘score’).innerText = ‘Score: ‘ + formatNumber(score);<\/p>\n\n\n\n

  document.getElementById(‘autoLevel’).innerText = autoLevel;<\/p>\n\n\n\n

  document.getElementById(‘autoProduction’).innerText = autoProduction;<\/p>\n\n\n\n

  document.getElementById(‘autoCost’).innerText = formatNumber(autoCost);<\/p>\n\n\n\n

  \/\/ \u2b50 UPDATE UPGRADE BUTTON COST \u2b50<\/p>\n\n\n\n

  document.getElementById(‘autoNextCost’).innerText = formatNumber(autoCost);<\/p>\n\n\n\n

  document.getElementById(‘buyAuto’).innerText = “Upgrade Auto Clicker ($” + formatNumber(autoCost) + “)”;<\/p>\n\n\n\n

  \/\/ Compute total click effect<\/p>\n\n\n\n

  let totalMultiplierEffect = 1;<\/p>\n\n\n\n

  for (let i=0; i<4; i++) {<\/p>\n\n\n\n

    totalMultiplierEffect *= Math.pow(2, multipliers[i].level);<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

  if (totalMultiplierEffect > 1) {<\/p>\n\n\n\n

    document.getElementById(‘clickBtn’).innerText = ‘Click me x’ + formatNumber(totalMultiplierEffect);<\/p>\n\n\n\n

  } else {<\/p>\n\n\n\n

    document.getElementById(‘clickBtn’).innerText = ‘Click me! (+1 point)’;<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

  \/\/ Auto effect<\/p>\n\n\n\n

  const autoEffect = Math.pow(2, autoLevel);<\/p>\n\n\n\n

  let autoEffectText = ‘Auto effect x’ + formatNumber(autoEffect);<\/p>\n\n\n\n

  if (document.getElementById(‘autoEffect’)) {<\/p>\n\n\n\n

    document.getElementById(‘autoEffect’).innerText = autoEffectText;<\/p>\n\n\n\n

  } else {<\/p>\n\n\n\n

    const autoDiv = document.createElement(‘div’);<\/p>\n\n\n\n

    autoDiv.id = ‘autoEffect’;<\/p>\n\n\n\n

    autoDiv.style.color = ‘#fff’;<\/p>\n\n\n\n

    autoDiv.innerText = autoEffectText;<\/p>\n\n\n\n

    document.querySelector(‘h3’).insertAdjacentElement(‘afterend’, autoDiv);<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

  \/\/ Update multipliers<\/p>\n\n\n\n

  for (let i=0; i<4; i++) {<\/p>\n\n\n\n

    document.getElementById(`multiplierLevel${i}`).innerText = multipliers[i].level;<\/p>\n\n\n\n

    document.getElementById(`multiplierCost${i}`).innerText = formatNumber(50 * Math.pow(costMultiplier, multipliers[i].level));<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

}<\/p>\n\n\n\n

function saveGame() {<\/p>\n\n\n\n

  localStorage.setItem(‘clickerSave’, JSON.stringify({<\/p>\n\n\n\n

    score,<\/p>\n\n\n\n

    pointsPerClick,<\/p>\n\n\n\n

    autoClickers,<\/p>\n\n\n\n

    autoCost,<\/p>\n\n\n\n

    autoLevel,<\/p>\n\n\n\n

    autoProduction,<\/p>\n\n\n\n

    multipliers<\/p>\n\n\n\n

  }));<\/p>\n\n\n\n

}<\/p>\n\n\n\n

\/\/ Click handler<\/p>\n\n\n\n

document.getElementById(‘clickBtn’).onclick = () => {<\/p>\n\n\n\n

  let totalEffect = 1;<\/p>\n\n\n\n

  for (let i=0; i<4; i++) {<\/p>\n\n\n\n

    totalEffect *= Math.pow(2, multipliers[i].level);<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

  if (totalEffect < 1) totalEffect = 1;<\/p>\n\n\n\n

  score += pointsPerClick * totalEffect;<\/p>\n\n\n\n

  updateUI();<\/p>\n\n\n\n

  saveGame();<\/p>\n\n\n\n

};<\/p>\n\n\n\n

\/\/ Auto clicker<\/p>\n\n\n\n

function startAutoClicker() {<\/p>\n\n\n\n

  if (autoInterval) clearInterval(autoInterval);<\/p>\n\n\n\n

  autoInterval = setInterval(() => {<\/p>\n\n\n\n

    if (autoClickers > 0) {<\/p>\n\n\n\n

      const autoEffect = Math.pow(2, autoLevel);<\/p>\n\n\n\n

      score += autoClickers * autoProduction * autoEffect;<\/p>\n\n\n\n

      updateUI();<\/p>\n\n\n\n

      saveGame();<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

  }, 1000);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

startAutoClicker();<\/p>\n\n\n\n

\/\/ \u2b50 BUY AUTO CLICKER (adds new auto clicker only) \u2b50<\/p>\n\n\n\n

document.getElementById(‘autoBtn’).onclick = () => {<\/p>\n\n\n\n

  if (score >= autoCost) {<\/p>\n\n\n\n

    score -= autoCost;<\/p>\n\n\n\n

    autoClickers++; \/\/ ONLY adds new auto clicker<\/p>\n\n\n\n

    updateUI();<\/p>\n\n\n\n

    saveGame();<\/p>\n\n\n\n

  } else {<\/p>\n\n\n\n

    alert(‘Not enough points!’);<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

};<\/p>\n\n\n\n

\/\/ \u2b50 UPGRADE AUTO CLICKER (increases level only) \u2b50<\/p>\n\n\n\n

document.getElementById(‘buyAuto’).onclick = () => {<\/p>\n\n\n\n

  if (score >= autoCost) {<\/p>\n\n\n\n

    score -= autoCost;<\/p>\n\n\n\n

    autoLevel++; \/\/ ONLY upgrade level<\/p>\n\n\n\n

    autoCost = Math.floor(autoCost * costMultiplier);<\/p>\n\n\n\n

    updateUI();<\/p>\n\n\n\n

    saveGame();<\/p>\n\n\n\n

  } else {<\/p>\n\n\n\n

    alert(‘Not enough points!’);<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

};<\/p>\n\n\n\n

\/\/ Buy multipliers<\/p>\n\n\n\n

for (let i=0; i<4; i++) {<\/p>\n\n\n\n

  document.getElementById(`buyMultiplier${i}`).onclick = () => {<\/p>\n\n\n\n

    if (multipliers[i].level >= maxLevel) {<\/p>\n\n\n\n

      alert(‘Max level reached!’);<\/p>\n\n\n\n

      return;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    const cost = Math.floor(50 * Math.pow(costMultiplier, multipliers[i].level));<\/p>\n\n\n\n

    if (score >= cost) {<\/p>\n\n\n\n

      score -= cost;<\/p>\n\n\n\n

      multipliers[i].level++;<\/p>\n\n\n\n

      updateUI();<\/p>\n\n\n\n

      saveGame();<\/p>\n\n\n\n

    } else {<\/p>\n\n\n\n

      alert(‘Not enough points!’);<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

  };<\/p>\n\n\n\n

}<\/p>\n\n\n\n

\/\/ Reset<\/p>\n\n\n\n

document.getElementById(‘reset’).onclick = () => {<\/p>\n\n\n\n

  localStorage.removeItem(‘clickerSave’);<\/p>\n\n\n\n

  score = 0;<\/p>\n\n\n\n

  autoClickers = 0;<\/p>\n\n\n\n

  autoCost = 50;<\/p>\n\n\n\n

  autoLevel = 0;<\/p>\n\n\n\n

  autoProduction = 1;<\/p>\n\n\n\n

  for (let i=0; i<4; i++) {<\/p>\n\n\n\n

    multipliers[i].level = 0;<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

  updateUI();<\/p>\n\n\n\n

  startAutoClicker();<\/p>\n\n\n\n

};<\/p>\n\n\n\n

\/\/ Background<\/p>\n\n\n\n

const canvas = document.getElementById(‘gameCanvas’);<\/p>\n\n\n\n

const ctx = canvas.getContext(‘2d’);<\/p>\n\n\n\n

function draw() {<\/p>\n\n\n\n

  ctx.fillStyle = ‘#556B2F’;<\/p>\n\n\n\n

  ctx.fillRect(0, 0, canvas.width, canvas.height);<\/p>\n\n\n\n

  requestAnimationFrame(draw);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

draw();<\/p>\n\n\n\n

\/\/ Init<\/p>\n\n\n\n

updateUI();<\/p>\n\n\n\n

<\/script><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"

This Free Friday, I worked on developing my clicker game in which players earn points by clicking a button. As players accumulate points, they can purchase an auto clicker that automatically generates clicks over time, increasing their point total even when they’re not actively playing. Additionally, players can buy multipliers that boost the effectiveness of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-34","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/h_yusko\/wp-json\/wp\/v2\/posts\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/h_yusko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/h_yusko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_yusko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_yusko\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":2,"href":"https:\/\/theroyalscode.com\/students\/h_yusko\/wp-json\/wp\/v2\/posts\/34\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/theroyalscode.com\/students\/h_yusko\/wp-json\/wp\/v2\/posts\/34\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/h_yusko\/wp-json\/wp\/v2\/media?parent=34"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_yusko\/wp-json\/wp\/v2\/categories?post=34"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_yusko\/wp-json\/wp\/v2\/tags?post=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}