suchen

Heim >Web-Frontend >js-Tutorial >Erstellen Sie in einer Stunde ein Webspiel mit Visual Studio und ASP.NET

Erstellen Sie in einer Stunde ein Webspiel mit Visual Studio und ASP.NET

Christopher Nolan
Christopher NolanOriginal
2025-02-19 12:35:10190Durchsuche

Erstellen Sie in einer Stunde ein Webspiel mit Visual Studio und ASP.NET

Dieser Artikel ist Teil einer Webentwicklungsreihe von Microsoft. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglichen.

In diesem Artikel wird:

erläutert
  • Grundlegende Wildentwicklungsphilosophie
  • Verwenden von Webtechnologien für die Spielentwicklung
  • Spielsteuerungen und Ai
    • hinzufügen

Technologien diskutiert:

  • Visual Studio 2013 Pro, Visual Studio 2013 Community, ASP.NET
  • Code download (.zip)

Sie benötigen keine völlig neue Fähigkeiten, um Spiele zu entwickeln. Tatsächlich sind Ihre aktuellen Webentwicklungsfähigkeiten in HTML, JavaScript, CSS usw. für eine Vielzahl von Spielen in Ordnung. Wenn Sie ein Spiel mit Webtechnologien erstellen, wird es auf so ziemlich jedem Gerät mit einem Browser ausgeführt.

Um dies zu beweisen, werde ich demonstrieren, dass ich mit Webtechnologien und nur zwei externen Bibliotheken ein Spiel von Grund auf neu erstellen werde, und ich werde es in weniger als einer Stunde tun. Ich werde eine Vielzahl von Themenentwicklungsthemen behandeln, von grundlegendem Design und Layout, Steuerelementen und Sprites über künstliche Intelligenz (KI) für einen einfachen Gegner. Ich werde das Spiel sogar entwickeln, damit es auf PCs, Tablets und Smartphones funktioniert. Wenn Sie Erfahrungen mit der Programmierung als Webentwickler oder einem anderen Entwicklungsdomain haben, aber keine Erfahrung mit dem Schreiben von Spielen haben, wird dieser Artikel Sie beginnen. Wenn Sie mir eine Stunde geben, verspreche ich Ihnen, Ihnen die Seile zu zeigen.

Key Takeaways

  • Schnelle Entwicklung: Verwenden Sie vorhandene Webentwicklungsfähigkeiten in HTML, JavaScript und CSS, um Spiele zu erstellen, die auf praktisch jedem Gerät mit einem Browser mit Visual Studio und ASP.Net.
    • ausgeführt werden.
    • Visual Studio als Tool: Nutzen Sie Visual Studio für schnelle Spieleentwicklung und -prüfung auf verschiedenen Geräten, um Kompatibilität und Leistung zu gewährleisten.
    • Spieldesign vereinfacht: Beginnen Sie mit grundlegenden Prinzipien des Spieldesigns und einem einfachen Spiel wie „Ping“ (eine Pong -Variante), mit Schwerpunkt auf Layout- und Essential -Game -Mechanik.
    • Interaktive Elemente: Integrieren Sie interaktive Spielsteuerungen mit JavaScript und CSS für dynamisches Gameplay, um sicherzustellen, dass Elemente wie Ball und Spieler auf Benutzereingaben effektiv reagieren.
    • AI-Integration: Implementieren Sie grundlegende künstliche Intelligenz für Spielgegner, sodass ein engagierteres Einzelspieler-Erlebnis.
    • plattformübergreifende Kompatibilität: Testen Sie und stellen Sie sicher, dass das Spiel in verschiedenen Browsern und Geräten gut abschneidet, wobei Tools wie BrowsStack für umfassende Tests verwendet werden.

steigen Sie auf dem Laufenden

Ich werde die gesamte Entwicklung in Visual Studio durchführen, wodurch ich eine schnelle Ausführung der Web -App ermöglicht, da ich Änderungen vornehme. Stellen Sie sicher, dass Sie die neueste Version von Visual Studio haben, damit Sie mitmachen können. Ich habe Visual Studio 2013 Pro verwendet, aber den Code mit Visual Studio 2013 Community aktualisiert. Auch wenn Sie einen Mac oder Linux haben, ist der Visual Studio-Code heutzutage plattformübergreifend.

