关于javascript:计数器不会按小数递增

Counter wont increment by decimals

我正在深入到JavaScript中,到目前为止,我已经在尝试做的事情上取得了相对成功。尽管我意识到我所做的大部分工作可能是做得不正确或效率低下。

对于我的第一个"项目",我试图做一个基本的游戏。点击鹤嘴锄,它会在你的岩石总量中增加+1。当你击中5块石头后,你可以买一把铲子,它会以每秒1块的速度为你生成石头。我现在必须将其设置为每秒1次,因为1下的任何内容都不起作用。

我的代码(它仍然有点混乱,因为我一直在修改它):

JSbin演示

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Total Rocks: <input id="txtNumber" type="text" value="0" onfocus="this.blur()" style=" border:none; text-align:center; background-color:transparent;" />


<img style="border:0;" src="http://img2.wikia.nocookie.net/__cb20130308043142/minecraftpocketedition/images/6/6d/Pickaxe_1.jpeg" onclick="javascript:add()">


Rocks per second: <input id="perSec" type="text" value="0" onfocus="this.blur()" style="width:30px; border:none; text-align:center; background-color:transparent;" />
     

Shovel(<input id="shovelCount" type="text" value="0" onfocus="this.blur()" style="width:20px; border:none; text-align:center; background-color:transparent;" />): 5 rocks

<input id="shovelBuy" type="button" value="Buy" onclick="javascript:shovel()"/>

</body>

javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var totalRocks = 0;
var rocksPerSec = 0;
    function increment() {
       var txtNumber = document.getElementById("txtNumber");
       var newNumber = parseInt(txtNumber.value, 10) + rocksPerSec;
       txtNumber.value = newNumber;
    }
setInterval(function(){increment();}, 1000);

function add()
{
  var txtNumber = document.getElementById("txtNumber");
  var newNumber = parseInt(txtNumber.value, 10) + 1;
  txtNumber.value = newNumber;
}

function shovel()
{
  var txtNumber = document.getElementById("txtNumber");
  var value = parseInt(txtNumber.value, 10);
  if(value >= 5){
    var newNumber = parseInt(txtNumber.value, 10) - 5;
    txtNumber.value = newNumber;
    var shovelCount = document.getElementById("shovelCount");
    var newCount = parseInt(shovelCount.value, 10) + 1;
    shovelCount.value = newCount;

    rocksPerSec = rocksPerSec +1;
    return false;
  }
}

我的问题是:为什么我不能把计数器(rockpersec)增加一个十进制值?


作为第一个项目的帮助,我想我给出了一个结构化代码的建议

jfiddle:http://jsfiddle.net/j8cjs/

在这里,您可以使用

1
2
var miner = new Miner();
miner.start();

它还允许重置和停止(或者更确切地说是贫穷)您当前的游戏。您的HTML代码会随着相对属性的更改而更改,并添加了一些我通常从jquery中借用的函数:)


我做了这个小提琴…你基本上要用parseFloat()替换parseInt(),如果你问"为什么?"答案是,如果你想把岩石的数量增加0.2,例如,parseInt(0.2)总是0。因此,您总是将0.2添加到0并将其解析回0..希望它有帮助..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var totalRocks = 0;
var rocksPerSec = 0;
    function increment() {
       var txtNumber = document.getElementById("txtNumber");
       var newNumber = parseFloat(txtNumber.value, 10) + rocksPerSec;
       txtNumber.value = newNumber;
    }
setInterval(function(){increment();}, 1000);

function add()
{
  var txtNumber = document.getElementById("txtNumber");
  var newNumber = parseFloat(txtNumber.value, 10) + 1;
  txtNumber.value = newNumber;
}

function shovel()
{
  var txtNumber = document.getElementById("txtNumber");
  var value = parseFloat(txtNumber.value, 10);
  if(value >= 5){
    var newNumber = parseInt(txtNumber.value, 10) - 5;
    txtNumber.value = newNumber;
    var shovelCount = document.getElementById("shovelCount");
    var newCount = parseFloat(shovelCount.value, 10) + 1;
    shovelCount.value = newCount;

    rocksPerSec = rocksPerSec + 0.2;
    return false;
  }
}