title: Base64 code stays the same even though the values it is encoding are changing
body: <p>I am currently creating an incremental game much like cookie clicker. What would cookie clicker be without its save code that you can hack. I have code that takes all the values of my variables <code>atoms</code>,<code>clickvalue</code>,<code>elmts</code>,<code>molecules</code>, ect. it puts them in a string with spacers. Then it encodes it to Base64. This is where the problems start. At first the Bace64 decoded value is the same as it was when it was encoded, but if you change the values then encode and decode again the values are the same as the first time. This keeps happening no mater how many times I try it.</p>
  
  <p>index.js:</p>
  
  <pre><code>var data = atoms + "%-%" + clickValue + "%-%" + elmts + "%-%" + molecules;
  //Clicking
  var atoms = 15;
  var clickValue = 1;
  
  function atomClick() {
    atoms = atoms + clickValue;
    document.getElementById("atoms").innerHTML = abbrNum(atoms , true , 2);
  };
  
  //upgrades
  function upgradeClickValue () {
  clickValue = clickValue * 2;
  };
  
  //Auto click modifiers
  //create veriables
  var elmts = 0;
  var molecules = 0;
  
  function buyElement() {
      var elementCost = Math.floor(10 * Math.pow(1.1,elmts));
      if(atoms &gt;= elementCost) {
          elmts++;
          atoms = atoms - elementCost;
          document.getElementById('elmts').innerHTML = abbrNum(elmts , true , 2);
          document.getElementById('atoms').innerHTML = abbrNum(atoms , true , 2);
      };
      var nextECost = Math.floor(10 * Math.pow(1.1,elmts));
      document.getElementById('elementCost').innerHTML = abbrNum(nextECost , true , 2);
  };
  
  function buyMolecule() {
      var moleculeCost = Math.floor(100 * Math.pow(1.2,molecules));
      if(atoms &gt;= moleculeCost) {
          molecules++;
          atoms = atoms - moleculeCost;
          document.getElementById('molecules').innerHTML = abbrNum(molecules , true , 2);
          document.getElementById('atoms').innerHTML = abbrNum(atoms , true , 2);
      };
      var nextMCost = Math.floor(100 * Math.pow(1.2,molecules));
      document.getElementById('moleculeCost').innerHTML = abbrNum(nextMCost , true , 2);
  };
  
  window.setInterval(function() {
  
      atoms = atoms + (elmts * 1) + (molecules * 2);
      document.getElementById('atoms').innerHTML = abbrNum(atoms , true , 2);
  
      document.title  = "AC Home :: Atoms: " + abbrNum(atoms , true , 2);
  
      var data = atoms + "%-%" + clickValue + "%-%" + elmts + "%-%" + molecules;
  }, 1000);
  
  //round numbers
  const COUNT_ABBRS = [ '', 'K', 'M', 'B', 'T', 'Q', 'Qi', 'Se', 'Sp', 'Ot', 'No', 'De'];
  
  function abbrNum(count, withAbbr = false, decimals = 2) {
      const i     = 0 === count ? count : Math.floor(Math.log(count) / Math.log(1000));
      let result  = parseFloat((count / Math.pow(1000, i)).toFixed(decimals));
      if(withAbbr) {
          result += `${COUNT_ABBRS[i]}`; 
      }
      return result;
  }
  
  function reset() {
      localStorage.removeItem("save")
      atoms = 0;
      clickValue = 1;
      elmts = 0
      elementCost = 10;
      molecules = 0;
      moleculeCost = 100;
  }
  
  // base64 encoding
  var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f&lt;e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n&gt;&gt;2;o=(n&amp;3)&lt;&lt;4|r&gt;&gt;4;u=(r&amp;15)&lt;&lt;2|i&gt;&gt;6;a=i&amp;63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f&lt;e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s&lt;&lt;2|o&gt;&gt;4;r=(o&amp;15)&lt;&lt;4|u&gt;&gt;2;i=(u&amp;3)&lt;&lt;6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n&lt;e.length;n++){var r=e.charCodeAt(n);if(r&lt;128){t+=String.fromCharCode(r)}else if(r&gt;127&amp;&amp;r&lt;2048){t+=String.fromCharCode(r&gt;&gt;6|192);t+=String.fromCharCode(r&amp;63|128)}else{t+=String.fromCharCode(r&gt;&gt;12|224);t+=String.fromCharCode(r&gt;&gt;6&amp;63|128);t+=String.fromCharCode(r&amp;63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n&lt;e.length){r=e.charCodeAt(n);if(r&lt;128){t+=String.fromCharCode(r);n++}else if(r&gt;191&amp;&amp;r&lt;224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&amp;31)&lt;&lt;6|c2&amp;63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&amp;15)&lt;&lt;12|(c2&amp;63)&lt;&lt;6|c3&amp;63);n+=3}}return t}}
  
  //set code
  var data = atoms + "%-%" + clickValue + "%-%" + elmts + "%-%" + molecules;
  var encodedString = Base64.encode(data);
  
  function save() {
      // Encode the String
      var encodedString = Base64.encode(data);
      console.log(encodedString);
      alert("Save Code: " + encodedString);
  }
  function load() {
      // Decode the String
      var decodedString = Base64.decode(encodedString);
      console.log(decodedString);
      var splitRst = decodedString.split("%-%");
      console.log(splitRst)
      alert("Values: " + splitRst);
  } 
  </code></pre>
  
  <p>index.php:</p>
  
  <pre><code>&lt;?php
      include_once 'header.php';
  ?&gt;
  &lt;!DOCTYPE html&gt;
  
  &lt;/html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="index.css" /&gt;
    &lt;title&gt;AC Home :: Atoms: 0&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="content"&gt;
      &lt;div class="inline" id="clicker"&gt;
        &lt;br&gt; Atoms: &lt;span id="atoms"&gt;0&lt;/span&gt;
        &lt;br&gt;
        &lt;input type="image" class="atom-image" src="https://theatomandperiodictable.wikispaces.com/file/view/220px-Stylised_Lithium_Atom.svg.png/297637780/220px-Stylised_Lithium_Atom.svg.png" onClick="atomClick()"&gt;
      &lt;/div&gt;
  
      &lt;div class="inline" id="upgrades"&gt;
        &lt;h3&gt;upgrades&lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;div class="inline" id="modifiers"&gt;
        &lt;button onClick="buyElement()" id="BuyModifier" style="height: 50px; width: 201px;"&gt;Buy Element&lt;/button&gt;&lt;br /&gt; elmts: &lt;span id="elmts"&gt;0&lt;/span&gt;
        &lt;br /&gt;
        Cost: &lt;span id="elementCost"&gt;10&lt;/span&gt;
        &lt;br /&gt;
  
        &lt;button onClick="buyMolecule()" id="BuyModifier" style="height: 50px; width: 201px;"&gt;Buy Molecule&lt;/button&gt;
        &lt;br /&gt;
        Molecules: &lt;span id="molecules"&gt;0&lt;/span&gt;
        &lt;br /&gt;
        Cost: &lt;span id="moleculeCost"&gt;100&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;br class="clearBoth" /&gt;
    &lt;script type="text/javascript" src="index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  &lt;?php
      include_once 'footer.php';
  ?&gt;
  </code></pre>