0

Olá, estou fazendo uma espécie de simcity e tive o problema de que quando eu desenho eu conseguia desenhar a estrada por cima de novo. Então resolvi isso criando um Array de booleana quando desenha aquela área do grid recebe true e não pode mais desenhar nela. Porém o problema que surgiu é que ao invés de cada quadrado trocar, eu não posso mais desenhar na coluna inteira. Aqui o código: http://jsfiddle.net/DanielCavalli/4Me57/5/

1 Resposta 1

1

Pelo que entendi você criou a variável grid_type para controlar se o bloco já foi clicado, mas ela marca apenas a linha, você deve adicionar dentro de cada linha um array para registrar também a coluna:

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();

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .