0

First things first, I am trying my hand at a very simple tile map engine for 2d games using HTML5 canvas and Javascript and everything seems to be working okay except that my second drawChar function's drawImage() isn't showing on the canvas. I know the urls are good and I have checked for missing chars, etc. but cant figure it out. Code is below. Any help is appreciated.

P.S. I know that much of this code is not "modern" or "best practice", I am still learning and am just trying learn why this error is occurring. Thanks. 

<canvas id="canvas" width="1000" height="500" style="border: 2px solid black; margin: 10px auto;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var draw=canvas.getContext('2d');

var tileSize=canvas.height/10;
var mapLength=canvas.width/tileSize;
var tilex=0;
var tiley=0;

var tile1= new Image();
var tile2= new Image();
var charImg= new Image();

tile1.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/tile_sky.jpg';

tile2.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/tile_ground.jpg';

charImg.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/player.jpeg';



var mapArray = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1]
];





function drawMap() {

for (var y=0; y<mapLength; y++){
for (var x=0; x<tileSize; x++){


tilex=x*tileSize;
tiley=y*tileSize;


if (parseInt(mapArray[y][x]) == 0) {

draw.drawImage(tile1, tilex, tiley, tileSize, tileSize);   }

if (parseInt(mapArray[y][x]) == 1) {

draw.drawImage(tile2, tilex, tiley, tileSize, tileSize);   }

                              }
                              }
               }


function drawChar(){
draw.drawImage(charImg, 300, 200, tileSize, tileSize);     }


function nextFrame(){
draw.clearRect(0, 0, canvas.width, canvas.height);
drawMap();
drawChar();
}

setInterval(nextFrame, 1000);
ZeroCode
  • 39
  • 6
  • 1
    Please try: `function drawMap() { for (var y = 0; y < mapArray.length; y++) { for (var x = 0; x < mapArray[0].length; x++) {....` – enxaneta Dec 09 '18 at 12:38
  • Thanks for your idea, yes turns out my error was in my for functions. – ZeroCode Dec 09 '18 at 14:28
  • If the answer is satisfactory for your question, you can click the empty green check mark next to the answer to help others find it (and give me fake internet points) – Andy Ray Dec 09 '18 at 21:42

1 Answers1

0

You're checking mapArray[y][x] - but y and x aren't related with the size of mapArray, so you're checking for an element that doesn't exist, and getting a Javascript error, which blocks the program execution.

You should keep the Chrome developer tools open so you can see Javascript errors, which will show you the problem here.

Andy Ray
  • 30,372
  • 14
  • 101
  • 138