Diese App erfordert keinen Servercode. Daher erstelle ich zunächst ein neues, leeres Webseitenprojekt in Visual Studio. Ich verwende die leere C# Vorlage für eine Website, indem ich die Option Visual C# nach der Auswahl der Datei | Neu | ASP.NET leere Website.

Die Index -HTML -Datei erfordert nur drei Ressourcen: JQuery, ein Hauptstilblatt und eine Haupt -JavaScript -Datei. Ich füge dem Projekt namens style.css eine leere CSS -Datei und eine leere JavaScript -Datei namens Ping.js hinzu, um beim Laden der Seite Fehler zu vermeiden: 

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

Vergessen Sie auch nicht, diese App (oder andere andere) auf Browsern und Geräten zu testen. Während der Code, den ich schrieb, mit modernen Browsern wie Chrome, Firefox und Microsoft Edge interoperabel ist, ist es immer eine beste Praxis, sich zu überprüfen. Jetzt können Sie dies mit kostenlosen virtuellen Maschinen und anderen Tools wie http://www.browsstack.com tun.

grundlegendes Design

Das Spiel, das ich baue, ist eine Variante von Pong, die ich Ping nenne. Ping hat im Wesentlichen die gleichen Regeln wie Pong, außer dass der Spieler entweder den Ball greift, wenn es um sie geht und den Ball dann entweder direkt oder in einem Winkel nach oben oder unten abfeuern kann. Es ist oft am besten zu zeichnen, wie das Spiel aussehen soll, bevor Sie es bauen. Für dieses Spiel wird das Gesamtlayout, das ich sehen möchte, unten angezeigt.

Erstellen Sie in einer Stunde ein Webspiel mit Visual Studio und ASP.NET

Sobald ich das Spieldesign -Layout entwickelt habe, geht es nur darum, jedes Element zu HTML hinzuzufügen, um das Spiel zu erstellen. Eine Sache zu beachten ist jedoch, dass ich die Anzeigetafel und Steuerung gruppieren werde, um sicherzustellen, dass sie zusammen sitzen. Sie können also nacheinander sehen, dass ich die Elemente hinzugefügt habe, wie unten gezeigt: 

<span><span><span><div</span> id<span>="arena"</span>></span>
</span>  <span><span><span><div</span> id<span>="score"</span>></span>
</span>    <span><span><span><h1</span>></span>
</span>      <span><span><span><span</span> id<span>="playerScore"</span>></span>0<span><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></h1</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="player"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="opponent"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="ball"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>   <span><span><span><div</span> id<span>="up"</span>></span><span><span></div</span>></span>
</span>   <span><span><span><div</span> id<span>="down"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>    <span><span><span><div</span> id<span>="left"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> id<span>="right"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>

mit Style

spielen

Wenn Sie diese Seite laden würden, würden Sie nichts sehen, da kein Stil angewendet wird. Ich habe bereits einen Link zu einer Main.CSS -Datei in meinem HTML eingerichtet, daher werde ich alle meine CSS in einer neuen Datei mit diesem Namen investieren. Das erste, was ich tun werde, ist, alles auf dem Bildschirm zu positionieren. Der Körper der Seite muss den gesamten Bildschirm aufnehmen, also werde ich das zuerst einrichten: 

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

Zweitens muss die Arena den gesamten Bildschirm mit dem Hintergrundbild der Arena füllen (siehe Bild unten) angewendet: 

<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>
Erstellen Sie in einer Stunde ein Webspiel mit Visual Studio und ASP.NET

Als nächstes positioniere ich die Anzeigetafel. Ich möchte, dass dies über den anderen Elementen oben und in der Mitte erscheint. Die Befehlsposition: Absolute lässt ich sie überall hinlegen und links: 50% platziert sie auf halbem Weg über die Oberseite des Fensters, aber an der linken Seite des Anzeigetafel -Elements. Um sicherzustellen, dass es perfekt zentriert ist, benutze ich die Transformationseigenschaft und die Z-Index-Eigenschaft stellt sicher, dass sie immer ganz oben ist: 

<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>

