JS点击器游戏autoGain值localStorage存储失败求助

问题描述 #

开发基于JavaScript的点击器小游戏时，localStorage已成功存储金币数量（money）和点击增益（clickGain），但每秒自动增益（autoGain）的存储功能始终失效，尝试复用money、clickGain的存储方式未解决问题。

问题根源分析 #

1. autoGain初始化逻辑缺失：全局变量中autoGain默认硬设为1，未从localStorage读取缓存值，且无空值兜底处理
2. autoGain变更后未及时存储：商店升级autoGain时（如onClick3），未同步更新localStorage，仅在点击主按钮时才会存储，刷新页面后数据丢失
3. 存储逻辑重复且不全面：仅在点击主按钮时执行存储，自动加钱、购买道具后未同步存储数据
4. 空值处理不当：读取localStorage时未处理键不存在的情况，可能导致变量变为NaN

修复步骤 #

1. 修复全局变量初始化 #

替换原有全局变量定义，确保从localStorage读取并处理空值：

var money = parseInt(localStorage.getItem('moneys')) || 0,
    clickGain = parseInt(localStorage.getItem('clickGains')) || 1,
    autoGain = parseInt(localStorage.getItem('autoGains')) || 1,
    interval;

删除原有的clickGain判断逻辑，简化为直接读取+默认值的方式。

2. 抽离统一存储函数 #

避免重复代码，创建统一的存储函数：

function saveGameData() {
    localStorage.setItem('moneys', money);
    localStorage.setItem('clickGains', clickGain);
    localStorage.setItem('autoGains', autoGain);
}

3. 同步autoGain变更的存储 #

修改升级autoGain的商店函数，新增存储逻辑：

function onClick3(obj){
    autoGain *= 2;
    saveGameData();
}

4. 完善所有数据变更场景的存储 #

• 修改addMoney函数：

function addMoney() {
    money += clickGain;
    saveGameData();
}

• 修改onBuy函数，添加存储逻辑：

function onBuy(obj) {
    money -= obj.price;
    updateMoney(check=false);
    saveGameData(); // 购买后存储数据
    for(let i=0;i<shop.length;i++){
        shop[i].element.disabled = true;
    }
}

• 修改autoMoney函数，自动加钱后同步存储：

function autoMoney(amount) {
    clearInterval(interval);
    // 调整为每秒触发一次自动增益（可根据需求修改间隔）
    interval = setInterval(function(){ 
        money += autoGain; 
        updateMoney();
        saveGameData();
    }, 1000);
}

完整修复后代码 #

//                                           ============= GLOBAL VARIABLES =============

var money = parseInt(localStorage.getItem('moneys')) || 0,//global player's money
    clickGain = parseInt(localStorage.getItem('clickGains')) || 1,//money gain on clicker clicked
    autoGain = parseInt(localStorage.getItem('autoGains')) || 1,//auto money gain
    interval;//auto money interval

// HTML MAIN ELEMENTS (except  shop buttons)
var element = {
    clicker   : document.getElementById("main-clicker"),//button
    money     : document.getElementById("money"),//txt
}

//                                          ============= GLOBAL FUNCTIONS =============

function saveGameData() {
    localStorage.setItem('moneys', money);
    localStorage.setItem('clickGains', clickGain);
    localStorage.setItem('autoGains', autoGain);
}

function addMoney() { // onClicker pressed add ClickGain
    money = money + clickGain;
    saveGameData();
}

function updateMoney(check=true) {//update html money txt
    text = "JUMPS: " + money;
    element.money.innerHTML = text;
    if(check){checkPrices();}
}

function autoMoney(amount) {//auto add money every interval
    clearInterval(interval);
    // 每秒自动增加一次金币，可根据需求调整间隔（单位ms）
    interval = setInterval(function(){ 
        money = money + autoGain; 
        updateMoney();
        saveGameData();
    }, 1000);
}

//called when a shop Element was bought
function checkPrices() {
    //Check price for each shop element
    //unlock purchase button if enough money
    for(let i=0;i<shop.length;i++){
        if(money >= shop[i].price){
            shop[i].element.disabled = false;
        }
    }
}
//called when a shop Element was bought
function onBuy(obj) {
    //update money
    money -= obj.price;
    updateMoney(check=false);
    saveGameData();
    //lock every purchase buttons in shop
    for(let i=0;i<shop.length;i++){
        shop[i].element.disabled = true;
    }
}

//                                       ============= SHOP BUTTON CLASS =============

class ShopElement{
    // Object for elements in the shop.
    // New Instance Token:
    //   id -> html main element id (in Html)
    //   newprice_func -> the new price formula function
    //   onclick_func  -> the onClick function
    
    constructor (id,newprice_func,onclick_func) 
    { //constructor: called on "new ShopElement()"
        this.id = id;
        this.element = document.getElementById(id);
        this.element.onclick = this.purchase.bind(this);
        this.text_element = this.element.getElementsByTagName("b")[0];
        
        this._updatePrice = newprice_func;
        this._onClick = onclick_func;
        
        this.price = 0;
        this.purchaseLvl = 1;
        this.updatePrice();
    }
    
    //Call default functions with this as argument
    onClick(){this._onClick(this);}
    updatePrice(){this._updatePrice(this);}
    
    //Update Button's txt price
    updateText(){
        this.text_element.innerHTML = "<b>" +'$'+this.price+': ' + "</b>";}
    
    // Update Every new purchase
    update(){
        this.updatePrice(); //calculate new price
        this.updateText();  //update displayed txt
    }
    // called on Element clicked
    purchase(){
        this.purchaseLvl += 1;
        this.onClick();
        onBuy(this);
        this.update()
        checkPrices();
    }
    
}

//                                   =============== SHOP BUTTONS & FUNCTIONS ===============

//alls buttons functions ( newPriceFormula , onClick )
function newPrice1(obj){obj.price = clickGain * 25 * obj.purchaseLvl;}
function newPrice2(obj){obj.price = 250 * obj.purchaseLvl;}
function newPrice3(obj){obj.price = autoGain * 30 * obj.purchaseLvl + 900;}
function newPrice4(obj){obj.price = clickGain * 25 * obj.purchaseLvl;}
function newPrice5(obj){obj.price = clickGain * 550 * obj.purchaseLvl;}
function onClick1(obj){clickGain*=2; saveGameData();}
function onClick2(obj){autoMoney(this.purchaseLvl);}
function onClick3(obj){autoGain*=2; saveGameData();}
function onClick4(obj){clickGain*=2; saveGameData();}
function onClick5(obj){clickGain*=5; saveGameData();}

//all shop's buttons
shop = [
    //new ShopElement("b1",newPrice1,onClick1),
    new ShopElement("b2",newPrice2,onClick2),
    new ShopElement("b3",newPrice3,onClick3),
    new ShopElement("b4",newPrice4,onClick4),
    new ShopElement("b5",newPrice5,onClick5),
    
    //new ShopElement("b4",newPrice4,onClick3),
];

//                                           ================= START =================

// FIRST UPDATE (on page loaded)
updateMoney(); //money txt
for (let i=0;i<shop.length;i++){
    shop[i].update() //buttons txt & price
}

//set main clicker function onClick
element.clicker.onclick = function() { 
    element.clicker.disabled = true;
    addMoney(); updateMoney(); 
    element.clicker.disabled = false;
};

内容的提问来源于stack exchange，提问作者YORIK