Grid Boolean Array

Question

Hello, I’m doing a kind of simcity and I had the problem that when I draw I could draw the road over again. So I solved this by creating a Boolean array when drawing that grid area gets true and can no longer draw on it. But the problem that has arisen is that instead of each square changing, I can no longer draw in the entire column. Here the code: http://jsfiddle.net/DanielCavalli/4Me57/5/

Answer 1

From what I understand you created the variable grid_type to control if the block has already been clicked, but it marks only the row, you must add within each row an array to register also the column:

var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    // Mouse
    var mouse_x = 0;
    var mouse_y = 0;
    var mouse_pressed = false;
    //Grid
    var linha = 20;
    var coluna = 20;
    var grid_x = [];
    var grid_y = [];
    var grid_h = 40;
    var grid_w = 40;
    var grid_type = [];
//Funções de Draw
function dR(x,y,w,h,c)
    {
        context.fillStyle = c;
        context.fillRect(x,y,w,h)
    }
    function dRs(x,y,w,h,l,s)
    {
        context.beginPath();
        context.lineWidth= l;
        context.strokeStyle= s;
        context.rect(x,y,w,h); 
        context.stroke();
    }
    //Evento do Mouse
    function mouseMove(e)
    {
        if(e.offsetX) {
            mouse_x = e.offsetX;
            mouse_y = e.offsetY;
        }
        else if(e.layerX) {
            mouse_x = e.layerX;
            mouse_y = e.layerY;
        }
    }
    var _mouseUp = function(e)
    {
        mouse_pressed = false;
    }
    var _mouseDown = function(e)
    {
        mouse_pressed = true;
    }
    canvas.addEventListener("mousemove", mouseMove);
    canvas.addEventListener("mouseup",_mouseUp);
    canvas.addEventListener("mousedown",_mouseDown);
    //Grid
    function grid()
    {
        for(var i = 0;i < linha;i++)
        {
            grid_type[i] = new Array(coluna); // ao inicio de cada linha, criar o array para a coluna
            for (var n = 0;n < coluna;n++)
            {
                grid_x[i] = i * 40;
                grid_y[n] = n * 40;
                dRs(grid_x[i],grid_y[n],grid_w,grid_h,1,"#747474")
                grid_type[i][n] = false; // setar como false na linha e na coluna
            }
        }
    }
    grid();
    function Estrada()
    {
        //Desenha Estrada
        for(var i = 0;i < linha;i++) // mudei de 400 para o numero de linhas
        {
            for (var n = 0;n < coluna;n++) // mudei de 400 para o numero de colunas
            {
                if(mouse_x >= grid_x[i] && mouse_x <= grid_x[i] + grid_w && mouse_y >= grid_y[n] && mouse_y <= grid_y[n] + grid_h && mouse_pressed && !grid_type[i][n]) // verificar se linha e coluna é false
                {
                    dR(grid_x[i],grid_y[n],grid_w,grid_h,'#2e2e2e');
                    mouse_pressed = false;
                    grid_type[i][n] = true; // setar como true a linha e coluna clicada
                }
            }
        }
    }
    function loop()
    {
        Estrada();
        setTimeout(loop,1000/60);
    }   
    loop();