<script>
  document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('roletasCanvas');
    const ctx = canvas.getContext('2d');
    const largura_tela = canvas.width;
    const altura_tela = canvas.height;

    const urlsImagens = [
      'https://crn1.com.br/wp-content/uploads/2024/03/jogo-do-tigrinho.jpg',
      'https://tecmania.com.br/wp-content/uploads/2024/01/2150897658.jpg',
      'https://a-static.mlcdn.com.br/450x450/kit-festa-painel-redondo-tigrinho-impakto-visual/impaktovisual/kfrtigri/28303c7441d63ea174e0511465f91ec7.jpeg'
    ];

    const numImagens = 3;   // Número de imagens na roleta
    const velocidade = 2;   // Velocidade de descida das imagens
    const espacoEntreImagens = 80; // Espaço entre imagens na roleta (em pixels)
    let imagens = [];
    let y_positions = [];

    // Função para carregar uma lista de imagens
    function carregarImagens(urls) {
      return Promise.all(urls.map(url => {
        return new Promise((resolve, reject) => {
          const img = new Image();
          img.onload = () => resolve(img);
          img.onerror = (error) => reject(error);
          img.src = url;
        });
      }));
    }

    // Inicialização
    async function iniciar() {
      // Carregar as imagens
      imagens = await carregarImagens(urlsImagens);

      // Definir posições iniciais das imagens (centralizadas verticalmente)
      y_positions = Array.from({ length: numImagens }, (_, i) => i * (altura_tela + espacoEntreImagens));

      // Loop de renderização
      function renderizar() {
        // Limpar o canvas
        ctx.clearRect(0, 0, largura_tela, altura_tela);

        // Atualizar e redesenhar cada imagem
        for (let i = 0; i < numImagens; i++) {
          // Atualizar posição vertical da imagem
          y_positions[i] += velocidade;

          // Se a imagem saiu da tela, reposicionar no topo
          if (y_positions[i] > altura_tela + espacoEntreImagens) {
            const indexImagemAnterior = (i === 0) ? numImagens - 1 : i - 1;
            y_positions[i] = y_positions[indexImagemAnterior] - (imagens[0].height + espacoEntreImagens);
          }

          // Redesenhar a imagem
          const imagemAtual = imagens[i % imagens.length];
          ctx.drawImage(imagemAtual, largura_tela / 2 - imagemAtual.width / 2, y_positions[i]);
        }

        // Agendar próxima renderização
        requestAnimationFrame(renderizar);
      }

      // Iniciar o loop de renderização
      renderizar();
    }

    // Iniciar a animação quando o documento estiver carregado
    iniciar();
  });
</script>
</div>
</div>