feat: 开始开发专注力系列

This commit is contained in:
R524809
2025-12-11 17:47:22 +08:00
parent 3c0e2af10d
commit 3648ccc494
61 changed files with 1348 additions and 34 deletions
@@ -0,0 +1,117 @@
/**
* 格子仿画 - 3x3 网格形状数据
* 适用于入门级,低龄儿童
*/
import { GridCell, ShapeTemplate } from '../types/gridTypes';
// ==================== 3x3 形状模板 ====================
/** 简单十字形 */
export const CROSS_3X3: ShapeTemplate = {
id: 'cross-3x3-001',
name: '十字形',
recommendedSize: { rows: 3, cols: 3 },
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FFFF00' }, // 顶部
{ x: 0, y: 1, color: '#FFFF00' }, // 左侧
{ x: 1, y: 1, color: '#FFFF00' }, // 中心
{ x: 2, y: 1, color: '#FFFF00' }, // 右侧
{ x: 1, y: 2, color: '#FFFF00' }, // 底部
],
};
/** L形 */
export const L_SHAPE_3X3: ShapeTemplate = {
id: 'l-3x3-001',
name: 'L形',
recommendedSize: { rows: 3, cols: 3 },
category: 'geometric',
difficulty: 1,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#0000FF' },
{ x: 0, y: 1, color: '#0000FF' },
{ x: 0, y: 2, color: '#0000FF' },
{ x: 1, y: 2, color: '#0000FF' },
{ x: 2, y: 2, color: '#0000FF' },
],
};
/** 对角线 */
export const DIAGONAL_3X3: ShapeTemplate = {
id: 'diagonal-3x3-001',
name: '对角线',
recommendedSize: { rows: 3, cols: 3 },
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#FF0000' },
{ x: 1, y: 1, color: '#FF0000' },
{ x: 2, y: 2, color: '#FF0000' },
],
};
/** 小房子 */
export const HOUSE_3X3: ShapeTemplate = {
id: 'house-3x3-001',
name: '小房子',
recommendedSize: { rows: 3, cols: 3 },
category: 'object',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FF0000' }, // 屋顶
{ x: 0, y: 1, color: '#FFFF00' }, // 左侧墙
{ x: 1, y: 1, color: '#FFFF00' }, // 中间墙
{ x: 2, y: 1, color: '#FFFF00' }, // 右侧墙
{ x: 1, y: 2, color: '#8B4513' }, // 门
],
};
/** 小星星 */
export const STAR_3X3: ShapeTemplate = {
id: 'star-3x3-001',
name: '小星星',
recommendedSize: { rows: 3, cols: 3 },
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FFD700' }, // 顶部
{ x: 0, y: 1, color: '#FFD700' },
{ x: 1, y: 1, color: '#FFD700' }, // 中心
{ x: 2, y: 1, color: '#FFD700' },
{ x: 1, y: 2, color: '#FFD700' }, // 底部
],
};
/** 所有 3x3 形状模板 */
export const ALL_3X3_SHAPES: ShapeTemplate[] = [
CROSS_3X3,
L_SHAPE_3X3,
DIAGONAL_3X3,
HOUSE_3X3,
STAR_3X3,
];
/**
* 随机获取一个 3x3 形状
*/
export function getRandom3x3Shape(): ShapeTemplate {
const randomIndex = Math.floor(Math.random() * ALL_3X3_SHAPES.length);
return ALL_3X3_SHAPES[randomIndex];
}
@@ -0,0 +1,218 @@
/**
* 格子仿画 - 5x5 网格形状数据
* 适用于常用尺寸,适中难度
*/
import { GridCell, ShapeTemplate } from '../types/gridTypes';
// ==================== 5x5 形状模板 ====================
/** 十字形 */
export const CROSS_5X5: ShapeTemplate = {
id: 'cross-5x5-001',
name: '十字形',
recommendedSize: { rows: 5, cols: 5 },
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 2, y: 0, color: '#FFFF00' }, // 顶部
{ x: 2, y: 1, color: '#FFFF00' },
{ x: 0, y: 2, color: '#FFFF00' }, // 左侧
{ x: 1, y: 2, color: '#FFFF00' },
{ x: 2, y: 2, color: '#FFFF00' }, // 中心
{ x: 3, y: 2, color: '#FFFF00' },
{ x: 4, y: 2, color: '#FFFF00' }, // 右侧
{ x: 2, y: 3, color: '#FFFF00' },
{ x: 2, y: 4, color: '#FFFF00' }, // 底部
],
};
/** X形 */
export const X_SHAPE_5X5: ShapeTemplate = {
id: 'x-5x5-001',
name: 'X形',
recommendedSize: { rows: 5, cols: 5 },
category: 'geometric',
difficulty: 2,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#0000FF' },
{ x: 1, y: 1, color: '#0000FF' },
{ x: 2, y: 2, color: '#0000FF' },
{ x: 3, y: 3, color: '#0000FF' },
{ x: 4, y: 4, color: '#0000FF' },
{ x: 4, y: 0, color: '#0000FF' },
{ x: 3, y: 1, color: '#0000FF' },
{ x: 1, y: 3, color: '#0000FF' },
{ x: 0, y: 4, color: '#0000FF' },
],
};
/** 星星 */
export const STAR_5X5: ShapeTemplate = {
id: 'star-5x5-001',
name: '星星',
recommendedSize: { rows: 5, cols: 5 },
category: 'geometric',
difficulty: 3,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 2, y: 0, color: '#FFD700' }, // 顶部
{ x: 1, y: 1, color: '#FFD700' },
{ x: 3, y: 1, color: '#FFD700' },
{ x: 0, y: 2, color: '#FFD700' },
{ x: 2, y: 2, color: '#FFD700' }, // 中心
{ x: 4, y: 2, color: '#FFD700' },
{ x: 1, y: 3, color: '#FFD700' },
{ x: 3, y: 3, color: '#FFD700' },
{ x: 2, y: 4, color: '#FFD700' }, // 底部
],
};
/** Z字形 */
export const ZIGZAG_5X5: ShapeTemplate = {
id: 'zigzag-5x5-001',
name: 'Z字形',
recommendedSize: { rows: 5, cols: 5 },
category: 'geometric',
difficulty: 2,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#800080' },
{ x: 1, y: 0, color: '#800080' },
{ x: 2, y: 0, color: '#800080' },
{ x: 2, y: 1, color: '#800080' },
{ x: 1, y: 2, color: '#800080' },
{ x: 0, y: 2, color: '#800080' },
{ x: 0, y: 3, color: '#800080' },
{ x: 1, y: 3, color: '#800080' },
{ x: 2, y: 4, color: '#800080' },
{ x: 3, y: 4, color: '#800080' },
{ x: 4, y: 4, color: '#800080' },
],
};
/** V字形 */
export const V_SHAPE_5X5: ShapeTemplate = {
id: 'v-5x5-001',
name: 'V字形',
recommendedSize: { rows: 5, cols: 5 },
category: 'geometric',
difficulty: 2,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#00FF00' },
{ x: 4, y: 0, color: '#00FF00' },
{ x: 0, y: 1, color: '#00FF00' },
{ x: 4, y: 1, color: '#00FF00' },
{ x: 1, y: 2, color: '#00FF00' },
{ x: 3, y: 2, color: '#00FF00' },
{ x: 2, y: 3, color: '#00FF00' },
{ x: 2, y: 4, color: '#00FF00' },
],
};
/** I字形 */
export const I_SHAPE_5X5: ShapeTemplate = {
id: 'i-5x5-001',
name: 'I字形',
recommendedSize: { rows: 5, cols: 5 },
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FF7F00' },
{ x: 2, y: 0, color: '#FF7F00' },
{ x: 3, y: 0, color: '#FF7F00' },
{ x: 2, y: 1, color: '#FF7F00' },
{ x: 2, y: 2, color: '#FF7F00' },
{ x: 2, y: 3, color: '#FF7F00' },
{ x: 2, y: 4, color: '#FF7F00' },
{ x: 1, y: 4, color: '#FF7F00' },
{ x: 3, y: 4, color: '#FF7F00' },
],
};
/** 棋盘格 */
export const CHECKERBOARD_5X5: ShapeTemplate = {
id: 'checkerboard-5x5-001',
name: '棋盘格',
recommendedSize: { rows: 5, cols: 5 },
category: 'geometric',
difficulty: 3,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#FFFF00' },
{ x: 2, y: 0, color: '#FFFF00' },
{ x: 4, y: 0, color: '#FFFF00' },
{ x: 1, y: 1, color: '#FFFF00' },
{ x: 3, y: 1, color: '#FFFF00' },
{ x: 0, y: 2, color: '#FFFF00' },
{ x: 2, y: 2, color: '#FFFF00' },
{ x: 4, y: 2, color: '#FFFF00' },
{ x: 1, y: 3, color: '#FFFF00' },
{ x: 3, y: 3, color: '#FFFF00' },
{ x: 0, y: 4, color: '#FFFF00' },
{ x: 2, y: 4, color: '#FFFF00' },
{ x: 4, y: 4, color: '#FFFF00' },
],
};
/** 心形(简化版) */
export const HEART_5X5: ShapeTemplate = {
id: 'heart-5x5-001',
name: '心形',
recommendedSize: { rows: 5, cols: 5 },
category: 'object',
difficulty: 2,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FF69B4' },
{ x: 2, y: 0, color: '#FF69B4' },
{ x: 3, y: 0, color: '#FF69B4' },
{ x: 0, y: 1, color: '#FF69B4' },
{ x: 2, y: 1, color: '#FF69B4' },
{ x: 4, y: 1, color: '#FF69B4' },
{ x: 1, y: 2, color: '#FF69B4' },
{ x: 2, y: 2, color: '#FF69B4' },
{ x: 3, y: 2, color: '#FF69B4' },
{ x: 2, y: 3, color: '#FF69B4' },
{ x: 2, y: 4, color: '#FF69B4' },
],
};
/** 所有 5x5 形状模板 */
export const ALL_5X5_SHAPES: ShapeTemplate[] = [
CROSS_5X5,
X_SHAPE_5X5,
STAR_5X5,
ZIGZAG_5X5,
V_SHAPE_5X5,
I_SHAPE_5X5,
CHECKERBOARD_5X5,
HEART_5X5,
];
/**
* 随机获取一个 5x5 形状
*/
export function getRandom5x5Shape(): ShapeTemplate {
const randomIndex = Math.floor(Math.random() * ALL_5X5_SHAPES.length);
return ALL_5X5_SHAPES[randomIndex];
}
@@ -0,0 +1,247 @@
/**
* 格子仿画 - 7x7 网格形状数据
* 适用于中等难度,复杂图案
*/
import { GridCell, ShapeTemplate } from '../types/gridTypes';
// ==================== 7x7 形状模板 ====================
/** 南瓜头 - 对称涂色(仅存储左半部分) */
export const PUMPKIN_HEAD_7X7: ShapeTemplate = {
id: 'pumpkin-7x7-001',
name: '南瓜头',
recommendedSize: { rows: 7, cols: 7 },
category: 'character',
difficulty: 4,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: false, // 只存储了左半部分
colorSchemeId: 'halloween',
cells: [
// 茎(在对称轴上)
{ x: 3, y: 0, color: '#FF7F00' },
// 脸部轮廓(浅绿色)- 左半部分
{ x: 0, y: 1, color: '#90EE90' },
{ x: 1, y: 1, color: '#90EE90' },
{ x: 0, y: 2, color: '#90EE90' },
{ x: 1, y: 2, color: '#90EE90' },
{ x: 0, y: 3, color: '#90EE90' },
{ x: 1, y: 3, color: '#90EE90' },
{ x: 0, y: 4, color: '#90EE90' },
{ x: 1, y: 4, color: '#90EE90' },
{ x: 0, y: 5, color: '#90EE90' },
{ x: 1, y: 5, color: '#90EE90' },
{ x: 0, y: 6, color: '#90EE90' },
{ x: 1, y: 6, color: '#90EE90' },
// 脸部(黄色)
{ x: 2, y: 1, color: '#FFFF00' },
{ x: 3, y: 1, color: '#FFFF00' }, // 对称轴上的点
{ x: 2, y: 2, color: '#FFFF00' },
{ x: 2, y: 3, color: '#FFFF00' },
{ x: 3, y: 3, color: '#FFFF00' },
{ x: 2, y: 4, color: '#FFFF00' },
{ x: 2, y: 5, color: '#FFFF00' },
{ x: 3, y: 5, color: '#FFFF00' },
// 眼睛(黑色)- 左眼
{ x: 2, y: 2, color: '#000000' },
],
};
/** 卡通恐龙 - 对称涂色(仅存储左半部分) */
export const DINOSAUR_7X7: ShapeTemplate = {
id: 'dinosaur-7x7-001',
name: '卡通恐龙',
recommendedSize: { rows: 7, cols: 7 },
category: 'animal',
difficulty: 4,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: false, // 只存储了左半部分
cells: [
// 身体(浅绿色)
{ x: 1, y: 1, color: '#90EE90' },
{ x: 2, y: 1, color: '#90EE90' },
{ x: 1, y: 2, color: '#90EE90' },
{ x: 2, y: 2, color: '#90EE90' },
{ x: 0, y: 3, color: '#90EE90' },
{ x: 1, y: 3, color: '#90EE90' },
{ x: 2, y: 3, color: '#90EE90' },
{ x: 0, y: 4, color: '#90EE90' },
{ x: 1, y: 4, color: '#90EE90' },
{ x: 2, y: 4, color: '#90EE90' },
{ x: 0, y: 5, color: '#90EE90' },
{ x: 1, y: 5, color: '#90EE90' },
{ x: 2, y: 5, color: '#90EE90' },
{ x: 0, y: 6, color: '#90EE90' },
{ x: 1, y: 6, color: '#90EE90' },
// 眼睛(黑色)
{ x: 2, y: 1, color: '#000000' },
// 嘴巴(红色)
{ x: 2, y: 2, color: '#FF0000' },
{ x: 0, y: 3, color: '#FF0000' },
// 脚(黄色)
{ x: 2, y: 5, color: '#FFFF00' },
{ x: 0, y: 6, color: '#FFFF00' },
{ x: 1, y: 6, color: '#FFFF00' },
],
};
/** 心形 - 对称涂色(仅存储左半部分,对称轴在x=3) */
export const HEART_7X7: ShapeTemplate = {
id: 'heart-7x7-001',
name: '心形',
recommendedSize: { rows: 7, cols: 7 },
category: 'object',
difficulty: 3,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: false,
colorSchemeId: 'warm',
cells: [
// 左上半部分
{ x: 1, y: 0, color: '#FF69B4' },
{ x: 2, y: 0, color: '#FF69B4' },
{ x: 0, y: 1, color: '#FF69B4' },
{ x: 3, y: 1, color: '#FF69B4' }, // 对称轴上的点
{ x: 0, y: 2, color: '#FF69B4' },
{ x: 1, y: 3, color: '#FF69B4' },
{ x: 2, y: 4, color: '#FF69B4' },
{ x: 3, y: 5, color: '#FF69B4' }, // 对称轴上的点
{ x: 3, y: 6, color: '#FF69B4' }, // 对称轴上的点(底部尖端)
],
};
/** 房子 */
export const HOUSE_7X7: ShapeTemplate = {
id: 'house-7x7-001',
name: '小房子',
recommendedSize: { rows: 7, cols: 7 },
category: 'object',
difficulty: 3,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: false,
cells: [
// 屋顶(三角形)- 左半部分
{ x: 2, y: 0, color: '#FF0000' },
{ x: 1, y: 1, color: '#FF0000' },
{ x: 2, y: 1, color: '#FF0000' },
{ x: 3, y: 1, color: '#FF0000' }, // 对称轴上的点
{ x: 0, y: 2, color: '#FF0000' },
{ x: 1, y: 2, color: '#FF0000' },
{ x: 2, y: 2, color: '#FF0000' },
{ x: 3, y: 2, color: '#FF0000' },
// 墙体(黄色)- 左半部分
{ x: 1, y: 3, color: '#FFFF00' },
{ x: 2, y: 3, color: '#FFFF00' },
{ x: 3, y: 3, color: '#FFFF00' },
{ x: 1, y: 4, color: '#FFFF00' },
{ x: 2, y: 4, color: '#FFFF00' },
{ x: 3, y: 4, color: '#FFFF00' },
{ x: 1, y: 5, color: '#FFFF00' },
{ x: 2, y: 5, color: '#FFFF00' },
{ x: 3, y: 5, color: '#FFFF00' },
// 门(棕色)- 在对称轴上
{ x: 3, y: 4, color: '#8B4513' },
{ x: 3, y: 5, color: '#8B4513' },
// 窗户(蓝色)
{ x: 1, y: 3, color: '#0000FF' },
],
};
/** 蝴蝶 */
export const BUTTERFLY_7X7: ShapeTemplate = {
id: 'butterfly-7x7-001',
name: '蝴蝶',
recommendedSize: { rows: 7, cols: 7 },
category: 'animal',
difficulty: 4,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: false,
cells: [
// 左翅膀
{ x: 0, y: 1, color: '#FF69B4' },
{ x: 1, y: 1, color: '#FF69B4' },
{ x: 0, y: 2, color: '#FF69B4' },
{ x: 1, y: 2, color: '#FF69B4' },
{ x: 2, y: 2, color: '#FF69B4' },
{ x: 0, y: 3, color: '#FF69B4' },
{ x: 1, y: 3, color: '#FF69B4' },
{ x: 2, y: 3, color: '#FF69B4' },
// 身体(在对称轴上)
{ x: 3, y: 1, color: '#000000' },
{ x: 3, y: 2, color: '#000000' },
{ x: 3, y: 3, color: '#000000' },
{ x: 3, y: 4, color: '#000000' },
{ x: 3, y: 5, color: '#000000' },
// 左下半翅膀
{ x: 1, y: 4, color: '#FF69B4' },
{ x: 2, y: 4, color: '#FF69B4' },
{ x: 0, y: 5, color: '#FF69B4' },
{ x: 1, y: 5, color: '#FF69B4' },
{ x: 2, y: 5, color: '#FF69B4' },
],
};
/** 花朵 */
export const FLOWER_7X7: ShapeTemplate = {
id: 'flower-7x7-001',
name: '花朵',
recommendedSize: { rows: 7, cols: 7 },
category: 'nature',
difficulty: 3,
supportSymmetry: true,
symmetryType: 'both',
isComplete: false,
cells: [
// 花瓣(左上半部分)
{ x: 1, y: 0, color: '#FF69B4' },
{ x: 2, y: 0, color: '#FF69B4' },
{ x: 0, y: 1, color: '#FF69B4' },
{ x: 1, y: 1, color: '#FF69B4' },
{ x: 2, y: 1, color: '#FF69B4' },
{ x: 3, y: 1, color: '#FF69B4' }, // 对称轴上的点
// 花心(中心)
{ x: 2, y: 2, color: '#FFFF00' },
{ x: 3, y: 2, color: '#FFFF00' }, // 对称轴上的点
{ x: 2, y: 3, color: '#FFFF00' },
{ x: 3, y: 3, color: '#FFFF00' }, // 对称轴上的点
// 茎(在对称轴上)
{ x: 3, y: 4, color: '#00FF00' },
{ x: 3, y: 5, color: '#00FF00' },
{ x: 3, y: 6, color: '#00FF00' },
],
};
/** 所有 7x7 形状模板 */
export const ALL_7X7_SHAPES: ShapeTemplate[] = [
PUMPKIN_HEAD_7X7,
DINOSAUR_7X7,
HEART_7X7,
HOUSE_7X7,
BUTTERFLY_7X7,
FLOWER_7X7,
];
/**
* 随机获取一个 7x7 形状
*/
export function getRandom7x7Shape(): ShapeTemplate {
const randomIndex = Math.floor(Math.random() * ALL_7X7_SHAPES.length);
return ALL_7X7_SHAPES[randomIndex];
}