I am designing a very simple 2d tilemap engine with HTML5 canvas and Javascript. I have two for loops to run through map coordinates and then draw to canvas a tile based on what the said coordinate value is. While doing this, I also need to able to assign an incrmenting var/class/type or whatever with dynamic parameters such as that tile's x, y, and number values. Something like the following pseudo theory:

for loop ++ , for loop++

counter++

sprite[counter]{

x=someNum;

y=someNum;

value=someVal;

}

Thanks for any help!

Jscript_GameTest.html

Any particular error message you're getting, or concept you're not quite understanding? It's not entirely clear from your post what you need help with.

Looking at your example, I don't see any errors jumping out at me from Firefoxs built in debugger, though, I'm assuming here, but you want your character to move?

I see you are invoking setinterval to redraw your character, but inside the two methods referenced within this function you don't update your characters position. You only do it once in the global scope.

I got your character moving on the 'X' axis to the right by adding this line to your drawChar() method.

function drawChar() {
   charx += (tileSize/2);
   draw.drawImage(charImg, charx, chary, tileSize, tileSize*2);
}

I'll also re-attach your html file. Let me know if this is what you were trying to accomplish, if not, please clarify.

Jscript_GameTest.html

1 hour ago, markypooch said:

Any particular error message you're getting, or concept you're not quite understanding? It's not entirely clear from your post what you need help with.

Looking at your example, I don't see any errors jumping out at me from Firefoxs built in debugger, though, I'm assuming here, but you want your character to move?

I see you are invoking setinterval to redraw your character, but inside the two methods referenced within this function you don't update your characters position. You only do it once in the global scope.

I got your character moving on the 'X' axis to the right by adding this line to your drawChar() method.

function drawChar() {
   charx += (tileSize/2);
   draw.drawImage(charImg, charx, chary, tileSize, tileSize*2);
}

I'll also re-attach your html file. Let me know if this is what you were trying to accomplish, if not, please clarify.

Jscript_GameTest.html

Thanks for your reply, sorry i wasn't clear enough. What i need help with is how to store the tile x and y coordinates for each tile i loop through so that i can use them for reference later when doing collision detection. Basically i have to know if the characters x and y coordinates are touching any tiles x and y, what type of tile it is (0,1,2) and then calculate movement/collision based on that. Im assuming i need to create some kind of array of objects and store the values as the for loop moves through tiles. Im used to java where class objects are drastically easier to implement. 

52 minutes ago, blesseddisciple said:

Thanks for your reply, sorry i wasn't clear enough. What i need help with is how to store the tile x and y coordinates for each tile i loop through so that i can use them for reference later when doing collision detection. Basically i have to know if the characters x and y coordinates are touching any tiles x and y, what type of tile it is (0,1,2) and then calculate movement/collision based on that. Im assuming i need to create some kind of array of objects and store the values as the for loop moves through tiles. Im used to java where class objects are drastically easier to implement. 

Ah, that makes more sense. Well there are a number of ways to do that, but I'd recommend functions. In Javascript, functions are first class objects. They have a this pointer, can have member variables, and can have members that reference other functions (Think member functions of an object).

So you could define a gloabl function to represent a tile like so:

function Tile(x, y) {
    this.x = x;
    this.y = y;
    
    this.checkCollision = function() {
        //do collision stuff
    }
}

You could than define a array globally to hold all of your tiles, again, like so

var tiles   = new Array();

And in your initialization code outside of your main loop/setInterval method you could initialize this array like so

for (var y = 0; y < mapHeight; y++) {
    for (var x = 0; x < mapWidth; x++) {

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

        tiles.push(new Tile(tilex, tiley));

    }
}

Quote

Im used to java where class objects are drastically easier to implement.

I'm not sure it's true that these things are drastically easier in Java. It might even be easier in JS in some ways.

However, the approaches taken by the two languages are (arguably) drastically different, which could certainly be an obstacle when coming from Java. JS uses an object-and-prototype based system, which in turn can be used to effect something like the 'classes' you're used to in Java (newer versions of JS include some syntactic sugar for this). It can take some getting used to though.

I'll add a couple comments in addition to what markypooch said.

First I'll mention that recent versions of JS include a number of new features, such as let and const as additions to (and arguably in most cases replacements for) var. If you're interested in best practices with respect to JS, you might look into references on ES6. (There are different terms for the different versions of JS, but the term 'ES6' should yield plenty of search results.)

Following on what markypooch said, you'll definitely want to embrace objects and (pseudo)classes if you're going to use JS. Once you get comfortable with what he described, you'll probably want to look into prototypes as an alternate (and sometimes preferred) way of sharing functionality between objects (this is where things start to look a little more like 'classes' from other languages). The newest versions of JS include some syntactic sugar that makes creating 'classes' at least as straightforward as it is in Java (in my view at least).

Once some of these pieces are in place, I think it'll start to become more obvious how to solve problems like the one you're asking about.

Lastly, one side note: you don't need the calls to parseInt() in your code, as the array elements are already numbers.