Créez un jeu Web en une heure avec Visual Studio et ASP.NET

Cet article fait partie d'une série de développement Web de Microsoft. Merci de soutenir les partenaires qui rendent le point de point possible.

Cet article discute:

• Philosophie de développement de jeu de base
• Utilisation des technologies Web pour le développement du jeu
• ajoutant des commandes de jeu et Ai

Technologies discutées:

• Visual Studio 2013 Pro, Visual Studio 2013 Community, ASP.NET
• Téléchargement de code (.zip)

Vous n'avez pas besoin d'un ensemble de compétences entièrement nouveau pour développer des jeux. En fait, vos compétences actuelles de développement Web en HTML, JavaScript, CSS et ainsi de suite sont très bien pour un large éventail de jeux. Lorsque vous construisez un jeu avec des technologies Web, il fonctionnera sur à peu près n'importe quel appareil avec un navigateur.

pour le prouver, je vais démontrer la construction d'un jeu à partir de zéro à l'aide de technologies Web et de deux bibliothèques externes, et je le ferai en moins d'une heure. Je couvrirai une variété de sujets de développement de jeux, de la conception et de la disposition de base, des contrôles et des sprites, à l'intelligence artificielle (IA) pour un simple adversaire. Je vais même développer le jeu pour que cela fonctionne sur des PC, des tablettes et des smartphones. Si vous avez une certaine expérience de la programmation en tant que développeur Web ou un autre domaine de développement, mais aucune expérience des jeux d'écriture, cet article vous permettra de démarrer. Si vous me donnez une heure, je vous promets de vous montrer les cordes.

Les plats clés

• Développement rapide: utilisez des compétences de développement Web existantes dans HTML, JavaScript et CSS pour créer des jeux qui s'exécutent sur pratiquement n'importe quel appareil avec un navigateur, en utilisant Visual Studio et Asp.net.
• Visual Studio en tant qu'outil: Levier Visual Studio pour le développement rapide du jeu et les tests sur différents appareils, assurant la compatibilité et les performances.
• Design de jeu Simplifié: Commencez par des principes de conception de jeu de base et un jeu simple comme «ping» (une variante Pong), en se concentrant sur la mise en page et les mécanismes de jeu essentiels.
• Éléments interactifs: incorporer des commandes de jeu interactives à l'aide de JavaScript et CSS pour un gameplay dynamique, en veillant à ce que des éléments comme la balle et les joueurs répondent efficacement aux entrées des utilisateurs.
• Intégration de l'IA: implémenter l'intelligence artificielle de base pour les adversaires du jeu, permettant une expérience solo plus engageante.
• Compatibilité multiplateforme: testez et assurez-vous que le jeu fonctionne bien sur divers navigateurs et appareils, en utilisant des outils comme Browserstack pour des tests complets.

Remuez et en cours d'exécution

Je ferai tout le développement dans Visual Studio, qui permettra une exécution rapide de l'application Web à mesure que j'apporte des modifications. Assurez-vous d'avoir la dernière version de Visual Studio afin que vous puissiez suivre. J'ai utilisé Visual Studio 2013 Pro, mais j'ai mis à jour le code avec Visual Studio 2013 Community. De plus, si vous avez un Mac ou un Linux, Visual Studio Code est disponible de nos jours.

Cette application ne nécessitera aucun code de serveur, donc je commence par créer un nouveau projet de page Web vide dans Visual Studio. J'utiliserai le modèle C # vide pour un site Web en sélectionnant l'option Visual C # après avoir sélectionné Fichier | Nouveau | Site Web vide ASP.net.

Le fichier index html ne nécessite que trois ressources: jQuery, une feuille de style principale et un fichier JavaScript principal. J'ajoute un fichier CSS vide au projet appelé style.css et un fichier JavaScript vide appelé ping.js pour éviter les erreurs lors du chargement de la page:

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

N'oubliez pas non plus de tester cette application (ou toute autre) d'ailleurs entre les navigateurs et les appareils. Bien que le code que j'ai écrit soit interopérable avec des navigateurs modernes comme Chrome, Firefox et Microsoft Edge, il est toujours une meilleure pratique de vérifier. Maintenant, vous pouvez le faire avec des machines virtuelles gratuites et d'autres outils comme http://www.browserstack.com.