Ich möchte auch, dass die Texteschrift Retro-Thema ist. Die meisten modernen Browser lassen mich meine eigenen Schriftarten einbeziehen. Ich fand die entsprechende Pressestart 2P -Schriftart aus Codeman38 (Zone38.net). Um die Schriftart zur Anzeigetafel hinzuzufügen, muss ich ein neues Schriftart erstellen: 

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

Jetzt befinden sich die Bewertungen in einem H1 -Tag, sodass ich die Schriftart für alle H1 -Tags festlegen kann. Nur für den Fall, dass die Schriftart fehlt, gebe ich ein paar Sicherungsoptionen an: 

<span><span><span><div</span> id<span>="arena"</span>></span>
</span>  <span><span><span><div</span> id<span>="score"</span>></span>
</span>    <span><span><span><h1</span>></span>
</span>      <span><span><span><span</span> id<span>="playerScore"</span>></span>0<span><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></h1</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="player"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="opponent"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="ball"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>   <span><span><span><div</span> id<span>="up"</span>></span><span><span></div</span>></span>
</span>   <span><span><span><div</span> id<span>="down"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>    <span><span><span><div</span> id<span>="left"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> id<span>="right"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>

Für die anderen Elemente verwende ich ein Sprite -Blatt mit Bildern. Ein Sprite -Blatt enthält alle Bilder, die ich für das Spiel in einer Datei benötige (siehe Bild unten).

Erstellen Sie in einer Stunde ein Webspiel mit Visual Studio und ASP.NET

Jedes Element, das ein Bild auf diesem Blatt hat, hat eine Sprite -Klasse zugewiesen. Dann verwende ich für jedes Element Hintergrundposition, um zu definieren, welchen Teil des Sprite-Blatts ich zeigen möchte: 

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

Als nächstes füge ich alle Elemente, die das Sprite -Blatt verwenden, die Sprite -Klasse hinzu. Ich muss kurz zu HTML zurückkehren, um dies zu tun: 

<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>

Jetzt muss ich die Positionen jedes Sprites auf dem Blatt für jedes Element angeben. Auch hier werde ich dies mit Hintergrundposition machen: 

<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>

Die Position: Absolutes Eigentum auf dem Spieler, dem Gegner und dem Ball lässt sie sie mit JavaScript herum bewegen. Wenn Sie sich jetzt die Seite ansehen, sehen Sie die Steuerelemente und der Ball hat unnötige Stücke mit ihnen. Dies liegt daran, dass die Sprite -Größen kleiner als die Standard 128 Pixel sind, sodass ich diese an die richtige Größe anpege. Es gibt nur einen Ball, also werde ich seine Größe direkt festlegen: 

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

Es gibt vier Steuerelemente (Schaltflächen, über die der Benutzer den Player bewegen kann), sodass ich eine spezielle Klasse für sie erstellt. Ich werde auch einen Vorsprung hinzufügen, damit sie einen kleinen Platz in ihnen haben: 

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

Nach dem Hinzufügen dieser Klasse hat das Spiel viel besser aussehende Steuerelemente: 

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

Das Letzte, was ich tun muss, ist, die Steuerelemente zu positionieren, damit sie sich an den Daumen des Benutzers befinden, wenn die Seite auf einem mobilen Gerät ausgeführt wird. Ich werde sie an die unteren Ecken kleben: 

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

Eine schöne Sache an diesem Design ist, dass alles mit relativen Positionen festgelegt ist. Dies bedeutet, dass der Bildschirm eine Reihe verschiedener Größen haben kann und gleich

Folgen Sie dem hüpfenden Ball

Jetzt werde ich den Ball bewegen. Für den JavaScript -Code habe ich auf eine Datei namens Ping.js in HTML verwiesen, genau wie mit dem CSS. Ich füge diesen Code einer neuen Datei mit diesem Namen hinzu. Ich werde Objekte für den Ball und jeden der Spieler machen, aber ich werde das Werksmuster für die Objekte verwenden.

Dies ist ein einfaches Konzept. Die Ballfunktion erzeugt einen neuen Ball, wenn Sie ihn nennen. Das neue Keyword ist nicht erforderlich. Dieses Muster reduziert einen Teil der Verwirrung um diese Variable, indem die verfügbaren Objekteigenschaften geklärt werden. Und weil ich nur eine Stunde Zeit habe, um dieses Spiel zu machen, muss ich alle verwirrenden Konzepte minimieren.

