diff --git a/src/App.css b/src/App.css index 8c12e88..66b36e6 100644 --- a/src/App.css +++ b/src/App.css @@ -14,6 +14,7 @@ width: 100%; padding-bottom: 100%; position: relative; + margin: 10% 0; } .scene-inner { diff --git a/src/App.tsx b/src/App.tsx index ca59dc4..803e447 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,9 @@ import { randomString } from './utils'; const icons = [`🎨`, `🌈`, `⚙️`, `💻`, `📚`, `🐯`, `🐤`, `🐼`, `🐏`, `🍀`]; +// 最大关卡 +const maxLevel = 50; + interface MySymbol { id: string; status: number; // 0->1->2 @@ -17,9 +20,9 @@ interface MySymbol { type Scene = MySymbol[]; -// 8*8网格 5级别level 4*4->8*8 +// 8*8网格 4*4->8*8 const makeScene: (level: number) => Scene = (level) => { - const curLevel = Math.min(5, level); + const curLevel = Math.min(maxLevel, level); const iconPool = icons.slice(0, 2 * curLevel); const offsetPool = [0, 25, -25, 50, -50].slice(0, 1 + curLevel); @@ -31,7 +34,7 @@ const makeScene: (level: number) => Scene = (level) => { [1, 7], [0, 7], [0, 8], - ][curLevel - 1]; + ][Math.min(4, curLevel - 1)]; const randomSet = (icon: string) => { const offset = @@ -50,6 +53,16 @@ const makeScene: (level: number) => Scene = (level) => { }); }; + // 大于5级别增加icon池 + let compareLevel = curLevel; + while (compareLevel > 0) { + iconPool.push( + ...iconPool.slice(0, Math.min(10, 2 * (compareLevel - 5))) + ); + compareLevel -= 5; + } + console.log(iconPool); + for (const icon of iconPool) { for (let i = 0; i < 6; i++) { randomSet(icon); @@ -69,7 +82,7 @@ const washScene: (level: number, scene: Scene) => Scene = (level, scene) => { [1, 7], [0, 7], [0, 8], - ][level - 1]; + ][Math.min(4, level - 1)]; const randomSet = (symbol: MySymbol) => { const offset = @@ -126,7 +139,6 @@ const App: FC = () => { // 队列区排序 useEffect(() => { - console.log('fuck'); const cache: Record = {}; for (const symbol of queue) { if (cache[symbol.icon]) { @@ -149,7 +161,7 @@ const App: FC = () => { }, [queue]); const test = () => { - const level = Math.ceil(5 * Math.random()); + const level = Math.ceil(maxLevel * Math.random()); setLevel(level); checkCover(makeScene(level)); }; @@ -223,6 +235,17 @@ const App: FC = () => { checkCover(washScene(level, scene)); }; + // 加大难度 + const levelUp = () => { + if (level >= maxLevel) { + return; + } + setFinished(false); + setLevel(level + 1); + setQueue([]); + checkCover(makeScene(level + 1)); + }; + // 重开 const restart = () => { setFinished(false); @@ -263,7 +286,7 @@ const App: FC = () => { if (!updateScene.find((s) => s.status !== 2)) { // 胜利 - if (level === 5) { + if (level === maxLevel) { setTipText('完成挑战'); setFinished(true); return; @@ -299,7 +322,7 @@ const App: FC = () => { ? sortedQueue[item.id] : -2000 } - y={item.status === 0 ? item.y : 815} + y={item.status === 0 ? item.y : 895} onClick={() => clickSymbol(idx)} /> ))} @@ -317,6 +340,9 @@ const App: FC = () => { + {/**/} diff --git a/src/index.css b/src/index.css index 8c1c0a1..3a29bc2 100644 --- a/src/index.css +++ b/src/index.css @@ -43,6 +43,7 @@ button { background-color: #1a1a1a; cursor: pointer; transition: border-color 0.25s; + word-break: keep-all; } button:hover {