conception de base

Le jeu que je construis est une variante de Pong que j'appelle Ping. Le ping a essentiellement les mêmes règles que Pong, sauf que le joueur saisit le ballon en ce qui concerne eux et peut ensuite tirer le ballon en arrière directement ou à un angle vers le haut ou vers le bas. Il est souvent préférable de dessiner à quoi vous aimeriez le jeu avant de le construire. Pour ce jeu, la disposition globale que je veux voir est indiquée ci-dessous.

Une fois que j'ai développé la disposition de conception du jeu, il s'agit simplement d'ajouter chaque élément à HTML pour construire le jeu. Une chose à noter, cependant, je vais regrouper le tableau de bord et les contrôles pour s'assurer qu'ils s'asseyent ensemble. Donc, un par un, vous pouvez voir que j'ai ajouté les éléments, comme indiqué ci-dessous:

<span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span>
</span>     <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span>
</span>   <span><span><span></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

jouer avec le style

Si vous deviez charger cette page, vous ne verriez rien car il n'y a pas de style appliqué. J'ai déjà mis en place un lien vers un fichier main.css dans mon HTML, donc je placerai tous mes CSS dans un nouveau fichier avec ce nom. La première chose que je vais faire est de tout positionner à l'écran. Le corps de la page doit prendre tout l'écran, donc je vais le configurer en premier:

<span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>

Deuxièmement, j'ai besoin que l'arène remplisse l'écran entier avec l'image d'arrière-plan de l'arène (voir l'image ci-dessous) appliquée:

<span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>

Ensuite, je positionnerai le tableau de bord. Je veux que cela apparaisse en haut et au centre, sur les autres éléments. La position de commande: Absolute me permet de le placer où je veux et à gauche: 50% le place à mi-chemin sur le haut de la fenêtre, mais en commençant sur le côté le plus à gauche de l'élément de tableau de bord. Pour s'assurer qu'il est parfaitement centré, j'utilise la propriété Transform et la propriété Z-Index garantit qu'elle est toujours en haut:

<span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>

Je veux aussi que la police de texte soit rétro. La plupart des navigateurs modernes me permettent d'inclure mes propres polices. J'ai trouvé la police de démarrage de la presse appropriée de Codeman38 (zone38.net). Pour ajouter la police au tableau de bord, je dois créer un nouveau visage de police:

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

Maintenant, les scores sont dans une balise H1, donc je peux définir la police pour toutes les balises H1. Au cas où la police sera manquante, je fournirai quelques options de sauvegarde:

<span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span>
</span>     <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span>
</span>   <span><span><span></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Pour les autres éléments, j'utiliserai une feuille de sprite d'images. Une feuille de sprite contient toutes les images dont j'ai besoin pour le jeu dans un fichier (voir l'image ci-dessous).

Tout élément qui a une image sur cette feuille aura une classe Sprite attribuée. Ensuite, pour chaque élément, je vais utiliser la position d'arrière-plan pour définir la partie de la feuille de sprite que je veux montrer:

<span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>

Ensuite, j'ajouterai la classe Sprite à tous les éléments qui utiliseront la feuille de sprite. Je vais devoir revenir brièvement en HTML pour faire ceci:

<span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>

Maintenant, je dois indiquer les positions de chaque sprite sur la feuille pour chaque élément. Encore une fois, je vais le faire en utilisant la position d'arrière-plan:

<span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>

La position: la propriété absolue sur le joueur, l'adversaire et la balle me permettra de les déplacer en utilisant JavaScript. Si vous regardez la page maintenant, vous verrez les commandes et la balle a des pièces inutiles qui leur sont attachées. En effet, les tailles de sprite sont plus petites que les 128 pixels par défaut, donc je vais les ajuster à la bonne taille. Il n'y a qu'une seule balle, donc je vais régler sa taille directement:

<span><span>@font-face</span> {
</span>  <span>font-family: 'PressStart2P';
</span>  <span>src: <span>url('PressStart2P.woff')</span>;
</span><span>}
</span>