Die Struktur dieses Musters, während ich die einfache Ballklasse mache: 

<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>
Um einen neuen Ball zu erstellen, nenne ich diese Funktion einfach, die ich definiert habe: 

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

Jetzt möchte ich den Ball bewegen und auf dem Bildschirm springen. Zunächst muss ich die Aktualisierungsfunktion in einem Intervall aufrufen, um eine Animation des Balls zu erstellen. Moderne Browser bieten eine für diesen Zweck bezeichnete Funktion als RequestArimationFrame. Dies nimmt eine Funktion als Argument an und nennt diese übergebene Funktion beim nächsten Mal, wenn sie seinen Animationszyklus ausführt. Dadurch bewegen sich der Ball in glatten Schritten, wenn der Browser für ein Update bereit ist. Wenn es die überschrittene Funktion aufruft, gibt es ihm die Zeit in Sekunden, seit die Seite geladen wurde. Dies ist entscheidend, um sicherzustellen, dass die Animationen im Laufe der Zeit konsistent sind. Im Spiel erscheint die Verwendung von RequestAnimationFrame wie folgt: 

<span><span><span><div</span> id<span>="arena"</span>></span>
</span>  <span><span><span><div</span> id<span>="score"</span>></span>
</span>    <span><span><span><h1</span>></span>
</span>      <span><span><span><span</span> id<span>="playerScore"</span>></span>0<span><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></h1</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="player"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="opponent"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="ball"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>   <span><span><span><div</span> id<span>="up"</span>></span><span><span></div</span>></span>
</span>   <span><span><span><div</span> id<span>="down"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>    <span><span><span><div</span> id<span>="left"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> id<span>="right"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>

Beachten Sie, dass RequestAnimationFrame in der Funktion erneut aufgerufen wird, da der Ball die Aktualisierung beendet hat. Dies gewährleistet kontinuierliche Animation.

Während dieser Code funktioniert, kann es ein Problem geben, bei dem das Skript ausgeführt wird, bevor die Seite vollständig geladen ist. Um dies zu vermeiden, starte ich den Code, wenn die Seite geladen wird, indem ich jQuery:

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

Weil ich die Geschwindigkeit des Balls (Geschwindigkeit) und die Zeit seit dem letzten Update kenne, kann ich eine einfache Physik machen, um den Ball nach vorne zu bewegen: 

<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>

Versuchen Sie, den Code auszuführen, und Sie sehen, dass sich der Ball in einem Winkel und außerhalb des Bildschirms bewegt. Dies macht eine Sekunde Spaß, aber sobald der Ball vom Bildschirmrand geht, stoppt der Spaß. Der nächste Schritt besteht also darin, den Ball von den Rändern des Bildschirms abzupressen, wie in Abbildung 7 implementiert. Fügen Sie diesen Code hinzu und das Ausführen der App zeigt einen kontinuierlich abspritzten Ball.

ein beweglicher Spieler

Jetzt ist es Zeit, die Spielerobjekte zu machen. Der erste Schritt, um die Spielerklasse auszurotten, besteht darin, die Bewegungsfunktion die Position des Spielers zu ändern. Die Seitenvariable zeigt an, welche Seite des Platzes der Spieler wohnen wird, was vorschreibt, wie der Spieler horizontal positioniert werden soll. Der y -Wert, der in die Bewegungsfunktion übergeben wird, wird sein, wie viel nach oben oder unten sich der Spieler bewegen wird: 

<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>

Wir können dann die Spielerbewegung auslegen und die Bewegung stoppen, wenn der Spielersprite die Ober- oder Unterseite des Fensters erreicht. 

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

Ich kann jetzt zwei Spieler erstellen und sie zu ihrer entsprechenden Seite des Bildschirms bewegen: 

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

Tastatureingang

theoretisch können Sie den Spieler bewegen, aber er wird sich nicht ohne Anweisung bewegen. Fügen Sie dem Spieler links einige Steuerelemente hinzu. Sie möchten zwei Möglichkeiten, diesen Player zu steuern: Verwenden der Tastatur (auf PCs) und Tippen auf die Steuerelemente (auf Tablets und Telefonen).

