JavaScript 增量游戏间隔循环

我正在制作一个非常简单的增量游戏，但我找不到实现升级的好方法。

我想制作一个按钮，使光标循环速度更快。基本上，每秒每个光标都会获得 1 个硬币。升级后应该可以使每个循环花费的毫秒数更少。

我正在尝试使用 window.setInterval 执行此操作，但我不知道如何使其可变，我的方法不起作用。

var coins = 0;

function coinClick(number){
	coins = coins + number;
	document.getElementById("coins").innerHTML = coins;
}

var cursors = 0;
var cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
var nextCost = Math.floor(10 * Math.pow(1.1,cursors));
var cursorUpgrades = 0;
var cursorUpgradeCost = Math.floor(100 * Math.pow(2,cursorUpgrades));

function buyCursor(){
	var cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
	if(coins >= cursorCost){
		cursors = cursors + 1;
		coins = coins - cursorCost;
		document.getElementById('cursors').innerHTML = cursors;
		document.getElementById('coins').innerHTML = coins;
	};
	var nextCost = Math.floor(10 * Math.pow(1.1,cursors));
	document.getElementById('cursorCost').innerHTML = nextCost;
};

function buyCursorUpgrade(){
	if(coins >= cursorUpgradeCost){
		cursorUpgrades = cursorUpgrades + 1;
		coins = coins - cursorUpgradeCost;
		document.getElementById('cursorUpgrades').innerHTML = cursorUpgrades;
		document.getElementById('coins').innerHTML = coins;
	};
	var nextUpgradeCost = Math.floor(100 * Math.pow(2,cursorUpgrades));
	document.getElementById('cursorUpgradeCost').innerHTML = nextUpgradeCost;
};

window.setInterval(function(){
	coinClick(cursors);
}, Math.round(1000 - 100 * cursorUpgrades));

function save(){
	localStorage.setItem("coins",JSON.stringify(coins));
	localStorage.setItem("cursors",JSON.stringify(cursors));
	localStorage.setItem("cursorCost",JSON.stringify(cursorCost));
	console.log('Saved.');
};

function load(){
	console.log('Loaded.');
	coins = JSON.parse(localStorage.getItem('coins'));
	cursors = JSON.parse(localStorage.getItem('cursors'));
	cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
	document.getElementById('cursors').innerHTML = cursors;
	document.getElementById('coins').innerHTML = coins;
	document.getElementById('cursorCost').innerHTML = cursorCost;
};

function resetgame(){
	coins = 0;
	cursors = 0;
	cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
	document.getElementById('cursors').innerHTML = cursors;
	document.getElementById('coins').innerHTML = coins;
	document.getElementById('cursorCost').innerHTML = cursorCost;
};

var savegamecoins = JSON.parse(localStorage.getItem("coins"));
var savegamecursors = JSON.parse(localStorage.getItem("cursors"));

if (coins == 0 && cursors == 0) {
		coins = savegamecoins;
		cursors = savegamecursors;
		cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
		document.getElementById('cursors').innerHTML = cursors;
		document.getElementById('coins').innerHTML = coins;
		document.getElementById('cursorCost').innerHTML = cursorCost;
};

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="interface.css" />
	</head>
	<body>
		<button onClick="coinClick(1)">Click Me!</button>
		<br />
		Coins: <span id="coins">0</span>
		<br />
		<button onClick="buyCursor()">Buy cursor</button>
		<br />
		Cursors: <span id="cursors">0</span>
		<br />
		Cursor Cost: <span id="cursorCost">10</span>
		<br />
		<button onClick="buyCursorUpgrade()">Buy Cursor Upgrade</button>
		<br />
		Cursor Upgrades: <span id="cursorUpgrades">0</span>
		<br />
		Cursor Upgrade Cost: <span id="cursorUpgradeCost">100</span>
		<br />
		<button onClick="save()">Save Game</button>
		<br />
		<button onClick="load()">Load Game</button>
		<br />
		<button onClick="resetgame()">Reset Game</button>
		<br />
		<script type="text/javascript" src="main.js"></script>
	</body>
