Mole Project

by wizviper

HTML

<html>

  <head>
    <title>How Big Is A Mole?</title>
  </head>

  <body>
    <div id='intro'>
      <p>Your lab is the first to discover how to make a brand new element- unobtanium. However, it is very difficult to manufacture. Great riches await you if you can manage to make one mole of it.<br>(6.02 * 10^23 atoms)</p>
      <button onclick='startGame()' id='startbtn'>
        Go!
      </button>
    </div>
    <div id='game'>
      <div id='topbar'>
        <h1 id="atomCount">Atoms: 0</h1>
      </div>
      <div class='tab' id='lab'>
        <button onclick="clickAtom()">Form Atom</button>
        <button onclick="upgradeClick()">Upgrade Lab (10 atoms)</button>
        <p id="clickPowerTracker">Lab Power: 1</p>
      </div>
      <div class='tab' id='research'>
        <p id='techIntro'>Your lab is quiet... If only you had more unobtanium...</p>
        <p id='researchTotal' class='researchinit'>You have 0 Research Points</p>
        <button onclick="buyResearcher" id="researcherbtn" class='researchinit'>
          Hire Researcher(1000 atoms)
        </button>
        <p id='researchTracker' class='researchinit'>0 Researchers making 0 Research/sec</p>
      </div>
      <div id='bottombar'>
        <button class='navbtn' onclick='changeScene("lab")'>Lab</button>
        <button class='navbtn' onclick='changeScene("research")'>Research</button>
        <button class='navbtn'>Quantum</button>
        <button class='navbtn'>Save</button>
        <button class='navbtn'>Reset</button>
      </div>
    </div>
  </body>

</html>

CSS

p {
  display: inline;
}

body {
  height: 100vh;
  width: 100vw;
}

#atomCount {
  font-size: 175%;
}

#topbar {
  height: 10%;
  border-bottom: solid grey 2px;
}

#bottombar {
  border-top: solid grey 2px;
  height: 10%;
}

.tab {
  height: 80%;
  width: 100%;
}

#game {
  height: 100%;
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
}

#intro {
  height: 100%;
  width: 100%;
  background-color: teal;
}

.navbtn {
  height: 100%;
  width: 19.25%;
}

.researchinit {
  display: none;
}

JavaScript

let atoms = 1000;
let totalatoms = 1000;
let clickPower = 1;
let reasearcherAmount = 0;
let researchPower = 1;
let researcherCost = 1000;
let RP = 0;
let researchUnlocked = false;

function clickAtom() {
	atoms+= clickPower;
  totalatoms+=clickPower;
  document.getElementById("atomCount").innerText = "Atoms: " + atoms;
}

function upgradeClick() {
	if(atoms >= 10) {
  	atoms -= 10;
    clickPower++;
    document.getElementById("atomCount").innerText = "Atoms: " + atoms;
    document.getElementById("clickPowerTracker").innerText = "Lab Power: " + clickPower;
  }
}

function changeScene(scene) {
  let tabs = document.getElementsByClassName("tab");
  for(i = 0; i < tabs.length; i++) {
  	tabs[i].style.display = "none";
  }
	switch(scene) {   
  	case "lab":
    document.getElementById("lab").style.display = "block";
    break;
    case "research":
    document.getElementById("research").style.display = "block";
  }
}

function updateResources() {
  updateText();
}

function updateText() {
  document.getElementById("atomCount").innerText = "Atoms: " + atoms;
}

function checkUnlocks() {
	if(totalatoms >= 1000 && !researchUnlocked) {
  	researchUnlocked = true;
    document.getElementById("techIntro").style.display = "none";
    let unlocks = document.getElementsByClassName("researchinit");
    for(i = 0; i < unlocks.length; i++) {
    	unlocks[i].style.display = "block";
    }
  }
}

function startGame() {
	document.getElementById("intro").style.display = "none";
  document.getElementById("game").style.display = "block";
}

setInterval(updateResources, 1000);
setInterval(checkUnlocks, 5000);
changeScene("lab");