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:
JavaScript
x
66
66
1
var ctx = null;2
3
var tileW = 40;4
var tileH = 40;5
var mapW = 10;6
var mapH = 10;7
8
var currentSecond = 0,9
frameCount = 0,10
framesLastSecond = 0;11
12
var gameMap = [13
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,14
0, 1, 1, 1, 0, 1, 1, 1, 1, 0,15
0, 1, 0, 0, 0, 1, 0, 0, 0, 0,16
0, 1, 1, 1, 1, 1, 1, 1, 1, 0,17
0, 1, 0, 1, 0, 0, 0, 1, 1, 0,18
0, 1, 0, 1, 0, 1, 0, 0, 1, 0,19
0, 1, 1, 1, 1, 1, 1, 1, 1, 0,20
0, 1, 0, 0, 0, 0, 0, 1, 0, 0,21
0, 1, 1, 1, 0, 1, 1, 1, 1, 0,22
0, 0, 0, 0, 0, 0, 0, 0, 0, 023
];24
25
26
27
window.onload = function() {28
29
ctx = document.getElementById('game').getContext('2d');30
requestAnimationFrame(drawGame);31
ctx.font = "bold 10pt sans-serif";32
}33
34
function drawGame() {35
if (ctx == null) {36
return;37
}38
var sec = Math.floor(Date.now() / 1000);39
if (sec != currentSecond) {40
currentSecond = sec;41
framesLastSecond = frameCount;42
frameCount = 1;43
44
} else {45
frameCount = frameCount + 1;46
}47
for (var y = 0; x < mapH; y++) {48
for (var x = 0; x < mapW; x++) {49
switch (gameMap[((y * mapW) + x)]) {50
case 0:51
ctx.fillStyle = "#000000";52
break;53
default:54
ctx.fillStyle = "#ccffcc";55
}56
57
ctx.fillRect(x * tileW, y * tileH, tileW, tileH);58
59
}60
}61
ctx.fillStyle = "#ff0000";62
ctx.fillText("FPS: " + frameCount, 10, 20);63
64
65
requestAnimationFrame(drawGame);66
}JavaScript
1
15
15
1
<!DOCTYPE html>2
<html>3
4
<head>5
6
</head>7
8
<body>9
10
<canvas id="game" width="400" height="400"></canvas>11
<script src="script.js" type="text/javascript">12
</script>13
</body>14
15
</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:
JavaScript
1
61
61
1
var ctx = null;2
3
var tileW = 40;4
var tileH = 40;5
var mapW = 10;6
var mapH = 10;7
8
var currentSecond = 0,9
frameCount = 0,10
framesLastSecond = 0;11
12
var gameMap = [13
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,14
0, 1, 1, 1, 0, 1, 1, 1, 1, 0,15
0, 1, 0, 0, 0, 1, 0, 0, 0, 0,16
0, 1, 1, 1, 1, 1, 1, 1, 1, 0,17
0, 1, 0, 1, 0, 0, 0, 1, 1, 0,18
0, 1, 0, 1, 0, 1, 0, 0, 1, 0,19
0, 1, 1, 1, 1, 1, 1, 1, 1, 0,20
0, 1, 0, 0, 0, 0, 0, 1, 0, 0,21
0, 1, 1, 1, 0, 1, 1, 1, 1, 0,22
0, 0, 0, 0, 0, 0, 0, 0, 0, 023
];24
25
window.onload = function () {26
ctx = document.getElementById('game').getContext('2d');27
requestAnimationFrame(drawGame);28
ctx.font = "bold 10pt sans-serif";29
}30
31
function drawGame() {32
if (ctx == null) {33
return;34
}35
var sec = Math.floor(Date.now() / 1000);36
if (sec != currentSecond) {37
currentSecond = sec;38
framesLastSecond = frameCount;39
frameCount = 1;40
} else {41
frameCount = frameCount + 1;42
}43
44
for (var y = 0; y < mapH; y++) {45
for (var x = 0; x < mapW; x++) {46
switch (gameMap[((y * mapW) + x)]) {47
case 0:48
ctx.fillStyle = "#000000";49
break;50
default:51
ctx.fillStyle = "#ccffcc";52
}53
54
ctx.fillRect(x * tileW, y * tileH, tileW, tileH);55
}56
}57
ctx.fillStyle = "#ff0000";58
ctx.fillText("FPS: " + framesLastSecond, 10, 20);59
60
requestAnimationFrame(drawGame);61
}JavaScript
1
1
1
<canvas id="game" width="400" height="400"></canvas>