У меня есть таймер, который рисуют, но совсем не меняют. Он показывает 0:01 и не прибавляет по секундам. Вероятно, это как-то связано с setInterval, но я не уверен.

function drawTimer() {
    var fontSize = 15;
    graph.lineWidth = playerConfig.textBorderSize;
    graph.fillStyle = playerConfig.textColor;
    graph.strokeStyle = playerConfig.textBorder;
    graph.miterLimit = 1;
    graph.lineJoin = 'round';
    graph.textAlign = 'right';
    graph.textBaseline = 'middle';
    graph.font = 'bold ' + fontSize + 'px sans-serif';

    var gameTimeMinutes = 0;
    var gameTimeSeconds = 1;
    var gameTime = "";

    function addTime() {
        gameTimeSeconds += 1;
    }

setInterval(addTime, 1000);

if (gameTimeSeconds < 10) {
    gameTime = gameTimeMinutes + " : 0" + gameTimeSeconds;
} else {
    gameTime = gameTimeMinutes + " : " + gameTimeSeconds;
}

if (gameTimeSeconds == 60) {
    gameTimeSeconds = 0;
    gameTimeMinutes++;
}

    graph.strokeText(gameTime, 50, 50);
    graph.fillText(gameTime, 50, 50);
}

Спасибо.

0
Patrick 31 Дек 2017 в 06:31

2 ответа

Лучший ответ

setInterval(addTime, 1000) вызывает addTime каждую секунду, но ничего не происходит, потому что таймер не перерисовывается. Вы можете перерисовать таймер, вызвав drawTimer, но все данные таймера находятся внутри функции drawTimer.

Многократный вызов drawTimer тоже не помогает, потому что все значения сбрасываются при каждом вызове. Вы можете решить эту проблему, используя глобальные переменные и функции для управления состоянием таймера (gameTimeMinutes, gameTimeSeconds и gameTime), но вы, вероятно, захотите использовать объекты для этого. Подробнее об объектах можно узнать здесь.

В этом примере создается объект GameTimer. GameTimer определяется функцией, она ничего не делает, пока объект не будет создан с использованием ключевого слова new. Затем вы можете addTime или draw, вызвав эти функции для объекта gameTimer.addTime(), gameTimer.draw(). В качестве альтернативы вы можете сделать и то, и другое с помощью функции update, что и происходит с setInterval.

var canvas = document.getElementById("canvas");
var graph = canvas.getContext("2d");
var playerConfig = {
  textBorderSize: 3,
  textColor: "white",
  textBorder: "black"
}

function GameTimer() {
  var gameTimeMinutes = 0;
  var gameTimeSeconds = 0;
  var gameTime = "";
  
  this.addTime = function() {
    gameTimeSeconds += 1;
    if (gameTimeSeconds < 10) {
        gameTime = gameTimeMinutes + " : 0" + gameTimeSeconds;
    } else {
        gameTime = gameTimeMinutes + " : " + gameTimeSeconds;
    }

    if (gameTimeSeconds == 60) {
        gameTimeSeconds = 0;
        gameTimeMinutes++;
    }
  };
  
  this.draw = function() {
    graph.clearRect(0, 0, canvas.width, canvas.height);
    var fontSize = 15;
    graph.lineWidth = playerConfig.textBorderSize;
    graph.fillStyle = playerConfig.textColor;
    graph.strokeStyle = playerConfig.textBorder;
    graph.miterLimit = 1;
    graph.lineJoin = 'round';
    graph.textAlign = 'right';
    graph.textBaseline = 'middle';
    graph.font = 'bold ' + fontSize + 'px sans-serif';
    graph.strokeText(gameTime, 60, 50);
    graph.fillText(gameTime, 60, 50);
  };
  
  this.update = function() {
    this.addTime();
    this.draw();
  }.bind(this);
  
  this.update();
}

var gameTimer = new GameTimer();
setInterval(gameTimer.update, 1000);
<canvas id="canvas"></canvas>
1
PaperMonoid 31 Дек 2017 в 05:49

addTime() вызывается каждую 1 секунду, но похоже, что код ниже строки с setInterval(addTime, 1000); выполняется только один раз. При этом ваша переменная gameTime устанавливается только один раз. Вам следует пересмотреть свою логику, чтобы включить эти изменения (обновление и печать) в ваш интервал.

0
Lucas Mota 31 Дек 2017 в 03:38