efeito roleta no bootblocks

samuel

<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>

samuel

Coloquei o código todo mais cortou e ficou como parte da mensagem

samuel

codigo-roleta.rar

1kB

samuel

samuel na duvida baixe esse o codigo coloquei dentro do txt

samuel

como faço essa parte que fiz acima usando a plataforma bootblocks pode me mostra como david essa roleta usando blocos

lcmatosj

Dá uma atenção para essas suas iagens que estão só virus!!

JS
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://via.placeholder.com/150/FF0000/FFFFFF?text=Imagem+1', 'https://via.placeholder.com/150/00FF00/FFFFFF?text=Imagem+2', 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Imagem+3' ]; 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 = []; 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; }); })); } async function iniciar() { try { imagens = await carregarImagens(urlsImagens); y_positions = Array.from({ length: numImagens }, (_, i) => i * (altura_tela / numImagens)); function renderizar() { ctx.clearRect(0, 0, largura_tela, altura_tela); for (let i = 0; i < numImagens; i++) { y_positions[i] += velocidade; if (y_positions[i] > altura_tela) { const indexImagemAnterior = (i === 0) ? numImagens - 1 : i - 1; y_positions[i] = y_positions[indexImagemAnterior] - (imagens[i].height + espacoEntreImagens); } const imagemAtual = imagens[i % imagens.length]; ctx.drawImage(imagemAtual, largura_tela / 2 - imagemAtual.width / 2, y_positions[i]); } requestAnimationFrame(renderizar); } renderizar(); } catch (error) { console.error("Erro ao carregar imagens: ", error); } } iniciar(); });