1

Olá, qual é o melhor jeito de fazer um grid por Javascript e HTML? Eu preciso que eu possa desenhar ou mudar a cor da area de cada espaço em branco. Fiz desse jeito mais ele não me atende por que quando tento mudar a cor de um único quadrado ele acaba mudando ou da linha inteira ou da coluna inteira.

for(var i = 0;i < linha;i++) {
    for (var n = 0;n < coluna;n++) {
        grid_x[i] = i * 40;
        grid_y[n] = n * 40;
        res_x[i] = i * 40;
        res_y[n] = n * 40;
        c[i] = false * i
        dRs(grid_x[i],grid_y[n],grid_w,grid_h,1,"#747474",c[i])
    }
}
function dRs(x,y,w,h,l,s,c) {
    context.beginPath();
    context.lineWidth= l;
    context.strokeStyle= s;
    context.rect(x,y,w,h);      
    context.stroke();
}
7
  • O que quer dizer com grid? tabela? O que faz a função dRs()?
    – Sergio
    Commented 2/08/2014 às 12:55
  • Desculpa esqueci de explicar no tópico. dRs() desenha quadrados com strokes, a parte c[i] não faz parte do código. Com grid quero dizer isso: simcity1re.6te.net , só que sem as funções de desenhar, essa é uma versão muito antiga do que estou fazendo. Commented 2/08/2014 às 13:02
  • E o que são os parametros dessa função? não está muito claro o que quer fazer. Quer mudar a cor dentro do for ou posteriormente?
    – Sergio
    Commented 2/08/2014 às 13:06
  • Quero mudar a cor de cada quadrado separadamente por clique. Exemplo: se eu clicar no quadrado do meio ele ficará preto sem transformar nenhum outro quadrado em preto também. Commented 2/08/2014 às 13:07
  • Prefiro JS puro. Commented 2/08/2014 às 13:10

1 Resposta 1

1

Deny se a intenção é criar um jogo sugiro que você procure uma engine para te auxiliar pois existem várias outras questões que não somente muda ra cor ou realizar um evento.

A jsgamesoup é muito simples e cheia de exemplos. pode ser um ponto de partida inicial.

Também aqui tem um exemplo simples de como resolver a sua questão :

mudacor grid

Lembrando que se trabalha com eventos, onclick, e para cada mudança é necessário realizar a "pintura" novamente das grids.

engine jsgamesoup

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 .