js+css实现经典《羊了个羊》消消乐小游戏代码-html代码-BFW代码库

js+css实现经典《羊了个羊》消消乐小游戏代码

代码语言：html

所属分类：游戏

代码描述：js+css实现经典《羊了个羊》消消乐小游戏代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>羊羊消消乐</title>
<style>
*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}
html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:
        "Microsoft YaHei",
        "PingFang SC",
        Arial,
        sans-serif;
}
body{
    background:
        radial-gradient(circle at 50% 20%,#fffdf0 0%,#dff6ff 42%,#a9d9ee 100%);
    color:#55341d;
}
button{
    font-family:inherit;
    border:0;
    cursor:pointer;
}

#app{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

/* =========================
   顶部
========================= */
.topbar{
    position:relative;
    z-index:50;
    height:76px;
    flex:0 0 76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}
.logo-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
    box-shadow:
        0 5px 0 rgba(152,106,50,.18),
        0 8px 24px rgba(70,130,150,.15);
    font-size:32px;
}
.logo-title{
    font-weight:900;
    font-size:23px;
    color:#65401e;
    letter-spacing:1px;
    text-shadow:0 2px 0 #fff;
}
.logo-sub{
    font-size:11px;
    color:#986f48;
    margin-top:2px;
}

.stats{
    display:flex;
    gap:10px;
}
.stat{
    min-width:72px;
    padding:8px 12px;
    border-radius:16px;
    background:rgba(255,255,255,.78);
    border:2px solid rgba(255,255,255,.85);
    box-shadow:0 5px 16px rgba(68,118,145,.13);
    text-align:center;
}
.stat-label{
    font-size:11px;
    color:#9d836a;
}
.stat-value{
    font-size:18px;
    font-weight:900;
    color:#694325;
}

/* =========================
   游戏区域
========================= */
.game-wrap{
    position:relative;
    flex:1;
    min-height:0;
    display:flex;
    justify-content:center;
    overflow:hidden;
}

.game-board{
    position:relative;
    width:min(94vw,650px);
    height:min(72vh,620px);
    min-height:430px;
    border-radius:30px;
    background:
        linear-gradient(
            rgba(255,255,255,.26),
            rgba(255,255,255,.10)
        );
}

/* 草地 */
.game-board::before{
    content:"";
    position:absolute;
    inset:5%;
    border-radius:35px;
    background:
        radial-gradient(circle at 25% 25%,rgba(255,255,255,.55) 0 3px,transparent 4px),
        radial-gradient(circle at 80% 65%,rgba(255,255,255,.35) 0 2px,transparent 3px),
        linear-gradient(160deg,rgba(255,255,255,.35),rgba(169,230,180,.22));
    opacity:.8;
    pointer-events:none;
}

/* 云朵装饰 */
.cloud{
    position:absolute;
    border-radius:100px;
    background:rgba(255,255,255,.67);
    filter:blur(.2px);
    opacity:.78;
    pointer-events:none;
}
.cloud::before,
.cloud::after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:inherit;.........完整代码请登录后点击上方下载按钮下载查看