Exemplo de código para implementar efeitos de animação de máquina gashapon usando canvas

Em um piscar de olhos, sou estagiário há dois meses. A empresa realiza um evento de dia de adesão todos os meses. A tarefa deste mês é fazer um evento de loteria de máquina gashapon. deixado no front-end? A maior tarefa era apenas realizar a animação da máquina gashapon.

Fiquei animado ao encontrar uma animação de máquina gashapon na Internet, mas descobri que ela usava animação CSS diretamente para escrever a animação do gashapon até a morte. Não gostei muito, então optei por usar canvas para desenhar o. animação aleatória do gashapon. Primeiro, escrevi uma demonstração simples da máquina Gashapon e visualizei o efeito.

O layout da máquina gashapon é relativamente simples. Você só precisa adicionar alguns elementos ao fundo básico. O mais importante é a tag da tela.

 <div class=bg> <span id=message>Clique para desenhar</span> <div class=lotterybg> <canvas id=myCanvas width=285px height=170px></canvas> <img src=img/lighting.png class =iluminação/> </div></div><img src=img/start-btn.png id=start onclick=play()/><div class=award><span id=awardBall></span></div><img src=img/1.png id=ball1 class=imgSrc><img src=img/2 .png id=ball2 class=imgSrc><img src=img/3.png id=ball3 class=imgSrc><img src=img/4.png id=ball4 class=imgSrc>

Folha de estilo anexada:

 corpo {margem: 0; preenchimento: 0; borda: nenhum;} .bg {fundo: url (../img/bg.png) top sem repetição; tamanho do plano de fundo: 100%; overflow: oculto; posição: absoluto ;largura: 400px;altura: 100%;margem superior: 0;margem esquerda: 50%;-webkit-transform: traduzir(-50%);-moz-transform: traduzir(-50%);-ms-transform: traduzir(-50%);-o-transform: traduzir(-50%);transformar: traduzir(-50% );}#message {posição: absoluta;alinhamento de texto: centro;altura: 25px;tamanho da fonte: 22px;margem superior: 110px;margem esquerda: 50%;-webkit-transform: traduzir(-50%);-moz-transform: traduzir(-50%);-ms-transform: traduzir(-50%);-o-transform: traduzir(-50%) ;transformar: traduzir(-50%);}.lotterybg {background: url(../img/lotterybg.png) top sem repetição;tamanho do plano de fundo: 100%;estouro: visível;largura: 80%;altura: 100%;margem superior: 160px;margem esquerda: 50%;-webkit-transform: traduzir(-50%);-moz-transform: traduzir(- 50%);-ms-transform: traduzir(-50%);-o-transform: traduzir(-50%);transformar: traduzir(-50%);}#myCanvas {posição: absoluta;borda: nenhuma;largura: 285px;altura: 170px;margem superior: 15px;margem esquerda: 50%;-webkit-transform: traduzir(-50% );-moz-transform: traduzir(-50%);-ms-transform: traduzir(-50%);-o-transform: traduzir(-50%);transform: traduzir(-50%);}.lighting {display: bloco;largura máxima: 99%;margem superior: 0;margem esquerda: 0;}#start {posição: absoluta ;índice z: 3;largura: 202px;margem superior: 413px;margem esquerda: 50%;-webkit-transform: traduzir(-50%);-moz-transform: traduzir(-50%);-ms-transform: traduzir(-50%);-o-transform: traduzir(-50%);transformar: traduzir(-50% );}.imgSrc {display: nenhum;posição: absoluto;}.award {posição: absoluto;borda: nenhum;largura: 60px;altura: 200px;topo: 470px;margem esquerda: 50%;-webkit-transform: traduzir(-50%);-moz-transform: traduzir(-50%);-ms-transform: traduzir(-50%);-o-transform: traduzir(-50%);transformar: traduzir(-50%);}

Desta forma, o layout fica concluído e o próximo trabalho principal é desenhar a imagem na tela.

Primeiro defina as diversas variáveis:

 var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var ball1 = document.getElementById('ball1');//Objeto de imagem var ball2 = document.getElementById('ball2' );//Objeto de imagem var ball3 = document.getElementById('ball3');//Objeto de imagem var ball4 = document.getElementById('ball4');//Objeto de imagem var ballList = [ball1, ball2, ball3, ball4];//Matriz de objeto de imagem var ballNum = 4;//O número de bolas na máquina gashapon var awardList = [ ];//A coleção de bolinhas na máquina gashapon var timer;//Timer var award = document.getElementById('awardBall'); document.getElementById('mensagem');

