react-native-games/lib/module/games/flappy-bird/FlappyBird.js

Free games for your react native projects.

"use strict";import React,{useEffect,useCallback,useMemo,useRef}from 'react';import{View,StyleSheet}from 'react-native';import{GestureHandlerRootView}from 'react-native-gesture-handler';import{useFlappyBirdStore}from "./FlappyBirdStore.js";import{ScoreBoard,GameArea,GameBackground}from "./components/index.js";import{GameControlButton,GameOverModal}from "../../helpers/index.js";import{GameSettingsModal}from "../../helpers/index.js";import{FLAPPY_BIRD_COLORS}from "./FlappyBirdConstants.js";import{GAME_IDS,DEFAULT_GAME_SETTINGS}from "../../services/UtilsService.js";import{playSound,GAME_SOUNDS}from "../../services/SoundsService.js";import{playHaptic,HapticType}from "../../services/HapticsService.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const formatTime = seconds =>{const mins = Math.floor(seconds / 60);const secs = seconds % 60;return `${mins.toString().padStart(2,'0')}:${secs.toString().padStart(2,'0')}`;};export const FlappyBird = React.memo(({settings = DEFAULT_GAME_SETTINGS,onSettingsChange})=>{const isPlaying = useFlappyBirdStore(state => state.isPlaying);const isGameOver = useFlappyBirdStore(state => state.isGameOver);const survivalTime = useFlappyBirdStore(state => state.survivalTime);const initializeGame = useFlappyBirdStore(state => state.initializeGame);const startGame = useFlappyBirdStore(state => state.startGame);const stopGame = useFlappyBirdStore(state => state.stopGame);const resetGame = useFlappyBirdStore(state => state.resetGame);useEffect(()=>{initializeGame();return()=>{stopGame();};},[initializeGame,stopGame]);const prevGameOverRef = useRef(false);useEffect(()=>{if(isGameOver && !prevGameOverRef.current){playSound(GAME_SOUNDS.FLAPPY_BIRD.HIT,settings.enableSounds);playHaptic(HapticType.HEAVY,settings.enableHaptics);}prevGameOverRef.current = isGameOver;},[isGameOver,settings.enableSounds,settings.enableHaptics]);const handleStartGame = useCallback(()=>{initializeGame();startGame(settings);playSound(GAME_SOUNDS.FLAPPY_BIRD.START,settings.enableSounds);playHaptic(HapticType.MEDIUM,settings.enableHaptics);},[initializeGame,startGame,settings]);const handleStopGame = useCallback(()=>{stopGame();},[stopGame]);const handleResetGame = useCallback(()=>{resetGame();initializeGame();},[resetGame,initializeGame]);const gameOverModalProps = useMemo(()=>({isVisible:isGameOver,score:survivalTime,onPlayAgain:handleResetGame,buttonText:"Fly Again!",primaryColor:"rgba(92,184,92,0.5)",borderColor:"rgba(92,184,92,0.5)",buttonColor:"#ffffff",buttonBorderColor:"#ffffff",buttonTextColor:"#5CB85C",scoreLabel:"Survival Time",scoreFormatter:formatTime}),[isGameOver,survivalTime,handleResetGame]);const gameSettingsModalProps = useMemo(()=>({gameId:GAME_IDS.FLAPPY_BIRD,settings,onSettingsChange}),[settings,onSettingsChange]);const offset = settings?.offset ?? 0;const gameControlButtonProps = useMemo(()=>({isPlaying,gameOver:isGameOver,onStartGame:handleStartGame,onStopGame:handleStopGame,startButtonText:"START FLYING",stopButtonText:"STOP GAME",startButtonSubtext:"Tap to flap!",startButtonColor:FLAPPY_BIRD_COLORS.BUTTON_PRIMARY,startButtonBorderColor:FLAPPY_BIRD_COLORS.BUTTON_SECONDARY}),[isPlaying,isGameOver,handleStartGame,handleStopGame]);return _jsx(View,{style:styles.root,children:_jsx(GestureHandlerRootView,{children:_jsx(GameBackground,{offset:offset,children:_jsxs(View,{style:styles.container,children:[_jsx(GameArea,{settings:settings}),_jsx(ScoreBoard,{offset:offset}),_jsx(GameControlButton,{...gameControlButtonProps}),_jsx(GameOverModal,{...gameOverModalProps}),_jsx(GameSettingsModal,{...gameSettingsModalProps})]})})})});});const styles = StyleSheet.create({root:{flex:1},container:{flex:1}});FlappyBird.displayName = 'FlappyBird';