Comment créer un jeu de serpent avec React, Redux et Redux Saga ?

    clearBoard(context) ;
    
    drawObject(context, snake1, "#91C483") ; //Dessine le serpent à la position requise
    
    drawObject(context, [pos], "#676FA3") ; //Dessine l'objet au hasard
}, [context]) ;`Dessine des fruits au hasard avec le serpent

Une fois que nous aurons effectué ces changements, notre tableau ressemblera à ce qui suit :

Le score du jeu est calculé en fonction du nombre de fruits que le serpent a consommés sans se heurter à lui-même ou à la limite de la boîte. Si le serpent consomme le fruit, la taille du serpent augmente. S’il entre en collision avec le bord de la boîte, alors le jeu est terminé.

Maintenant que nous savons quels sont nos critères pour calculer le score, voyons comment calculer la récompense.

Calcul de la récompense

La récompense après que le serpent ait consommé le fruit est la suivante :

1. Augmente la taille du serpent.
2. Augmente le score.
3. Place le nouveau fruit à un autre endroit aléatoire.

Si le serpent consomme le fruit, alors nous devons augmenter la taille du serpent. C’est une tâche très simple, nous pouvons simplement ajouter les nouvelles coordonnées x et y qui sont inférieures à 20 du dernier élément du tableau d’état global du serpent. Par exemple, si le serpent a les coordonnées suivantes :

{ serpent : [ { x : 580, y : 300 }, { x : 560, y : 300 }, { x : 540, y : 300 }, { x : 520, y : 300 }, { x : 500, y : 300 }, ], } Nous devrions simplement ajouter l’objet suivant dans le tableau du serpent : { x : 480, y : 280 }

De cette façon, nous augmentons la taille du serpent et nous ajoutons la nouvelle partie/bloc à la fin de celui-ci. Pour que cela soit mis en œuvre via Redux et redux-saga, nous aurons besoin de l’action et du créateur d’action suivants :

`export const INCREMENT_SCORE = “INCREMENT_SCORE” ; //action