Um die Konsistenz zwischen Berührungseingängen und Mauseingängen auf verschiedenen Plattformen zu gewährleisten, verwende ich die großartige Vereinigungsgerüsts Hand.js (Handjs.Codeplex.com). Zunächst füge ich das Skript zu HTML im Kopfabschnitt hinzu: 

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

Ich werde dann Hand.js und JQuery verwenden, um den Player zu steuern, wenn Sie Tastaturtasten A und Z drücken oder wenn Sie auf die Steuerelemente tippen. 

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

fangen Sie den Ball

Wenn der Ball herumspringt, möchte ich die Spieler es fangen lassen. Wenn es gefangen ist, hat der Ball einen Besitzer und folgt der Bewegung dieses Besitzers. Ich werde der Bewegungsmethode des Balls Funktionen hinzufügen und einem Besitzer ermöglichen, dem der Ball dann folgt: 

<span><span><span><div</span> id<span>="arena"</span>></span>
</span>  <span><span><span><div</span> id<span>="score"</span>></span>
</span>    <span><span><span><h1</span>></span>
</span>      <span><span><span><span</span> id<span>="playerScore"</span>></span>0<span><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></h1</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="player"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="opponent"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="ball"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>   <span><span><span><div</span> id<span>="up"</span>></span><span><span></div</span>></span>
</span>   <span><span><span><div</span> id<span>="down"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>    <span><span><span><div</span> id<span>="left"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> id<span>="right"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>

Derzeit gibt es keine Möglichkeit, die Position eines Player -Objekts zu erhalten. Daher füge ich dem Player -Objekt die GetPosition und Get -Side -Accessern hinzu: 

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

Wenn der Ball einen Besitzer hat, folgt dies diesem Besitzer. Aber wie bestimme ich den Besitzer? Jemand muss den Ball fangen. Lassen Sie uns feststellen, wann einer der Sprites der Spieler den Ball berührt. Wenn das passiert, werde ich den Besitzer des Balls auf diesen Spieler setzen. 

<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>

Wenn Sie jetzt versuchen, das Spiel zu spielen, wird der Ball von der Spitze des Bildschirms abprallt und den Spieler verschieben, um ihn zu fangen. Wie wirfst du es jetzt? Dafür sind die rechten Steuerelemente dafür da-den Ball auszuüben. Fügen wir dem Spieler sowie einer AIM -Eigenschaft eine "Feuer" -Funktion hinzu. 

<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>

Wir können dann die Tastaturfunktion erweitern, um die Ziel- und Feuerfunktionen des Spielers festzulegen. Das Ziel wird etwas anders funktionieren. Wenn der Zielschlüssel veröffentlicht wird, kehrt das Ziel unkompliziert zurück. 

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

Die endgültige Ergänzung ist die Berührungsunterstützung für alle Steuerelemente. Ich werde die Steuerelemente auf der richtigen Änderung des Ziels des Spielers ändern. Ich werde es auch so an irgendwo auf dem Bildschirm berühren 

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

Wenn der Ball einen Spieler übergeht, möchte ich den Punktzahl ändern und diesem Spieler den Ball geben. Ich verwende benutzerdefinierte Ereignisse, damit ich von einem der vorhandenen Objekte von einem der vorhandenen Objekte trennen kann. Die Aktualisierungsfunktion wird lang, daher füge ich eine neue private Funktion namens Checkscored hinzu: 

<span><span>.sprite</span> {
</span>  <span>background-image: <span>url("sprites.png")</span>;
</span>  <span>width: 128px;
</span>  <span>height: 128px;
</span><span>}
</span>
Der folgende Code reagiert auf diese Ereignisse, um die Punktzahl zu aktualisieren und den Ball zu übergeben. Fügen Sie diesen Code am Ende des JavaScript -Dokuments hinzu. 

<span><span><span><div</span> id<span>="player"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="opponent"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="ball"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>  <span><span><span><div</span> id<span>="up"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="down"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>  <span><span><span><div</span> id<span>="left"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="right"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
Wenn der Ball es an Ihrem Gegner vorbei schafft (was nicht so schwierig ist, wie sich der Gegner nicht bewegt), steigt Ihre Partitur und der Ball wird dem Gegner übergeben. Der Gegner hält sich jedoch einfach am Ball fest.

