

记忆游戏

码途钥匙

2025-08-09

· 点击蓝字，关注我们

效果图

一、HTML

记忆游戏的页面结构其实很简单。一个容器包裹所有元素，顶部是标题和得分显示，中间是游戏核心的卡片区域，最后是胜利提示信息。标题用直观的 “🧠 记忆游戏” 点明主题，得分区域实时展示玩家成绩，卡片区域则是动态生成的格子 —— 这些格子会在后续用 JS 填充内容。胜利提示默认隐藏，只有当所有卡片匹配成功时才会出现。整体结构清晰，没有多余元素，让玩家注意力集中在游戏本身。

二、CSS

设计上用了当下流行的 “neumorphism”（新拟态）风格，容器和卡片都有微妙的阴影，营造出立体又柔和的质感。卡片未翻开时是深色，翻开后变成清新的绿色，匹配成功则转为蓝色，颜色变化直观反馈游戏状态。布局上，卡片区域用网格（grid）分成 4 列，无论屏幕大小都能整齐排列。卡片设置为正方形，点击时有轻微的状态变化，增强交互感。字体选择圆润的 “Fredoka”，搭配 emoji 图标，让整体风格轻松活泼，适合全年龄段玩家。

三、JavaScript

游戏的核心逻辑全靠 JS 驱动。首先准备一组水果 emoji，每种重复两份，随机打乱顺序后生成 12 张卡片。玩家点击卡片时，JS 会控制卡片翻牌、显示内容，并判断两张翻开的卡片是否匹配。

如果匹配成功，卡片会保持翻开状态并加分；如果不匹配，卡片会在短暂停留后自动翻回。当所有卡片都匹配成功，胜利提示会弹出。整个过程中，JS 还会避免玩家连续点击、重复翻牌等误操作，让游戏体验更流畅。

四、代码

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>记忆游戏</title>    <link      href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap"      rel="stylesheet"    />    <style>      :root {        --primary: #2d2d2d;        --accent: #4caf50;        --matched: #2196f3;        --bg: #e0e0e0;        --shadow-light: #ffffff;        --shadow-dark: #bebebe;        --font: "Fredoka", sans-serif;      }      * {        margin: 0;        padding: 0;        box-sizing: border-box;      }      body {        background: var(--bg);        font-family: var(--font);        display: flex;        flex-direction: column;        align-items: center;        justify-content: center;        min-height: 100vh;        padding: 20px;      }      .container {        max-width: 600px;        width: 100%;        background-color: var(--bg);        border-radius: 30px;        box-shadow: 10px 10px 30px var(--shadow-dark),