Código de muestra para usar lienzo para implementar efectos de animación de la máquina gashapon

En un abrir y cerrar de ojos, he sido pasante durante dos meses. La compañía tiene un evento del día de membresía todos los meses. La tarea de este mes es hacer un evento de lotería de máquinas gashapon. Hay interfaces para datos, etc. dejado en la parte delantera La tarea más grande era simplemente realizar la animación de la máquina gashapon.

Estaba emocionado de encontrar una animación de la máquina gashapon en Internet, pero descubrí que usaba animación CSS directamente para escribir la animación del gashapon. No me gustó mucho, así que elegí usar lienzo para dibujar. Animación aleatoria del gashapon. Primero escribí una demostración simple de la máquina gashapon y obtuve una vista previa del efecto.

El diseño de la máquina gashapon es relativamente simple. Solo necesitas agregar algunos elementos al fondo básico. Lo más importante es la etiqueta del lienzo.

 <div class=bg> <span id=message>Haga clic para dibujar</span> <div class=lotterybg> <canvas id=myCanvas width=285px height=170px></canvas> <img src=img/lighting.png clase =iluminación/> </div></div><img src=img/start-btn.png id=inicio onclick=play()/><div class=premio><span id=premioBall></span></div><img src=img/1.png id=ball1 class=imgSrc><img src=img/2 .png id=bola2 clase=imgSrc><img src=img/3.png id=bola3 clase=imgSrc><img src=img/4.png id=ball4 clase=imgSrc>

Hoja de estilo adjunta:

 cuerpo {margen: 0;relleno: 0;borde: ninguno;}.bg {fondo: url(../img/bg.png) superior sin repetición;tamaño de fondo: 100%;desbordamiento: oculto;posición: absoluta ;ancho: 400px;alto: 100%;margen superior: 0;margen izquierdo: 50%;-webkit-transform: traducir(-50%);-moz-transform: traducir(-50%);-ms-transform: traducir(-50%);-o-transform: traducir(-50%);transformar: traducir(-50% );}#message {posición: absoluta; alineación de texto: centro; altura: 25 px; tamaño de fuente: 22 px; margen superior: 110 px; margen izquierdo: 50%;-webkit-transform: traducir(-50%);-moz-transform: traducir(-50%);-ms-transform: traducir(-50%);-o-transform: traducir(-50%) ;transformar: traducir(-50%);}.lotterybg {fondo: url(../img/lotterybg.png) superior sin repetición;tamaño de fondo: 100%;desbordamiento: visible;ancho: 80%;alto: 100%;margen superior: 160px;margen izquierdo: 50%;-webkit-transform: traducir(-50%);-moz-transform: traducir(- 50%);-ms-transform: traducir(-50%);-o-transform: traducir(-50%);transformar: traducir(-50%);}#myCanvas {posición: absoluta;borde: ninguno;ancho: 285px;alto: 170px;margen-superior: 15px;margen-izquierdo: 50%;-webkit-transform: traducir(-50% );-moz-transform: traducir(-50%);-ms-transform: traducir(-50%);-o-transform: traducir(-50%);transformar: traducir(-50%);}.iluminación {display: block;max-width: 99%;margin-top: 0;margin-left: 0;}#start {posición: absoluta ;índice z: 3;ancho: 202px;margen superior: 413px;margen izquierdo: 50%;-webkit-transform: traducir(-50%);-moz-transform: traducir(-50%);-ms-transform: traducir(-50%);-o-transform: traducir(-50%);transformar: traducir(-50% );}.imgSrc {pantalla: ninguna;posición: absoluta;}.premio {posición: absoluta;borde: ninguna;ancho: 60px;alto: 200px;arriba: 470px;margen izquierdo: 50%;-webkit-transform: traducir(-50%);-moz-transform: traducir(-50%);-ms-transform: traducir(-50%);-o-transformar: traducir(-50%);transformar: traducir(-50%);}