Il y a quatre éléments de contrôle (boutons que l'utilisateur peut appuyer pour déplacer le lecteur), donc il m'étonne de faire une classe spéciale pour eux. J'ajouterai également une marge pour qu'ils aient un peu d'espace autour d'eux:

<span>h1 {
</span>  <span>font-family: 'PressStart2P', 'Georgia', serif;
</span><span>}
</span>

Après avoir ajouté cette classe, le jeu a des contrôles bien meilleurs:

<span><span>.sprite</span> {
</span>  <span>background-image: <span>url("sprites.png")</span>;
</span>  <span>width: 128px;
</span>  <span>height: 128px;
</span><span>}
</span>

La dernière chose que je dois faire est de positionner les commandes afin qu'elles soient par les pouces de l'utilisateur lorsque la page s'exécute sur un appareil mobile. Je vais les coller aux coins inférieurs:

<span><span><span><div> id<span>="player"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="opponent"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="ball"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-left"</span>>
  <span><span><span><div> id<span>="up"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="down"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-right"</span>>
  <span><span><span><div> id<span>="left"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="right"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Une bonne chose à propos de ce design est que tout est défini avec des positions relatives. Cela signifie que l'écran peut être un certain nombre de tailles différentes tout en faisant bien paraître le jeu.

Suivez la balle rebondissante

Maintenant, je vais faire bouger la balle. Pour le code JavaScript, j'ai fait référence à un fichier appelé Ping.js dans HTML, tout comme je l'ai fait avec le CSS. J'ajouterai ce code à un nouveau fichier avec ce nom. Je vais faire des objets pour le ballon et chacun des joueurs, mais j'utiliserai le modèle d'usine pour les objets.

C'est un concept simple. La fonction de balle crée une nouvelle balle lorsque vous l'appelez. Il n'est pas nécessaire d'utiliser le nouveau mot-clé. Ce modèle réduit une partie de la confusion autour de cette variable en clarifiant les propriétés de l'objet disponibles. Et parce que je n'ai qu'une heure pour faire ce jeu, je dois minimiser tous les concepts déroutants.

La structure de ce modèle, car je fais la classe de balle simple:

<span><span>#player</span> {
</span>  <span>position: absolute;
</span>  <span>background-position: 0px 128px;
</span><span>}
</span><span><span>#opponent</span> {
</span>  <span>position: absolute;
</span>  <span>background-position: 0px 0px;
</span><span>}
</span><span><span>#ball</span> {
</span>  <span>position: absolute;
</span>  <span>background-position: 128px 128px;
</span><span>}
</span><span><span>#right</span> {
</span>  <span>background-position: 64px 192px;
</span><span>}
</span><span><span>#left</span> {
</span>  <span>background-position: 64px 0px;
</span><span>}
</span><span><span>#down</span> {
</span>  <span>background-position: 128px 192px;
</span><span>}
</span><span><span>#up</span> {
</span>  <span>background-position: 128px 0px;
</span><span>}
</span>

Pour créer une nouvelle balle, j'appelle simplement cette fonction que j'ai définie:

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

Maintenant, je veux faire bouger la balle et rebondir autour de l'écran. Tout d'abord, je dois appeler la fonction de mise à jour à un intervalle pour créer une animation du ballon. Les navigateurs modernes offrent une fonction destinée à cette fin appelée demandeanimationframe. Cela prend une fonction comme un argument et appellera cette fonction passée la prochaine fois qu'il exécutera son cycle d'animation. Cela permet à la balle de se déplacer en étapes lisses lorsque le navigateur est prêt pour une mise à jour. Lorsqu'il appelle la fonction passante, elle lui donnera le temps en secondes depuis le chargement de la page. Cela est essentiel pour garantir que les animations sont cohérentes au fil du temps. Dans le jeu, l'utilisation de DequestanimationFrame apparaît comme suit:

<span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span>
</span>     <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span>
</span>   <span><span><span></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Notez que RequestanimationFrame est à nouveau appelé dans la fonction, car le ballon a terminé la mise à jour. Cela garantit une animation continue.

Bien que ce code fonctionnera, il peut y avoir un problème où le script commence à s'exécuter avant que la page ne soit pleinement chargée. Pour éviter cela, je vais lancer le code lorsque la page sera chargée, en utilisant jQuery:

