--- theme: qklhk-chocolate --- 在正文的第一句加入“我正在参加「码上掘金挑战赛」详情请看：[码上掘金挑战赛来了！](https://juejin.cn/post/7139728821862793223 "https://juejin.cn/post/7139728821862793223")” **相信大家都已经玩过羊了个羊了，不知道你们看了几个广告呢？有没有成功为你的地区上羊？本文，将基于掘金的物料，实现一个羊了个羊。欢迎试玩。** ### 掘金物料掘金物料来源于商城，自行复制地址即可 ### 游戏逻辑与羊了个羊逻辑一致，不再赘述 ### 游戏实现 - 盛放元素的容器box，临时存储的容器temp，多余元素的容器source与source1，结果元素result ```js

游戏结束，别灰心，你能行的！

重新开始

``` - 样式基于定位和flex布局 ```js ``` ### 生成元素的逻辑 - 首先会有一个维护好的图片的数组imgSrc ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ddcecb493e524dc6846f217c9eb405c2~tplv-k3u1fbpfcp-watermark.image?) - 生成12*14的随机乱序待消除元素 ```js // 随机乱序 function randomArr (array) { const arr = [].concat(array) for (let i = arr.length - 1; i >= 0; i--) { const inx = Math.floor(Math.random() * i + 1) const next = arr[inx] arr[inx] = arr[i] arr[i] = next } return arr } // 生成 12*14个待消除元素 for (let i =0;i<12;i++) { imgSrc.map((v,m)=>{ console.log(m) source.push({src: v, inx: m}) }) } ``` - 分为5层，进行排列，其中层数从5至0递减，然后内部双层循环进行5*层数递减页面布局，元素依次由`source.slice(0)`来得到，维护图片索引 `inx` ```js for(let k =5;k>0;k--) { for (let i=0;i<5;i++) { for (let j=0;j') div.addClass('item') div.addClass(`${i}-${j}-${k}`) div.attr('x', i) div.attr('y', j) div.attr('z', k) div.css('position', 'absolute') let img = source.splice(0,1) div.css('left', 120*j-Math.random()*10*k+'px') div.css('top', 120*i-Math.random()*10*k+'px') div.attr('inx', img[0].inx) div.css('backgroundImage', `url(${img[0].src})`) .... } } } ``` - 判断是否被覆盖，被覆盖时添加shadow类 ```js $('.item').each((i,v) => { let x = $(v).attr('x') let y = $(v).attr('y') let z = $(v).attr('z') let ele = $(`.${x}-${y}-${z-1}`) let ele1 = $(`.${x+1}-${y+1}-${z-1}`) if (ele.length || ele1.length) { $(v).addClass('shadow') } }) ``` - 添加点击事件，通过detach方式向temp中转移 - 判断是否包含shadow类 - 判断是否存在，维护temp对象 - 删除后更新shadow覆盖状态 - 判断是否大于7触发结束条件 ```js div.click(function () { if(!$(this).hasClass('shadow')) { if (temp[$(this).attr('inx')]) { temp[$(this).attr('inx')] += 1 } else { temp[$(this).attr('inx')] = 1 } let e = $(this).detach() e.css('position', 'unset') $('#temp').append(e) $('.item').each((i,v) => { $(v).removeClass('shadow') let x = $(v).attr('x') let y = $(v).attr('y') let z = $(v).attr('z') let ele = $(`.${x}-${y}-${z-1}`) let ele1 = $(`.${x+1}-${y+1}-${z-1}`) if (ele.length || ele1.length) { $(v).addClass('shadow') } }) if (temp[$(this).attr('inx')]===3) { $(`#temp div[inx=${$(this).attr('inx')}]`).remove() temp[$(this).attr('inx')] = 0 } let num = 0 for (let i in temp) { num+=temp[i] } if (num>=7) { $('.item').off('click') $('.result').fadeIn() } } }) ``` - 将剩余的待消除元素均分至source和source1 ```js let len = Math.ceil(source.length /2) source.forEach((v,i) => { let div = $('

') div.addClass('item') div.attr('inx', v.inx) div.css('backgroundImage', `url(${v.src})`) div.css('position', 'absolute') div.css('top', 0) if (i>len) { div.css('right', `${5*(i-len)}px`) $('#source1').append(div) } else { div.css('left', `${5*i}px`) $('#source').append(div) } ... ``` - 同样添加点击事件处理 - 初始化处理清空容器的相关逻辑 ```js $('#box').empty() $('#temp').empty() $('#source').empty() $('#source1').empty() $('.result').fadeOut() ``` [代码片段](https://code.juejin.cn/pen/7143434850467807268)