-3

I'm coding a basic game and in that game, the score is based on how long you survive. However, the score isn't recording how long the player survives in seconds, instead it's doing so in milliseconds (I presume). How can I fix this so the score keeps track in seconds?

I've tried using setInterval([insert parameter], 1000) but still my code ran in milliseconds.

/*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>

When running the code, the score will run in seconds, not in milliseconds.

4

1 回答 1

0

Divide milliseconds by 1000 to get seconds.

var TimeSurvived = (Date.now() - TimeWhenTheGameStarted) / 1000;
于 2019-04-29T13:43:58.297 回答