挑战记忆力-Web前端实现记忆纸牌游戏（JS+CSS）
【摘要】 挑战记忆力-Web前端实现记忆纸牌游戏（JS+CSS）
游戏介绍：
js实现扑克牌翻牌记忆小游戏代码、连续点击翻开两张扑克牌，相同去重，不同则合上重新翻，考验你的记忆力。
🍅 文末获取源码联系 🍅
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在专栏👇🏻👇🏻👇🏻👇🏻
常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的电竞博客网页制作，画面精明，非常适合初学者学习使用。
B站视频演示：
主要源码展示：
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
}
作品来自于网络收集、侵权立删
获取完整源码：
大家点赞、收藏、关注、评论啦 、查看下方👇🏻👇🏻👇🏻微信公众号免费获取👇🏻👇🏻👇🏻
打卡 文章 更新 180/ 365天
专栏推荐阅读：
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）