Gameboy-Webspiel (Rätsel-Webspiel) – Frontend-Seitendesign und Schwierigkeiten beim Nachahmen von WeChat-Chat_Javascript-Fähigkeiten

Vorwort:

Ich habe bereits ein Webseitenspiel (ähnlich Riddle Game) geschrieben. Ich hoffe nicht nur, dass jeder mein Spiel erleben kann, sondern bin auch bereit, etwas von dem Wissen zu teilen, das ich beim Schreiben dieses Webspiels gelernt habe.

Dieser Artikel beschreibt, wie man eine WeChat-ähnliche Chat-Fensteroberfläche auf der Webseite implementiert, sowie einige der damit verbundenen technischen Punkte. Der Autor ist ein Anfänger im Frontend, also geben Sie ihm bitte einen Daumen nach oben 🎜>

Effektanzeige:

Diese Art von Layout-Modus des Chat-Dialogs ist meiner Meinung nach näher am mobilen Endgerät als der Chat-Modus von QQ auf dem PC.

Anforderungseinstellung:

Lassen Sie es uns zunächst durchgehen und einige der Funktionen implementieren, die das Chat-Fenster unterstützen muss.

• Struktur und Layout der Chat-Nachrichten

Chat-Nachrichten enthalten: Charaktere (Avatare) und Nachrichteninhalte sind auf der linken Seite und Ihre eigenen Nachrichten sind auf der rechten Seite, sodass sie leicht zu unterscheiden sind

• Anpassung des Textbereichs

Die Größe des Nachrichteninhalts kann angepasst und immer in die angemessenste Bereichsgröße umschlossen werden

• Scroll-Unterstützung

Aufgrund zu vieler Chat-Datensätze überschreitet die Größe die Standardgröße des Chat-Fensters.

　• Automatische Bodenausrichtung

Wenn eine neue Nachricht vorliegt, wird der Fensterinhalt automatisch am unteren Rand des visuellen Fensters ausgerichtet

• Schlüsselerfassung eingeben

Eingabeunterstützung für Nachrichten und Erfassung der Antwort auf die Eingabetaste

Unter diesen Funktionspunkten ist die adaptive Textbereichsverarbeitung der schwierigste, die viele Umwege erfordert, ^_^.

Umsetzungsplan:

• Struktur und Layout der Chat-Nachrichten

Die grundlegende HTML-Codestruktur kann wie folgt aussehen:

Hinweis: Der Avatar ist ein IMG-Tag, der Inhalt der Textnachricht ist ein Div, und das Umschließen der beiden ist ein weiteres großes Div, das eine vollständige Nachricht darstellt.

<div>
<img src="" alt="Gameboy-Webspiel (Rätsel-Webspiel) – Frontend-Seitendesign und Schwierigkeiten beim Nachahmen von WeChat-Chat_Javascript-Fähigkeiten"/> <div>消息内容</div>
</div>

Für den linken und rechten Versatz des Layouts wird float:left|right verwendet, um es zu steuern. Dies ist immer noch grundlegend.

• Anpassung des Textbereichs

Damit der Chat-Textinhalt schön aussieht, ist es am besten, einen adaptiven Textbereich zu haben (mit einer maximalen Breite, um den Bereich zu minimieren).

Zunächst habe ich das Textarea-Tag ausprobiert, da seine Attribute row und col enthalten, die der Anzahl der Zeichen entsprechen und zum Festlegen der Anzahl der Zeilen und Spalten verwendet werden können

Leider wurde ich von der Realität besiegt, da Textarea unterschiedliche Berechnungsstandards für chinesische Schriftzeichen hat und chinesische Schriftzeichen als 2 und englische Schriftzeichen als 1 gezählt werden. Da die Benutzereingabe unsicher ist, ist dies schwierig Verwenden Sie die Länge der Textzeichenfolge, um die Zeilen- und Spaltenwerte von textarea festzulegen.

Also zurück zum Ausgangspunkt: Wir können die Größe nur festlegen, indem wir die px-Länge des Textpixels berechnen (entspricht der Begrenzung der maximalen Breite).

Berechnen Sie die Textlänge, siehe „JQuery berechnet die Gesamtbreite der Textbreite“.

Hinweis: Fügen Sie das Tag

 geschickt hinzu bzw. löschen Sie es, um die wahre Länge von <pre class="brush:php;toolbar:false"> zurückzugeben, also die Textlänge.
<div class="jb51code">
<pre class="brush:java;">
function GetCurrentStrWidth(text, font) {
var currentObj = $('<pre class="brush:php;toolbar:false">').hide().appendTo(document.body);
$(currentObj).html(text).css('font', font);
var width = currentObj.width();
currentObj.remove();
return width;
}

Für einen Wert, der kleiner als die standardmäßige maximale Breite ist, kann die Textbereichs-Div auf den Standardwert gesetzt werden. Für einen Wert, der größer als die standardmäßige maximale Breite ist, wird die Textbereichs-Div auf width=max-width gesetzt.