Gameboy Web Game (Riddle webgame)--front page design and difficulty _javascript techniques of imitation micro-letter Chat

Objective:

Before writing a web game (like Riddle Game), in addition to the hope that you can experience my game outside. Also willing to share some of the knowledge learned during the process of writing this web game.

This article describes how to implement a micro-chat window interface in the Web end, and some of the technical points involved. The author of the front end is a beginner, please Montana Pat.

Effect Display:

This chat dialogue layout mode, than PC-side QQ chat way closer to the mobile end, I personally feel.

Requirements setting:

Let's go over it and implement some of the feature points that the chat window needs to support.

• Chat message structure and layout

Chat messages include: Character (avatar) and message content. Friends message on the left, their message is on the right side, convenient to distinguish.

• Adaptation of the text area

Message content can be adaptive to size, always wrapped in the most reasonable area size.

• Rolling Support

Due to too many chat records, the size of the chat window is larger than the preset size.

• Bottom automatic alignment

When a new message is available, the contents of the window are automatically aligned to the bottom of the visual window.

Enter key capture

The input support for the message, and the capture response enter key.

These several function points, the feeling most difficult is the text area self-adaptive processing, has gone many detours, ^_^.

Implementation scenario:

• Chat message structure and layout

The basic HTML code structure can be as follows:

<div>
 <div> message content </div>
</div>

Note: The avatar is an IMG tag, the text message content is a div, the parcel is another large div, representing a complete message.

For the layout of the left and right offset, the use of float:left|right, to control, this is still the basis.

• Adaptation of the text area

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

At first, I tried the textarea tag, because its properties were row and Col, corresponding to the number of characters, can be used to set the number of rows and columns.

Unfortunately, I was defeated by reality, because textarea for Chinese characters and English characters of the calculation criteria, Chinese characters by 2, English characters by 1. Because of the uncertainty of user input, it is difficult to use the length of the text string to set the TextArea column value.

So back to the beginning, you can only go to calculate the pixel point px length of the way to set the size (equivalent to limited max-width).

Calculates the length of the text, referring to the total width of the JQuery computed text.

function getcurrentstrwidth (text, font) {
var currentobj = $ (' <pre> '). Hide (). Appendto (document.body);
$ (currentobj). HTML (text). css (' font ', font);
var width = currentobj.width ();
Currentobj.remove ();
return width;
}

Note: cleverly by adding/removing <pre> tags, returns the true length of <pre>, both text length.

For max-width that are less than preset, the text area div defaults. For max-width values that are greater than the preset, the text area div is set to width=max-width.

var maxwidth =;
var currentfont = "Normal 13px Helvetica, Arial, Sans-serif";
MsgDiv.style.font = Currentfont;
var currentwidth = getcurrentstrwidth (message, currentfont);
*) Sets the width of the text area
if (currentwidth <= maxwidth) {
msgDiv.style.width = "" + currentwidth + "px";
} else {
MsgDiv.style.width = "" + maxwidth + "px";
}

Of course there is a need to pay attention to the place, that is, automatic line wrapping.

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


The value description

normal uses the browser default line break rule.
Break-all allows wrapping within a word.
Keep-all can only be wrapped in a half-width space or a hyphen.　　
in order to prevent the effect of too long English words (unconventional words), the Word-break:break-all is selected at last.
• Scrolling support
scrolling support, relatively simple, only need to chat dialog box in the Y axis to set the following CSS properties:

overflow-y: scroll;

• Bottom automatic Alignment
This is also a commonplace thing, each chat window content has updated, execute the following JS code can be.

Div.scrolltop = div.scrollheight;
Note: Both scrolltop and ScrollHeight attribute values are aligned.
The enter key response captures
support for the ENTER key response, adding the following listener event function.

Document.addeventlistener ("KeyDown", function (evt) {
if (Evt.keycode = = {
//TODO
}
});

Postscript:

It was easy to think of an example of a chat window, but it stumbled and faltered in real practice. The front end of this piece, really deep water. Afterwards recalled, felt the harvest is very big, certainly for the text adaptation, has adopted a more complex method. Then think about adding a max-width attribute to make it easier to handle?

Well, about this article to introduce you to the Gameboy Web game (Riddle webgame)-Imitation micro-letter Chat front-end page design and difficult to introduce so many people, I hope to go Gameboy Web page through the game to help!