Cada gashapon na máquina gashapon é um objeto, então você precisa definir um objeto gashapon:

 function Ball(index, img) { this.r = 30;//O raio da bola this.x = this.rand(canvas.width - this.r * 2);//A abcissa inicial da bola this. y = this .rand(canvas.height - this.r * 2);//A coordenada vertical inicial da bola this.color = index;//A cor da bola, representada pelo subscrito this.img = img; //O material da bola faz {this .speedX = this.rand(20) - 10 } while (this.speedX < 5);//A abscissa da bola muda a velocidade do { this.speedY = this.rand(20) - 10; );//A coordenada vertical da bola muda de velocidade}

O índice de valor do objeto gashapon recebido é a cor da bola, representada pelos números de 1 a 4, e img é o objeto de imagem usado para desenhar o gashapon.

Na etapa anterior, atributos foram adicionados ao gashapon. O próximo passo é adicionar métodos ao gashapon:

 Ball.prototype = { rand: function (num) {//Número aleatório return Math.random() * num }, run: function () {//Função de movimento da bola this.x += this.speedX; += this.speedY; if (this.x > canvas.width - this.r * 2) {//A bola atinge o limite direito, a velocidade da abcissa torna-se negativa this.speedX = -this.speedX } if (this; .x < 0) {//A bola atinge o limite esquerdo e a velocidade da abcissa torna-se positiva this.speedX = Math.abs(this.speedX } if (this.y > canvas.height - this.r * 2) { //Quando a bola atinge o limite inferior, a velocidade das ordenadas torna-se negativa this.speedY = -this.speedY } if (this.y < 0) {//Quando a bola atinge o limite superior, a velocidade das ordenadas torna-se positiva this; .velocidadeY = Math.abs(this.speedY); } ctx.drawImage(this.img, this.x, this.y, 60, 60);//Desenhe a bola}}

O objetivo principal é adicionar uma função de movimento ao protótipo do objeto gashapon. A função da função de movimento é fazer o gashapon se mover de acordo com sua velocidade e ricochetear quando tocar o limite.

O próximo passo é colocar o gashapon na máquina gashapon:

 function init() {//Inicialização para (let i = 0; i < ballNum; i++) {//Gerar aleatoriamente bolas de várias cores let index = Math.floor(4 * Math.random()); = new Ball(index, ballList[index]);//Novo objeto bola} window.clearInterval(timer);//Limpar timer timer = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//Limpa a tela for (let i = 0; i < AwardList.length; i++) { AwardList[i].run() }//Faça a bola se mover}, 15) ;

Desta forma, já existem bolinhas na máquina gashapon.

O principal processo para iniciar o gashapon é clicar no botão. A máquina gashapon reduzirá o número de ovos gashapon e obterá os ovos gashapon correspondentes.

 function play() { if (awardList.length === 0) {//Não há bola no prêmio alert('Comece de novo!'); else { window. clearInterval(timer);//Limpa o cronômetro let r = awardList.pop();//Reduz as bolas no conjunto de prêmios timer = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//Limpa a tela for (let i = 0; i < AwardList.length; i++) { AwardList[i].run() }//Faça a bola se mover}, 15) ; switch (r.color) {//animação de queda de bola caso 0: Award.setAttribute('class', 'dropBall1'); 'dropBall2'); quebra caso 2: prêmio.setAttribute('class', 'dropBall3'); //O gashapon foi bem-sucedido e solicita premiado.setAttribute('class', ''); switch (r.color) { case 0: message.innerText = 'Purple ball break'; 1: mensagem.innerText = 'Bola verde!'; quebra caso 2: mensagem.innerText = 'Caso amarelo 3: mensagem.innerText = 'bola vermelha!

A animação de queda do gashapon aqui é completada usando os quadros-chave da animação CSS:

 .dropBall1 {conteúdo:;posição: absoluto;esquerda: 0;topo: 0;largura: 60px;altura: 60px;display: bloco;fundo: url(../img/1.png) sem repetição;tamanho do plano de fundo : contém;animação: queda de 1s para frente; -webkit-animation: queda de 1s para frente;}.dropBall2 {conteúdo: ;posição: absoluto;esquerda: 0;topo: 0;largura: 60px;altura: 60px;display: bloco;fundo: url(../img/2.png) sem repetição;tamanho do plano de fundo: contém ;animação: queda de 1s para frente; -webkit-animation: queda de 1s para frente;}.dropBall3 {content:;posição: absoluto;esquerda: 0;topo: 0;largura: 60px;altura: 60px;display: bloco;fundo: url(../img/3.png) sem repetição;tamanho do plano de fundo: contém;animação: facilidade de soltar 1s -out forwards;-webkit-animation: drop 1s easy-out forwards;}.dropBall4 {content: ;position: absoluto;esquerda: 0;topo: 0;largura: 60px;altura: 60px;display: bloco;fundo: url(../img/4.png) no-repeat;tamanho do plano de fundo: contém;animação: soltar 1s com facilidade para frente; -webkit-animation: queda de 1s para frente;}@keyframes drop { 0% { transform: scale(0.7 }); 50% {transformar: escala(1); 51% {transformar: traduzirY(0px); 100% {transformar:transformarY(100px); (0,7); } 50% { -webkit-transformação: escala(1); traduzirY(0px); } 100% { -webkit-transform: traduzirY(100px }}

Claro, você precisa adicionar init(); no final para fazer a máquina gashapon funcionar. Neste ponto, esta máquina gashapon simples está concluída e o efeito é visualizado.

Embora esta Demo seja relativamente simples, ainda existem alguns pontos a serem observados e algumas áreas que podem ser otimizadas.

Observação

objeto img

Estas tags img em html:

 <img src=img/1.png id=ball1 class=imgSrc><img src=img/2.png id=ball2 class=imgSrc><img src=img/3.png id=ball3 class=imgSrc><img src=img/4.png id=ball4 class=imgSrc>

O estilo também é escrito como display: none;. Isso é escrito para obter o objeto img em js. Claro, você também pode escrever essas tags img diretamente no arquivo js sem escrevê-las em html:

 var img = nova imagem();

Desta forma, você também pode obter o objeto img e também pode ser usado para desenhar gashapon.

O cronômetro é limpo no código antes de ser chamado. O objetivo disso é porque se o cronômetro não for limpo, o cronômetro continuará contando, fazendo com que a animação fique cada vez mais estranha.

Ao desenhar na tela, a imagem pode ficar pouco clara ou ampliada. Essa situação pode ser resolvida definindo os atributos de largura e altura da tag da tela como iguais aos atributos de largura e altura do estilo.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.