게임보이 웹게임(수수께끼 웹게임) - 프런트엔드 페이지 디자인 및 위챗 chat

게임보이 웹게임(수수께끼 웹게임) - 프런트엔드 페이지 디자인 및 위챗 chat_javascript 기술 모방의 어려움

WBOY

풀어 주다： 2016-05-16 15:14:34

원래의

1612명이 탐색했습니다.

머리말:

저는 이전에 웹페이지 게임(수수께끼 게임과 유사)을 작성한 적이 있습니다. 모든 사람이 제 게임을 경험할 수 있기를 바라면서, 이 웹 게임을 작성하는 과정에서 제가 배운 지식 중 일부도 공유하고 싶습니다.

이 글은 위챗과 같은 채팅창 인터페이스를 웹페이지에 구현하는 방법과 관련된 몇 가지 기술적인 포인트를 설명하고 있습니다. 🎜>

효과 표시:

이런 채팅 대화 레이아웃 모드는 개인적으로 PC QQ의 채팅 모드보다 모바일 단말기에 더 가깝다고 생각합니다.

요구사항 설정:

먼저 살펴보고 채팅창이 지원해야 하는 몇 가지 기능을 구현해 보겠습니다.

• 채팅 메시지 구조 및 레이아웃

채팅 메시지에는 캐릭터(아바타)와 메시지 내용이 포함됩니다. 왼쪽에는 친구의 메시지가, 오른쪽에는 자신의 메시지가 표시되어 구분이 쉽습니다.

• 텍스트 영역 조정

메시지 콘텐츠의 크기는 적응적으로 조정될 수 있으며 항상 가장 합리적인 영역 크기로 래핑됩니다.

• 스크롤 지원

채팅 기록이 너무 많아 채팅창의 기본 크기를 초과했습니다.

　• 자동 하단 정렬

새 메시지가 있으면 창 내용이 자동으로 시각적 창 하단에 정렬됩니다.

• 키 캡처 입력

메시지 입력 지원 및 Enter 키에 대한 응답 캡처

이 기능적인 점들 중에서 가장 어려운 점은 많은 우회를 거친 텍스트 영역 적응 처리입니다 ^_^.

구현 계획:

• 채팅 메시지 구조 및 레이아웃

기본 HTML 코드 구조는 다음과 같습니다.

<div>
<img src="" alt="게임보이 웹게임(수수께끼 웹게임) - 프런트엔드 페이지 디자인 및 위챗 chat_javascript 기술 모방의 어려움"/> <div>消息内容</div>
</div>

로그인 후 복사

참고: 아바타는 img 태그이고, 문자 메시지 콘텐츠는 div이며, 두 개를 감싸는 또 다른 큰 div는 완전한 메시지를 나타냅니다.

레이아웃의 왼쪽 오프셋과 오른쪽 오프셋의 경우 float:left|right를 사용하여 제어합니다.

• 텍스트 영역 조정

채팅 텍스트 콘텐츠를 아름답게 보이게 하려면 가장 좋은 방법은 적응형 텍스트 영역(영역을 최소화하기 위한 최대 너비)을 갖는 것입니다.

처음에는 textarea 태그의 속성에 문자 수에 해당하고 행과 열 수를 설정하는 데 사용할 수 있는 행과 열이 포함되어 있기 때문에 시도했습니다.

아쉽게도 텍스트 영역은 한자와 영문에 대한 계산 기준이 다르기 때문에 현실에 패했습니다. 한자는 2로, 영어는 1로 계산됩니다. 사용자 입력이 불확실하기 때문에 어렵습니다. 텍스트 문자열의 길이를 이용하여 텍스트 영역의 행과 열 값을 설정합니다.

다시 시작점으로 돌아가서 크기를 설정하는 유일한 방법은 텍스트 픽셀의 픽셀 길이를 계산하는 것입니다(최대 너비 제한과 동일).

텍스트 길이를 계산하려면 "JQuery에서 텍스트 너비의 전체 너비를 계산합니다."를 참조하세요.

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;
}

로그인 후 복사

참고:

 태그를 현명하게 추가/삭제하여 <pre class="brush:php;toolbar:false">의 실제 길이, 즉 텍스트 길이를 반환하세요.<p>
<br />
</p> 기본 max-width보다 작은 값의 경우 텍스트 영역 div를 기본값으로 설정할 수 있습니다. 기본 max-width보다 큰 값의 경우 텍스트 영역 div는 width=max-width로 설정됩니다.<p>
</p>
<div class="jb51code">
<pre class="brush:java;">
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";
}

로그인 후 복사

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 　　} });