Kk

function setup(){
    grass = loadImage("imgs/grass.png");
    water = loadImage("imgs/water.png");
    player = loadImage("imgs/player.png");
    grassT = loadImage("imgs/grassTarget.png")

    tilepSize = 30;
    sizeH = mapTiled.length;
    sizeW = mapTiled[0].length;
    c = 0;
    createCanvas(sizeW*tilepSize, sizeH*tilepSize);
    map_ = [];
    plr = new Player(player, 0, 0);
    for(var i = 0; i < sizeW; i++){
        for(var j = 0; j < sizeH; j++){
            switch(mapTiled[j][i]){
                case 0:
                    map_[c] = new Tile(grass, i, j, true);
                    break;
                case 1:
                    map_[c] = new Tile(water, i, j, false);
                    break;
            }
            c++;
        }
    }
    c = 0;
}

function draw(){
    background(0);
    for(var i = 0; i < sizeW*sizeH; i++){
        map_[i].put();
    }
    plr.put();
}

function Tile(texture, x, y, walkable){
    this.texture = texture;
    this.x = x;
    this.y = y;
    this.walkable = walkable;
    this.put = function(){
        image(this.texture, this.x*30, this.y*30);
    }
    this.clicked = function(px, py){

    }
}

function Player(img, x, y){


    this.put = function(){
        image(img, x, y);
    }
}

function mouseClicked(){
    var clicked;
    for(var i = 0; i < sizeW*sizeH; i++){
        if(map_[i].texture === grassT){
            map_[i].texture = grass;
        }
    }
    if(clicked == undefined){
        for(var i = 0; i < sizeW*sizeH; i++){
            if(mouseX > map_[i].x*30 && mouseX < map_[i].x*30 + tilepSize && mouseY > map_[i].y*30 && mouseY < map_[i].y*30 + tilepSize){
                if(map_[i].walkable){
                    console.log("ok");
                    map_[i].texture = grassT;
                }
            }
        }
    }
}