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

Natürlich gibt es hier noch eine weitere Sache, die Aufmerksamkeit erfordert, nämlich den automatischen Zeilenumbruch

var maxWidth = 320;
var currentFont = "normal 13px Helvetica, Arial, sans-serif";
msgDiv.style.font = currentFont;
var currentWidth = GetCurrentStrWidth(message, currentFont);
// *) 设定文本区域的宽度
if (currentWidth <= maxWidth) {
　　msgDiv.style.width = "" + currentWidth + "px";
} else {
　　msgDiv.style.width = "" + maxWidth + "px";
}

Nachtrag:

word-break: normal|break-all|keep-all;


值 描述

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
　　为了防止太长的英文单词(非常规词)的影响, 最后选用了word-break: break-all.
　　• 滚动支持
　　滚动支持, 相对简单, 只需要聊天对话框在y轴方向设定如下css属性即可:

overflow-y : scroll;

　　• 底部自动对齐
　　这个也是老生常谈的事了, 每次聊天窗口的内容有更新, 执行如下js代码即可.

div.scrollTop = div.scrollHeight;
　　注: 既scrollTop和scrollHeight属性值保持一致即可.
　　• Enter键响应捕获
　　对enter键响应的支持, 添加如下监听事件函数即可.

document.addEventListener("keydown", function (evt) {
　　if (evt.keyCode == 13) {
　　　　// TODO
　　}
});

Ursprünglich dachte ich, dass es einfach wäre, ein Beispiel für ein Chat-Fenster zu implementieren, aber ich bin während der eigentlichen Übung gestolpert und ins Stocken geraten. Im Nachhinein hatte ich das Gefühl, dass ich gewonnen hatte Natürlich habe ich für den Text Adaptive eine kompliziertere Methode verwendet. Später habe ich darüber nachgedacht, ob dies einfach durch Hinzufügen eines Max-Width-Attributs möglich ist

Okay, dieser Artikel wird Ihnen das Gameboy-Webspiel (Rätsel-Webspiel) vorstellen – das Front-End-Seitendesign und die Schwierigkeiten beim Nachahmen des WeChat-Chats. Ich hoffe, dass er für alle im Gameboy-Webspiel hilfreich sein wird!