挑战记忆力-Web前端实现记忆纸牌游戏（JS+CSS）

Posted 2021-12-07 java李杨勇

游戏介绍：

js实现扑克牌翻牌记忆小游戏代码、连续点击翻开两张扑克牌，相同去重，不同则合上重新翻，考验你的记忆力。

🍅 文末获取源码联系 🍅

 临近期末, 你还在为html网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在专栏👇🏻👇🏻👇🏻👇🏻

java项目精品实战分享案例《100套》》》

web期末大作业网页实战《100套》》》

 Html+Css+JS期末大作业《100套》》》 

常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、  文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的电竞博客网页制作，画面精明，非常适合初学者学习使用。

  B站视频演示： 挑战记忆力-Web前端实现记忆纸牌游戏.mp4

主要源码展示：

style.css主要样式布局文件

* {
    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)
    }
}

script.js 主要逻辑代码实现：

   function C(t, n, e, r, o, c, i, a = 0) {
        const s = 16.666 / r;
        let l = "{\\n";
        for (let t = 0; t <= 1; t += s) {
            const r = n + (e - n) * c(t);
            l += 100 * t + `%{${i(r,1-r)}}\\n`
        }
        const d = l + `100% {${i(e,1-e)}}\\n}`,
            f = `__svelte_${function(t){let n=5381,e=t.length;for(;e--;)n=(n<<5)-n^t.charCodeAt(e);return n>>>0}(d)}_${a}`;
        if (!M[f]) {
            if (!u) {
                const t = v("style");
                document.head.appendChild(t), u = t.sheet
            }
            M[f] = !0, u.insertRule(`@keyframes ${f} ${d}`, u.cssRules.length)
        }
        const p = t.style.animation || "";
        return t.style.animation = `${p?`${p}, `:""}${f} ${r}ms linear ${o}ms 1 both`, F += 1, f
    }

    function A(t, n) {
        t.style.animation = (t.style.animation || "").split(", ").filter(n ? t => t.indexOf(n) < 0 : t => -1 === t.indexOf("__svelte")).join(", "), n && !--F && l(() => {
            if (F) return;
            let t = u.cssRules.length;
            for (; t--;) u.deleteRule(t);
            M = {}
        })
    }

    function R(t) {
        E = t
    }

    function S() {
        const t = E;
        return (n, e) => {
            const r = t.$$.callbacks[n];
            if (r) {
                const o = P(n, e);
                r.slice().forEach(n => {
                    n.call(t, o)
                })
            }
        }
    }
    const O = [],
        j = [],
        N = [],
        I = [],
        L = Promise.resolve();
    let q, z = !1;

    function B(t) {
        N.push(t)
    }

    function D() {
        const t = new Set;
        do {
            for (; O.length;) {
                const t = O.shift();
                R(t), J(t.$$)
            }
            for (; j.length;) j.pop()();
            for (let n = 0; n < N.length; n += 1) {
                const e = N[n];
                t.has(e) || (e(), t.add(e))
            }
            N.length = 0
        } while (O.length);
        for (; I.length;) I.pop()();
        z = !1
    }

作品来自于网络收集、侵权立删 

 获取完整源码：

大家点赞、收藏、关注、评论啦 、查看下方👇🏻👇🏻👇🏻微信公众号获取👇🏻👇🏻👇🏻

打卡 文章 更新 95/  100天

 专栏推荐阅读：