0

I have been really wanting to make a map (for a game). I was wanting to add points of intrest (Clickables) and allow users to zoom in on parts. But I have no clue how or where I would start?

I have been coding simple HTML/PHP sites for ages but always ignored JS for the most part.

Thanks

Alexander D
  • 1
  • 2

1 Answers1

0

In order to do it you want extra firepower will be necessary because html/php are not entirely suitable for making games.

Although each one of them may play some role regarding user interface (html5) and some server-side logic and data persistence (php+msql), usually you need to mix up a bunch of different colors to achieve it.

For instance, to make the game's map the simpler and effective approach I know is using a matrix to plot all the points of interest and every other things you may want to show.

var map = [
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
  [1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1],
  [1,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,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

The example above uses binary data to represent this idea, where 0 means literally nothing there and 1 meaning something else (could a rock, a wall, or anything.

Of course, you can create as much numbers and symbols you want to represent a lot more things, including yours points of interest.

To render it altogether you'll have to iterate through this matrix replacing each number for its correspondent image or sprite.

draw: function(){
  var self = this;
  this.context.clearRect(0, 0, this.w, this.h);
    this.context.fillStyle = "rgba(255,0,0,0.6)";
  _(this.map).each(function(row,i){
    _(row).each(function(tile,j){
      if(tile !== 0){ //if tile is not walkable
        self.drawTile(j,i); //draw a rectangle at j,i
      }
    });
  });
},

I strongly recommend self-paced learning about JQuery, HTML5 to expand your current knowledge, because game programming could be exponentially complicated without knowing the basics.

Now, regarding zoom in and out feature I've found a neat snippet published here by GOK (HTML5 Canvas: Zooming), and I manage to extract it from that thread to make it simpler for you to study it.

It works pretty good. Please look it up at:

https://jsfiddle.net/caiubyfreitas/boyr68vg/

:)

Caiuby Freitas
  • 279
  • 2
  • 7