I make a small educational project on codepen. Almost completed the game. Added a player, rendered a map, but an unpleasant error appeared (initially there was a slight confusion with the coordinates) - the program does not see the first column and row of the map, does not draw, does not see that there is an impassable wall. link to codepen
Rendering function:
function render() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var x = 0; x < MAP_WIDTH; x++) { for (var y = 0; y < MAP_HEIGHT; y++) { switch (getCell(x, y)) { case 0: if (soilReady) { ctx.drawImage(soil, x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE); } break; case 1: if (stoneReady) { ctx.drawImage(stone, x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE); } } } } ctx.drawImage(hero, cellX * CELL_SIZE, cellY * CELL_SIZE, CELL_SIZE, CELL_SIZE); }
getCell:if ((x > 0 && x <= MAP_WIDTH). Therefore, it does not see the first column. Similarly, with a number. - Alexander Petrov