Création d'un jeu Windows 8 simple avec JavaScript: Logique de jeu

Les plats clés

• La boucle de jeu, qui est le rythme cardiaque de tout jeu, est une fonction qui fonctionne plusieurs fois par seconde et a deux travaux principaux
• Mise à jour de ce qui se passe et dessiner la nouvelle scène. La classe de ticker Eneljs est utilisée pour gérer le calendrier de la boucle de jeu, faire une pause / reprendre la boucle de jeu et mesurer le temps écoulé.
• La logique de jeu implique d'ajouter des fonctions pour tirer des prises de vue, de mettre à jour l'affichage, de déplacer la prise de vue, de gérer les coups et de terminer le jeu. Le easelJS DisplayObjects prend en charge une méthode HitTest (), ce qui facilite la voir si un point est sur la position de l'objet actuel.

Ceci est le troisième d'une série de quatre articles sur quatre semaines qui vous montrera comment créer un simple jeu Windows 8, en utilisant HTML5, JavaScript, Winjs et CreateJS. Le jeu est basé sur le jeu de XNA «Catapult Wars Lab». Nous réutiliserons les actifs de ce jeu alors que nous développons une nouvelle version pour Windows 8 basée sur les technologies Web. Dans cet article, nous donnerons vie aux choses avec une logique de jeu et un javascript.

La boucle de jeu

Le rythme cardiaque de n'importe quel jeu est la boucle de jeu.  C'est une fonction qui s'exécute plusieurs fois par seconde et a deux travaux principaux - mettez à jour ce qui se passe, puis dessinez la nouvelle scène. Dans la partie 2, nous avons déjà mis le contour en place: Maintenant, la question est de savoir comment démarrer la fonction GameLoop () et le faire fonctionner plusieurs fois par seconde?

Classe de ticker Easeljs

Heureusement, Easeljs a une classe de ticker qui a certaines fonctionnalités que nous utiliserons:

• Gérer le timing de la boucle de jeu
• pause / reprendre la boucle de jeu
• Mesurer le temps écoulé

C'est une classe statique, donc nous pouvons simplement commencer à l'utiliser.  Dans Defauft.js, ajoutez une nouvelle fonction startGame () et appelez-la à la fin de PrepareGame (): Ici, nous disons à Ticker d'utiliser Window. RequestanimationFrame est une API relativement nouvelle pour les applications Web qui aide à garantir que le travail ne se fait pas inutilement.  Pour comprendre pourquoi cela peut être mieux que de définir une minuterie fixe (par exemple avec Settimeout ()), consultez l'échantillon de requête Adopraire sur le site du lecteur de test IE. Chaque fois que la demande de demandes est prête, notre boucle de jeu fonctionnera.

"Prêt, vise, tirez!"

