Question

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

我想创建一个按钮，使光标循环更快。基本上，每秒为每个光标获得1个硬币。并且升级应该使每个循环花费更少的毫秒。

我尝试使用window.setInterval执行此操作，但我无法弄清楚如何使其变量，我的方法不起作用。

＆＃13;

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;
};

＆＃13;

<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>

＆＃13;

Answer 1

您的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增量游戏间隔循环

1 个答案: