您好,我是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>

最佳答案

您要在各自的函数中重新声明变量endTimestartTime,这将创建新的局部作用域变量。删除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");
}

09-11 19:52
查看更多