Tile Maps : how do they works ?

Hello,
am currently using lwjgl, but i think my question has nothing to do with it so i didn’t mention that in the title
anyway…
am trying to start with a little platformer game and i think a tiled map is something necessary to do that (even if it’s not, i want to know how it works )
so i was trying to do some codes for the last 2 hours, and i managed to :
- draw the map grid based on the “block” size and type
- print out the x and y coordinate of the mouse based on its position on the grid
what am stacked with :
-draw and KEEP a specific type if “blocks” in the clicked position (it appears in the wrong location)
what i want to know :
-as a start, is this a good way to do it ?

codes here :

This class will handle the map creation


public class World {

	private Block[][] blocks;
	private Block block;
	private int width, height;

	public World(int width, int height) {

		this.width = width;
		this.height = height;

		blocks = new Block[width][height];

	}

	public void setWorld() {
		for (int x = 0; x < width; x++) {
			for (int y = 0; y < height; y++) {
				Block block = new Block(0, 0, 32, 0);
				block.setX(x * block.getSize());
				block.setY(y * block.getSize());
				block.draw();
				blocks[x][y]=block;

			}
		}
	}
	
	public void drawInWorld(int x,int y){
		Block block = new Block(0, 0, 32, 1);
		block.setX(x * block.getSize());
		block.setY(y * block.getSize());
		block.draw();
	
	}

	public int getWidth() {
		return width;
	}

	public int getHeight() {
		return height;
	}

}


this class will handle a single block creation


public class Block {

	private int x, y, size, type;
	private Drawing draw = new Drawing();
	public Block(int x, int y, int size, int type) {
		super();
		this.x = x;
		this.y = y;
		this.size = size;
		this.type = type;
	}

	public void draw(){
		
		if(type==0){
			draw.coloring("blue");
		}else{
			draw.coloring("red");
		}
		
		draw.drawRect(x, y, size, size);
	}
	
	public int getX() {
		return x;
	}

	public void setX(int x) {
		this.x = x;
	}

	public int getY() {
		return y;
	}

	public void setY(int y) {
		this.y = y;
	}

	public int getSize() {
		return size;
	}

	public void setSize(int size) {
		this.size = size;
	}

	public int getType() {
		return type;
	}

	public void setType(int type) {
		this.type = type;
	}

}


this is the Board class (logic,calling etc…)
PS :
i removed the player method to make it easiest to follow

 

import java.util.Arrays;

import org.lwjgl.input.Keyboard;
import org.lwjgl.input.Mouse;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.GL11;

public class Board {
	// varibable of other classes
	
	private Loop loop = new Loop(); // the loop class
	private World world;

	int delta;

	public void init() {
		// initialize the loop
		loop.init();
		world = new World(25,19);
		
	}

	// the main game logic "caller"
	public void myBoardLoop() {
		delta = loop.getDelta();
		
		update(delta);
	}

	// the update method
	private void update(int delta) {
		input();
		painting();
		
		loop.updateFPS();

	}

	private void painting() {
		// clear the screen and depth buffer
		GL11.glClear(GL11.GL_COLOR_BUFFER_BIT | GL11.GL_DEPTH_BUFFER_BIT);
		
		
		world.setWorld();
	}


	private void input(){
		int mouseX = Mouse.getX();
		int mouseY = Mouse.getY();
		boolean mouseClick = Mouse.isButtonDown(0);
		if(mouseClick){
			int mapX = Math.round(mouseX/32);
			int mapY = Math.round(mouseY/32);
			System.out.println(mapX+"||"+mapY);
			world.drawInWorld(mapX, mapY);
		}
	}
}

thank you

how tile maps work
SCNR

You recreate the whole world in each rendering pass. Set up the world once and before.
What is block for int class World ?
setWorld should rather be called createWorld and not draw blocks - and there is drawInWorld
What is Block member drawing, why does each Block has one ?
To check wrong click positions, start with the origin at 0,0, verify output, then move on slowly and see how it behaves.
Instead of determining Block colors by type, set the color directly or derive sub classes with different visual appearance. Keeping modes in classes is not good and not OOP.

