HTML+CSS+JS实现 ❤️简单的翻纸牌记忆游戏❤️

红太狼 2022-09-10 14:28 159阅读 0赞

## GIF动图演示![在这里插入图片描述][284e49f108ba436eb97f691f00c8a130.gif_pic_center] ##

## 代码目录![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16] ##

## 主要代码实现： ##

**css样式**

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,900&display=swap");
    * { 
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    body { 
        min-height: 100vh;
        color: hsl(340, 5%, 20%);
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="0.1" width="100" height="100" fill="hsl(340, 10%, 30%)"><path d="M21.5 18.938a8 8 0 0113.856-8q6 10.392-3.856 25.32-17.856 1.072-23.856-9.32a8 8 0 0113.856-8M67 11.144L87.124 18 83 38.856 62.876 32zM77.5 79.33a14 14 0 01-5.49 20.49l25.98-15a14 14 0 01-20.49-5.49 9 9 0 01-15.588 9 9 9 0 0115.588-9 9 9 0 01-9-15.588 9 9 0 019 15.588 9 9 0 0115.588-9 9 9 0 01-15.588 9M27.5 79.33a14 14 0 01-5.49 20.49l25.98-15a14 14 0 01-20.49-5.49 8 8 0 01-13.856 8q-5-8.66 3.856-25.32 18.856.66 23.856 9.32a8 8 0 01-13.856 8"/></svg>'), hsl(340, 10%, 5%);
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 400;
        padding: 100px 0 0 0;
    }
    
    main.svelte-185gx00 { 
        margin: 1rem auto;
        width: 90vw;
        max-width: 700px;
        display: grid;
        grid-template-columns: repeat(auto-fit, 140px);
        grid-auto-rows: max-content;
        grid-gap: 1rem;
        justify-content: center
    }
    
    div.svelte-1nxkdr7 { 
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 5;
        background: hsla(0, 0%, 10%, 0.5);
        backdrop-filter: blur(1px)
    }
    
    section.svelte-1nxkdr7 { 
        padding: 3rem 3.5rem;
        background: url('data:image/svg+xml;utf8,<svg opacity="0.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="250" height="250"><defs><circle id="a" cx="0" cy="0" r="5" fill="hsl(0, 0%, 0%)" stroke="none"/><path id="b" fill="none" stroke="hsl(0, 0%, 0%)" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" d="M0 0a4 4 0 00-4-4 4 4 0 010-8 4 4 0 000-8 4 4 0 010-8 4 4 0 004-4"/></defs><g><g><g><g transform="translate(50 100) scale(1 1) translate(-47.5 -2.5) rotate(45) translate(-50 -100) translate(50 50)"><path fill="hsl(0, 0%, 0%)" stroke="hsl(0, 0%, 0%)" stroke-width="10" stroke-linejoin="round" stroke-linecap="round" d="M0 45l-27.5-55h55z"/><use href="%23a" transform="translate(-40 -25)"/><use href="%23a" transform="translate(-15 -45)"/><use href="%23a" transform="translate(0 -25)"/><use href="%23a" transform="translate(40 -30)"/><use href="%23b" transform="translate(-15 -18) rotate(-25)"/><use href="%23b" transform="translate(15 -18) rotate(30)"/></g></g></g></g></svg>'), url('data:image/svg+xml;utf8,<svg opacity="0.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="250" height="250"><defs><circle id="a" cx="0" cy="0" r="5" fill="hsl(0, 0%, 0%)" stroke="none"/><path id="b" fill="none" stroke="hsl(0, 0%, 0%)" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" d="M0 0a4 4 0 00-4-4 4 4 0 010-8 4 4 0 000-8 4 4 0 010-8 4 4 0 004-4"/></defs><g><g><g><g transform="translate(50 100) scale(-1 1) translate(-47.5 -2.5) rotate(45) translate(-50 -100) translate(50 50)"><path fill="hsl(0, 0%, 0%)" stroke="hsl(0, 0%, 0%)" stroke-width="10" stroke-linejoin="round" stroke-linecap="round" d="M0 45l-27.5-55h55z"/><use href="%23a" transform="translate(-40 -25)"/><use href="%23a" transform="translate(-15 -45)"/><use href="%23a" transform="translate(0 -25)"/><use href="%23a" transform="translate(40 -30)"/><use href="%23b" transform="translate(-15 -18) rotate(-25)"/><use href="%23b" transform="translate(15 -18) rotate(30)"/></g></g></g></g></svg>'), hsl(0, 0%, 100%);
        background-size: 30%;
        background-position: 0% 100%, 100% 100%;
        background-repeat: no-repeat;
        text-align: center;
        border: 0.75rem solid hsl(340, 70%, 50%);
        border-radius: 15px;
        box-shadow: 0 2px 10px -5px hsla(0, 0%, 0%, 0.2)
    }
    
    h1.svelte-1nxkdr7 { 
        text-transform: uppercase;
        margin-bottom: 1.25rem;
        font-weight: 800
    }
    
    button.svelte-1nxkdr7 { 
        font-weight: 800;
        padding: 1.25rem 1.5rem;
        border: none;
        color: inherit;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 70%, 50%)"><g transform="translate(25 25)"><path d="M 0 -4 a 7 7 0 0 1 14 0 q 0 12 -14 18 q -14 -7 -14 -18 a 7 7 0 0 1 14 0" /></g></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 70%, 50%)"><g transform="translate(25 25)"><path d="M 0 -15 l 11 15 -11 15 -11 -15 z" /></g></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 5%, 20%)"><g transform="translate(25 25)"><path d="M 0 5 a 12 12 0 0 1 -12 12 h 24 a 12 12 0 0 1 -12 -12 a 7 7 0 0 1 -14 0 q 0 -10 14 -16 q 14 6 14 16 a 7 7 0 0 1 -14 0"/></g></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 5%, 20%)"><g transform="translate(25 25)"><path d="M 0 5 a 12 12 0 0 1 -12 12 h 24 a 12 12 0 0 1 -12 -12 a 7 7 0 0 1 -14 0 7 7 0 0 1 14 0 7 7 0 0 1 0 -14 7 7 0 0 1 0 14 7 7 0 0 1 14 0 7 7 0 0 1 -14 0"/></g></svg>');
        background-size: 2rem;
        background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
        background-repeat: no-repeat;
        font-family: inherit;
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 0.05rem
    }
    
    article.svelte-1m66100 { 
        position: relative;
        padding: 2rem;
        border-radius: 20px;
        width: 140px;
        height: 165px;
        transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
        transform: perspective(800px) rotateY(0deg);
        transform-style: preserve-3d
    }
    
    .flip.svelte-1m66100 { 
        transform: perspective(800px) rotateY(180deg)
    }
    
    .paired.svelte-1m66100 { 
        animation: svelte-1m66100-pair 0.25s 1s ease-in-out 2 alternate
    }
    
    @keyframes svelte-1m66100-pair { 
        25% { 
            transform: rotateZ(-5deg)
        }
        75% { 
            transform: rotateZ(5deg)
        }
    }
    
    .face.svelte-1m66100, button.svelte-1m66100 { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit
    }
    
    button.svelte-1m66100 { 
        background: none;
        border: none
    }
    
    .face.svelte-1m66100 { 
        backface-visibility: hidden;
        border: 0.75rem solid hsl(340, 70%, 50%);
        background: hsl(0, 0%, 100%);
        pointer-events: none
    }
    
    .back.svelte-1m66100 { 
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><path id="a" d="M0-50L50 0 0 50-50 0z" stroke="none"/><g id="b"><use href="%23a" fill="hsl(340, 70%, 50%)"/><use href="%23a" transform="scale(.8)" fill="hsl(345, 90%, 65%)"/><use href="%23a" transform="scale(.6)" fill="hsl(0, 90%, 60%)"/><use href="%23a" transform="scale(.4)" fill="hsl(30, 80%, 70%)"/><use href="%23a" transform="scale(.2)" fill="hsl(50, 95%, 80%)"/></g></defs><use href="%23b"/><use href="%23b" x="100"/><use href="%23b" x="100" y="100"/><use href="%23b" y="100"/><use href="%23b" x="50" y="50"/></svg>'), hsl(0, 0%, 100%);
        background-size: 25%;
        transform: rotateY(180deg)
    }
    
    .front.svelte-1m66100 { 
        background: url('data:image/svg+xml;utf8,<svg opacity="0.1" xmlns="http://www.w3.org/2000/svg" width="480" height="440" viewBox="0 0 240 220" stroke="hsl(340, 70%, 50%)" stroke-width="20" stroke-linejoin="round" stroke-linecap="round" fill="none"><g transform="translate(120 110) rotate(-35)"><path id="a" d="M50-22.5h-60 25a45 45 0 010 90h-75a45 45 0 010-90"/><use transform="scale(-1)" href="%23a"/></g></svg>'), hsl(0, 0%, 100%);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 50% 50%;
        display: flex;
        justify-content: center;
        align-items: center
    }
    
    h1.svelte-1m66100 { 
        font-size: 2.5rem;
        font-weight: 900
    }

**HTML**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Svelte Concentration</title>
        <link rel="stylesheet" href="css/style.css">
    
    </head>
    
    <body>
    
        <script src="js/script.js"></script>
    
    </body>
    
    </html>

上面的图片文件和js文件需要引入

## 源码获取 ##

查看[**博主主页**][Link 1]或下方**微信公众号获取**  
**精彩推荐更新中：**  
[**HTML5大作业实战100套**][HTML5_100]  
打卡 文章 更新 43 / 100天大家可以**点赞、收藏、关注、评论**我啦 、

[284e49f108ba436eb97f691f00c8a130.gif_pic_center]: /images/20220829/18a7944386944c12a512ce307398777b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/dd0422b41d844dbc82665a664f3445b8.png
[Link 1]: https://blog.csdn.net/weixin_39709134
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html