D'accord, maintenant nous avons un jeu avec une boucle de jeu en cours d'exécution, il est donc temps d'ajouter un peu de plaisir! Chaque joueur / catapulte va tirer les munitions / rocher vers l'autre.  Nous devons savoir si un coup de feu vole actuellement, qui est le tour et comment le tir se déplace. Tout d'abord, ajoutons plus de variables à Default.js: Utilisons maintenant certains d'entre eux en ajoutant ce qui suit à la fonction Update (): Pour l'instant, les deux joueurs tirent automatiquement (à une vitesse aléatoire) à leur tour.  L'ammobitmap est déplacé vers le centre supérieur de la catapulte de tir, et Shotvelocity reçoit une valeur aléatoire dans une plage délimitée (ajustée pour la résolution d'écran.) Nous allons également ajouter une fonction Fireshot () pour montrer le tir et dire au jeu que c'est dans l'air:  

Mise à jour de l'affichage

Avant de déplacer le tir dans les airs, concentrons-nous sur la 2ème moitié de l'équation de boucle de jeu - dessin à l'écran.  Cela peut souvent être très complexe, mais le stade de la ponderie s'occupe de tirer notre contenu (tous les enfants - bitmaps, texte, etc. - nous avons ajouté à la scène) à la toile, donc c'est tout ce dont nous avons besoin: C'est ça!  Si vous exécutez le jeu, le joueur 1 tirera automatiquement et le tir apparaîtra sur la catapulte rouge… … Mais cela ne bougera pas.  Faisons les choses en mouvement.

Déplacer le tir

Revenons à la fonction Update () et ajoutons une logique à l'instruction if (shopishing): Ne l'exécutez pas encore, nous avons encore besoin de deux fonctions, mais voici ce qui se passe:

• Lignes 149 et 150 - Déplacez la prise de vue en ajoutant la vitesse (qui peut être négative pour monter et / ou gauche)
• Ligne 151 - Appliquez la gravité à la vitesse lente
• Lignes 153-155 - Le coup a-t-il frappé le sol ou parti du bord gauche ou droit de l'écran?
• Lignes 157-160 - manqué - terminer le tir et changer les joueurs
• Lignes 162-168 - tir du joueur 1 - Voir si cela a frappé le joueur 2. Si oui, mettez à jour la vie du joueur 2.
• Lignes 169-175 - tir du joueur 2 - Voir si cela a frappé le joueur 1. Si oui, mettez à jour la vie du joueur 1.

Ajoutons le chèque (bitmap) fonction: Qu'est-ce qui parle de HitTest?  EasElJS DisplayObjects (sur lequel Bitmap est basé) prend en charge une méthode HitTest (), ce qui facilite le voir si un point est sur la position de l'objet actuel.  Malheureusement, nous avons mis à l'échelle des objets et HitTest ne fonctionne qu'avec les tailles d'origine, nous devons donc vérifier nous-mêmes des succès.  Juste un peu de mathématiques et nous sommes prêts.

Hiding Hits

Maintenant, ajoutez la fonction processHit () : Cela termine simplement le tir, change les joueurs et s'assure que le jeu n'est pas terminé.

terminer le jeu

Terminons ce post en terminant le jeu.  Ajoutez la fonction de fin de partie (image): C'est ça!  Maintenant, vous pouvez exécuter le jeu et voir qui gagne.

Quelle est la prochaine étape?

Nous avons ajouté beaucoup dans cette partie - les choses dessinent, bougent, frappent, terminent… mais il y a deux trous béants.  Tout d'abord, le lecteur ne joue pas réellement, nous allons donc ajouter le traitement des entrées ensuite.  Deuxièmement, les choses sont terriblement silencieuses, surtout pour une guerre, donc nous allons également lancer des sons. En partie 4: la semaine prochaine!

Les questions fréquemment posées sur la création d'un simple jeu Windows 8 avec JavaScript

Comment puis-je commencer à créer un jeu avec JavaScript pour Windows 8?

Pour commencer à créer un jeu avec JavaScript pour Windows 8, vous devez avoir une compréhension de base de JavaScript et HTML5. Vous devrez également installer Visual Studio, qui est l'environnement de développement des applications Windows 8. Une fois que vous avez ces conditions préalables, vous pouvez commencer par créer un nouveau projet dans Visual Studio et sélectionner le modèle «application vierge». De là, vous pouvez commencer à écrire votre logique de jeu en JavaScript et à concevoir votre interface de jeu avec HTML5 et CSS.

Quels sont les exemples de jeux que je peux créer avec JavaScript?

JavaScript est un polyvalent Langage de programmation qui peut être utilisé pour créer une grande variété de jeux. Certains exemples incluent des jeux de puzzle, des jeux de stratégie, des plateformes et même des jeux 3D. Les possibilités sont infinies, et avec les bons outils et ressources, vous pouvez créer tout type de jeu que vous pouvez imaginer.

Comment puis-je ajouter de l'interactivité à mon jeu JavaScript?

L'interactivité dans un jeu JavaScript peut être réalisée par le biais de gestionnaires d'événements. Ce sont des fonctions qui sont déclenchées lorsqu'un événement spécifique se produit, tel qu'un clic de souris ou une appuye sur la touche. Par exemple, vous pouvez utiliser l'événement 'onClick' pour déclencher une fonction lorsque l'utilisateur clique sur un élément de jeu, ou l'événement 'onkeydown' pour déplacer un caractère lorsque l'utilisateur appuie sur une touche.

Comment puis-je tester et déboguer mon jeu javascript?

Les tests et le débogage sont des éléments cruciaux du développement de jeux. Visual Studio fournit un puissant outil de débogage qui vous permet de parcourir votre code, d'inspecter les variables et d'identifier toutes les erreurs ou bogues. Vous pouvez également utiliser la console pour enregistrer les messages et suivre l'exécution de votre code.

Comment puis-je optimiser mon jeu JavaScript pour les performances?

Optimisation d'un jeu JavaScript pour les performances implique un certain nombre de techniques . Ceux-ci incluent la minimisation de l'utilisation des variables globales, l'utilisation de demandeanimationframe pour les boucles de jeu, l'optimisation de vos images et actifs et l'utilisation d'algorithmes efficaces pour la logique de jeu. Il est également important de tester votre jeu sur une variété d'appareils et de navigateurs pour s'assurer qu'il fonctionne bien.

Comment puis-je ajouter du son et de la musique à mon jeu JavaScript?

Le son et la musique peuvent être ajoutés à un jeu JavaScript utilisant l'API audio HTML5. Cela vous permet de charger et de lire des fichiers sonores, de contrôler le volume et même de créer des effets sonores. Vous pouvez également utiliser des bibliothèques comme Howler.js pour simplifier le processus et ajouter des fonctionnalités audio plus avancées.

Comment puis-je publier mon jeu JavaScript sur la boutique Windows?

Une fois que vous avez fini de développer Votre jeu, vous pouvez le publier sur le Windows Store en créant un compte de magasin, en enregistrant votre application et en le soumettant pour la certification. Vous devrez fournir des captures d'écran, une description et d'autres informations sur votre jeu. Une fois votre jeu approuvé, il sera disponible en téléchargement sur le magasin Windows.

Puis-je monétiser mon jeu JavaScript?

Oui, vous pouvez monétiser votre jeu JavaScript de plusieurs manières. Une option consiste à vendre votre jeu sur le magasin Windows. Vous pouvez également inclure des achats intégrés, où les joueurs peuvent acheter du contenu ou des fonctionnalités supplémentaires. Une autre option consiste à afficher des publicités dans votre jeu, bien que cela devrait être fait avec parcimonie pour éviter de perturber l'expérience du gameplay.

Puis-je utiliser JavaScript pour créer des jeux pour d'autres plates-formes?

Oui, JavaScript est Non limité à Windows 8 ou à toute plate-forme spécifique. Avec les bons outils et les bons bibliothèques, vous pouvez créer des jeux qui s'exécutent sur une variété de plates-formes, y compris les navigateurs Web, les appareils mobiles et même les consoles de jeux. Certaines bibliothèques populaires pour le développement de jeux multiplateforme avec JavaScript comprennent Phaser, Pixi.js et Three.js.

où puis-je en savoir plus sur le développement de jeux avec JavaScript?

Il existe de nombreuses ressources disponibles en ligne pour apprendre le développement de jeux avec JavaScript. Des sites Web comme W3Schools, Mozilla Developer Network et CodeCademy proposent des tutoriels et des guides sur JavaScript et le développement de jeux. Il existe également de nombreux livres, cours en ligne et forums où vous pouvez apprendre et obtenir de l'aide d'autres développeurs.

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!