0

São apresentados duas telas/dois xadrez e cada tela com um respectivo cursor. Esse cursor vai fazer aumentar ou diminuir o numero de quadrados. Como faço para que o cursor que está associado a cada uma das telas funcionar deste modo(aumentar ou diminuir o numero de quadrados)? que código deverei usar?

tenho aqui o codigo que construi, só que os cursores nao funcionam:

var graf1, graf2, cursor, graf6, graf4, graf5, graf3;
function inic(){
    graf1 = document.getElementById("tela1").getContext("2d");
    graf2 = document.getElementById("tela2").getContext("2d");
    xadrezCentro(graf1, 500, 77, "#ffff33", "#1a53ff", "#0d0d0d", 4, 0.75);
    xadrezCentro(graf2, 500, 77, "#ff6666", "#99ffff", "#ffffff", 3, 0.50);
    document.getElementById("graf6").style.cursor = "pointer";
    document.getElementById("graf5").style.cursor = "pointer";
    act();
}
       
//desenha um padrao de xadrez, com o devido contexto gráfico, as coordenadas do canto superior esquerdo do padrão, numero de linhas(igual ao numero de colunas), a dimensão do lado da quadricula, as cores dos respectivos fundos, a cor e a espessura da linha e por fim a sua opacidade.
function xadrez(graf, cx, cy, n, ladoQuadricula, corF1, corF2, corLinha, espessuraLinha, opac ){
    var i,j;
    graf.strokeStyle = corLinha;
    graf.lineWidth = espessuraLinha;
    graf.globalAlpha = opac;
    for(j=0; j<n; j++){
        for(i=0; i<n; i++){
            if((i+j)%2 == 0)
            graf.fillStyle = corF1;
            else
            graf.fillStyle = corF2;
            graf.beginPath();
            graf.rect(cx+i*ladoQuadricula, cy+j*ladoQuadricula, ladoQuadricula, ladoQuadricula);
            graf.fill();
            graf.stroke();
        }
    }
}
           
//preenche uma tela quadrada com um padrão xadrez, mantendo uma quadrícula no centro, dados: o contexto gráfico, a dimensão do lado da tela, a dimensão do lado da quadrícula, as cores alternadas dos fundos das quadrículas, a cor e a espessura das linhas das quadrículas e a sua opacidade.
function xadrezCentro(graf, ladoTela, ladoQuadricula, corF1, corF2, corLinha, espessuraLinha, opac){
    var cx,cy, n;
    n = Math.ceil(ladoTela/ladoQuadricula);
    if(n%2 == 0)
        n++;
    cx = cy = ladoTela/2 - n*ladoQuadricula/2;
    xadrez(graf, cx, cy, n, ladoQuadricula, corF1, corF2, corLinha, espessuraLinha, opac );

}
           
//ações sobre os cursores
function act() {
    graf4.value = graf6.value;
    graf3.value = graf5.value;

}

window.load = function(){
   inic();
}
 
   <!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="utf-8" />
        <title> xadrezes com cursor monitorizado </title>
        <style>
            #tela1,#tela2{border:1px solid #000;}
            .etk1{font-family:arial; font-size:15px; font-weight:bold;}
           
        </style>
    </head>
    <body>
        <canvas id = "tela1" width = "500" height ="500"></canvas>
        <canvas id = "tela2" width = "500" height ="500"></canvas>
        <span id = "etk1"> Quadrícula: </span>
        <input id = "graf6" type = "range" min = "10" max = "150" step = "1" value = "80" onmousemove = "act()" onchange = "act()"/>
        <input id = "graf4" type="text" size="1" readonly="readonly" /><br />
        <span id = "etk1"> Quadrícula: </span>
        <input id = "graf5" type = "range" min = "10" max = "150" step = "1" value = "80" onmousemove = "act()" onchange = "act()"/>
        <input id = "graf3" type="text" size="1" readonly="readonly" /><br />

    </body>
</html>

https://pastebin.com/jta3YXBB

4
  • O programa é um jogo de xadrex online onde mostra o cursor do outro?
    – Sveen
    28/12/2017 às 1:14
  • Não é um jogo. Acho que mandei o código que tenho só que os cursores dos respectivos xadrezes não funcionam devo estar a fazer qualquer coisa mal...a função do cursor é aumentar o numero de quadrados ou diminuir o numero de quadrados nos respectivos xadrezes.
    – Dani
    28/12/2017 às 1:18
  • Na linha que se declara as variaveis var graf1, graf2, cursor, graf6, graf4, graf5, graf3; declare apenas var graf1, graf2, cursor; Assim os inputs vão funcionar. Agora quanto aumentar ou diminuir o numero de quadrados continua um mistério!!!
    – user60252
    28/12/2017 às 12:22
  • O valor 80 inicial significa oq?
    – Sam
    28/12/2017 às 21:26

0

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

Pesquise outras perguntas com a tag .