<span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>

Parce que je connais la vitesse du ballon (vitesse) et le temps depuis sa dernière mise à jour, je peux faire de la physique simple pour faire avancer le ballon:

<span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>

Essayez d'exécuter le code et vous verrez la balle se déplacer à un angle et hors de l'écran. C'est amusant pendant une seconde, mais une fois que le ballon est sorti du bord de l'écran, le plaisir s'arrête. Ainsi, l'étape suivante consiste à faire rebondir la balle sur les bords de l'écran, comme implémenté dans la figure 7. Ajouter ce code et l'exécution de l'application affichera une balle rebondissante continue.

un joueur mobile

Il est maintenant temps de faire les objets du joueur. La première étape pour s'éloigner de la classe des joueurs sera de faire en sorte que la fonction de déplacement change la position du joueur. La variable latérale indiquera de quel côté du tribunal résidera le joueur, qui dictera comment positionner le joueur horizontalement. La valeur y, transmise dans la fonction de déplacement, sera la quantité de haut ou de descendre le joueur:

<span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>

Nous pouvons ensuite disposer du mouvement des joueurs, en arrêtant le mouvement si le sprite du joueur atteint le haut ou le bas de la fenêtre.

<span><span>@font-face</span> {
</span>  <span>font-family: 'PressStart2P';
</span>  <span>src: <span>url('PressStart2P.woff')</span>;
</span><span>}
</span>

Je peux maintenant créer deux joueurs et les faire passer de leur côté approprié de l'écran:

<span>h1 {
</span>  <span>font-family: 'PressStart2P', 'Georgia', serif;
</span><span>}
</span>

Entrée du clavier

Donc, en théorie, vous pouvez déplacer le joueur, mais il ne bougera pas sans instruction. Ajoutez quelques commandes au lecteur à gauche. Vous voulez deux façons de contrôler ce lecteur: en utilisant le clavier (sur PC) et en appuyant sur les commandes (sur les tablettes et les téléphones).

Pour assurer la cohérence entre les entrées tactiles et les entrées de souris sur diverses plates-formes, j'utiliserai le grand framework unificateur hand.js (handjs.codeplex.com). Tout d'abord, j'ajouterai le script à HTML dans la section Head:

<span><span>.sprite</span> {
</span>  <span>background-image: <span>url("sprites.png")</span>;
</span>  <span>width: 128px;
</span>  <span>height: 128px;
</span><span>}
</span>

J'utiliserai ensuite Hand.js et jQuery pour contrôler le lecteur lorsque vous appuyez sur les touches du clavier A et Z, ou lorsque vous appuyez sur les commandes.

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

Catchez le ballon

Alors que la balle rebondit, je veux laisser les joueurs l'attraper. Lorsqu'il est capturé, le ballon a un propriétaire et il suit la motion de ce propriétaire. J'ajouterai des fonctionnalités à la méthode de mouvement du ballon, permettant à un propriétaire, que la balle suivra ensuite:

<span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span>
</span>     <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span>
</span>   <span><span><span></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Actuellement, il n'y a aucun moyen d'obtenir la position d'un objet de lecteur, donc j'ajouterai les accessoires GetPosition et Getside à l'objet Player:

<span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>

Maintenant, si le ballon a un propriétaire, il suivra ce propriétaire. Mais comment déterminer le propriétaire? Quelqu'un doit attraper le ballon. Déterminons quand l'un des sprites des joueurs touche le ballon. Lorsque cela se produit, je vais mettre le propriétaire du ballon à ce joueur.

<span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>

Si vous essayez de jouer au jeu maintenant, vous trouverez que la balle rebondit en haut de l'écran, et vous pouvez déplacer le joueur pour l'attraper. Maintenant, comment le lancez-vous? C’est à cela que servent les contrôles de la main droite: l’adhésion au ballon. Ajoutons une fonction de «feu» au joueur, ainsi qu'une propriété AIM.

<span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>

Nous pouvons ensuite augmenter la fonction du clavier pour définir les fonctions AIM et Fire du lecteur. La visée fonctionnera légèrement différemment. Lorsque la clé de visée est publiée, l'objectif reviendra à simple.

