挑戰記憶力-Web前端實作記憶紙牌游戲（JS+CSS）

游戲介紹：

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天

專欄推薦閱讀：