</html>

最佳答案

您的 js 代码中有几个错误。

您永远不会更改coins的值:coins + number(在调用coinClick(cursors)时开始 coins = 0 和 number=0 这解释了为什么您显示的硬币没有改变。
如果您希望 setInterval 的计时器是可变的，您可以考虑使用 setTimeout 来代替，正如解释的那样 here .

以下是我在您的 js 代码中所做的一些更改

var coins = 0;

function coinClick(number){
    //I made a change here so as the variable "coins" could vary
    coins = coins + 1;
    document.getElementById("coins").innerHTML = coins;
}

var cursors = 0;
var cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
var nextCost = Math.floor(10 * Math.pow(1.1,cursors));
var cursorUpgrades = 0;
var cursorUpgradeCost = Math.floor(100 * Math.pow(2,cursorUpgrades));

function buyCursor(){
    var cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
    if(coins >= cursorCost){
        cursors = cursors + 1;
        coins = coins - cursorCost;
        document.getElementById('cursors').innerHTML = cursors;
        document.getElementById('coins').innerHTML = coins;
    };
    var nextCost = Math.floor(10 * Math.pow(1.1,cursors));
    document.getElementById('cursorCost').innerHTML = nextCost;
};

function buyCursorUpgrade(){
    if(coins >= cursorUpgradeCost){
        cursorUpgrades = cursorUpgrades + 1;
        coins = coins - cursorUpgradeCost;
        document.getElementById('cursorUpgrades').innerHTML = cursorUpgrades;
        document.getElementById('coins').innerHTML = coins;
    };
    var nextUpgradeCost = Math.floor(100 * Math.pow(2,cursorUpgrades));
    document.getElementById('cursorUpgradeCost').innerHTML = nextUpgradeCost;
};
/*
setInterval(function(){
    coinClick(cursors);
    console.log("execution")
}, Math.round(1000 - 100 * cursorUpgrades));*/

function periodicall() {
    coinClick(cursors);
    //if you change cursorUpgrades, your timer will change
    timer = Math.round(1000 - 100 * cursorUpgrades)
    console.log(timer);
    setTimeout(periodicall, timer);
};
periodicall();

function save(){
    localStorage.setItem("coins",JSON.stringify(coins));
    localStorage.setItem("cursors",JSON.stringify(cursors));
    localStorage.setItem("cursorCost",JSON.stringify(cursorCost));
    console.log('Saved.');
};

function load(){
    console.log('Loaded.');
    coins = JSON.parse(localStorage.getItem('coins'));
    cursors = JSON.parse(localStorage.getItem('cursors'));
    cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
    document.getElementById('cursors').innerHTML = cursors;
    document.getElementById('coins').innerHTML = coins;
    document.getElementById('cursorCost').innerHTML = cursorCost;
};

function resetgame(){
    coins = 0;
    cursors = 0;
    cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
    document.getElementById('cursors').innerHTML = cursors;
    document.getElementById('coins').innerHTML = coins;
    document.getElementById('cursorCost').innerHTML = cursorCost;
};

var savegamecoins = JSON.parse(localStorage.getItem("coins"));
var savegamecursors = JSON.parse(localStorage.getItem("cursors"));

if (coins == 0 && cursors == 0) {
    coins = savegamecoins;
    cursors = savegamecursors;
    cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
    document.getElementById('cursors').innerHTML = cursors;
    document.getElementById('coins').innerHTML = coins;
    document.getElementById('cursorCost').innerHTML = cursorCost;
};

关于JavaScript 增量游戏间隔循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47113868/

JavaScript 增量游戏间隔循环

上一篇：javascript - 使用多个变量打开不同的链接

下一篇：javascript - 如何使用 Filestack 的安全功能？