游戏逻辑

与羊了个羊逻辑一致，复刻不再赘述

游戏实现

• 盛放元素的个羊个羊容器box，临时存储的掘金容器temp，多余元素的商城容器source与source1，结果元素result

游戏结束，复刻别灰心，个羊个羊你能行的掘金！    重新开始  

• 样式基于定位和flex布局

生成元素的商城逻辑

• 首先会有一个维护好的图片的数组imgSrc

• 生成12*14的随机乱序待消除元素

// 随机乱序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

for(let k =5;k>0;k--) {         for (let i=0;i<5;i++) {           for (let j=0;j

• 判断是否被覆盖，被覆盖时添加shadow类

$('.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触发结束条件

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

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)        }                ...

• 同样添加点击事件处理

• 初始化处理清空容器的相关逻辑

$('#box').empty()      $('#temp').empty()      $('#source').empty()      $('#source1').empty()      $('.result').fadeOut()