Код Base64 остается прежним, даже если изменяются значения, которые он кодирует

Question

Я сейчас создаю инкрементальную игру, очень похожую на кликер cookie. Каким бы был кликер cookie без кода сохранения, который вы можете взломать. У меня есть код, который принимает все значения моих переменных atoms, clickvalue, elmts, molecules, т. Д. он помещает их в строку с разделителями. Затем он кодирует его в Base64. Здесь начинаются проблемы. Сначала декодированное значение Bace64 остается таким же, каким оно было, когда оно было закодировано, но если вы измените значения, то закодируйте и декодируйте снова, значения будут такими же, как в первый раз. Это происходит неважно, сколько раз я пробую.

index.js:

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 >= 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 >= 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<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&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<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<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<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<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&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);
} 

index.php:

<?php
    include_once 'header.php';
?>
<!DOCTYPE html>

</html>

<head>
  <link rel="stylesheet" type="text/css" href="index.css" />
  <title>AC Home :: Atoms: 0</title>
</head>

<body>
  <div class="content">
    <div class="inline" id="clicker">
      <br> Atoms: <span id="atoms">0</span>
      <br>
      <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()">
    </div>

    <div class="inline" id="upgrades">
      <h3>upgrades</h3>
    </div>

    <div class="inline" id="modifiers">
      <button onClick="buyElement()" id="BuyModifier" style="height: 50px; width: 201px;">Buy Element</button><br /> elmts: <span id="elmts">0</span>
      <br />
      Cost: <span id="elementCost">10</span>
      <br />

      <button onClick="buyMolecule()" id="BuyModifier" style="height: 50px; width: 201px;">Buy Molecule</button>
      <br />
      Molecules: <span id="molecules">0</span>
      <br />
      Cost: <span id="moleculeCost">100</span>
    </div>
  </div>
  <br class="clearBoth" />
  <script type="text/javascript" src="index.js"></script>
</body>

</html>

<?php
    include_once 'footer.php';
?>

Answer 1

Ваша проблема - var перед data = в вашей функции для setInterval. Вы скрываете глобальную data и пишете в локальную переменную, которая перестает существовать после завершения функции.

Answer 2

Почему вы не можете просто сделать что-то вроде этого:

const data = {
    atoms: atoms,
    molecules: molecules,
    elements: elmts,
    clicks: clickValue 
};
const text = JSON.stringify(data);
const base64 = btoa(text);

и затем декодировать

const text = atob(base64);
const data = JSON.parse(text);
consol.log(data.clicks);  // your click value here

Без странного соединения с %-%.