Get Smart

Sie haben fast ein Spiel. Wenn Sie nur jemanden hätten, mit dem Sie spielen können. Als letzter Schritt werde ich zeigen, wie ich den Gegner mit einfacher KI kontrollieren kann. Der Gegner wird versuchen, parallel zum Ball zu bleiben, wenn er sich bewegt. Wenn der Gegner den Ball fängt, bewegt er sich zufällig und schießt den Ball in eine zufällige Richtung. Damit sich die KI etwas menschlicher anfühlt, werde ich in allem Verspätungen hinzufügen. Dies ist keine sehr intelligente KI, wohlgemerkt, aber es wird etwas sein, gegen das man das Spiel spielen kann.

Bei der Gestaltung dieser Art von System ist es gut, in Staaten zu denken. Die KI der Gegnerin hat drei mögliche Zustände: Folgen, Zielen/Schießen und Warten. Ich werde der Zustand zwischen den folgenden Handlungen sein, um ein menschlicheres Element hinzuzufügen. Beginnen Sie genau das für das KI -Objekt: 

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

Abhängig vom Zustand der KI möchte ich, dass es eine andere Aktion ausführt. Genau wie der Ball werde ich eine Aktualisierungsfunktion erstellen, die ich im RequestAnimationFrame aufrufen kann, um die AI -Handlung gemäß seinem Zustand zu haben: 

<span><span><span><div</span> id<span>="arena"</span>></span>
</span>  <span><span><span><div</span> id<span>="score"</span>></span>
</span>    <span><span><span><h1</span>></span>
</span>      <span><span><span><span</span> id<span>="playerScore"</span>></span>0<span><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></h1</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="player"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="opponent"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="ball"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>   <span><span><span><div</span> id<span>="up"</span>></span><span><span></div</span>></span>
</span>   <span><span><span><div</span> id<span>="down"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>    <span><span><span><div</span> id<span>="left"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> id<span>="right"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>

Der folgende Zustand ist unkompliziert. Der Gegner bewegt sich in vertikale Richtung des Balls, und die KI übergeht in den Wartezustand, um eine verlangsamte Reaktionszeit zu injizieren. Der folgende Code zeigt diese beiden Zustände: 

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

Die KI wechselt zwischen dem Ball und einem Bruchteil der Sekunde. Fügen Sie nun den Code zur spielweiten Aktualisierungsfunktion hinzu: 

<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>

Wenn Sie das Spiel ausführen, werden Sie sehen, dass der Gegner den Bewegungen des Balls folgt - keine schlechte KI in weniger als 30 Codezeilen. Wenn der Gegner den Ball fängt, wird es natürlich nichts tun. Für den letzten Trick der Stunde ist es Zeit, die Aktionen für den Zielzustand zu erledigen.

Ich möchte, dass sich die KI ein paar Mal zufällig bewegen und dann den Ball in eine zufällige Richtung feuern. Fügen wir eine private Funktion hinzu, die genau das tut. Das Hinzufügen der AIMANDFIRE -Funktion zur AIM -Fallanweisung macht eine voll funktionsfähige KI, gegen die sie spielen können. 

<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>

einpacken

Inzwischen haben Sie ein vollwertiges Webspiel, das auf PCs, Smartphones und Tablets funktioniert. Es gibt viele mögliche Verbesserungen an diesem Spiel. Es wird im Porträtmodus beispielsweise auf einem Smartphone etwas unangenehm aussehen. Sie müssen daher sicherstellen, dass Sie das Telefon in der Landschaft halten, damit es richtig funktioniert. Dies ist nur eine kleine Demonstration der Möglichkeiten für die Spieleentwicklung für das Web und darüber hinaus.

Vielen Dank an den technischen Experten Mohamed Ameen Ibrahim für die Überprüfung dieses Artikels.

mehr praktisch mit JavaScript

Dieser Artikel ist Teil der Webentwicklungsreihe von Microsoft Tech Evangelists zu praktischem JavaScript -Lernen, Open -Source -Projekten und Best Practices für Interoperabilität, einschließlich Microsoft Edge Browser und der neuen EdgeHTML -Rendering -Engine.

