复刻一个羊了个羊掘金商城版

游戏逻辑

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

游戏实现

• 盛放元素的容器box，临时存储的容器temp，多余元素的容器source与source1，结果元素result

<div id="box"></div>
  <div id="temp"></div>
  <div id="source"></div>
  <div id="source1"></div>
  <div class="result">
    <div>游戏结束，别灰心，你能行的！</div>
    <div class="restart">重新开始</div>
  </div>

• 样式基于定位和flex布局

<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-image: url('https://pic.qy566.com/snake/bg.jpeg');
    background-size: cover;
  }
  #box{
    width: 600px;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  #temp{
    width: 840px;
    height: 120px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.92sucai.com%2Fimage%2F20180626%2F1529979993472449.jpg&refer=http%3A%2F%2Fup.92sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665795593&t=0c74935a1fa75d5861903e8249c15bbb');
    background-size: contain;
    border-radius: 16px;
    display: flex;
  }
  .item{
    width: 120px;
    height: 120px;
    border-radius: 16px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #333;
    cursor: pointer;
  }
  .shadow{
    box-shadow: 0 0 50px 10px #333 inset;
  }
  #source{
    width: 260px;
    height: 120px;
    position: absolute;
    top: 0;
    left: 0;
  }
  #source1{
    width: 260px;
    height: 120px;
    position: absolute;
    top: 0;
    right: 0;
  }
  .result{
    width: 200px;
    height: 120px;
    border: 4px dashed cyan;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    display: none;
  }
  .restart{
    width: 120px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #333;
    text-align: center;
    cursor: pointer;
    margin: auto;
  }
</style>

生成元素的逻辑

• 首先会有一个维护好的图片的数组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<k;j++) {
            let div = $('<div>')
            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类

$('.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>')
        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()