Question

你好，我是Javascript编程的初学者。

我想用jquery构建一个简单的游戏，在其中您必须尽可能快地拖放正确的图片。现在问题出在时间上。我想测量从按下开始到游戏结束之间的持续时间（例如正确的纸牌= 10）。我做了两个变量（startTime和endTime），我想在代码末尾使用它们减去它们以获得持续时间。但是我不能使用它们。

我在做什么错？我认为如果一开始就将变量设置为全局变量就足够了。

这是我代码的重要部分：

var startTime;
var endTime;


function handleCardDrop(event, ui) {
	var slotNumber = $(this).data('number');
	var cardNumber = ui.draggable.data('number');

	
	if (slotNumber == cardNumber) {
		ui.draggable.addClass('correct');
		ui.draggable.draggable('disable');
		$(this).droppable('disable');
		ui.draggable.position({ of: $(this),
			my: 'left top',
			at: 'left top'
		});
		ui.draggable.draggable('option', 'revert', false);
		correctCards++;
	}


	if (correctCards == 10) {
		var endTime = new Date().getTime();
		console.log(endTime);
		console.log('Spiel endet');
	}


	// Only show slot, if the previous one is correct
	for (var i = 1; i <= 10; i++) {
		if (correctCards == i) {
			$('#slot' + [i + 1]).css('display', 'block')
		}
	}
}

$('#startButton').click(function Ball() {
	var startTime = new Date().getTime();
	console.log(startTime);
	console.log('Spiel beginnt');
	$('#ball').animate({
		left: '+=800'
	}, 20000, "linear");

});


function time() {
  var timeDiff = endTime - startTime;
  timeDiff /= 1000;
  var seconds = Math.round(timeDiff);
  console.log(seconds + " seconds");
}

<body>

  <div id="content">
    <button id="startButton">Start</button>
    <div id="cardPile"> </div>
    <div id="ball"></div>
    <div id="cardSlots"></div>
  </div>

Answer 1

您实际上是在不同的scopes中声明多个startTime和endTime变量。为了继续引用全局变量，请使用var在文件的顶部分别声明一次，然后稍后在不使用{{1的情况下声明这些全局变量}}。

要计算差异，您应该在游戏结束时调用var函数。

有关更多信息，请查看JavaScript中的scope和var关键字。

Answer 2

您要在各自的函数中重新声明变量endTime和startTime，这将创建新的局部作用域变量。删除var声明，您将可以访问全局变量的值。游戏结束时，您还应该调用time函数。

var startTime;
var endTime;


function handleCardDrop(event, ui) {
    var slotNumber = $(this).data('number');
    var cardNumber = ui.draggable.data('number');


    if (slotNumber == cardNumber) {
        ui.draggable.addClass('correct');
        ui.draggable.draggable('disable');
        $(this).droppable('disable');
        ui.draggable.position({ of: $(this),
            my: 'left top',
            at: 'left top'
        });
        ui.draggable.draggable('option', 'revert', false);
        correctCards++;
    }


    if (correctCards == 10) {
        endTime = new Date().getTime();
        time();
        console.log(endTime);
        console.log('Spiel endet');
    }


    // Only show slot, if the previous one is correct
    for (var i = 1; i <= 10; i++) {
        if (correctCards == i) {
            $('#slot' + [i + 1]).css('display', 'block')
        }
    }
}

$('#startButton').click(function Ball() {
    startTime = new Date().getTime();
    console.log(startTime);
    console.log('Spiel beginnt');
    $('#ball').animate({
        left: '+=800'
    }, 20000, "linear");

});


function time() {
  var timeDiff = endTime - startTime;
  timeDiff /= 1000;
  var seconds = Math.round(timeDiff);
  console.log(seconds + " seconds");
}

Answer 3

您正在重新声明“ startTime”和“ endTime”。只需在代码段的第一行和第二行中的初始“ var”声明之后，从这两个变量中删除变量声明即可。

使用新的Date（）在Javascript中测量时间的问题

3 个答案: