Olá pessoal.
Acabei de concluir o curso Lógica de Programação II e resolvi testar os conhecimentos criando algo baseado num problema meu.
Criei um programa para rolar dados para jogos de RPG, que rola um dado do tipo selecionado pelo usuário.
Minha dúvida é: Como eu escrevo dentro do canva?
Explicando a dúvida: Cada um dos quadrados azuis (que irei substituir pelo polígono correspondente ao dado depois) representa um dado usado em jogos de RPG, sendo de um d2 até um d100. Conforme o usuário clica no dado, o programa faz a rolagem e exibe uma mensagem de qual foi a rolagem.
O que eu queria fazer é colocar o nome do dado dentro da imagem. Então no d2 eu quero escrever "d2" no meio dele. E assim por diante. Assim facilita pro usuário saber qual dado é qual.
E queria também que o resultado da rolagem aparecesse abaixo dos dados (sim eu sei que tenho que aumentar o tamanho da tela do canva). Isso porque no futuro, além de implementar os polígonos de cada dado eu ainda quero adicionar uma opção pra pessoa adicionar um modificador, para rolar, por exemplo 1d6+5 e uma opção para rolar mais de um dado por vez.
Abaixo o meu código: É um rascunho ainda, mas a funcionalidade de rolar os dados já está rodando direitinho.
<meta charset="UTF-8">
<canvas width="520" height="80"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle='green';
pincel.fillRect(0, 0, 520, 80);
pincel.fillStyle='darkblue';
pincel.fillRect(20, 15, 55, 55);
pincel.fillStyle='darkblue';
pincel.fillRect(80, 15, 55, 55);
pincel.fillStyle='darkblue';
pincel.fillRect(140, 15, 55, 55);
pincel.fillStyle='darkblue';
pincel.fillRect(200, 15, 55, 55);
pincel.fillStyle='darkblue';
pincel.fillRect(260, 15, 55, 55);
pincel.fillStyle='darkblue';
pincel.fillRect(320, 15, 55, 55);
pincel.fillStyle='darkblue';
pincel.fillRect(380, 15, 55, 55);
pincel.fillStyle='darkblue';
pincel.fillRect(440, 15, 55, 55);
var dadoSelecionado = 0;
function selecionaDado(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if (y > yQuadrados && y < yQuadrados + tamanhoQuadrados) {
if (x > xd2 && x < xd2 + tamanhoQuadrados) {
dadoSelecionado = 2;
} else if (x > xd4 && x < xd4 + tamanhoQuadrados) {
dadoSelecionado = 4;
} else if (x > xd6 && x < xd6 + tamanhoQuadrados) {
dadoSelecionado = 6;
} else if (x > xd8 && x < xd8 + tamanhoQuadrados) {
dadoSelecionado = 8;
} else if (x > xd10 && x < xd10 + tamanhoQuadrados) {
dadoSelecionado = 10;
} else if (x > xd12 && x < xd12 + tamanhoQuadrados) {
dadoSelecionado = 12;
} else if (x > xd20 && x < xd20 + tamanhoQuadrados) {
dadoSelecionado = 20;
} else if (x > xd100 && x < xd100 + tamanhoQuadrados) {
dadoSelecionado = 100;
}
}
var dadoAtual = Math.round(Math.random() * dadoSelecionado);
console.log (dadoAtual);
document.write ("o resultado da rolagem de 1d" + dadoSelecionado + " foi " + dadoAtual);
}
var xd2 = 20;
var xd4 = 80;
var xd6 = 140;
var xd8 = 200;
var xd10 = 260;
var xd12 = 320;
var xd20 = 380;
var xd100 = 440;
var yQuadrados = 0;
var tamanhoQuadrados = 55;
tela.onclick = selecionaDado;
</script>Obrigado pela ajuda!!!
