Construire un jeu Pacman avec Bacon.js

La fonction de programmation asynchrone de JavaScript est à la fois une bénédiction et une malédiction car elle provoque "l'enfer de rappel". Bien que les bibliothèques d'utilité telles que Async.JS puissent aider à organiser le code asynchrone, il est toujours difficile de suivre efficacement les flux de contrôle et de déduire la logique du code asynchrone.

Cet article présentera le concept de programmation réactive, qui utilise des bibliothèques telles que Bacon.js pour gérer les caractéristiques asynchrones de JavaScript.

Points clés

La programmation réactive gère les flux de données asynchrones, aidant à gérer les fonctionnalités asynchrones de JavaScript et à éviter "l'enfer de rappel". La bibliothèque telle que Bacon.js peut être utilisée pour mettre en œuvre ce concept.

• Bacon.js est une bibliothèque de programmation réactive qui peut être utilisée pour créer des versions de jeux Pac Man. Cette bibliothèque permet une meilleure gestion des erreurs et la possibilité de combiner des flux de données, offrant un excellent contrôle et une flexibilité.
• Les flux d'événements ou objets observables peuvent être créés et manipulés dans Bacon.js. Vous pouvez vous abonner à ces flux pour observer les événements de manière asynchrone. Cela peut être utilisé pour gérer la saisie des utilisateurs, la logique du jeu et le rendu, par exemple, dans les jeux Pac Man.
• Bacon.js contient également Bacon.property, une propriété réactive qui réagit et se met à jour lorsque des changements se produisent. Cela peut être utilisé pour gérer les changements dans l'état de jeu.

Démarrer la programmation réactive

Processus de programmation réactive du flux de données asynchrones. Il remplace le mode itérateur par le mode observable. Ceci est différent de la programmation impérative, où vous itérez activement les données pour traiter les transactions. Dans la programmation réactive, vous souscrivez aux données et répondez aux événements de manière asynchrone.

Bart de Smet explique ce changement dans son discours. André Staltz explore la programmation réactive dans cet article.

Une fois que vous commencez à utiliser la programmation réactive, tout devient un flux de données asynchrones: bases de données sur le serveur, les événements de souris, les promesses et les demandes de serveur. Cela vous permet d'éviter ce qu'on appelle "l'enfer de rappel" et de fournir une meilleure gestion des erreurs. Une autre caractéristique puissante de cette approche est la capacité de combiner des flux de données, ce qui vous donne un grand contrôle et une flexibilité. Jafar Husain explique ces concepts dans son discours.

Bacon.js est une bibliothèque de programmation réactive qui est une alternative à RXJS. Dans la section suivante, nous utiliserons Bacon.js pour construire une version largement connue du jeu Pac-Man.

Paramètres du projet

Pour installer bacon.js, vous pouvez utiliser Bower pour exécuter la commande suivante sur la CLI:

Après l'installation de la bibliothèque, vous pouvez commencer à utiliser la programmation réactive.

$ bower install bacon

Pac Man Game API et unicodetiles.js

Pour le bien de l'apparence et de la sensation, j'utiliserai un système basé sur le texte, donc je n'ai pas à faire face aux ressources et aux sprites. Pour éviter de le créer moi-même, j'utiliserai une grande bibliothèque Unicodetiles.js.

Tout d'abord, j'ai créé une classe appelée PacMangame qui gère la logique de jeu. Il fournit les méthodes suivantes:

• PacMangame (parent): Créez un objet de jeu Pacman
• start (): Démarrez le jeu
• tick (): Mettez à jour la logique du jeu et rendez le jeu
• spawnghost (couleur): générer un nouveau fantôme
• UpdateGhosts (): Mettez à jour tous les fantômes du jeu
• MOVEPACMAN (P1V): déplacer Pacman dans la direction spécifiée

De plus, il expose le rappel suivant:

• onpacManmove (movvev): si présent, appelez
lorsque l'utilisateur appuye sur le bouton et demande à Pacman de se déplacer.

Donc, pour utiliser cette API, nous commencerons le jeu, appelez régulièrement Spawnghost pour générer des fantômes, écouter les rappels d'ONPACMove, et chaque fois que cela se produit, appelez MovePacman pour déplacer réellement Pacman. Nous appelons également UpdateGhosts régulièrement pour mettre à jour le mouvement du fantôme. Enfin, nous appelons Tick régulièrement pour mettre à jour les modifications. Surtout, nous utiliserons Bacon.js pour nous aider à gérer les événements.

Avant de commencer, créons l'objet de jeu:

$ bower install bacon

Nous créons un nouveau PacMangame et passons dans un objet Parent Dom ParentDiv, où le jeu sera rendu. Maintenant, nous sommes prêts à construire notre jeu.

flux d'événements ou objet observable

