国产chinasex对白videos麻豆,粗大的内捧猛烈进出看视频,成人一区二区免费视频

Inhaltsverzeichnis

Key Takeaways

grundlegendes Design

mit Style

ein beweglicher Spieler

Tastatureingang

fangen Sie den Ball

mehr praktisch mit JavaScript

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

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

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

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.

Heim

Web-Frontend

js-Tutorial

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

Christopher Nolan

Feb 19, 2025 pm 12:35 PM

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

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.

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>

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

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

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)

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!

Erkl?rung dieser Website

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

Hei?e KI -Werkzeuge

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Agnes Tachyon Build Guide | Ein hübsches Derby -Musume

2 Wochen vor By Jack chen

Oguri Cap Build Guide | Ein hübsches Derby -Musume

2 Wochen vor By Jack chen

Palia: Rasquellywags Riches Quest Walkthrough

1 Monate vor By DDD

Peak: Wie man Spieler wiederbelebt

3 Wochen vor By DDD

Gras Wonder Build Guide | Uma Musume hübsches Derby

1 Wochen vor By Jack chen

Hei?e Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Hei?e Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

8641

Java-Tutorial

1787

CakePHP-Tutorial

1730

Laravel-Tutorial

1581

PHP-Tutorial

1448

Related knowledge

Java vs. JavaScript: Die Verwirrung beseitigen Jun 20, 2025 am 12:27 AM

Java und JavaScript sind unterschiedliche Programmiersprachen, die jeweils für verschiedene Anwendungsszenarien geeignet sind. Java wird für die Entwicklung gro?er Unternehmen und mobiler Anwendungen verwendet, w?hrend JavaScript haupts?chlich für die Entwicklung von Webseiten verwendet wird.

JavaScript -Kommentare: Kurzer Erl?uterung Jun 19, 2025 am 12:40 AM

JavaScriptComents AreseessentialFormaintaining, Lesen und GuidingCodeexexecution.1) einzelne Linecommments Arequickickexplanationen.2) Multi-LindexplainComproxlogicorProvedetailedDocumentation.3) InlinecommentsclarifyspecificPartsosensofCode.BestPracticic

Wie arbeite man mit Daten und Zeiten in JS? Jul 01, 2025 am 01:27 AM

Die folgenden Punkte sollten bei der Verarbeitung von Daten und Zeiten in JavaScript festgestellt werden: 1. Es gibt viele M?glichkeiten, Datumsobjekte zu erstellen. Es wird empfohlen, ISO -Format -Zeichenfolgen zu verwenden, um die Kompatibilit?t sicherzustellen. 2. Die Zeitinformationen erhalten und festlegen k?nnen und setzen Sie Methoden fest, und beachten Sie, dass der Monat mit 0 beginnt. 3. Die manuell formatierende Daten sind Zeichenfolgen erforderlich, und auch Bibliotheken von Drittanbietern k?nnen verwendet werden. 4. Es wird empfohlen, Bibliotheken zu verwenden, die Zeitzonen wie Luxon unterstützen. Das Beherrschen dieser wichtigen Punkte kann h?ufige Fehler effektiv vermeiden.

Warum sollten Sie Tags am Ende des platzieren? Jul 02, 2025 am 01:22 AM

PlatztagsattheBottomofabogpostorwebpageServeSpracticalPurposesforseo, Usexperience und design.1ithelpswithseobyallowingEnginestoaccessKeyword-relevantTagswithoutClutteringHemainContent.2.

JavaScript vs. Java: Ein umfassender Vergleich für Entwickler Jun 20, 2025 am 12:21 AM

JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor

Was sprudelt und f?ngt Ereignis im Dom? Jul 02, 2025 am 01:19 AM

Ereigniserfassung und Blase sind zwei Phasen der Ereignisausbreitung in DOM. Die Erfassung erfolgt von der oberen Schicht bis zum Zielelement, und die Blase ist vom Zielelement bis zur oberen Schicht. 1. Die Ereigniserfassung wird implementiert, indem der UseCapture -Parameter von AddEventListener auf true festgelegt wird. 2. Ereignisblase ist das Standardverhalten, Uscapture ist auf false oder weggelassen. 3. Die Ereignisausbreitung kann verwendet werden, um die Ereignisausbreitung zu verhindern. 4. Event Bubbling unterstützt die Ereignisdelegation, um die Effizienz der dynamischen Inhaltsverarbeitung zu verbessern. 5. Capture kann verwendet werden, um Ereignisse im Voraus abzufangen, wie z. B. Protokollierung oder Fehlerverarbeitung. Das Verst?ndnis dieser beiden Phasen hilft dabei, das Timing und die Reaktion von JavaScript auf Benutzeroperationen genau zu steuern.

JavaScript: Datentypen zur effizienten Codierung untersuchen Jun 20, 2025 am 12:46 AM

JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf

Wie k?nnen Sie die Nutzlastgr??e einer JavaScript -Anwendung reduzieren? Jun 26, 2025 am 12:54 AM

Wenn JavaScript -Anwendungen langsam geladen werden und eine schlechte Leistung haben, ist das Problem, dass die Nutzlast zu gro? ist. Zu den L?sungen geh?ren: 1. Verwenden Sie die Codespaltung (codessplitting), teilen Sie das gro?e Bündel über React.lazy () in mehrere kleine Dateien auf und laden Sie es nach Bedarf, um den ersten Download zu reduzieren. 2. Entfernen Sie den unbenutzten Code (Treeshaker), verwenden Sie den ES6 -Modulmechanismus, um "toten Code" zu l?schen, um sicherzustellen, dass die eingeführten Bibliotheken diese Funktion unterstützen. 3.. Ressourcendateien komprimieren und verschmelzen, GZIP/Brotli und Terser aktivieren, JS zu komprimieren, Dateien vernünftig zusammenzufassen und statische Ressourcen zu optimieren. V.

See all articles

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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

Key Takeaways

grundlegendes Design

mit Style

ein beweglicher Spieler

Tastatureingang

fangen Sie den Ball

mehr praktisch mit JavaScript

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

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

Hei?e KI -Werkzeuge

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1

SublimeText3 chinesische Version

Senden Sie Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac-Version

Hei?e Themen