Я пытался скопировать и изучить этот турориал: https://www.youtube.com/watch?v=txUvD5_ROIU, но я хотел переместить встроенный javascript в отдельный файл. js в Visual Studio Code. Из-за этого код работал неправильно, и я не могу понять, почему. Я пытался структурировать его по-другому, но я не знаком с javascript, чтобы понять, что не так. Вот код:
HTML:
<!DOCTYPE html>
<canvas id="game" width="400" height="400"></canvas>
<script src="script.js" type="text/javascript" >
</script>
Javascript:
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);
}
Любая помощь приветствуется!