<span><span>@font-face</span> {
</span>  <span>font-family: 'PressStart2P';
</span>  <span>src: <span>url('PressStart2P.woff')</span>;
</span><span>}
</span>

L'ajout final sera le support tactile sur toutes les commandes. Je vais faire les commandes sur le bon changement dans le but du joueur. Je vais également le faire si toucher n'importe où sur l'écran tire la balle:

<span>h1 {
</span>  <span>font-family: 'PressStart2P', 'Georgia', serif;
</span><span>}
</span>

Garder le score

Lorsque le ballon passe un joueur, je veux changer le score et donner le ballon à ce joueur. J'utiliserai des événements personnalisés afin que je puisse séparer le score de l'un des objets existants. La fonction de mise à jour devient longue, donc j'ajouterai une nouvelle fonction privée appelée ChecksCored:

<span><span>.sprite</span> {
</span>  <span>background-image: <span>url("sprites.png")</span>;
</span>  <span>width: 128px;
</span>  <span>height: 128px;
</span><span>}
</span>

Le code ci-dessous réagit à ces événements pour mettre à jour le score et remettre le ballon. Ajoutez ce code au bas du document JavaScript.

<span><span><span><div> id<span>="player"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="opponent"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="ball"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-left"</span>>
  <span><span><span><div> id<span>="up"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="down"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-right"</span>>
  <span><span><span><div> id<span>="left"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="right"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Maintenant, lorsque le ballon passe au-delà de votre adversaire (ce qui n'est pas si difficile, car l'adversaire ne bouge pas), votre score augmentera, et le ballon sera remis à l'adversaire. Cependant, l'adversaire ne tiendra que le ballon.

Obtenez Smart

Vous avez presque un jeu. Si seulement vous aviez quelqu'un avec qui jouer. Dans une dernière étape, je vais montrer comment contrôler l'adversaire avec une IA simple. L'adversaire essaiera de rester parallèle avec le ballon au fur et à mesure qu'il se déplace. Si l'adversaire attrape le ballon, il se déplacera au hasard et tirera la balle dans une direction aléatoire. Pour que l'IA se sente un peu plus humaine, j'ajouterai des retards dans tout ce qui est fait. Ce n'est pas une IA très intelligente, attention, mais ce sera quelque chose contre lequel jouer.

Lors de la conception de ce type de système, il est bon de penser dans les États. L'adversaire AI a trois états possibles: suivre, viser / tirer et attendre. Je serai l'état entre les actions suivantes pour ajouter un élément plus humain. Commencez avec cela pour l'objet AI:

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

Selon l'état de l'IA, je veux qu'il fasse une action différente. Tout comme le ballon, je ferai une fonction de mise à jour que je peux appeler dans Dequestanimationframe pour avoir l'acte d'IA en fonction de son état:

<span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span>
</span>     <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span>
</span>   <span><span><span></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

L'état suivant est simple. L'adversaire se déplace dans la direction verticale de la balle, et l'IA passe à l'état d'attente pour injecter un temps de réaction ralenti. Le code ci-dessous montre ces deux états:

<span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>

L'AI alterne entre devoir suivre le ballon et attendre une fraction de seconde. Ajoutez maintenant le code à la fonction de mise à jour à l'échelle du jeu:

<span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>

Lorsque vous exécutez le jeu, vous verrez l'adversaire suivre les mouvements du ballon - pas une mauvaise IA en moins de 30 lignes de code. Bien sûr, si l'adversaire attrape le ballon, il ne fera rien. Donc, pour la dernière astuce de l'heure, il est temps de gérer les actions de l'état de visée.

Je veux que l'IA se déplace au hasard plusieurs fois, puis tire la balle dans une direction aléatoire. Ajoutons une fonction privée qui fait exactement cela. L'ajout de la fonction Aimandfire à l'instruction de cas de visée fait une IA entièrement fonctionnelle contre laquelle jouer.

<span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>

Envelopper

Maintenant, vous avez un jeu Web à part entière qui fonctionne sur des PC, des smartphones et des tablettes. Il y a de nombreuses améliorations possibles à ce jeu. Il sera un peu gênant en mode portrait sur un smartphone, par exemple, vous devez donc vous assurer que vous tiendez le téléphone dans le paysage pour qu'il fonctionne correctement. Ce n'est qu'une petite démonstration des possibilités de développement de jeux pour le Web et au-delà.

