Two screens / two chessboard and each screen with a respective cursor are displayed. This cursor will increase or decrease the number of squares. How do I make the cursor associated with each of the screens work this way (increase or decrease the number of squares)? what code should I use?
I have here the code that I built, but the cursors do not work:
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>