这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战
游戏介绍：
js实现扑克牌翻牌记忆小游戏代码、连续点击翻开两张扑克牌，相同去重，不同则合上重新翻，考验你的记忆力。
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的JS小游戏、非常适合初学者或平时摸鱼使用。
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天
