故事是这样开始的
很久很久以前，我关注的一个游戏博主，发了一个游戏视频。然后我就见识到了什么叫，「游戏叫你一步噶，你绝对走不到第二步」。
这个带那么点整蛊的性质的脑洞游戏，瞬间引起了我浓厚的兴趣。需要玩家克服大脑常规套路的惯性，那岂不是游戏处处是惊喜。
不过，游戏的本质还是在于趣味性，玩家掌握了规律之后，还是可以通关的。
等等，有没有无法通关的游戏？
这不就来了么，被「愚弄」智商的愉乐游戏，不设计一个怪浪费的。
通关看心情
所以通关条件是什么？看作者心情吧。
试玩一下
我玩之前，先把脑子里的设计的规则都删除之后，才开始游戏。不然，玩着没那么有趣。
「愉」乐还是「愚」乐
「禁止向上走」小游戏，一起来设计其中的千层套路。
突然发现，这部分不仅是设计，还是解密。
正向思维，作者在复原游戏设计。
逆向思维，作者在拆解游戏攻略。
打不开的开始按钮
心急玩不了这游戏
情景再现
玩家想玩一下游戏，于是点击「开始游戏」按钮，结果却发现按钮偏离了当前位置，跑到了别的地方，于是就上演了一场「你追我赶」的戏码。
当按钮「逃跑」3次之后，回到原处，按钮文字变成「点击5次开始」。
实际玩家点击了3次，便进入了游戏关卡1。
惊不惊喜？意不意外？开不开心？
两重设计
开始按钮是有两重设计的：
第一重：前3次点击，按钮会发生「跑动」的现象，到第3次点击，按钮归位，文字改变，并进入第二重。
第二重：按钮名字为「点击5次开始」，实际点击3次便能进入关卡页。
能帮你到这
「开始」按钮的两重设计，实现起来也是比较简单的。
1、首先定义一个数组 movePosition，存放按钮在页面上移动的不同位置。
2、然后定义两个变量
moveNum：移动次数，记录当前按钮移动的具体次数。每次点击数值增加1，当次它的数值到临界值的时候，触发第二重设计。
conClickNum： 连续点击次数。每次点击数值增加1，当它的数值达到临界值时，触发进入关卡页。
3、将上述提到的变量都存放在一个对象 beginObj 中，方便管理。
/** @name 开始按钮具体数据对象 */
var beginObj = {
text: ['开始游戏', '点击5次开始'], // 按钮展示文字
moveNum: 0, // 移动次数
conClickNum: 0, // 连续点击次数
movePosition: [
{ x: '40%', y: '-200%' },
{ x: '0', y: '-350%' },
{ x: '-40%', y: '-110%' },
],
};4、监听按钮点击事件，进行逻辑处理
var homeBeginE = document.getElementById('homeBeginE');
// 开始按钮-点击事件
homeBeginE.onclick = function () {
// 如果已经打开过，不重复搞怪
if (jjxxzgameUserInfo.beginTime) {
getGateBoxShow();
} else {
if (beginObj.moveNum > 4) {
// 按钮归位，进入连续点击的设计
setBeginClickData();
} else {
// 设置按钮移动位置
setBeginmovePosition();
}
}
};过不去的下一关
论好玩，还得是无限流
情景再现
当玩家想趁热打铁的进入下一关的时候，但是惊奇的发现，这一关和上一关的展示名是一样的。
是时空倒流了，还是我穿越回去了？
真实的当前关卡
如果想知晓真实的当前关卡，需要点击一下关卡名，这个时候就会更换成真实的关卡名。
还能帮你到这
看似无限流，其实是通过获取随机数实现的效果。
1、随机值的范围，最大值是当前关卡最高数字。得到的结果向上取整，就能得到想要的随机值。
/**
* 关卡-获取随机展示关卡值
*/
function getGateRandomValue() {
let randomNum = Math.random() * gateObj.total;
return Math.ceil(randomNum);
}2、虽然展示的是随机关卡名，但是实际进入的确是真实的下一关，所以内容回显还是下一关的。
/**
* 关卡-设置关卡名 每次进入下一步的时候
*/
function setGateTitleData(gateCurrVal) {
const gateVal = getGateRandomValue();
gateNumE.innerHTML = `关卡 ${gateVal}`;
const gateCurrIndex = gateCurrVal - 1;
gateTitleE.innerHTML = gateObj.list[gateCurrIndex].title;
}帮不上的帮助按钮
灵魂拷问，事不过三
情景再现
初玩游戏的玩家，多少会有感到困惑的地方。于是，玩家就会找游戏规则，这个时候看到页面上的帮助按钮，下意识就会点击它。
「大聪明」游戏GM不会很爽快的一次就打开帮助页，会一直给提示，等到第三次时，此时的玩家耐心到了临界点，也会导致两种结果：
- 直接点击取消，却发现进入了帮助页。
- 又耐着性子点了一遍确定，终于进入了帮助页。
「愚」乐要有度
虽然号称耐心挑战，但是也不能让玩家完成失去耐心，这样会导致玩家的流失。
一个人回答多少次相似的问题会产生厌倦呢？
我观察过我自己和身边人，一般大家的极限是三次。三次之后可能就直接放弃回答了。
所以帮助按钮上，我设计了看似无限循环的相似问题，但是「愚」乐次数极限是三次，第三次之后会正式打开帮助页面。
瞧瞧谁的眼神这么有智慧，原来是我自己。
只能帮你到这
弹层呢，还是哪个弹层，每次的内容就各不相同了。
1、先来设置一个数组，存储每次展示的内容的具体文字。
2、再来设置点击次数的变量，记录当前按钮点击的具体次数。每次点击数值增加1，当次它的数值到临界值的时候，触发进入帮助页。
3、将上述提到的变量都存放在一个对象 helpObj 中，方便管理。
/** @name 开始信息对象 */
var helpObj = {
text: ['聪明的玩家，您真的需要小助手的帮助吗？', '聪明的玩家，您真的需要小助手的帮助吗？', '智慧的玩家，无论您做出何种选择，小助手都祝您游戏愉快，确定打开帮助吗？'], // 提示文字
clickNum: 0, // 点击次数
};4、监听帮助按钮点击事件，进行逻辑处理：
- 当已经经历过三次提问进入了帮助页，则再次点击不重复，直接进入帮助页。
- 当是第一次进行点击帮助操作，记录点击次数，并打开提问弹层。
var homeHelpE = document.getElementById('homeHelp');
// 帮助按钮-点击事件
homeHelpE.onclick = function () {
// 如果已经打开过，不重复搞怪
if (jjxxzgameUserInfo.helpTime) {
gethelpShow();
} else {
modalE.style.display = 'block';
modalTextE.innerHTML = helpObj.text[helpObj.clickNum];
helpObj.clickNum += 1;
}
};5、三次提问弹层，两种处理设计：
- 前两次无论是确定按钮还是取消按钮都会直接关闭弹层。
- 第三次打开后，无论是确定还是取消，都会进入帮助页。
// 帮助弹层-确定
modalBtnConfirmE.onclick = function () {
closeModal();
// 帮助的第三个弹窗 点击确定会进去帮助页
if (helpObj.clickNum >= 3) {
gethelpShow();
}
};
// 帮助弹层-取消
modalBtnCancelE.onclick = function () {
closeModal();
// 帮助的第三个弹窗 点击取消也会进去帮助页
if (helpObj.clickNum >= 3) {
gethelpShow();
}
};设计「小心思」
棋盘背景
之所以设置类似「棋盘」的背景样式，是因为玩这个小游戏，就像是下棋，走对了可以将游戏一军，走岔了会被游戏将一军。
类似的样式我之前还实现过马赛克心形，都是借助 box-shadow 绘制而成，诀窍在于X和Y的偏移，只要设置合理，就能得到想要的展示效果。
#root::before {
content: '';
width: 70px;
height: 75px;
box-shadow: 70px 0px #254f88, 145px 0px #514b9a, 220px 0px #254f88, 295px 0px #514b9a, 370px 0px #254f88, 445px 0px #514b9a, 70px 80px #514b9a, 145px 80px #254f88, 220px 80px #514b9a, 295px 80px #254f88, 370px 80px #514b9a, 445px 80px #254f88, /*第一组*/ 70px 160px #254f88, 145px 160px #514b9a, 220px 160px #254f88, 295px 160px #514b9a, 370px 160px #254f88, 445px 160px #514b9a, 70px 240px #514b9a, 145px 240px #254f88, 220px 240px #514b9a, 295px 240px #254f88, 370px 240px #514b9a, 445px 240px #254f88, /*第二组*/ 70px 320px #254f88, 145px 320px #514b9a, 220px 320px #254f88, 295px 320px #514b9a, 370px 320px #254f88, 445px 320px #514b9a, 70px 400px #514b9a, 145px 400px #254f88, 220px 400px #514b9a, 295px 400px #254f88, 370px 400px #514b9a, 445px 400px #254f88, /*第三组*/ 70px 480px #254f88, 145px 480px #514b9a, 220px 480px #254f88, 295px 480px #514b9a, 370px 480px #254f88, 445px 480px #514b9a, 70px 560px #514b9a, 145px 560px #254f88, 220px 560px #514b9a, 295px 560px #254f88,
370px 560px #514b9a, 445px 560px #254f88, /*第四组*/ 70px 640px #254f88, 145px 640px #514b9a, 220px 640px #254f88, 295px 640px #514b9a, 370px 640px #254f88, 445px 640px #514b9a, 70px 720px #514b9a, 145px 720px #254f88, 220px 720px #514b9a, 295px 720px #254f88, 370px 720px #514b9a, 445px 720px #254f88; /*第五组*/
position: absolute;
left: -95px;
}变色龙按钮
我本来想仿照掘金的 Bug Fix 的按钮，做一个上下移动的动态按钮。但是那个立体感，我设计的不够好看。
后来想到蜡笔小新一个喝饮料变色的表情包很好玩，由此引发了灵感。
按钮变色用到的是 filter 滤镜，filter 拥有多种滤镜效果，其中有一种叫做色相旋转。
hue-rotate(-90deg)：色相旋转可以设置顺时针角度，也可以设置逆时针角度。它的作用是按照标准色轮旋转元素的整体色相。
如下是一个标准色轮：
而颜色不停变化的动效，则是因为配合加入了动画：
.home-btn {
width: 200px;
height: 60px;
position: absolute;
left: 50%;
top: 300px;
margin-left: -100px;
box-shadow: 0 10px 25px #fc4d56, 0px -10px 25px #ffde2e, inset 0 -5px 10px #fc4d56, inset 0 5px 10px #ffde2e;
}
.home-btn-begin {
animation: homeBtnBegin 2s linear infinite;
}
@keyframes homeBtnBegin {
100% {
filter: hue-rotate(360deg);
}
}关卡1：绿灯才能行
第一个关卡，我们先来看都有哪些元素。提示写的「不要向上走」，确实，我们的游戏也叫这个。那往下走呢？
我们来尝试往下走，结果噶了。向上也是这个结果。
等等，上面的圈可以移动，我们来试一下，果然，将上面的黄圈移动到下面的红圈上，出现了一个绿圈，这个时候，再移动到绿圈，就通关了。
所以关卡1的通关秘诀在于：
先将上面的黄圈移动到下面的红圈上，合成一个绿圈。
然后再将角色移动到绿圈，就可以通关了。
关卡2：选大（随时注意游戏名字哦~）
关卡2，每一组有两个数字，这关的通关诀窍在于：
1、当两个数字不同时，选择其中数值大的。
2、当两个数字相同时，选择下面的数字。
当数字是3和2的时候，
选择3
总结
这算是我第一个真正意义上的通关游戏。之前的小游戏，有趣味性，缺少些完整性。
这次，无论是配色、交互、关卡设置、通关提示、帮助信息，都花费了我许多心思。尽管它只有两个关卡，但是整个开发的过程，从无到有，还挺耗心神的，不过实现过程充满了乐趣。
大致总结一下这个小游戏的几个巧妙的设计：
1、嵌套反套路，有趣但是有度。游戏的最终目的还是留住玩家，所以即便是脑洞游戏，也要时刻保持这个观念，不能一味的设计多层反转。玩，才是游戏的奥义。
2、关卡设计虽然不是完全的原创，但是加入了自己的脑洞。比如第一关，我称之为红绿灯关卡，红灯停，绿灯行，遇到黄灯等一等。而第二个关，我特意设置了相同的数字，而通过条件就在游戏名字里，「禁止向上走」，所以选择下方的就成功了。
3、细节到位。标题处的向下箭头，随时提醒玩家，大部分时候选择向下是正确的。以及当玩家第一次体验了按钮的玄机之后，再次操作的时候，跳过按钮套路，让玩家不会产生抗拒心理。
以上就是本次分享的内容。如果觉得有帮助，欢迎留言讨论、点赞 、收藏，持续产出技术分享。
我是 叶一一，非职业「传道授业解惑」的技术博主。「趣学前端」、「CSS畅想」系列作者。
华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
欢迎技术或非技术问题的讨论。
标签：Web,游戏,点击,小游戏,514b9a,玩转,按钮,关卡,254f88 From： https://blog.51cto.com/u_15838863/8777149