Le flux d'événements est un objet observable auquel vous pouvez vous abonner pour observer les événements de manière asynchrone. Vous pouvez observer ces trois types d'événements en utilisant les trois méthodes suivantes:

• observable.onvalue (f): écoutez les événements de valeur, c'est le moyen le plus simple de gérer les événements.
• observable.onerror (f): écoutez les événements d'erreur, utilisés pour gérer les erreurs dans le flux.
• observable.onend (f): écoutez les événements qui se sont terminés dans le flux et n'ont plus de valeurs de déplacement disponibles.

Créer un flux

Maintenant que nous avons compris l'utilisation de base des flux d'événements, voyons comment créer un flux d'événements. Bacon.js fournit plusieurs méthodes que vous pouvez utiliser pour créer des flux d'événements à partir d'événements jQuery, Ajax Promise, Dom EventTarget, des rappels simples et même des tableaux.

Un autre concept utile sur le flux d'événements est le concept du temps. Autrement dit, les événements peuvent arriver à un moment donné à l'avenir. Par exemple, ces méthodes créent un flux d'événements qui passe des événements dans un certain intervalle de temps:

• bacon.interval (intervalle, valeur): répète cette valeur infiniment à un intervalle donné.
• Bacon.Repeatly (intervalle, valeurs): Répétez ces valeurs infiniment à un intervalle donné.
• Bacon.later (retard, valeur): génère une valeur après un retard donné.

Pour plus de contrôle, vous pouvez utiliser Bacon.Frombinder () pour créer votre propre flux d'événements. Nous le montrerons dans le jeu en créant une variable MoveStream qui générera des événements pour nos mouvements de Pac Man.

var game = new PacmanGame(parentDiv);

Nous pouvons appeler un puits avec une valeur qui enverra un événement que l'observateur peut écouter. L'appel à couler est dans notre rappel OnPacManmove, c'est-à-dire chaque fois que l'utilisateur appuie sur une touche et demande à Pac-Man de se déplacer. Nous créons donc un objet observable qui émet des événements sur les demandes de déplacement de Pac-Man.

Notez que nous avons appelé l'évier en utilisant un mouvement simple de valeur. Cela utilisera la valeur MoveV pour pousser l'événement Move. Nous pouvons également pousser des événements tels que Bacon.error ou Bacon.end.

Créons un autre flux d'événements. Cette fois, nous voulons émettre des notifications pour générer des événements fantômes. Nous allons créer une variable SpawnStream pour ceci:

$ bower install bacon

Bacon.Sealimental () crée un flux qui passe les valeurs à des intervalles donnés. Dans notre cas, il passera une couleur fantôme tous les 800 millisecondes. Nous avons également un appel à la méthode de retard (). Il retarde le flux, donc l'événement commencera à être émis après un retard de 2,5 secondes.

Méthodes et diagrammes de marbre sur les flux d'événements

Dans cette section, je vais énumérer des méthodes plus pratiques qui peuvent être utilisées pour les flux d'événements:

• observable.map (f): mapper la valeur et renvoyer un nouveau flux d'événements.
• observable.filter (f): filtrez la valeur en utilisant le prédicat donné.
• Observable.Take WHEL (F): obtient lorsque le prédicat donné est vrai.
• observable.skip (n): ignorez les premiers éléments du flux.
• observable.throttle (retard): étrangler le flux à travers un certain retard.
• observable.debounce (retard): agite le flux à travers un certain retard.
• observable.scan (semence, f) Scannez le flux avec la valeur de graines et la fonction d'accumulation donnée. Cela simplifie le flux vers une seule valeur.

Pour plus de méthodes de streaming d'événements, veuillez vous référer à la page de documentation officielle. Vous pouvez utiliser un diagramme en marbre pour visualiser la différence entre l'exécution et la déjiterie:

var game = new PacmanGame(parentDiv);

Comme vous pouvez le voir, la limitation de la limitation est systématiquement exercé des événements, tandis que la déjettage n'émet des événements qu'après une "période de silence" donnée.

Ces utilitaires sont simples et puissants, capables de conceptualiser et de contrôler le flux, contrôlant ainsi les données en leur sein. Je recommande de regarder cette conversation sur la façon dont Netflix utilise ces méthodes simples pour créer des boîtes de saisie semi-automatique.

observer le flux d'événements

Jusqu'à présent, nous avons créé et manipulé le flux d'événements et nous allons maintenant observer les événements en abonnement au flux.

Passez en revue le movestream et le spawnstream que nous avons créé plus tôt. Abonnez-vous à eux maintenant:

var moveStream = Bacon.fromBinder(function(sink) {
   game.onPacmanMove = function(moveV) {
      sink(moveV);
   };
});

