Memory-Card-Matching Svelte Themes

Memory Card Matching

A Memory Card Matching game built with Svelte 5 + Vite.

Memory Card Matching Game

English Version

一个使用 Svelte 5 + Vite 构建的 Memory Card Matching(记忆卡片配对)网页游戏。

功能特性

  • 🎴 卡片翻转动画(3D 透视效果)
  • ⏱️ 计时器系统
  • 🔢 移动步数统计
  • 🎮 三种难度级别
    • Easy: 4x3 = 12 张卡片(6 对)
    • Medium: 4x4 = 16 张卡片(8 对)
    • Hard: 5x4 = 20 张卡片(10 对)
  • 🏆 游戏完成弹窗显示成绩
  • 📱 响应式设计

技术栈

  • Svelte 5 - 使用新的 Runes 语法 ($state, $derived, $effect)
  • Vite - 现代化构建工具
  • lucide-svelte - 图标库

快速开始

安装依赖

pnpm install

开发模式

pnpm dev

构建生产版本

pnpm build

预览生产版本

pnpm preview

项目结构

├── src/
│   ├── App.svelte          # 主应用组件
│   ├── app.css             # 全局样式
│   ├── main.js             # 入口文件
│   └── lib/
│       ├── Card.svelte     # 卡片组件
│       ├── GameBoard.svelte # 游戏面板组件
│       ├── GameStats.svelte # 游戏统计组件
│       └── icons.js        # 图标配置
├── index.html              # HTML 入口
├── package.json            # 项目配置
├── svelte.config.js        # Svelte 配置
└── vite.config.js          # Vite 配置

游戏规则

  1. 点击卡片将其翻转
  2. 同时只能翻开两张卡片
  3. 如果两张卡片图标相同,则配对成功
  4. 如果不匹配,800ms 后自动翻转回去
  5. 配对所有卡片即可获胜
  6. 尽量用最少的步数和最短的时间完成游戏

许可证

MIT

Top categories

Loading Svelte Themes