'moving inline javascript to separate file

I was trying to copy and learn from this turorial: https://www.youtube.com/watch?v=txUvD5_ROIU but I wanted to move the inline javascript to a separate .js file in Visual Studio Code. This made the code run incorrectly and I cannot for my live figure out why. I've tried to structure it differently but I'm to unfamiliar with javascript to figure out whats wrong. Here is the code:

var ctx = null;

var tileW = 40;
var tileH = 40;
var mapW = 10;
var mapH = 10;

var currentSecond = 0,
  frameCount = 0,
  framesLastSecond = 0;

var gameMap = [
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
  0, 1, 0, 0, 0, 1, 0, 0, 0, 0,
  0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
  0, 1, 0, 1, 0, 0, 0, 1, 1, 0,
  0, 1, 0, 1, 0, 1, 0, 0, 1, 0,
  0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
  0, 1, 0, 0, 0, 0, 0, 1, 0, 0,
  0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];



window.onload = function() {

  ctx = document.getElementById('game').getContext('2d');
  requestAnimationFrame(drawGame);
  ctx.font = "bold 10pt sans-serif";
}

function drawGame() {
  if (ctx == null) {
    return;
  }
  var sec = Math.floor(Date.now() / 1000);
  if (sec != currentSecond) {
    currentSecond = sec;
    framesLastSecond = frameCount;
    frameCount = 1;

  } else {
    frameCount = frameCount + 1;
  }
  for (var y = 0; x < mapH; y++) {
    for (var x = 0; x < mapW; x++) {
      switch (gameMap[((y * mapW) + x)]) {
        case 0:
          ctx.fillStyle = "#000000";
          break;
        default:
          ctx.fillStyle = "#ccffcc";
      }

      ctx.fillRect(x * tileW, y * tileH, tileW, tileH);

    }
  }
  ctx.fillStyle = "#ff0000";
  ctx.fillText("FPS: " + frameCount, 10, 20);


  requestAnimationFrame(drawGame);
}
<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <canvas id="game" width="400" height="400"></canvas>
  <script src="script.js" type="text/javascript">
  </script>
</body>

</html>

Any help is greatly appreciated!

javascripthtmljstilemap


Solution 1:[1]

You have a typo in this line: for (var y = 0; x < mapH; y++)

Here is fixed example:

var ctx = null;

var tileW = 40;
var tileH = 40;
var mapW = 10;
var mapH = 10;

var currentSecond = 0,
  frameCount = 0,
  framesLastSecond = 0;

var gameMap = [
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
  0, 1, 0, 0, 0, 1, 0, 0, 0, 0,
  0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
  0, 1, 0, 1, 0, 0, 0, 1, 1, 0,
  0, 1, 0, 1, 0, 1, 0, 0, 1, 0,
  0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
  0, 1, 0, 0, 0, 0, 0, 1, 0, 0,
  0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];

window.onload = function () {
ctx = document.getElementById('game').getContext('2d');
requestAnimationFrame(drawGame);
ctx.font = "bold 10pt sans-serif";
}

function drawGame() {
  if (ctx == null) {
    return;
  }
  var sec = Math.floor(Date.now() / 1000);
  if (sec != currentSecond) {
    currentSecond = sec;
    framesLastSecond = frameCount;
    frameCount = 1;
  } else {
    frameCount = frameCount + 1;
  }
  
  for (var y = 0; y < mapH; y++) {
    for (var x = 0; x < mapW; x++) {
      switch (gameMap[((y * mapW) + x)]) {
        case 0:
          ctx.fillStyle = "#000000";
          break;
        default:
          ctx.fillStyle = "#ccffcc";
      }

      ctx.fillRect(x * tileW, y * tileH, tileW, tileH);
    }
  }
  ctx.fillStyle = "#ff0000";
  ctx.fillText("FPS: " + framesLastSecond, 10, 20);

  requestAnimationFrame(drawGame);
}
<canvas id="game" width="400" height="400"></canvas>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions