我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛。
代码块
废话往后放，先上体验链接：zongzi.lovetime.top/
再放代码：
前言
端(zong)午(zi)节，还是回忆中更有味。
不像现在，对于端午节，只剩下“三天假期，不用调休”的期盼。
记忆中，会提前去割一把当时路边随处可见的艾草，端午当天挂艾草，用艾草煮一锅鸡蛋、鸭蛋、大蒜什么的，配上粽子和油条，早餐吃出了晚餐的丰盛感。
现在呢，只余一句“端午安康”，一切从简。
对于很多人来说，伴随着”零糖文化“的发展，粽子也不再是端午的标配。
《掘个粽子》希望能让端午&粽子这对CP持久亿点点~
游戏背景
《掘个粽子》是一个很简单的点击游戏，目前简单测试使用手指、或者鼠标点击都OK。
一句话概述：在限定时间内，点击掉落物得分。
两句话概述：在规定的时间内，点击随机的掉落物。点击粽子得分加1，点击小怪兽得分减1，点击盲盒香囊得分随机加减。
粽子
辟邪神器。 端午出现的地方，一定要有粽子的存在。吃下粽子，可以避邪驱瘟，福泰安康，是增加积分的首选。
小怪兽
小怪兽原本在丛林中生活的快乐自在，瘟神降临时，不幸遭到邪祟附体。一定要小心避开，点中小怪兽会消减你的积分。
盲盒香囊
香囊原有驱祟辟秽之功效，点中有几率爆出大积分。但由于香囊受到了疑似名为”雾霾“的污染，使它附带了”盲盒“的特性，也就是点中香囊会有几率消减未知积分。
总之，点中盲盒香囊有几率增加/消减随机积分，在冒险和运气buff加持下总会让积分发生大变化。
技术选型
码上掘金 上线也有段时间了，搞起来！为了最简单的使用，选择了好久没用的jQuery来加持。
考虑着完善基本逻辑了，规划用Vue/PixiJS再来实现一遍。Emm，当然，你要懂得规划是什么意思啦。
核心笔记
枯燥的代码总是让人着魔，那就简单说明一下掉落物和点击逻辑吧，感兴趣的话，在上方码上掘金有完整的代码。
掉落战利品
作为游戏中的核心存在，掉落物总归要有个名字哒，于是起名废费了九牛二虎之力决定叫*掉落战利品（DROP LOOT） *，那我们定义的主模块就叫做DROP_LOOT啦。
function DROP_LOOT () {
this.speed = ''; // drop运动总时长,animate缓动
this.x = ''; // drop起始x坐标
this.y = ''; // drop起始y坐标
}
复制代码每个掉落物都要随机一组数据，进行初始创建，并通过缓动easing绑定掉落动画。
// 基础范围随机数生成
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);
}
复制代码点击逻辑
jQuery的兼容鼠标和手指的点击写法。
pkDom.on('click touchstart', function (e) {
// ...一些逻辑
// 获取点击点的坐标
var pageX=$(this).offset().left;
var pageY=$(this).offset().top;
return false;
});
复制代码点中时，添加一个简单的积分增加/消减提示动画。
// 得分效果动画
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);
}
复制代码每次点中时，如果有积分的变化，通过附加不同的class来控制掉落物展示不同的背景图片。
if (num) {
if (action === 'reduce') {
$(this).addClass('boom');
} else {
$(this).addClass('cool');
}
}
复制代码写在最后
好久没用jQuery了，一把梭解决简单的问题还是这么厉害。
《掘个粽子》最初的创意呢，还想在积分变化的同时，在下面绘制一艘龙舟的长度增减动画。后来一想，这在限时游戏内，是不是有点鸡肋？（主要工作量也不小啦）Emm，因此就在游戏结束后直接展示了一艘龙舟，祝福小伙伴们福泰安康~
盲盒有风险，接触需谨慎。