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