Web前端---HTML+CSS+JS实现记忆纸牌游戏

Posted 2021-12-07 奥斯卡1号

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端---HTML+CSS+JS实现记忆纸牌游戏相关的知识，希望对你有一定的参考价值。

游戏介绍：

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

🍅 文末获取源码联系 🍅

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

主要源码展示：

style.css主要样式布局文件

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


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

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
}



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></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 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 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 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 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
    }
   function B(t) {
        N.push(t)
    }

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