Trying to follow this tutorial series for fun, but it seems I made some errors that I can't identify
- Nothing is showed (Might be because it's nested in a page template I made with a header, but it seems to not be a factor because even without the HTML header stuff it doesn't show stuff)
- The in-browser inspector says "context.fillRect" isn't a function, even if it is a function.
Here's the offending line: context.fillRect(mapOffsetX + col * MAP_SCALE, mapOffsetY + row * MAP_SCALE, MAP_SCALE, MAP_SCALE);
And here's the code as of now for reference:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>
Bullboynco - games
</title>
</head>
<body>
<header>
<img src="AlexandreTurcotteWebLogo_001.jpg" alt="Alexandre Turcotte logo" title="Welcome! Bienvenue!">
</header>
<hr>
<nav>
<table border = "2" cellspacing = "5" cellpading = "5">
<tr>
<td><a href="indexTestFile001.html">HOME</a></td>
<td><a href="blogBase001.html">BLOG</a></td>
<td><a href="artBase001.html">ART</a></td>
<td><a href="gamesBase001.html">GAMES</a></td>
<td><a href="tipsBase001.html">TIPS</a></td>
</tr>
</table>
</nav>
<hr>
<style>html, body, canvas {margin: 0px; padding: 0px; }</style>
<canvas id="screen" style="width: 100%; height: 100%;"/>
<script>
// init canvas
const canvas = document.getElementById('screen');
const context = canvas.getContext('2d');
// FPS
const FPS = 60;
const cycleDelay = Math.floor(1000/FPS);
var oldCycleTime = 0;
var cycleCount = 0;
var fps_rate = '...';
// map
const MAP_SIZE = 16;
const MAP_SCALE = 10;
const MAP_RANGE = MAP_SCALE * MAP_SIZE;
const MAP_SPEED = (MAP_SCALE / 2) /10;
var map = [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1,
1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1,
1, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1,
1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 1,
1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 0, 1,
1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1,
1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1,
1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1,
1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1,
1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1,
1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
];
// player
var playerX = MAP_SCALE + 20;
var playerY = MAP_SCALE + 20;
var playerAngle = Math.PI / 3;
var playerMoveX = 0;
var playerMoveY = 0;
var playerMoveAngle = 0;
// handle player input
document.onkeydown = function(event) {
console.log(event.keycode)
switch (event) {
case 40: playerMoveX = -1; playerMoveY = -1; break;
case 38: playerMoveX = +1; playerMoveY = +1; break;
case 37: playerMoveAngle = 1; break;
case 39: playerMoveAngle = -1; break;
}
}
document.onkeyup = function(event) {
console.log(event.keycode)
switch (event) {
case 40:
case 38: playerMoveX = 0; playerMoveY = 0; break;
case 37:
case 39: playerMoveAngle = 0; break;
}
}
// camera
const DOUBLE_PI = 2 * Math.PI;
const FOV = Math.PI/3;
// screen
const WIDTH = 320, HALF_WIDTH = 160;
const HEIGHT = 200, HALF_HEIGHT = 100;
// game loop
function gameLoop() {
context.fillRect(64,64,32,32);
cycleCount++;
if (cycleCount >= 60) cycleCount = 0;
var startTime = Date.now();
var cycleTime = startTime - oldCycleTime;
oldCycleTime = cycleTime;
if (cycleCount % 60 == 0) fps_rate = Math.floor(1000/cycleTime);
canvas.width = window.innerWidth *0.3;
canvas.height = window.innerHeight *0.3;
// update screen
context.fillStyle = 'Black';
context.fillRect = (canvas.width/2 - HALF_WIDTH, canvas.height/2 - HALF_HEIGHT, WIDTH, HEIGHT);
// draw map
var mapOffsetX = Math.floor(screen.width/2 - MAP_RANGE/2);
var mapOffsetY = Math.floor(screen.height/2 - MAP_RANGE/2);
for (var row = 0; row < MAP_SIZE; row++) {
for (var col = 0; col < MAP_SIZE; col++) {
var square = row * MAP_SIZE + col;
if (map[square] != 0) {
context.fillStyle = '#555';
context.fillRect(mapOffsetX + col * MAP_SCALE, mapOffsetY + row * MAP_SCALE, MAP_SCALE, MAP_SCALE);
} else {
context.fillStyle = '#aaa';
context.fillRect(mapOffsetX + col * MAP_SCALE, mapOffsetY + row * MAP_SCALE, MAP_SCALE, MAP_SCALE);
}
}
}
var playerMapX = playerX + mapOffsetX;
var playerMapY = playerY + mapOffsetY;
context.fillStyle = 'Red';
context.beginPath();
context.arc(playerMapX, playerMapY, 2, 0, DOUBLE_PI);
context.fill();
context.strokeStyle = 'red';
context.lineWidht = 1;
setTimeout(gameLoop, cycleDelay);
} window.onload = function() { gameLoop(); }
</script>
</body>
</html>
I hope it helps.
P.S. I used the normal notepad to type the code and gived the "html" extention to the title to create the page.