Wir ermutigen Sie, Browser und Geräte wie Microsoft Edge - den Standardbrowser für Windows 10 - mit kostenlosen Tools auf Dev.modern.ie:

zu testen.
  • scannen Sie Ihre Site nach veralteten Bibliotheken, Layoutproblemen und Barrierefreiheit
  • Verwenden Sie virtuelle Maschinen für Mac, Linux und Windows
  • remotely testen Sie Microsoft Edge auf Ihrem eigenen Gerät
    • Codierungslabor auf GitHub: Cross-Browser-Test und Best Practices

eingehendes technisches Lernen auf Microsoft Edge und die Webplattform unserer Ingenieure und Evangelisten:
  • Microsoft Edge Web Summit 2015 (Was Sie mit dem neuen Browser, neuen unterstützten Webplattform -Standards und Gastrednern der JavaScript -Community erwarten)
    • woah, ich kann Edge & dh auf einem Mac & Linux testen! (von Rey Bango)
    • JavaScript vorantreiben, ohne das Web (von Christian Heilmann) zu brechen
    • Die Edge -Rendering -Engine, mit der das Web einfach funktioniert (von Jacob Rossi)
    • entfesselte 3D -Rendering mit WebGL (von David Catuhe einschließlich der Vorlon.js- und Babylonjs -Projekte)
    • gehostete Web -Apps und Webplattform -Innovationen (von Kevin Hill und Kiril Seksenov einschließlich des Verteilers.js -Projekts)

    Weitere kostenlose plattformübergreifende Tools und Ressourcen für die Webplattform:
  • Visual Studio -Code für Linux, MacOS und Windows
Code mit node.js und kostenloser Testversion auf Azure

häufig gestellte Fragen (FAQs) zum Erstellen eines Webspiels mit Visual Studio und ASP.NET

Wie kann ich ein Multiplayer -Spiel mit Visual Studio und ASP.NET erstellen? Zunächst müssen Sie die Spiellogik entwerfen, die die Regeln, die Spielerinteraktionen und das Ergebnis des Spiels enthält. Als nächstes müssen Sie die Benutzeroberfläche des Spiels mithilfe von HTML, CSS und JavaScript erstellen. Sie können die SignalR-Bibliothek in ASP.NET verwenden, um die Echtzeitkommunikation zwischen dem Server und den Clients zu verarbeiten. Schließlich müssen Sie die Spiellogik auf der server Seite mit C# und ASP.NET implementieren. Dies beinhaltet die Behandlung von Player -Verbindungen, das Verwalten von Spielstatus und die Übertragung von Updates für alle verbundenen Kunden. Studio umfasst die Verwendung des MVC-Musters (Model-View-Controller), um die Spiellogik von der Benutzeroberfläche zu trennen, das Entity-Framework für den Datenzugriff zu verwenden, und die Verwendung von Unit-Tests, um die Richtigkeit Ihres Code. Darüber hinaus sollten Sie die integrierten Debugging-Tools in Visual Studio verwenden, um Fehler in Ihrem Code zu identifizieren und zu beheben. Sie können mobile Spiele mit Visual Studio und ASP.NET entwickeln. Es ist jedoch wichtig zu beachten, dass ASP.NET in erster Linie ein Webentwicklungs -Framework ist. Sie müssen daher zusätzliche Tools und Bibliotheken verwenden, um ein mobiles Spiel zu erstellen. Xamarin, ein plattformübergreifendes Entwicklungstool, das in Visual Studio enthalten ist, ermöglicht es Ihnen, Ihren Spielcode in C# zu schreiben und ihn dann für Android, iOS und Windows Phone zu kompilieren.

Wie kann ich die Leistung meines Spiels in Visual Studio optimieren?

Es gibt verschiedene Möglichkeiten, die Leistung Ihres Spiels in Visual Studio zu optimieren. Zunächst sollten Sie die integrierten Profiling-Tools verwenden, um Engpässe in Ihrem Code zu identifizieren. Anschließend können Sie Techniken wie Codeoptimierung, Datenstrukturoptimierung und Algorithmusoptimierung verwenden, um die Leistung Ihres Codes zu verbessern. Darüber hinaus sollten Sie die Hardware -Beschleunigungsfunktionen moderner Grafikkarten verwenden, um die Rendering -Leistung Ihres Spiels zu verbessern.

