| 내용 |
|
| 게임 루프 작성 | HTML 확장 |
응답 레이아웃
이 자습서에서는 자바 스크립트를 사용 하 여 응답 레이아웃을 만드는 방법을 보여 줍니다. 라이브러리에 두 개의 상자를 추가 합니다. 만들고 하나 빨간색 하나 그린. 이 상자는 단지 예입니다. 모든 도형 또는 개체를 사용할 수 있습니다.
편집기 상자를 추가 합니다.
그래서 그들은 왼쪽 및 오른쪽 측면을 채우기는 상자를 정렬 합니다. 그들 주위에 테두리를 둡니다.
이 지금은 왼쪽과 오른쪽 양쪽에 콘텐츠가 포함 된 웹 페이지의 예입니다. 데스크톱 웹 브라우저 또는 가로 모드에서 휴대 전화에 잘 보이는 것입니다. 불행 하 게도,이 레이아웃은 세로 모드에서 잘 작동 하지 않습니다. 맞게, 나는 화면을 채우기 위해 확장 된 두 개의 상자를 축소 해야 합니다 그리고 상자 양쪽을 잘라.
이 상황은 응답 레이아웃 필요 하다입니다. 세로 모드에서 한 상자는 다른 위에 이동 해야 합니다. 이렇게 하려면 우리는 자바 스크립트를 사용 하 여 상자를 이동 해야 합니다. 즉, 해제 '시간 표시 막대를 사용 하 여' 상자와 설정에 대 한 한 '스크립트 Id'.
영화의 범위 밖에 서 상자를 이동, 동영상 속성에 클립을 해제 해야 합니다.
상자를 정렬 하는 가장 좋은 장소는 '크기 조정에' 영화 이벤트.
우리가 필요한 함수는 GetLeft, GetTop, GetWidth 및 GetHeight. 이러한 기능 웹 브라우저 또는 장치는 영화의 좌표를 사용 하 여 범위를 제공 합니다. 클립 설정 된 경우 이러한 값 영화의 범위를 반환 합니다. '없음'을 사용 하는 경우 영화 규모, GetLeft 및 GetTop 항상 0을 반환 합니다 및 무시할 수 있습니다.
우선 그래서 하나 채우고 왼쪽 및 오른쪽을 채우고 다른 두 개의 상자를 정렬 하실 수 있습니다.
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());
다음, 우리는 크기 10의 테두리를 추가 합니다. 이의 값 10이 반드시 픽셀에서, 영화 같은 스케일. 영화를 사용 하 여 모든 픽셀에 대 한 '없음'을 확장.
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
마지막으로 우리는 웹 브라우저 또는 장치 너비가 높이 보다 작으면 참조를 테스트 합니다. 그렇게 되 면, 상자를 수직으로 다시 정리 합니다.
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}
이제는 플레이어 크기를 조정 하는 경우 당신이 볼 수 있는, 두 개의 상자 자신을 자동으로 배열할 것 이다. 이러한 두 상자 다른 도형 및 개체를 쉽게 교체할 수 있습니다. 이 예제에서는 보다 복잡 한 레이아웃을 처리 하기 위해 확장 될 수 있다.
| 게임 루프 작성 | HTML 확장 |