Participo en el "Concurso creativo de principios de verano" para obtener más información, consulte: Concurso creativo de principios de verano .
bloque de código
Ponga las tonterías más tarde, vaya primero al enlace de la experiencia: zongzi.lovetime.top/
Pon el código de nuevo:
prefacio
El festival de la tarde (zi) de Duan (zong) es aún más interesante en la memoria.
A diferencia de ahora, para el Dragon Boat Festival, solo existe la expectativa de "tres días de vacaciones, sin necesidad de tomar descansos".
En mi memoria, seguiría adelante y cortaría un puñado de ajenjo que se podía ver por todas partes en el borde de la carretera en ese momento, colgaría ajenjo en el Festival del Bote del Dragón, cocinaría una olla de huevos, huevos de pato, ajo, etc. Abundancia.
Ahora, solo hay una frase "Festival del Bote del Dragón", y todo es simple.
Para muchas personas, con el desarrollo de la "cultura del azúcar cero", el zongzi ya no es el estándar para el Festival del Bote del Dragón.
"Dig a Zongzi" espera que el par de Dragon Boat Festival y Zongzi duren un millón de puntos ~
fondo del juego
"Dig a Zongzi" es un juego de apuntar y hacer clic muy simple. Actualmente, está bien usar un dedo o un mouse para hacer clic en una prueba simple.
Resumen de una oración: dentro de un tiempo limitado, haga clic en la gota para ganar puntos.
Descripción general de dos oraciones: haga clic en una gota aleatoria dentro del tiempo especificado. Haga clic en las albóndigas para aumentar la puntuación en 1, haga clic en el pequeño monstruo para disminuir la puntuación en 1 y haga clic en la bolsita de la caja ciega para aumentar o disminuir la puntuación al azar.
Zongzi
El artefacto de alejar los malos espíritus. Donde aparece el Festival del Bote del Dragón, debe haber zongzi. Comer zongzi puede protegerse del mal y exorcizar la plaga, y es la primera opción para aumentar los puntos .
pequeño monstruo
El pequeño monstruo originalmente vivía feliz y libremente en la jungla, pero cuando llegó el dios de la plaga, desafortunadamente estaba poseído por espíritus malignos. Asegúrate de evitarlo con cuidado, hacer clic en monstruos pequeños y medianos reducirá tus puntos .
Bolsita de caja ciega
La bolsita originalmente tiene el efecto de expulsar los espíritus malignos, y existe la posibilidad de que explote un punto grande en el punto. Sin embargo, debido a que la bolsita estaba contaminada con el nombre sospechoso de "smog", tiene las características de "caja ciega", es decir, al hacer clic en la bolsita tendrá la oportunidad de reducir los puntos desconocidos .
En resumen, hacer clic en la bolsita de la caja ciega tiene la posibilidad de aumentar/disminuir puntos aleatorios, y los puntos siempre cambiarán mucho bajo la bendición de la aventura y la suerte .
Selección técnica
Los Nuggets sobre el código han estado en línea por un tiempo, ¡hagámoslo! Para el uso más simple, elegí jQuery, que no se ha utilizado durante mucho tiempo, por bendición.
Teniendo en cuenta la mejora de la lógica básica, planeamos implementarla nuevamente con Vue/PixiJS. Emm, por supuesto, tienes que entender lo que significa planificar.
Notas principales
El código aburrido siempre es fascinante, así que expliquemos brevemente la lógica de soltar y hacer clic. Si está interesado, los Nuggets tienen un código completo en el código anterior.
soltar botín
Como existencia central en el juego, los objetos arrojados siempre tienen un nombre, por lo que tomó mucho esfuerzo nombrarlos y decidimos llamarlos * DROP LOOT *, luego el módulo principal que definimos se llama DROP_LOOT.
function DROP_LOOT () {
this.speed = ''; // drop运动总时长,animate缓动
this.x = ''; // drop起始x坐标
this.y = ''; // drop起始y坐标
}
复制代码Cada gota requiere un conjunto aleatorio de datos, la creación inicial y easingel enlace de la animación de la gota a través de la aceleración.
// 基础范围随机数生成
DROP_LOOT.prototype.randomNum = function (min, max) {
return parseInt(Math.random() * (max - min + 1) + min, 10)
}
// 初始化基础数据
DROP_LOOT.prototype.basic = function () {
this.x = parseInt(this.randomNum(0, RX));
this.y = parseInt(this.randomNum(70, 300));
this.speed = this.randomNum(3000, 5000);
}
// 随机生成当前掉落物是粽子/小怪兽/盲盒香囊
DROP_LOOT.prototype.theme = function (num) {
var themeNum = num || parseInt(this.randomNum(0, 2));
switch (themeNum) {
case 0:
return 'drop01';
break;
case 1:
return 'drop02';
break;
case 2:
return 'drop03';
break;
}
}
// 创建掉落物DOM，并插入到HTML容器内
DROP_LOOT.prototype.bindDom = function () {
var lock = 0;
var luck = this.theme();
if (luck === 'drop01') {
lock = 1;
} else if (luck === 'drop02') {
lock = 0;
} else {
lock = this.randomNum(2, 20)
}
var pkDom = $('<div class="drop ' + luck + '" data-luck="' + luck + '" data-rom=' + lock + '></div>');
pkDom.css({ 'left': this.x + 'px', 'top': '-' + this.y + 'px' });
pkDom.animate({ top: RY }, this.speed, this.eases(), function () {
$(this).remove();
});
var _that = this;
pkDom.on('click touchstart', function (e) {
// e.preventDefault();
var curLuck = $(this).attr('data-luck');
var curRom = $(this).attr('data-rom');
var num = parseInt(curRom) % 3;
var action = parseInt(curRom) % 2 === 0 ? 'increase' : 'reduce';
if (curLuck === 'drop01') {
num = 1;
action = 'increase';
} else if (curLuck === 'drop02') {
num = 1;
action = 'reduce';
}
_that.grade(num, action);
var pageX=$(this).offset().left;
var pageY=$(this).offset().top;
_that.fraction(pageX, pageY, num, action);
if (num) {
if (action === 'reduce') {
$(this).addClass('boom');
} else {
$(this).addClass('cool');
}
}
setTimeout(function () {
$(this).remove();
}.bind(this), 200)
return false;
});
$('.container').append(pkDom);
}
复制代码haga clic en la lógica
Notación de clic de ratón y dedo compatible con jQuery.
pkDom.on('click touchstart', function (e) {
// ...一些逻辑
// 获取点击点的坐标
var pageX=$(this).offset().left;
var pageY=$(this).offset().top;
return false;
});
复制代码Agrega una animación de señal de aumento/disminución de crédito simple cuando se golpea.
// 得分效果动画
DROP_LOOT.prototype.fraction = function (pageX, pageY, num, action) {
var fractionText = '';
if (!num || num === 0) {
fractionText = '空盒子'
}
fractionText = action === 'increase' ? '+' + num : '-' + num;
var fractionDom = $('<div class="fraction">' + fractionText + '</div>');
fractionDom.css({ 'left': pageX + 'px', 'top': pageY + 'px', 'opacity': 1 });
fractionDom.animate({ top: '-300px', opacity: 0 }, 3000, 'swing', function () {
$(this).remove();
});
$('.container').append(fractionDom);
}
复制代码Cada vez que golpea un punto, si hay un cambio en los puntos, puede controlar los objetos que caen para mostrar diferentes imágenes de fondo agregando diferentes clases.
if (num) {
if (action === 'reduce') {
$(this).addClass('boom');
} else {
$(this).addClass('cool');
}
}
复制代码escribir al final
No he usado jQuery durante mucho tiempo, y todavía es muy poderoso para resolver problemas simples con un transbordador.
La idea original de "Dig a Zongzi" es dibujar una animación del aumento y disminución de la longitud de un bote de dragón debajo mientras los puntos cambian. Después de pensarlo, ¿es esto un poco de mal gusto en un juego de tiempo limitado? (La carga de trabajo principal no es pequeña) Emm, mostré un bote de dragón directamente después de que terminó el juego, deseando a todos buena suerte y buena salud ~
Las cajas ciegas son peligrosas y deben manipularse con precaución.