Wie kann ich meinem Spiel in Visual Studio Soundeffekte und Musik hinzufügen? Soundeffekte und Musik für Ihr Spiel in Visual Studio beinhalten die Verwendung der SoundPlayer -Klasse im System.media Namespace. Sie können die Play -Methode verwenden, um einen Soundeffekt oder einen Musikstrack zu spielen, und die Stop -Methode, um ein Sound nicht mehr zu spielen. Sie können auch die Playlooping -Methode verwenden, um kontinuierlich einen Sound zu spielen. Die SoundPlayer -Klasse unterstützt WAV -Dateien, daher müssen Sie Ihre Soundeffekte und Musik -Tracks in dieses Format konvertieren.

Wie kann ich mein in Visual Studio entwickeltes Spiel veröffentlichen? In Visual Studio entwickelt, beinhaltet mehrere Schritte. Zunächst müssen Sie Ihr Spiel im Release -Modus erstellen, um eine ausführbare Datei zu erstellen. Als nächstes müssen Sie ein Installationsprogramm für Ihr Spiel mit einem Tool wie InstallShield erstellen. Schließlich können Sie Ihr Spiel über verschiedene Kanäle verteilen, z. B. Ihre eigene Website, Online -Spielgeschäfte oder App -Stores. > Während es möglich ist, 3D -Spiele mit Visual Studio und ASP.NET zu entwickeln, ist es nicht das häufigste Anwendungsfall für diese Tools. ASP.NET ist in erster Linie ein Webentwicklungsrahmen, und Visual Studio ist eine allgemeine Entwicklungsumgebung. Wenn Sie an der Entwicklung von 3D -Spielen interessiert sind, sollten Sie eine dedizierte Game Development Engine wie Unity oder Unreal Engine verwenden, die fortgeschrittenere Tools und Funktionen für die Entwicklung von 3D -Spielen bietet.

Wie kann ich Multi hinzufügen -Language Support für mein Spiel in Visual Studio? Sie können Ressourcendateien verwenden, um den Text für jede Sprache zu speichern und dann mit der RessourcenManager -Klasse den entsprechenden Text basierend auf den Spracheinstellungen des Benutzers abzurufen. Sie können auch die CultureInfo-Klasse verwenden, um Unterschiede in Zahlenformaten, Datumsformaten und anderen Gebietsschalen-spezifischen Einstellungen zu behandeln.

Wie kann ich mein Spiel in Visual Studio testen? Visual Studio umfasst die Verwendung der integrierten Testwerkzeuge. Sie können Unit -Tests verwenden, um einzelne Komponenten Ihres Spiels zu testen, Integrationstests zu testen, wie diese Komponenten zusammenarbeiten, und UI -Tests, um die Benutzeroberfläche zu testen. Sie können auch die Debugging -Tools in Visual Studio verwenden, um Fehler in Ihrem Code zu identifizieren und zu beheben.

Kann ich Visual Studio und ASP.NET verwenden, um Spiele für Konsolen zu entwickeln? Werkzeuge. Die Konsolenspielentwicklung umfasst in der Regel die Verwendung einer dedizierten Game Development Engine wie Unity oder Unreal Engine, die fortschrittlichere Tools und Funktionen für die Entwicklung der Konsolenspiele bietet. Sie können jedoch Visual Studio und ASP.NET verwenden, um die serverseitigen Komponenten eines Konsolenspiels zu entwickeln, z.

Das obige ist der detaillierte Inhalt vonErstellen Sie in einer Stunde ein Webspiel mit Visual Studio und ASP.NET. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

c# JavaScript mvc firefox jquery css chrome less html edge Object Resource define if for while date format include require try throw catch double using class private Interface Namespace finally Property Accessors JS console number function default this promise position margin background transform animation input github windows visual studio macos visual studio code kind android ios xamarin web app http microsoft azure linux ui issue webgl everything Access Game
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So lösen Sie das Global NPM -ModulabhängigkeitsproblemNächster Artikel：So lösen Sie das Global NPM -Modulabhängigkeitsproblem

In Verbindung stehende Artikel

Mehr sehen