support eliminated liens and score

huoyijie · Nov 7, 2023 · c6a1244 · c6a1244
1 parent c3d8445
commit c6a1244
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/src/components/Info.jsx b/src/components/Info.jsx
@@ -4,20 +4,22 @@ import Context from './Context';
 import { I } from '@/lib/TetrominoType';
 
 export default function () {
-  const { gameOver, nextTetromino } = useContext(Context)
+  const { gameOver, nextTetromino, score, eliminatedLines } = useContext(Context)
 
   if (gameOver) return <></>
 
   return (
     <div className='flex flex-col gap-8'>
       <div className='flex gap-6 justify-between items-center'>
         <span>得分</span>
-        <span className='text-2xl font-bold text-red-600'>100</span>
+        <span className='text-2xl font-bold text-red-600'>{score}</span>
       </div>
+
       <div className='flex gap-6 justify-between items-center'>
         <span>消除行</span>
-        <span className='text-2xl font-bold text-red-600'>20</span>
+        <span className='text-2xl font-bold text-red-600'>{eliminatedLines}</span>
       </div>
+
       {nextTetromino && (
         <div className='flex gap-6 justify-between items-center'>
           <div>下一个</div>

diff --git a/src/lib/tetris.js b/src/lib/tetris.js
@@ -210,10 +210,11 @@ export function moveDownTetromino(tetromino, tetrominoes, onCollise, onGameOver,
     return moved
   }
 
-  if (eliminateLines(tetromino, tetrominoes, setTetrominoes) == 0 && reachTop) {
+  const eliminatedLines = eliminateLines(tetromino, tetrominoes, setTetrominoes)
+  if (eliminatedLines == 0 && reachTop) {
     onGameOver()
   } else {
-    onCollise()
+    onCollise(eliminatedLines)
   }
 
   return tetromino
@@ -245,9 +246,10 @@ export function fallDownTetromino(tetromino, tetrominoes, onCollise, onGameOver,
 
   tetromino.y = moved.y - 1
 
-  if (eliminateLines(tetromino, tetrominoes, setTetrominoes) == 0 && result.reachTop) {
+  const eliminatedLines = eliminateLines(tetromino, tetrominoes, setTetrominoes)
+  if (eliminatedLines == 0 && result.reachTop) {
     onGameOver()
   } else {
-    onCollise()
+    onCollise(eliminatedLines)
   }
 }
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -11,6 +11,8 @@ export default function () {
   const [tetrominoes, setTetrominoes] = useState([])
   const [currentTetromino, setCurrentTetromino] = useState()
   const [nextTetromino, setNextTetromino] = useState()
+  const [score, setScore] = useState(0)
+  const [eliminatedLines, setEliminatedLines] = useState(0)
   const [gameOver, setGameOver] = useState(true)
   const mainRef = useRef()
 
@@ -55,12 +57,20 @@ export default function () {
     setCurrentTetromino(rotateTetromino(currentTetromino, tetrominoes))
   }
 
+  const onCollise = (elimiLines) => {
+    if (elimiLines > 0) {
+      setEliminatedLines(eliminatedLines + elimiLines)
+      setScore(score + 10 * Math.pow(2, elimiLines))
+    }
+    queueMicrotask(next)
+  }
+
   const down = () => {
     setCurrentTetromino(
       moveDownTetromino(
         currentTetromino,
         tetrominoes,
-        () => queueMicrotask(next),
+        onCollise,
         () => setGameOver(true),
         setTetrominoes)
     )
@@ -79,7 +89,7 @@ export default function () {
       fallDownTetromino(
         currentTetromino,
         tetrominoes,
-        () => queueMicrotask(next),
+        onCollise,
         () => setGameOver(true),
         setTetrominoes)
     }
@@ -117,7 +127,7 @@ export default function () {
   }
 
   return (
-    <Context.Provider value={{ currentTetromino, nextTetromino, tetrominoes, newGame, fallDown, rotate, down, left, right, next, gameOver, setGameOver }}>
+    <Context.Provider value={{ currentTetromino, nextTetromino, tetrominoes, newGame, fallDown, rotate, down, left, right, next, gameOver, setGameOver, score, eliminatedLines }}>
       <main ref={mainRef} className='w-full h-screen focus:outline-none flex gap-8 items-center justify-center' tabIndex={1} onKeyDown={onKeyDown}>
         <Operation />
         <Board />