De esta forma se completa el diseño y el siguiente trabajo principal es dibujar imágenes en el lienzo.

Primero defina las distintas variables:

 var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var ball1 = document.getElementById('ball1');//Objeto de imagen var ball2 = document.getElementById('ball2' );//Objeto de imagen var ball3 = document.getElementById('ball3');//Objeto de imagen var ball4 = document.getElementById('ball4');//Objeto de imagen var ballList = [ball1, ball2, ball3, ball4];//Matriz de objeto de imagen var ballNum = 4;//El número de bolas en la máquina gashapon var AwardList = [ ];//La colección de bolitas en la máquina gashapon var timer;//Timer var Award = document.getElementById('awardBall'); document.getElementById('mensaje');

Cada gashapon en la máquina gashapon es un objeto, por lo que debes definir un objeto gashapon:

 function Ball(index, img) { this.r = 30;//El radio de la bola this.x = this.rand(canvas.width - this.r * 2);//La abscisa inicial de la bola this. y = this .rand(canvas.height - this.r * 2);//La coordenada vertical inicial de la bola this.color = index;//El color de la bola, representado por el subíndice this.img = img; //El material de la bola hace {esto .speedX = this.rand(20) - 10; } while (this.speedX < 5);// La abscisa de la pelota cambia de velocidad do { this.speedY = this.rand(20) - 10; );//La coordenada vertical de la bola cambia de velocidad}

El índice de valor del objeto gashapon entrante es el color de la bola, representado por los números del 1 al 4, e img es el objeto de imagen utilizado para dibujar el gashapon.

En el paso anterior, se agregaron atributos al gashapon. El siguiente paso es agregar métodos al gashapon.

 Ball.prototype = { rand: function (num) {//Retorno de número aleatorio Math.random() * num }, ejecutar: function () {//Función de movimiento de bola this.x += this.speedX y. += this.speedY; if (this.x > canvas.width - this.r * 2) {// La pelota golpea el límite derecho, la velocidad de la abscisa se vuelve negativa this.speedX = -this.speedX } if (this .incógnita < 0) {// La pelota golpea el límite izquierdo y la velocidad de la abscisa se vuelve positiva this.speedX = Math.abs(this.speedX } if (this.y > canvas.height - this.r * 2) { //Cuando la pelota golpea el límite inferior, la velocidad de ordenadas se vuelve negativa this.speedY = -this.speedY } if (this.y < 0) {//Cuando la pelota golpea el límite superior, la velocidad de ordenadas se vuelve positiva this .velocidadY = Math.abs(this.speedY); } ctx.drawImage(this.img, this.x, this.y, 60, 60);//Dibuja la pelota}}

El objetivo principal es agregar una función de movimiento al prototipo del objeto gashapon. La función de la función de movimiento es hacer que el gashapon se mueva de acuerdo con su velocidad y rebote cuando toca el límite.

El siguiente paso es poner el gashapon en la máquina de gashapon:

 function init() {//Inicialización para (let i = 0; i < ballNum; i++) {//Generar aleatoriamente bolas de varios colores let index = Math.floor(4 * Math.random() AwardList[i]); = new Ball(index, ballList[index]);//Nuevo objeto de bola} window.clearInterval(timer);//Borrar temporizador timer = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//Limpiar el lienzo for (let i = 0; i < AwardList.length; i++) { AwardList[i].run() }//Hacer que la pelota se mueva}, 15) ; }

De esta forma ya quedan pequeñas bolitas en la máquina gashapon.

El proceso principal para iniciar el gashapon es hacer clic en el botón. La máquina de gashapon reducirá la cantidad de huevos de gashapon y obtendrá los huevos de gashapon correspondientes. La pantalla ganadora será:

 function play() { if (awardList.length === 0) {//No hay ninguna bola en el premio acumulado alert('¡Empieza de nuevo!'); init(); message.innerText = 'Haz clic para dibujar'; else { window. clearInterval(timer);//Borrar el temporizador let r = AwardList.pop();//Reducir las bolas en el grupo de premios timer = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//Limpiar el lienzo for (let i = 0; i < AwardList.length; i++) { AwardList[i].run() }//Hacer que la pelota se mueva}, 15) ; switch (r.color) {// caso de animación de caída de bola 0: Award.setAttribute('class', 'dropBall1'); 'dropBall2'); caso 2: premio.setAttribute('clase', 'dropBall3'); caso 3: premio.setAttribute('clase', 'dropBall4'); //Premio gashapon exitoso.setAttribute('class', ''); switch (r.color) { caso 0: message.innerText = '¡Bola morada! 1: mensaje.innerText = '¡Bola verde! '; caso 2: mensaje.innerText = '¡Bola amarilla!'; caso 3: 'bola roja!

La animación de caída del gashapon aquí se completa usando los fotogramas clave de la animación CSS:

 .dropBall1 {contenido: ;posición: absoluta;izquierda: 0;arriba: 0;ancho: 60px;alto: 60px;pantalla: bloque;fondo: url(../img/1.png) sin repetición;tamaño de fondo : contener;animación: soltar 1s hacia adelante -webkit-animation: soltar 1s hacia adelante;}.dropBall2 {contenido: ;posición: absoluta;izquierda: 0;arriba: 0;ancho: 60px;alto: 60px;pantalla: bloque;fondo: url(../img/2.png) sin repetición;tamaño de fondo: contiene ;animación: soltar 1 hacia adelante;-webkit-animación: soltar 1 hacia adelante;}.dropBall3 {contenido: ;posición: absoluto;izquierda: 0;arriba: 0;ancho: 60px;alto: 60px;pantalla: bloque;fondo: url(../img/3.png) sin repetición;tamaño de fondo: contiene;animación: soltar 1s con facilidad -salida hacia adelante;-webkit-animation: soltar 1s hacia adelante;}.dropBall4 {contenido: ;posición: absoluta;izquierda: 0;arriba: 0;ancho: 60px;alto: 60px;pantalla: bloque;fondo: url(../img/4.png) sin repetición;tamaño de fondo: contener;animación: soltar 1s hacia adelante; -webkit-animation: soltar 1s hacia adelante;}@keyframes soltar {0% {transformar: escala(0.7}); 50% { transformar: escala(1); } 51% { transformar: traducirY(0px } 100% { transformar: traducirY(100px }}@-webkit-keyframes soltar { 0% { -webkit-transform: escala); (0,7); } 50% { -webkit-transformación: escala(1 } 51% { -webkit-transformación: traducirY(0px); } 100% { -webkit-transformar: traducirY(100px }}

Por supuesto, debe agregar init(); al final para que la máquina gashapon se ejecute. En este punto, esta máquina gashapon simple está completa y se obtiene una vista previa del efecto.

Aunque esta demostración es relativamente simple, todavía hay algunos puntos a tener en cuenta y algunas áreas que se pueden optimizar.

Nota

objeto img

Estas etiquetas img en 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 clase=imgSrc>

El estilo también está escrito como display: none;. Esto está escrito para obtener el objeto img en js. Por supuesto, también puede escribir estas etiquetas img directamente en el archivo js sin escribirlas en html.

 var img = nueva Imagen(); img.src = 'img/1.png';

De esta manera, también puede obtener el objeto img y también puede usarse para dibujar gashapon.

El temporizador se borra en el código antes de que se llame al temporizador. El propósito de esto es que si el temporizador no se borra, el temporizador seguirá contando, lo que hará que la animación se vuelva cada vez más extraña.

Al dibujar en el lienzo, la imagen puede no estar clara o estar ampliada. Esta situación se puede resolver configurando los atributos de ancho y alto de la etiqueta del lienzo para que sean los mismos que los atributos de ancho y alto del estilo.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.