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!
Advertisement
Answer
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>