原生js实现连连看消消乐游戏代码-html代码-BFW代码库

原生js实现连连看消消乐游戏代码

代码语言：html

所属分类：游戏

代码描述：原生js实现连连看消消乐游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        *{box-sizing:border-box;}body{display:flex;align-items:center;flex-direction:column;}.main{display:flex;flex-wrap:wrap;margin-top:30px;}.cols{display:flex;flex-direction:column-reverse;}.item{display:flex;position:relative;user-select:none;border-radius:100%;overflow:hidden;transition:transform .2s,height .2s;border:1px solid;}.img{background:no-repeat center center;background-size:100%;pointer-events:none;flex:1}.bg{position:absolute;background-color:rgba(0,0,0,0.5);width:20px;height:20px;left:50%;top:50%;transform:translate(-50%,-50%);display:none;}.small{transform:scale(0.8);}.small-ok{transform:scale(0);}.small-ok-two{height:0 !important;}.add-hide{transform:scale(0);}.active .bg{}.active{opacity:0.5;}
    </style>
</head>

<body>
   
    <div>当前得分：<label id="score">0</label></div>
    <div class="main"></div>
    <div>单击拖动三个相邻相似的水果实现消除</div>

<script>
    const main =document.querySelector('.main')
    const score =document.querySelector('#score')
    const simpleData =Array.from(new Array(5)).map((v,i) =>{return {id:i,url:`//repo.bfw.wiki/bfwrepo/images/gamexiao/${i+1}.png`
    }
    })
    const cols =9
    const rows =5
    const size =50
    const clearCount =3
    const group =200
    const renderData =Array.from(new Array(group))
    .map(v =>simpleData).flat().sort(v =>Math.random() - 0.5)
    const renderHtml =[]
    const getItem =(item,isElement) =>{const html =`<div class="item ${isElement ? 'add-hide' : ''}" data-v="${item.id}" style="width:${size}px;height:${size}px;"><div class="img" style="background-image:url(${item.url});"></div><div class="bg"></div></div>`
    if (isElement) {const el =document.createElement('div')
    el.innerHTML =html
    const itemEl =el.children[0]
    setTimeout(() =>{itemEl.classList.remove('add-hide')
    })
    bindEvent(itemEl)
    return itemEl
    }
    return html
    }
    for(let i=0;i<cols;i++) {const rowsHtml =[`<div class="cols" data-col="${i}">`]
    for(let j=0;j<rows;j++) {const item =rend.........完整代码请登录后点击上方下载按钮下载查看