Merci à l'expert technique Mohamed Ameen Ibrahim pour avoir examiné cet article.

Plus pratique avec JavaScript

Cet article fait partie des séries de développement Web à partir des évangélistes de Microsoft Tech sur l'apprentissage pratique JavaScript, des projets open source et les meilleures pratiques d'interopérabilité, y compris le navigateur Microsoft Edge et le nouveau moteur de rendu Edgehtml.

Nous vous encourageons à tester les navigateurs et les appareils, y compris Microsoft Edge - le navigateur par défaut pour Windows 10 - avec des outils gratuits sur dev.modern.ie:

• scannez votre site pour les bibliothèques obsolètes, les problèmes de mise en page et l'accessibilité
• Utilisez des machines virtuelles pour Mac, Linux et Windows
• Testez à distance pour Microsoft Edge sur votre propre appareil
• Laboratoire de codage sur GitHub: tests de navigateur croisé et meilleures pratiques

Apprentissage technologique approfondi sur Microsoft Edge et la plate-forme Web de nos ingénieurs et évangélistes:

• Microsoft Edge Web Summit 2015 (à quoi s'attendre avec le nouveau navigateur, les nouvelles normes de plateforme Web prise en charge et les conférenciers invités de la communauté JavaScript)
• woah, je peux tester Edge et IE sur un Mac & Linux! (de Rey Bango)
• Avocation JavaScript sans casser le Web (de Christian Heilmann)
• Le moteur de rendu de bord qui fait que le Web fonctionne (de Jacob Rossi)
• Unleash 3D Rendu avec WebGL (de David Catuhe, y compris les projets Vorlon.js et Babylonjs)
• Applications Web hébergées et innovations de plate-forme Web (de Kevin Hill et Kiril Seksenov, y compris le projet Manifold.js)

Plus d'outils et de ressources multiplateformes gratuits pour la plate-forme Web:

• Code Visual Studio pour Linux, MacOS et Windows
• Code avec node.js et essai gratuit sur azure

Questions fréquemment posées (FAQ) sur la création d'un jeu Web avec Visual Studio et ASP.NET

Comment puis-je créer un jeu multijoueur à l'aide de Visual Studio et ASP.NET?

Création d'un jeu multijoueur à l'aide de Visual Studio et ASP.NET implique plusieurs étapes. Tout d'abord, vous devez concevoir la logique du jeu, qui comprend les règles, les interactions des joueurs et le résultat du jeu. Ensuite, vous devez créer l'interface utilisateur du jeu à l'aide de HTML, CSS et JavaScript. Vous pouvez utiliser la bibliothèque SignalR dans ASP.NET pour gérer la communication en temps réel entre le serveur et les clients. Enfin, vous devez implémenter la logique de jeu sur le côté du serveur à l'aide de C # et ASP.NET. Cela implique de gérer les connexions des joueurs, de gérer l'état de jeu et de diffuser des mises à jour de tous les clients connectés.

Quelles sont les meilleures pratiques pour le développement de jeux dans Visual Studio?

Quelques meilleures pratiques pour le développement de jeux dans Visual Le studio inclut l'utilisation du modèle de modèle de contrôle de modèle (MVC) pour séparer la logique de jeu de l'interface utilisateur, en utilisant le cadre d'entité pour l'accès aux données et en utilisant des tests unitaires pour garantir l'exactitude de votre code. De plus, vous devez utiliser les outils de débogage intégrés dans Visual Studio pour identifier et corriger les bogues dans votre code.

Puis-je développer des jeux mobiles avec Visual Studio et Asp.net?

Oui, oui, Vous pouvez développer des jeux mobiles avec Visual Studio et ASP.NET. Cependant, il est important de noter que ASP.NET est principalement un cadre de développement Web, vous devrez donc utiliser des outils et des bibliothèques supplémentaires pour créer un jeu mobile. Xamarin, un outil de développement multiplateforme inclus avec Visual Studio, vous permet d'écrire votre code de jeu en C #, puis de le compiler pour Android, iOS et Windows Phone.

Comment puis-je optimiser les performances de mon jeu dans Visual Studio?

Il existe plusieurs façons d'optimiser les performances de votre jeu dans Visual Studio. Tout d'abord, vous devez utiliser les outils de profilage intégrés pour identifier les goulots d'étranglement dans votre code. Ensuite, vous pouvez utiliser des techniques telles que l'optimisation du code, l'optimisation de la structure des données et l'optimisation des algorithmes pour améliorer les performances de votre code. De plus, vous devez utiliser les fonctionnalités d'accélération matérielle des cartes graphiques modernes pour améliorer les performances de rendu de votre jeu.

Comment puis-je ajouter des effets sonores et de la musique à mon jeu dans Visual Studio?

Les effets sonores et la musique de votre jeu dans Visual Studio impliquent l'utilisation de la classe SoundPlayer dans l'espace de noms System.Media. Vous pouvez utiliser la méthode de jeu pour jouer un effet sonore ou une piste de musique, et la méthode d'arrêt pour arrêter de jouer un son. Vous pouvez également utiliser la méthode de lacet de jeu pour jouer un son en continu. La classe Soundplayer prend en charge les fichiers WAV, vous devrez donc convertir vos effets sonores et vos pistes musicales en ce format.

Comment puis-je publier mon jeu développé dans Visual Studio?

Publier votre jeu développé dans Visual Studio implique plusieurs étapes. Tout d'abord, vous devez créer votre jeu en mode de version pour créer un fichier exécutable. Ensuite, vous devez créer un installateur pour votre jeu à l'aide d'un outil tel que InstallerShield. Enfin, vous pouvez distribuer votre jeu via divers canaux, tels que votre propre site Web, les magasins de jeux en ligne ou les magasins d'applications.

Puis-je utiliser Visual Studio et Asp.net pour développer des jeux 3D?

Bien qu'il soit possible de développer des jeux 3D à l'aide de Visual Studio et ASP.NET, ce n'est pas le cas d'utilisation le plus courant pour ces outils. ASP.NET est principalement un cadre de développement Web, et Visual Studio est un environnement de développement à usage général. Si vous êtes intéressé à développer des jeux 3D, vous voudrez peut-être envisager d'utiliser un moteur de développement de jeu dédié comme Unity ou Unreal Engine, qui fournissent des outils et des fonctionnalités plus avancés pour le développement de jeu 3D.

Comment puis-je ajouter Multi -Les langage de la langue à mon jeu dans Visual Studio?

L'ajout de support multi-langues à votre jeu dans Visual Studio implique l'utilisation des fonctionnalités de localisation d'ASP.NET. Vous pouvez utiliser des fichiers de ressources pour stocker le texte pour chaque langue, puis utiliser la classe ResourceManager pour récupérer le texte approprié en fonction des paramètres linguistiques de l'utilisateur. Vous pouvez également utiliser la classe CultureInfo pour gérer les différences dans les formats de nombre, les formats de date et autres paramètres spécifiques aux paramètres régionaux.

Comment puis-je tester mon jeu dans Visual Studio?

Tester votre jeu dans Visual Studio implique l'utilisation des outils de test intégrés. Vous pouvez utiliser des tests unitaires pour tester les composants individuels de votre jeu, les tests d'intégration pour tester comment ces composants fonctionnent ensemble et les tests d'interface utilisateur pour tester l'interface utilisateur. Vous pouvez également utiliser les outils de débogage dans Visual Studio pour identifier et corriger les bogues dans votre code.

Puis-je utiliser Visual Studio et Asp.net pour développer des jeux pour des consoles?

Bien qu'il soit techniquement possible de développer des jeux pour des consoles à l'aide de Visual Studio et ASP.NET, ce n'est pas le cas d'utilisation le plus courant pour ceux-ci outils. Le développement de jeux sur console implique généralement l'utilisation d'un moteur de développement de jeu dédié comme Unity ou Unreal Engine, qui fournissent des outils et des fonctionnalités plus avancés pour le développement de jeux sur console. Cependant, vous pouvez utiliser Visual Studio et ASP.NET pour développer les composants côté serveur d'un jeu de console, comme un service de matchmaking multijoueur ou un système de classement.

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!