Как я могу заставить счет работать за секунды, а не за миллисекунды?

Question

Я кодирую основную игру, и в этой игре оценка зависит от того, как долго вы выживете.Тем не менее, оценка не записывает, как долго игрок выживает в секундах, а делает это в миллисекундах (я полагаю).Как я могу это исправить, чтобы счет отслеживался в секундах?

Я пытался использовать setInterval([insert parameter], 1000), но мой код работал в миллисекундах.

/*Down below I am bringing the canvas into JavaScript so we can code and "draw" our canvas.*/
var thecanvas = document.getElementById("thecanvas").getContext("2d");
thecanvas.font = "30px Arial";

var HEIGHT = 500;
var WIDTH = 500;
var TimeWhenTheGameStarted = Date.now(); /*This will return the time in miliseconds.*/
var CountofTheFrames = 0;
var TheScore = 0;

/*The Player - Variable will be the object, as indicated by the {}*/
var player = {
  x: 50,
  speedX: 30,
  y: 40,
  speedY: 5,
  name: "P",
  hp: 10,
  width: 20,
  height: 20,
  color: "blue",
};

var enemyList = {};

gettingDistanceBetweenEntities = function(entity1, entity2) {
  /*Return Distance (number)*/
  var vx = entity1.x - entity2.x;
  var vy = entity1.y - entity2.y;
  return Math.sqrt(vx * vx + vy * vy);
};

testingCollisionOfEntities = function(entity1, entity2) {
  /*Return if colliding (true.false)*/
  var rectangle1 = {
    x: entity1.x - entity1.width / 2,
    y: entity1.y - entity1.height / 2,
    width: entity1.width,
    height: entity1.height,
  };
  var rectangle2 = {
    x: entity2.x - entity2.width / 2,
    y: entity2.y - entity2.height / 2,
    width: entity2.width,
    height: entity2.height,
  };
  return testingCollusionofRectangles(rectangle1, rectangle2);
};

Enemy = function(id, x, y, speedX, speedY, width, height) {
  var theenemy = {
    x: x,
    speedX: speedX,
    y: y,
    speedY: speedY,
    name: "E",
    id: id,
    width: width,
    height: height,
    color: "red",
  };
  enemyList[id] = theenemy;
};

UpdatingTheEntity = function(entityParameter) {
  UpdatingTheEntityPosition(entityParameter);
  DrawingTheEntity(entityParameter);
};

document.onmousemove = function(mouse) {
  var mouseX =
    mouse.clientX -
    document.getElementById("thecanvas").getBoundingClientRect().left;
  var mouseY =
    mouse.clientY -
    document.getElementById("thecanvas").getBoundingClientRect().top;

  /*Makes sure that the mouse does not go out of bounds of the canvas.*/
  if (mouseX < player.width / 2) mouseX = player.width / 2;
  if (mouseX > WIDTH - player.width / 2) mouseX = WIDTH - player.width / 2;
  if (mouseY < player.height / 2) mouseY = player.height / 2;
  if (mouseY > HEIGHT - player.height / 2) mouseY = HEIGHT - player.height / 2;

  player.x = mouseX;
  player.y = mouseY;
};

/*Speed of the Entities*/
UpdatingTheEntityPosition = function(entityParameter) {
  entityParameter.x += entityParameter.speedX;
  entityParameter.y += entityParameter.speedY;

  if (entityParameter.x < 0 || entityParameter.x > WIDTH) {
    entityParameter.speedX = -entityParameter.speedX;
  }
  if (entityParameter.y < 0 || entityParameter.y > HEIGHT) {
    entityParameter.speedY = -entityParameter.speedY;
  }
};

testingCollusionofRectangles = function(rectangle1, rectangle2) {
  return (
    rectangle1.x <= rectangle2.x + rectangle2.width &&
    rectangle2.x <= rectangle1.x + rectangle1.width &&
    rectangle1.y <= rectangle2.y + rectangle2.height &&
    rectangle2.y <= rectangle1.y + rectangle1.height
  );
};

/*Physical Appearance of the Entities*/
DrawingTheEntity = function(entityParameter) {
  thecanvas.save();
  thecanvas.fillStyle = entityParameter.color;
  thecanvas.fillRect(
    entityParameter.x - entityParameter.width / 2,
    entityParameter.y - entityParameter.height / 2,
    entityParameter.width,
    entityParameter.height,
  );
  thecanvas.restore(); /*So we do not override the color of HP*/
};

runningTheCode = function() {
  thecanvas.clearRect(0, 0, WIDTH, HEIGHT);

  /*Increase by 1*/
  CountofTheFrames++;
  TheScore++;

  CountofTheFrames = CountofTheFrames + 1;
  /*This will generate more random enemies over time*/
  if (CountofTheFrames % 300 === 0)
    /*Only when the frame count reaches 300, it will generate new enemies every 8 seconds*/
    RandomlyGeneratingEnemies();

  for (var id in enemyList) {
    UpdatingTheEntity(enemyList[id]);

    var isColliding = testingCollisionOfEntities(player, enemyList[id]);
    if (isColliding) {
      player.hp = player.hp - 1;
      if (player.hp <= 0) {
        var TimeSurvived = Date.now() - TimeWhenTheGameStarted;
        console.log(
          "You lost! You survived for " + TimeSurvived + " miliseconds!",
        );
        //TimeWhenTheGameStarted = Date.now(); /*Restarts*/
        player.hp = 10;
        StartingNewGame();
      }
    }
  }
  DrawingTheEntity(player);
  thecanvas.fillText(player.hp + "HP", 0, 30);
  thecanvas.fillText("Score: " + TheScore, 325, 30);
};

RandomlyGeneratingEnemies = function() {
  /* Math.random () returns a number between 0 and 1 by default*/
  var id = Math.random();
  var x = Math.random() * WIDTH;
  var y = Math.random() * HEIGHT;
  var height = 24 + Math.random() * 10;
  var width = 10 + Math.random() * 23;
  var speedX = 4 + Math.random() * 6;
  var speedY = 4 + Math.random() * 6;
  Enemy(id, x, y, speedX, speedY, height, width);
};

StartingNewGame = function() {
  player.hp = 10;
  TimeWhenTheGameStarted = Date.now();
  CountofTheFrames = 0;
  TheScore = 0;
  enemyList = {};
  RandomlyGeneratingEnemies();
  RandomlyGeneratingEnemies();
  RandomlyGeneratingEnemies();
};

setInterval(
  runningTheCode,
  40,
); /*Meaning, the code will run every [blank] miliseconds, 40 = 22 frames*/

<center><h1>Dodge Box: The Game</h1></center>

<center><canvas id="thecanvas" width="500" height="500" style="border: 4px solid #000000;"></canvas></center>

При выполнении кода оценка будет выполняться в секундах, а не в миллисекундах.

Answer 1

Разделите миллисекунды на 1000, чтобы получить секунды.

var TimeSurvived = (Date.now() - TimeWhenTheGameStarted) / 1000;