Riddlewebgame-front-end page design and difficulty-javascript skills

This article describes how to implement a simulated chat window interface on the webpage and some technical points involved. For more information about gameboy games, see Preface:

I have previously compiled a webpage Game (similar to Riddle Game). In addition to hoping that everyone can experience my Game, I am also willing to share some of my knowledge about this webpage Game.

This article describes how to implement a simulated chat window interface on the web page and some technical points involved. The author's front-end is a beginner.

Effect display:

The layout of this chat mode is closer to the mobile end than that of QQ on the PC end. I personally feel that.

Requirement setting:

Let's repeat it first to implement some functions that need to be supported in the chat window.

• Chat message structure and layout

Chat messages include: people (Avatar) and message content. friend messages are placed on the left side, and their messages are placed on the right side for easy differentiation.

• Adaptive text area

The message content can be adaptive and always wrapped in the most appropriate area size.

• Rolling support

Because there are too many chat records, the size exceeds the preset size of the chat window.

• Automatic bottom alignment

After a new message is sent, the window content is automatically aligned to the bottom of the visible window.

• Enter key capture

Supports message input and captures the return key.

Among these features, the most difficult part is text area adaptive processing, which takes a lot of detours, ^_^.

Implementation Scheme:

• Chat message structure and layout

The basic html code structure can be as follows:

 
Message content

Note: the Avatar is an img label, and the text message content is a p. The packaged two are another big p, representing a complete message.

For the left offset and right offset of the layout, float: left | right is used for control. this is still basic.

• Adaptive text area

In order to make the text content of the chat look beautiful, the best way is to adapt the text area (with a max-width, the area is minimized ).

At first, I tried the textarea label because its attributes include row and col, which correspond to the number of characters and can be used to set the number of rows and columns.

Unfortunately, I was defeated by reality, because textarea has different calculation standards for Chinese characters and English characters. Chinese characters are counted as two, and English characters are counted as one. due to the uncertainty of user input, it is difficult to set the row and column values of textarea with the length of the text string.

Return to the start point and set the size (equivalent to max-width) only by calculating the pixel length of the text ).

Calculate the length of the text, refer to "JQuery calculates the total Width of the text ".

Function GetCurrentStrWidth (text, font) {var currentObj = $ ('
').hide().appendTo(document.body);$(currentObj).html(text).css('font', font);var width = currentObj.width();currentObj.remove();return width;}
Note: cleverly add/delete
Tag, return
Is the actual length of the text.
If the value is smaller than the preset max-width value, the text area p can be set by default. if the value is greater than the preset max-width value, the text area p is set to width = max-width.
Var maxWidth = 320; var currentFont = "normal 13px Helvetica, Arial, sans-serif"; msgDiv. style. font = currentFont; var currentWidth = GetCurrentStrWidth (message, currentFont); // *) set the width of the text area if (currentWidth <= maxWidth) {msgDiv. style. width = "" + currentWidth + "px";} else {msgDiv. style. width = "" + maxWidth + "px ";}
Of course, there is another thing to note here, that is, automatic line feed.
Word-break: normal | break-all | keep-all; the value description is normal. use the default line feed rule of the browser. Break-all allows line breaks in words. Keep-all can only wrap lines with spaces or hyphens. In order to prevent the influence of too long English words (unconventional words), we finally chose word-break: break-all. • rolling is supported. it is relatively simple. you only need to set the following css attribute in the y axis of the chat dialog box: overflow-y: scroll; • Auto-alignment at the bottom is also a common topic, the content in each chat window is updated. just execute the following js code. p. scrollTop = p. scrollHeight; note: The attribute values of scrollTop and scrollHeight must be consistent. • Enter key response captures support for the enter key response, such as the following: .doc ument. addEventListener ("keydown", function (evt) {if (evt. keyCode = 13) {// TODO }});
Postscript:
I thought it was easy to implement a chat window, but it was a real obstacle in practice. the front-end is really deep. after recalling the story, I felt that I had gained a lot. of course, I used a complicated method to adapt to the text. later, I thought it would be easy to add the max-width attribute?
Okay, this article introduces you to the gameboy webpage riddle webgame-the front-end page design and difficulties of imitation chat, I hope it will be helpful for you to go through the gameboy Web game!