游戏玩法
游戏主要考验玩家的空间感和记忆能力&＃xff0c;玩家需要通过开局的3秒内尽可能多的记忆两个空间内相同元素的位置&＃xff0c;3秒后将会翻牌把图案盖住&＃xff0c;玩家需要点击卡牌来翻转牌面&＃xff0c;两张相同图案的卡牌即可保留&＃xff0c;游戏计时将在卡牌翻转之后开始&＃xff0c;完全翻转所有卡牌则计时结束&＃xff0c;我打赌没人能在60秒内通关这个游戏
游戏彩蛋
假如有好事者将鼠标移动到我们的标题看谁翻得快的时候&＃xff0c;会发现这是一个复古魂斗罗标题样式&＃xff0c;具体实现依赖的是background-image里的repeating-linear-gradient与-webkit-background-clip&＃xff0c;我们利用伪元素::before和::after &＃xff0c;来实现复古的重叠文字效果。
- repeating-linear-gradient 重复径向渐变
- -webkit-background-clip 以盒子内的文字作为裁剪区域向外裁剪&＃xff0c;文字之外的区域都将被裁剪掉
看谁翻得快
.title {width: 380px;position: absolute;left: 0;right: 0;top: 0;margin: auto;display: block;color: #1e80ff;font-size: 64px;letter-spacing: 8px;cursor: pointer;
}.title::before {content: "看谁翻得快";position: absolute;color: transparent;background-image: repeating-linear-gradient(45deg,transparent 0,transparent 2px,white 2px,white 4px);-webkit-background-clip: text;top: 0px;left: 0;z-index: -1;transition: 1s;}.title::after {content: "看谁翻得快";position: absolute;color: transparent;background-image: repeating-linear-gradient(135deg,transparent 0,transparent 2px,white 2px,white 4px);-webkit-background-clip: text;top: 0px;left: 0px;transition: 1s;}.title:hover:before {top: 10px;left: 10px;}.title:hover:after {top: -10px;left: -10px;}
核心实现
- 容器 容器是由720x450的盒子拆成的两个350x450的小盒子构成&＃xff0c;大盒子通过flex布局水平垂直居中&＃xff0c;小盒子也是通过flex布局实现水平拆分。
#box{width: 720px;height: 450px;display: flex;justify-content: space-between;align-items: center;}.left,.right{width: 350px;height: 450px;background: #fff;border-radius: 8px;overflow: hidden;display: flex;justify-content: space-around;align-items: center;flex-wrap: wrap;transform-style: preserve-3d;}
- 元素&＃xff0c;元素样式是100x100的小卡片&＃xff0c;背景图随机生成&＃xff0c;背景图来源于掘金商城&＃xff0c;随机生成算法还是通过标记法去重&＃xff0c;图片一共12张&＃xff0c;所以我们需要生成不重复的随机顺序的12个数字&＃xff0c;从0开始。将生成的数字以 自定义属性
key记录在对应的dom上&＃xff0c; 牌面的翻转覆盖效果通过transition配合transform来实现&＃xff0c;不管是添加还是移除&＃xff0c;都会应用过渡效果&＃xff0c;所以看起来像是在翻转一样
// 样式
.left div, .right div{width: 100px;height: 100px;border-radius: 8px;cursor: pointer;box-shadow: inset 0 0 15px 3px rgb(12, 133, 215);background-position: center;background-size: contain;background-repeat: no-repeat;transform: rotateY(180deg);transition: all ease .5s;}#box .shine{transform: rotateZ(360deg) rotateY(360deg);}// 随机算法// 参数map是标记对象&＃xff0c;from是为了将dom正确append&＃xff0c; imgSrc比较多&＃xff0c;不在这里罗列了function randomKey (map, from) {let ket &＃61; nulldo {key &＃61; Math.floor(Math.random()*len)} while (map[key])let div &＃61; $(&＃39;&＃39;)div.addClass(&＃39;item&＃39;)div.addClass(&＃39;shine&＃39;)div.attr(&＃39;key&＃39;, key)div.css(&＃39;background-image&＃39;, &＃96;url(${imgSrc[key]})&＃96;)map[key] &＃61; div$(&＃96;.${from}&＃96;).append(div)}for(let i &＃61;0;i
- 倒计时3s翻转卡牌 &＃xff0c;这里采用了定时器的方法&＃xff0c;上面讲过&＃xff0c;添加移除
transfrom都会响应过渡&＃xff0c;那么我们只需要在倒计时结束时统一为卡牌更换背景图即可
let t &＃61;setTimeout(function () {for(let i in left_Map) {left_Map[i].removeClass(&＃39;shine&＃39;)left_Map[i].css(&＃39;background-image&＃39;, &＃96;url(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4ce25d48b8405cbf5444b6195928d4~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp)&＃96;)}for(let i in right_Map) {right_Map[i].removeClass(&＃39;shine&＃39;)right_Map[i].css(&＃39;background-image&＃39;, &＃96;url(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4ce25d48b8405cbf5444b6195928d4~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp)&＃96;)}},3000)
- 添加点击事件&＃xff0c;处理翻牌相同和翻牌不同的情况&＃xff0c; 这里&＃xff0c;我们需要一个缓存数组cache&＃xff0c;将点击获得的属性key缓存在cache里&＃xff0c;然后进行判断即可&＃xff0c;这里我们只需要判断&＃xff0c;cache有长度和cache没长度的情况&＃xff0c;有长度则需要进行比较&＃xff0c;没长度直接将key缓存在cache内即可&＃xff0c;相关注释都在代码里了
$(&＃39;.item&＃39;).click(function () {
// 这里判断的是 假如已经翻转了牌面&＃xff0c;就不再响应点击事件if ($(this).hasClass(&＃39;shine&＃39;)) {return false}// 获取key&＃xff0c;将牌面翻转并设置key对应的背景图let key &＃61; Number($(this).attr(&＃39;key&＃39;))$(this).addClass(&＃39;shine&＃39;)$(this).css(&＃39;background-image&＃39;, &＃96;url(${imgSrc[key]})&＃96;)// 判断缓存数组长度if (cache.length &＃61;&＃61;&＃61; 1) {// 判断当前点击Key与缓存的key是否一致if (cache.find(v &＃61;> v&＃61;&＃61;&＃61;key) ![]()
结语 & 码上掘金地址
笔者多次尝试&＃xff0c;哪怕作弊&＃xff0c;时间也在110秒左右&＃xff0c;真的很考验记忆力
最后
整理了75个JS高频面试题&＃xff0c;并给出了答案和解析&＃xff0c;基本上可以保证你能应付面试官关于JS的提问。
有需要的小伙伴&＃xff0c;可以点击下方卡片领取&＃xff0c;无偿分享
京公网安备 11010802041100号