chore: Increase number of pipes in Flappy Chicken game

The code changes in `playground.jsx` increase the number of pipes generated in the Flappy Chicken game from 7 to 20. This change provides a more challenging gameplay experience for the user.
HasanYahya101 · Jul 11, 2024 · a1fd66c · a1fd66c
1 parent a9ef279
commit a1fd66c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/component/playground.jsx b/src/components/component/playground.jsx
@@ -60,7 +60,7 @@ const FlappyChicken = () => {
 
     const initializePipes = useCallback(() => {
         const initialPipes = [];
-        for (let i = 0; i < 7; i++) {
+        for (let i = 0; i < 20; i++) {
             initialPipes.push(generatePipe(gameSize.width + i * PIPE_SPACING));
         }
         return initialPipes;
@@ -120,7 +120,7 @@ const FlappyChicken = () => {
                         x: pipe.x - PIPE_SPEED,
                     })).filter((pipe) => pipe.x > -PIPE_WIDTH);
 
-                    if (newPipes.length < 7) {
+                    if (newPipes.length < 20) {
                         const lastPipe = newPipes[newPipes.length - 1];
                         newPipes.push(generatePipe(lastPipe.x + PIPE_SPACING));
                     }
@@ -204,13 +204,13 @@ const FlappyChicken = () => {
             )}
             {gameOver && (
                 <div className="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80 text-white">
-                    <div className="text-6xl mb-8 font-bold">
+                    <div className="text-6xl mb-8 font-bold text-center justify-center">
                         GAME OVER
                     </div>
-                    <div className="text-4xl mb-4">
+                    <div className="text-4xl mb-4 text-center justify-center">
                         Score: {score}
                     </div>
-                    <div className="text-3xl mb-8">
+                    <div className="text-3xl mb-8 text-center justify-center">
                         Title: {getTitle(score)}
                     </div>
                     <Button