alright so i change the code and it gave me this :

http://s12.postimg.org/gi8wshtm5/tile.jpg

the gray and blue squares are token from a string array (check the code below)
they yellow square is the correct position of the mouse when i click in a gray field
the green square is the correct position of the mouse when i click in a blue field

public class World {

	private Block[][] blocks;
	private Block block;
	private int width, height;
	private int[][] multi = new int[10][10];

	private String[][] stringArray = {
			{ "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", },
			{ "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", },
			{ "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", },
			{ "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", },
			{ "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", },
			{ "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", },
			{ "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", },
			{ "#", "#", "#", "#", "0", "0", "#", "#", "#", "#", },
			{ "#", "#", "#", "#", "0", "0", "#", "#", "#", "#", },
			{ "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", },

	};

	public World(int width, int height) {

		this.width = width;
		this.height = height;

		blocks = new Block[width][height];

	}

	public void setWorld() {
		for (int x = 0; x < width; x++) {
			for (int y = 0; y < height; y++) {
				Block block = new Block(0, 0, 32, 0);
				block.setX(x * block.getSize());
				block.setY(y * block.getSize());
				if (stringArray[y][x] == "0") {
					drawInWorld(x, y, 0);
				} else {
					drawInWorld(x, y, 1);
				}
			}
		}
	}

	public void drawInWorld(int x, int y, int type) {
		Block block = new Block(0, 0, 32, type);
		block.setX(x * block.getSize());
		block.setY(y * block.getSize());
		block.draw();

	}

	public String[][] getWorld() {

		return stringArray;

	}

}

so now i think the creation part is done(if am using a wrong method please correct it, am doing it all by myself without looking to any example or tutorials so the chance of doing it wrong is VERY high )

now the hardest part is collision detection with other game elements (the player for now )
i start by doing something like this


private void heroCollision() {

		int tmpHeroX = (int) heroX;
		int tmpHeroY = (int) (Game.HEIGHT - heroY - 1);

		int heroTx = Math.round(tmpHeroX / 32);
		int heroTy = Math.round(tmpHeroY / 32);
		// this print the correct position of the player in the grid
		//System.out.println(heroTx + "|" + heroTy);
		// if it's on the ground
		if (myWorld[heroTy + 1][heroTx] == "0") // +1 to make it stop before get
												// into the grid case
		{
			System.out.println("you are on the ground ");
		}
	}

and it works, it can tell that the player is on the ground or not
but the problem is this isn’t a correct collision detection, or at least not the way i learned how to do it,
so what i want to ask now, is if there is a way to use the AABB collision detection (i already build a method that have in parameter i[/i] with what i achieved till now ??
so in fact what i clearly want is access the x and y value of each block from the grid .

in case you needed the Block class

public class Block {

	private int x, y, size, type;
	private Drawing draw = new Drawing();

	public Block(int x, int y, int size, int type) {
		super();
		this.x = x;
		this.y = y;
		this.size = size;
		this.type = type;
	}

	public void draw() {

		if (type == 0) {
			draw.coloring("blue");
		} else if (type == 1) {
			draw.setColor(0.5f, 0.5f, 0.5f);
		} else if (type == 2) {
			draw.setColor(0.5f, 0.9f, 0.2f);
		}

		else {
			draw.setColor(0.9f, 0.9f, 0.5f);
		}

		draw.drawRect(x, y, size, size);
	}

	public int getX() {
		return x;
	}

	public void setX(int x) {
		this.x = x;
	}

	public int getY() {
		return y;
	}

	public void setY(int y) {
		this.y = y;
	}

	public int getSize() {
		return size;
	}

	public void setSize(int size) {
		this.size = size;
	}

	public int getType() {
		return type;
	}

	public void setType(int type) {
		this.type = type;
	}

}

thank you