export const increaseSnake = () => ({ //action creator type : INCREASE_SNAKE }) ;Nous allons également mettre à jour notregameReducer` pour tenir compte de ces changements. Nous allons ajouter le cas suivant :

cas INCREASE_SNAKE : const snakeLen = state.snake.length ; return { ...état, serpent : [ ...état.serpent, { x : state.snake[snakeLen - 1].x - 20, y : state.snake[snakeLen - 1].y - 20, }, ], } ; Dans notre composant CanvasBoard, nous allons d’abord introduire une variable d’état appelée isConsumed. Cette variable va vérifier si le fruit est consommé ou non.

const [isConsumed, setIsConsumed] = useState(false) ; Dans notre hook useEffect où nous dessinons notre serpent et le fruit juste en dessous, nous allons ajouter la condition suivante :

//Quand l'objet est consommé if (snake1[0].x === pos ?.x && snake1[0].y === pos ?.y) { setIsConsumed(true) ; } La condition ci-dessus vérifiera si la tête du serpent snake [0] est égale à la pos, ou la position du fruit. Si c’est le cas, alors la variable d’état isConsumed sera mise à true.

Une fois le fruit consommé, nous devons augmenter la taille du serpent. Nous pouvons le faire facilement via un autre useEffect. Créons un autre useEffect et appelons le créateur d’action increaseSnake:

//utilisationEffect2 useEffect(() => { if (isConsumed) { //Augmente la taille du serpent lorsque l'objet est consommé avec succès dispatch(increaseSnake()) ; } }, [isConsumed]) ; Maintenant que nous avons augmenté la taille du serpent, voyons comment nous pouvons mettre à jour le score et générer un nouveau fruit à une autre position aléatoire.

Pour générer un nouveau fruit à une autre position aléatoire, nous mettons à jour la variable d’état pos qui va réexécuter le useEffect1 et dessiner l’objet à pos. Nous devons mettre à jour notre useEffect1 avec une nouvelle dépendance de pos et mettre à jour useEffect2 comme suit :

`useEffect(() => { //Génère un nouvel objet if (isConsumed) { const posi = generateRandomPosition(width - 20, height - 20) ; setPos(posi) ; setIsConsumed(false) ;

  //Augmente la taille du serpent lorsque l'objet est consommé avec succès
  dispatch(increaseSnake()) ;
}

}, [isConsumed, pos, height, width, dispatch]) ;` Une dernière chose à faire dans ce système de récompense est de mettre à jour le score chaque fois que le serpent mange le fruit. Pour ce faire, suivez les étapes ci-dessous :

1. Introduire une nouvelle variable d’état globale appelée score. Mettez à jour notre état global comme ci-dessous dans le fichier reducers/index.ts:

`export interface IGlobalState { serpent : ISnakeCoord[] | [] ; disallowedDirection : string ; score : nombre ; }

const globalState : IGlobalState = { serpent : [ { x : 580, y : 300 }, { x : 560, y : 300 }, { x : 540, y : 300 }, { x : 520, y : 300 }, { x : 500, y : 300 }, ], disallowedDirection : "", score : 0, } ;2. Créez l’action et le créateur d’action suivants dans notre fichieractions/index.ts`:

`export const INCREMENT_SCORE = “INCREMENT_SCORE” ; //action

//action créateur : export const scoreUpdates = (type : string) => ({ type }) ;3. Ensuite, nous mettons à jour notre réducteur pour gérer l’actionINCREMENT_SCORE. Cela va simplement incrémenter le scoreglobalde` l’état de un.

cas INCREMENT_SCORE : return { ...état, score : state.score + 1, } ; 4. Ensuite, nous mettons à jour notre état de score, en envoyant l’action INCREMENT_SCORE chaque fois que le serpent attrape le fruit. Pour cela, nous pouvons mettre à jour notre useEffect2 comme suit :

`useEffect(() => { //Génère un nouvel objet if (isConsumed) { const posi = generateRandomPosition(width - 20, height - 20) ; setPos(posi) ; setIsConsumed(false) ;

  //Augmente la taille du serpent lorsque l'objet est consommé avec succès
  dispatch(increaseSnake()) ;

  //Incrémente le score
  dispatch(scoreUpdates(INCREMENT_SCORE)) ;
}

}, [isConsumed, pos, height, width, dispatch]) ;5. Enfin, nous créons un composant appeléScoreCard. Il affichera le score actuel du joueur. Nous allons le stocker dans le fichier components/ScoreCard.tsx`.

`import { Heading } de “@chakra-ui/react” ; import { useSelector } de “react-redux” ; import { IGlobalState } de ”../store/reducers” ;

const ScoreCard = () => { const score = useSelector((state : IGlobalState) => state.score) ; return ( Score actuel : {score} ) ; }

export default ScoreCard ;Ensuite, nous devrons également ajouter le composantScoreCarddans le fichierApp.tsx` pour l’afficher sur notre page.

`import { ChakraProvider, Container, Heading } from “@chakra-ui/react” ; import { Provider } de “react-redux” ; import CanvasBoard de ”./components/CanvasBoard” ; import ScoreCard de ”./components/ScoreCard” ; import store de ”./store” ;

const App = () => { return (

      JEU DU SERPENT
      
      
    
  

) ; } ;

export default App ;` Une fois que tout est en place, notre serpent aura un système de récompense complet qui augmente la taille du serpent pour mettre à jour le score.

Dans cette section, nous allons voir comment implémenter la détection de collision pour notre jeu de serpent.

Dans notre jeu Snake, si une collision est détectée, le jeu est terminé, c’est-à-dire qu’il s’arrête. Il y a deux conditions pour que les collisions se produisent :

1. Le serpent entre en collision avec les limites de la boîte, ou
2. Le serpent entre en collision avec lui-même.

Examinons la première condition. Supposons que la tête du serpent touche les limites de la boîte. Dans ce cas, nous arrêtons immédiatement le jeu.

Pour que cette condition soit intégrée à notre jeu, nous devons procéder comme suit :

1. Créez une action et un créateur d’action comme ci-dessous :

`export const STOP_GAME = “STOP_GAME” ; //action

//créateur d’action export const stopGame = () => ({ type : STOP_GAME }) ;2. Nous devons également mettre à jour notre fichiersagas/index.ts. Nous allons nous assurer que saga arrête de distribuer des actions lorsque l’action STOP_GAME` est rencontrée.

`export function* moveSaga(params : { type : string ; payload : ISnakeCoord ; }) : Générateur< | PutEffect<{ type : string ; payload : ISnakeCoord }> | PutEffect<{ type : string ; payload : string }> | CallEffect

{ while (params.type !== STOP_GAME) { yield put({ type : params.type.split("")[1], payload : params.payload, }) ; switch (params.type.split("")[1]) { cas DROIT : yield put(setDisDirection(LEFT)) ; break ;

  cas GAUCHE :
    yield put(setDisDirection(RIGHT)) ;
    pause ;

  cas UP :
    yield put(setDisDirection(DOWN)) ;
    pause ;

  cas DOWN :
    yield put(setDisDirection(UP)) ;
    pause ;
}
yield delay(100) ;

} }

function* watcherSagas() { yield takeLatest( [MOVE_RIGHT, MOVE_LEFT, MOVE_UP, MOVE_DOWN, STOP_GAME], moveSaga ) ; }` 3. Enfin, nous devons mettre à jour notre useEffect1 en ajoutant la condition suivante :

if ( //Check si la tête du serpent est hors des limites de l'obox snake1[0].x >= largeur || snake1[0].x <= 0 || snake1[0].y <= 0 || snake1[0].y >= hauteur ) { setGameEnded(true) ; dispatch(stopGame()) ; window.removeEventListener("keypress", handleKeyEvents) ; } Nous supprimons également l’écouteur d’événements handleKeyEvents. Cela permettra de s’assurer qu’une fois le jeu terminé, le joueur ne pourra plus déplacer le serpent.

Enfin, voyons comment nous pouvons détecter l’auto-collision du serpent. Nous allons utiliser une fonction utilitaire appelée hasSnakeCollided. Elle accepte deux paramètres : le premier est le tableau de serpents, et le second est la tête du serpent. Si la tête du serpent touche une partie de lui-même, elle renvoie true ou false.

La fonction hasSnakeCollided ressemblera à ce qui suit :

`export const hasSnakeCollided = ( serpent : IObjectBody[], currentHeadPos : IObjectBody ) => { let flag = false ; snake.forEach((pos : IObjectBody, index : nombre) => { si ( pos.x === currentHeadPos.x && pos.y === currentHeadPos.y && index !== 0 ) { flag = true ; } }) ;

retourne le drapeau ; } ;` Nous devrons peut-être légèrement mettre à jour notre useEffect1 en mettant à jour la condition de détection de collision comme ceci :

`si ( //Chèque si le serpent est entré en collision avec lui-même hasSnakeCollided(snake1, snake1[0]) ||

  //Contrôle si la tête du serpent est en dehors des limites de l'obox
  snake1[0].x >= largeur ||
  snake1[0].x <= 0 ||
  snake1[0].y <= 0 ||
  snake1[0].y >= hauteur
) {
  setGameEnded(true) ;
  dispatch(stopGame()) ;
  window.removeEventListener("keypress", handleKeyEvents) ;
}`

Notre useEffect1 ressemblera finalement à ce qui suit :

`//utiliserEffet1 useEffect(() => { //Dessinez sur le canevas à chaque fois setContext(canvasRef.current && canvasRef.current.getContext(“2d”)) ; clearBoard(context) ; drawObject(context, snake1, “#91C483”) ; drawObject(context, [pos], “#676FA3”) ; //Drawn object randomly

//Quand l'objet est consommé
if (snake1[0].x === pos ?.x && snake1[0].y === pos ?.y) {
  setIsConsumed(true) ;
}

if (
  hasSnakeCollided(snake1, snake1[0]) ||
  snake1[0].x >= largeur ||
  snake1[0].x <= 0 ||
  snake1[0].y <= 0 ||
  snake1[0].y >= hauteur
) {
  setGameEnded(true) ;
  dispatch(stopGame()) ;
  window.removeEventListener("keypress", handleKeyEvents) ;
} else setGameEnded(false) ;

}, [context, pos, snake1, height, width, dispatch, handleKeyEvents]) ;` Notre jeu ressemblera à ce qui suit une fois que nous aurons ajouté le système de détection des collisions :

Nous sommes maintenant dans la phase finale du jeu ! Notre dernier composant sera le composant Instruction. Il comprendra des instructions sur le jeu, comme la condition initiale du jeu, les clés à utiliser et un bouton de réinitialisation.

Commençons par créer un fichier appelé components/Instructions.tsx. Placez le code ci-dessous dans ce fichier :

`import { Box, Button, Flex, Heading, Kbd } de “@chakra-ui/react” ;

export interface IInstructionProps { resetBoard : () => void ; } const Instruction = ({ resetBoard } : IInstructionProps) => (

  Comment jouer


NOTE : Commencez le jeu en appuyant sur d


  
    
     w Déplacement vers le haut
    
    
     a Déplacement vers la gauche
    
    
     s Déplacement vers le bas
    
    
     d Déplacement vers la droite
    
  
  
     resetBoard()}>Réinitialiser le jeu
  

) ;

export default InstructionLe composantInstructionaccepteraresetBoard` comme prop qui est une fonction qui aidera l’utilisateur lorsque le jeu sera terminé ou lorsqu’il voudra réinitialiser le jeu.

Avant de nous plonger dans la fonction resetBoard, nous devons effectuer les mises à jour suivantes dans notre magasin Redux et notre saga :

1. Ajoutez l’action et le créateur d’action suivants dans le fichier actions/index.ts:

`export const RESET_SCORE = “RESET_SCORE” ; //action export const RESET = “RESET” ; //action

//Action creator : export const resetGame = () => ({ type : RESET }) ;2. Ajoutez ensuite la condition suivante dans notrefichier sagas/index.ts. Nous allons nous assurer que saga cesse de distribuer des actions lorsque les actions RESETetSTOP_GAME` sont rencontrées.

`export function* moveSaga(params : { type : string ; payload : ISnakeCoord ; }) : Générateur< | PutEffect<{ type : string ; payload : ISnakeCoord }> | PutEffect<{ type : string ; payload : string }> | CallEffect

{ while (params.type !== RESET && params.type !== STOP_GAME) { yield put({ type : params.type.split("")[1], payload : params.payload, }) ; switch (params.type.split("")[1]) { cas DROIT : yield put(setDisDirection(LEFT)) ; break ;

  cas GAUCHE :
    yield put(setDisDirection(RIGHT)) ;
    pause ;

  cas UP :
    yield put(setDisDirection(DOWN)) ;
    pause ;

  cas DOWN :
    yield put(setDisDirection(UP)) ;
    pause ;
}
yield delay(100) ;

} }

function* watcherSagas() { yield takeLatest( [MOVE_RIGHT, MOVE_LEFT, MOVE_UP, MOVE_DOWN, RESET, STOP_GAME], moveSaga ) ; }3. Enfin, nous mettons à jour notre fichierreducers/index.tspour le casRESET_SCORE` comme suit :

cas RESET_SCORE : return { ...state, score : 0 } ; Une fois que nos sagas et nos reducers sont mis à jour, nous pouvons jeter un coup d’œil aux opérations que le callback resetBoard effectuera.

La fonction resetBoard effectue les opérations suivantes :

1. Supprime l’écouteur d’événements handleKeyEvents
2. exécute les actions nécessaires à la réinitialisation du jeu.
3. Distribue l’action pour réinitialiser le score.
4. Nettoie le canevas.
5. Dessine à nouveau le serpent à sa position initiale
6. Dessine le fruit à une nouvelle position aléatoire.
7. Enfin, ajoute l’écouteur d’événements handleKeyEvents pour l’événement d’appui sur la touche.

Voici à quoi ressemblera notre fonction resetBoard:

const resetBoard = useCallback(() => { window.removeEventListener("keypress", handleKeyEvents) ; dispatch(resetGame()) ; dispatch(scoreUpdates(RESET_SCORE)) ; clearBoard(context) ; drawObject(context, snake1, "#91C483") ; drawObject( contexte, [generateRandomPosition(width - 20, height - 20)], "#676FA3" ) ; //Dessine l'objet de façon aléatoire window.addEventListener("keypress", handleKeyEvents) ; }, [context, dispatch, handleKeyEvents, height, snake1, width]) ; Vous devez placer cette fonction à l’intérieur du composant CanvasBoard et passer la fonction resetBoard en tant que prop à la fonction Instruction comme ci-dessous :

<> Une fois cette fonction placée, le composant Instruction sera configuré comme ci-dessous :

Si vous avez suivi jusqu’à ce point, alors félicitations ! Vous avez réussi à créer un jeu de serpent amusant avec React, Redux et redux-sagas. Une fois que tous ces éléments sont connectés, votre jeu ressemblera à ce qui suit :

Voilà donc comment vous pouvez construire un jeu Snake à partir de rien. Vous pouvez trouver le code source complet du jeu dans le dépôt ci-dessous :

• Construisez le jeu de serpent avec three.js
• Ajouter un tableau des scores en ligne

Merci de votre lecture !

FAQ

Qu’est-ce que Redux ?

Redux est une bibliothèque JavaScript qui permet de gérer les états d’une application de manière prévisible et efficace.

Comment utiliser Redux Saga ?

Redux Saga est une bibliothèque qui permet de gérer les actions asynchrones dans une application Redux. Elle permet de définir des workflows complexes et de gérer les erreurs de manière efficace.

Quels sont les avantages de créer un jeu de serpent avec React ?

Les avantages de créer un jeu de serpent avec React incluent la possibilité de créer des applications web interactives et réactives, ainsi que la possibilité d’utiliser des bibliothèques telles que Redux et Redux Saga pour gérer les états et les actions du jeu.

Comment déboguer un jeu de serpent créé avec React ?

Pour déboguer un jeu de serpent créé avec React, vous pouvez utiliser des outils tels que le débogueur de Chrome ou des bibliothèques de débogage telles que Redux DevTools.

Quels sont les prérequis pour créer un jeu de serpent avec React ?

Les prérequis pour créer un jeu de serpent avec React incluent des connaissances en React, Redux et Redux Saga, ainsi que des compétences en programmation JavaScript.

À lire aussi sur le site

• XChat arrive sur iOS : découvrez toutes ses fonctionnalités et comment y accéder
• Avec Muse Spark, Meta ambitionne de rattraper son retard face à OpenAI et Anthropic
• Instagram offre désormais la possibilité de corriger ses commentaires après leur publication