Bien que vous puissiez utiliser Stream.Subscribe () pour vous abonner aux flux, vous pouvez également utiliser Stream.Onvalue (). La différence est que l'abonnement émettra ces trois types d'événements que nous avons vus auparavant, tandis que OnValue n'émettra que des événements de type bacon.Next. Autrement dit, il ignorera les événements Bacon.Error et Bacon.end.

Lorsqu'un événement apparaît sur Spawnstream (accident tous les 800 millisecondes), sa valeur sera l'une des couleurs fantômes, que nous utilisons pour générer des fantômes. Lorsqu'un événement apparaît sur MoveStream, n'oubliez pas que cela se produit lorsque l'utilisateur appuie sur une touche pour déplacer Pac Man. Nous appelons Game.Movepacman avec la direction MoveV: il apparaît avec l'événement, donc Pacman se déplace.

combinant les flux d'événements et le bacon.bus

Vous pouvez combiner des flux d'événements pour créer d'autres flux. Il existe de nombreuses façons de combiner des flux d'événements, et voici plusieurs d'entre eux:

• Bacon.CombineAsArray (Streams): un tableau de flux d'événements combinés afin que la valeur du flux de résultats soit une valeur.
• bacon.zipasArray (Streams): comprimez le flux dans un nouveau flux. Les événements de chaque ruisseau sont combinés par paires.
• Bacon.Competemplate (modèle): Utilisez des objets de modèle pour combiner des flux d'événements.

Regardons un exemple de bacon.combinetemplate:

$ bower install bacon

Comme vous pouvez le voir, nous utilisons des modèles pour combiner des flux d'événements (c'est-à-dire le mot de passe, le nom d'utilisateur, le nom de premier nom et le nom de lastnom) dans un flux d'événements combiné appelé LoginInfo. Chaque fois qu'un flux d'événements reçoit un événement, le flux LoginInfo émet un événement, combinant tous les autres modèles dans un seul modèle de modèle.

bacon.js Il existe également une méthode de combinaison de flux, à savoir Bacon.bus (). Bacon.bus () est un flux d'événements qui vous permet de pousser les valeurs dans le flux. Il permet également à d'autres flux d'être insérés dans le bus. Nous l'utiliserons pour construire la dernière partie du jeu:

var game = new PacmanGame(parentDiv);

Maintenant, nous utilisons Bacon.Interval pour créer un autre flux - GhostStream. Ce flux émettra 0 toutes les 1 secondes. Cette fois, nous nous abondissons et appelons le jeu. Updateghosts pour déplacer le fantôme. C'est pour déplacer le fantôme toutes les 1 secondes. Veuillez noter que le jeu. Les deux flux mettent à jour le jeu et enfin appelez le jeu. flux.

Pour combiner des flux, nous pouvons utiliser Bacon.bus. Ceci est le dernier flux d'événements de notre jeu, que nous appelons combinés. Ensuite, nous y insérons MoveStream et Ghoststream, et nous nous abons finalement et appelons le jeu.

c'est tout, nous avons fini. La seule chose qui reste est de démarrer le jeu en utilisant Game.start ();.

bacon.property et plus d'exemples

Bacon.Property est une propriété réactive. Imaginez qu'une propriété réactive est la somme d'un tableau. Lorsque nous ajoutons un élément au tableau, l'attribut réactif réagira et se mettra à jour. Pour utiliser Bacon.Property, vous pouvez vous abonner et écouter les modifications, ou utiliser la méthode Property.Assign (OBJ, méthode), qui appelle la méthode de l'objet donné lorsque la propriété change. Voici un exemple de la façon d'utiliser Bacon.property:

var moveStream = Bacon.fromBinder(function(sink) {
   game.onPacmanMove = function(moveV) {
      sink(moveV);
   };
});

Tout d'abord, nous créons un flux d'événements qui génère les valeurs du tableau donné à 1 seconde intervalles - 1, 2, 3 et 4, puis nous créons une propriété réactive qui est le résultat de numérisation. Cela attribuera des valeurs de 1, 3, 6 et 10 pour réactiver.

Apprenez plus d'informations et de démonstration en temps réel

Dans cet article, nous introduisons une programmation réactive à l'aide de Bacon.js en construisant des jeux Pac Man. Il simplifie notre conception de jeu et nous offre plus de contrôle et de flexibilité grâce au concept de streaming d'événements. Le code source complet est disponible sur GitHub, et une démo en direct peut être trouvée ici.

Voici quelques liens plus utiles:

• Bacon.js API RÉFÉRENCE
• bacon.js Introduction vidéo
• Site Web RXJS
• highland.js Advanced Streaming Library
• "Programmation de jeux réactive pour les hippies perspicaces" par Bodil Stokke

FAQ sur la construction de Pac-Man avec bacon.js

Comment puis-je commencer à construire mon propre jeu Pac Man à l'aide de Bacon.js?

