1

Trying to do some basic game development.

var = mapArray is a 2D array which is filled with random numbers. Random numbers are important and I do not want to come up with a pre-defined 2D array.

Numbers are assigned to relevant images and then printed to form a tile map which is essentially a <canvas> element:

for (var i = 0; i < mapArray.length; i++) {
    for (var j = 0; j < mapArray[i].length; j++){

        if (mapArray[i][j] === 0) {
                context.drawImage(grass, posX, posY, 60, 60);
        }
        else if (mapArray[i][j] === 1) {
                context.drawImage(forest, posX, posY, 60, 60);
        }
        else if (mapArray[i][j] === 2) {
                context.drawImage(hills, posX, posY, 60, 60);
        }
        else if (mapArray[i][j] === 3) {
                context.drawImage(mountains, posX, posY, 60, 60);
        }
        else if (mapArray[i][j] === 4) {
                context.drawImage(swamp, posX, posY, 60, 60);
        }
        else if (mapArray[i][j] === 5) {
                context.drawImage(forest, posX, posY, 60, 60);
        }

        posX+=60;
    }
    posX = 0;
    posY+=60;
}

I am able to track mouse clicks on the entire canvas relative to its position on the page and get correct X and Y coordinates of a click.

Now I need to actually link the click coordinates with the tiles kept in the 2D array. It is important for me to know which tile is clicked since it will invoke different behavior (e.g. resources, enemies, events, etc).

I am entirely at a loss here and have been reading a lot these days. I might need to call every element's function and then check coordinates of each element within array against mouse coordinates as IF statement within the function, or I might broadcast mouse coordinates across all elements to see which one will respond. This does not seem to be a problem (at least for now, he he).

My problem is the following: how can I assign functions and other attributes to elements in my array, provided that those are images. May be the way I am building my array in is originally faulty, as I populate it with pure numbers and then translate numbers to images? I might possibly need to push objects with some more properties? How would I handle this situation?

GitaarLAB
  • 14,536
  • 11
  • 60
  • 80
Vadimster
  • 119
  • 9
  • Think of the terrain categories as objects: they have their properties/attributes like image(s if there are seasons or night/day etc), type etc and they have (default) methods (functions) specific to them. Then your play-map becomes a table linking to those *single* objects and has player/time specific properties. Stuff like that also relieves you of the need for all those else if things: think about this: `var terrain=[grass, forest, hills, mountains, swamp, forest]; context.drawImage(terrain[mapArray[i][j]], posX, posY, 60, 60);` – GitaarLAB Nov 12 '14 at 15:35
  • If I understand correctly, the action would be something along these lines: 1. Create variables (e.g. var = forest) and define properties, including image (forest.scr = ""). I assume that at this stage I can somehow link a variable to a function too. 2. I create a var = terrainArray and add each type of terrain there. Now the array contains actual variables which I can use later on. 3. I create a 2D array, which will serve as a base for the tile map by looping and randomly picking elements from the terrainArray. Probably by using = terrainArray[Math.floor(Math.random() * myArray.length)]; – Vadimster Nov 12 '14 at 16:47
  • 4. I create just the way I did before looping the code you kindly provided: context.drawImage(terrain[mapArray[i][j]], posX, posY, 60, 60); I guess my question still remains - how do I link function to a variable (if I can do it at all) or probably turn a variable into an object which on click executes a function? May be there is some reading I could refer to? – Vadimster Nov 12 '14 at 16:49
  • var forest would *already* be an object (if you'd do: `forest.src=/*somehting*/`). Likewise: just like adding attributes/properties, you can also attach functions: `forest.burn=function(){/*burning forrest*/};` You *really* want to look into: http://stackoverflow.com/questions/572897/how-does-javascript-prototype-work (for *starters* you might see this as a way of providing *default* functions(=methods) (every tile's terrain is of a parent-type like forrest and can inherit from them, but can *also* have specific attributes/methods. – GitaarLAB Nov 12 '14 at 17:14
  • Also: suppose you have *one general* onclick handler for the canvas. That handler then simply get's the event and you grab its x-pos/y-pos. Using a modulo calculation (or simple bitshifting if you make the tile-sizes in powers of 2) you'd pretty quickly calculate in which 'cell' you are, in other words, you've pretty quickly found the active cell (these cells are objects too). An active cell (inside the play-map table) could have a terrain type set, a player inside that cell etc: tile[n].terrain.dig_hole() && tile[n].player.jump_in_hole() && tile[n].player.die() You see, lookup/inheritance – GitaarLAB Nov 12 '14 at 17:26

0 Answers0