Pour commencer à construire votre propre jeu Pac Man avec Bacon.js, vous devez d'abord comprendre les bases de la programmation JavaScript et fonctionnelle (FRP). Une fois que vous avez maîtrisé ces connaissances, vous pouvez commencer à créer un environnement de développement. Vous devez installer Node.js et NPM (Node Package Manager) sur votre ordinateur. Après cela, vous pouvez installer Bacon.js à l'aide de NPM. Une fois que vous avez tout configuré, vous pouvez commencer à écrire du code de jeu. Vous pouvez suivre les tutoriels de notre site Web pour un guide étape par étape sur la façon de créer des jeux Pac Man à l'aide de Bacon.js.

Quel est le rôle de Bacon.js dans la construction de jeux Pac Man?

Bacon.js est une bibliothèque de programmation réactive fonctionnelle (FRP) pour JavaScript. Il vous permet de gérer des événements asynchrones tels que la saisie de l'utilisateur de manière plus gérable et lisible. Dans la construction de jeux Pac Man, Bacon.js peut être utilisé pour traiter la contribution des utilisateurs (tels que les événements de clavier), la logique de jeu (comme les mouvements de Pac Man et Ghost) et rendent l'état de jeu à l'écran.

Puis-je personnaliser le jeu Pac Man construit à l'aide de Bacon.js?

bien sûr! Après avoir construit un jeu de base Pac Man avec Bacon.js, vous pouvez le personnaliser à votre goût. Vous pouvez modifier les effets visuels du jeu, ajouter de nouvelles fonctionnalités et même modifier les règles du jeu. Les possibilités sont infinies, et la meilleure partie est que vous pouvez tout faire tout en bénéficiant de la puissance et de la simplicité de Bacon.js et de la programmation fonctionnelle fonctionnelle.

Comment déboguer les jeux Pac-Man construits à l'aide de Bacon.js?

Le débogage des jeux Pac-Man construits avec Bacon.js est similaire à la débogage de toute autre application JavaScript. Vous pouvez utiliser les outils de développeur du navigateur pour vérifier le code, définir des points d'arrêt et parcourir le code. De plus, Bacon.js fournit une méthode appelée "onerror" que vous pouvez utiliser pour gérer les erreurs dans les flux d'événements.

Comment optimiser les performances des jeux Pac Man construits avec Bacon.js?

Il existe plusieurs façons d'optimiser les performances des jeux Pac Man construits avec Bacon.js. Une façon consiste à minimiser le nombre de mises à jour DOM. Vous pouvez utiliser la fonction "Combinetemplate" de Bacon.js pour y parvenir en combinant plusieurs flux en un seul flux qui met à jour le DOM. Une autre façon consiste à utiliser la fonction "FlatMap" pour éviter de créer des flux inutiles.

Puis-je construire d'autres types de jeux à l'aide de Bacon.js?

Oui, vous pouvez utiliser Bacon.js pour construire n'importe quel type de jeu qui doit gérer les événements asynchrones. Cela comprend non seulement des jeux d'arcade classiques comme Pac Man, mais aussi des jeux plus complexes tels que des jeux de stratégie en temps réel ou des jeux en ligne multijoueurs.

Comment ajouter des fonctionnalités multijoueurs au jeu Pac Man construit avec Bacon.js?

L'ajout de fonctionnalités multijoueurs au jeu Pac Man construit avec Bacon.js nécessite un serveur pour gérer la communication entre les joueurs. Vous pouvez utiliser Node.js et WebSockets pour cela. Sur le client, vous utiliserez Bacon.js pour gérer les messages WebSocket entrants et sortants.

Puis-je déployer le jeu Pac Man construit avec Bacon.js sur mon site Web?

Oui, vous pouvez déployer des jeux Pac Man construits avec Bacon.js sur votre site Web. Vous devez regrouper votre code JavaScript avec des outils comme WebPack ou Browserify, puis vous pouvez héberger le code groupé et les ressources de jeu tels que les images et les sons sur votre serveur Web.

Puis-je utiliser Bacon.js avec d'autres bibliothèques ou frameworks JavaScript?

Oui, vous pouvez utiliser Bacon.js avec d'autres bibliothèques ou frameworks JavaScript. Bacon.js est une bibliothèque autonome, donc elle ne dépend pas d'autres bibliothèques ou frameworks. Cependant, il peut être utilisé conjointement avec d'autres bibliothèques ou frameworks pour créer des applications plus complexes.

Où puis-je en savoir plus sur la programmation réactive fonctionnelle (FRP) et Bacon.js?

Il existe de nombreuses ressources disponibles en ligne pour apprendre la programmation réactive fonctionnelle (FRP) et Bacon.js. Vous pouvez commencer par la documentation officielle de Bacon.js, qui fournit un guide complet des capacités et des API de la bibliothèque. Il existe également de nombreux tutoriels, articles de blog et cours en ligne qui couvrent plus en détail FRP et Bacon.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!