팝 (오버) 풍선

HTML과 CSS의 힘은 항상 놀랍습니다. Popover API의 새로운 대화식 기능은 다시 한 번 두 언어만으로 달성 할 수있는 놀라운 결과를 다시 한 번 증명합니다.

Popover API의 기능을 보여주는 다른 튜토리얼을 보았을 수도 있지만이 게시물은 "완전한 정복"에 더 중점을 둡니다. 우리는 풍선과 같은 여분의 "재미있는"요소를 추가 할 것입니다.

나는 HTML과 CSS 만 사용하여 게임을 만들었고 (물론) Popover API에 의존했습니다. 당신의 임무는 1 분 안에 가능한 많은 풍선을 찌르는 것입니다. 그러나 조심하세요! Guru가 말했듯이 일부 풍선은 "크롤링"되어 더 많은 풍선을 유발합니다.

나는 그것을 영리하게 이름을

pop (Over) 를 함께 단계별로 함께 만들 것입니다. 일단 완료되면 (음, 정확히 이와 같이) :

처럼 보일 것입니다. 프로세싱 팝 오버 속성 속성으로 디자인하는 한 모든 요소가 팝업 박스로 사용할 수 있습니다. 우리는 에 대한 값을 제공 할 필요조차 없습니다. 기본적으로

의 초기 값은

이며 사양에서 "Lightweight Shutdown"이라고하는 것을 사용합니다. 즉, 팝업 박스 외부의 어느 곳에서나 클릭하여 팝업 박스를 닫을 수 있습니다. 팝업 상자가 열리면 페이지의 다른 팝업 상자가 함께 중첩되지 않으면 닫힙니다. 팝 박스는 너무 상호 의존적입니다. 또 다른 옵션은

로

value를 설정하는 것입니다 :

이것은 요소가 수동으로 켜지고 꺼져 있음을 의미합니다. 켜고 끄려면 특정 버튼을 클릭해야합니다. 다시 말해, 는 올바른 버튼을 클릭 할 때만 닫히고 페이지의 다른 팝업과 완전히 독립적 인 완고한 팝업을 만듭니다. popover

요소를 시작점 로 사용하십시오 Popover API를 사용하여 게임을 구축하는 데있어 문제 중 하나는 페이지를로드 할 수 없을 때 팝업 박스가 이미 열려 있다는 것입니다 ... 우리의 목표는 HTML 및 CSS만으로 게임을 구축하는 것이라면 JavaScript 로이 문제를 해결할 수 없습니다.

<div popover="">...</div>

요소는 현재 필요합니다. 팝업 상자와 달리 요소는 기본적으로 열 수 있습니다. popover 우리 가이 접근법을 취하면, 우리는 마지막 버튼 (풍선)을 표시하고 마지막 풍선을 끄고 모든 풍선을 "poke"할 수 있습니다. 다시 말해, 시작 풍선을 Open 요소에 배치하여 페이지가로드 될 때 표시되도록 할 수 있습니다. <code>popover 이것은 내가 기본 구조라고 부르는 것입니다 : auto 이 방법으로 auto의 풍선을 클릭하여 를 닫고 모든 버튼 풍선을 "Poke"하고 풍선을 남깁니다 (마지막

(나중에 제거하는 방법을 다루는 방법).

당신은

가 우리 게임의 더 의미적인 방향이라고 생각할 수 있습니다. 당신은 옳습니다. 그러나 여기서 사용할 수없는 <dialog></dialog>를 사용하는 데는 두 가지 단점이 있습니다. <dialog></dialog> 페이지가로드 될 때 열려있는

를 끄는 유일한 방법은 JavaScript를 사용하는 것입니다. 내가 아는 한, 페이지가로드 될 때 켜지는

를 끄기 위해 게임에 추가 할 수있는 방법이 없습니다.
1. <dialog></dialog> 는 모달이며 열 때 다른 콘텐츠를 클릭하지 못하게합니다. 우리는 플레이어가 타이머를 물리 치기 위해 <dialog></dialog> 밖에서 풍선을 찌를 수 있도록해야합니다.
2. 그래서 우리는 <dialog></dialog> 요소를 게임의 상단 컨테이너로 사용하고 팝업 자체, 즉 로서 일반
   를 사용합니다. 지금은 버튼을 클릭하면 팝업 상자가 열리도록 이러한 팝업 상자와 버튼이 모두 함께 연결되어 있는지 확인하면됩니다. 다른 자습서에서 이것을 배웠을 수도 있지만 응답 해야하는 버튼에 어떤 팝업 요소를 알리고, 팝업을 열어야하는 버튼을 알려야합니다. 이렇게하려면 팝업 요소에 고유 한 ID를 제공 한 다음 (모든 ID가되어야 함)
속성을 ​​사용하여 버튼에 참조하십시오.

이것은 모든 것이 함께 연결될 때의 아이디어입니다 :

팝업 상자를 열고 닫습니다 마지막 데모에는 조금 더 많은 작업이 필요합니다. 지금까지 게임의 한 가지 단점은 팝업 버튼을 클릭하면 더 많은 팝업을 클릭하면 사라집니다. 이것은 게임을 너무 간단하게 만듭니다. <details open=""></details> 우리는 버튼에 <div> 속성을 ​​설정하여 개방 및 마감 동작을 분리 할 수 ​​있습니다 (아니요, HTML 사양 작성자는 단순성에 신경 쓰지 않습니다). 속성 값을 <code><div popover=""> 또는 <code>popovertarget로 설정하면 버튼은 해당 팝업에 대해서만 하나의 작업 만 수행합니다.

<div popover="">...</div>

에 새 버튼을 추가했는데,이 버튼은 다른

를 타겟팅하도록 설정되었으며, 위의

속성을 ​​의도적으로 설정하여 켜거나 끕니다. 요소 (좋은 방법으로) 요소를 "찌르는"것이 얼마나 어려운지 확인하십시오. 스타일 풍선 이제 플레이어를 구별 할 수 없도록

및 버튼 요소에 대해 동일한 스타일을 설정해야합니다.

에 대해 이야기하고

가 아닙니다.

는 컨테이너의 실제 요소이기 때문에 열리고 닫습니다.

대부분의 작업은 표준 CSS 작업입니다. 배경, 충전, 마진, 크기, 테두리 등을 설정합니다. 그러나 반드시 직관적이지 않고 포함되어야하는 중요한 것들이 있습니다. popovertargetaction

먼저,
• 속성을 ​​ 요소에서 <summary></summary>로 설정하여 list-style-type가 켜져 있는지 또는 꺼짐을 나타내는 삼각형 마크를 제거하십시오. 태그는 매우 유용하고 기본적으로 매우 우수하지만 이와 같은 게임의 경우 더 나은 도전을 위해 프롬프트를 제거하는 것이 좋습니다. none Safari는 같은 방법을 좋아하지 않습니다. 여기에서 태그를 제거하려면 특수 공급 업체 접두사 유사 요소를 설정해야하며 <details></details>는 로 설정됩니다.
마우스 커서가 풍선을 클릭 할 수 있음을 나타내는 경우 좋을 것입니다. 따라서 요소에서
• 를 설정할 수도 있습니다. <details></details> 마지막 세부 사항은 풍선 (이모 지 텍스트 만)이 선택되는 것을 방지하기 위해 summary::-webkit-details-marker 속성을 ​​display: none; on 로 설정하는 것입니다. 이것은 페이지의 객체와 비슷하게 만듭니다.
예, 지금은 2024 년이며 Safari 지원을 고려하려면 여전히 접두사
• 속성이 필요합니다. 감사합니다, 애플. <summary></summary> cursor: pointer 버튼과 요소에 사용할 클래스 에이 모든 코드를 넣으십시오.
풍선의 한 가지 문제는 그들 중 일부는 의도적으로
• 가 아무것도하지 않는다는 것입니다. 닫힌 팝업 상자가 열려 있지 않기 때문입니다. 플레이어는 특정 풍선을 클릭/클릭하지 않았다고 생각하거나 게임이 고장 났다고 생각할 수 있으므로 풍선이 <summary></summary> 클릭 상태에있을 때 약간의 축소를 추가 해 봅시다. user-select none 보너스 :
커서가 집게 손가락을 가리키는 손이기 때문에 풍선을 클릭하는 것은 손가락으로 풍선을 찌르는 것과 비슷합니다. ???? <.> 화면에 풍선을 배포하는 방법은 고려해야 할 또 다른 중요한 요소입니다. JavaScript가 없으면 무작위로 배치 할 수 없으므로 불가능합니다. 나는 승수로 사용할 수있는 사용자 정의 속성으로 정의 된 내 자신의 "랜덤"숫자를 만드는 것과 같은 많은 방법을 시도했지만 풍선을 겹치거나 일종의 시각적 패턴을 구축하지 않으면 전체 "랜덤"효과를 얻을 수는 없습니다.
• 나는 클래스를 사용하여 다른 행과 열에서 풍선을 찾아 CSS 그리드 나 여러 열이 아니라 물리적 보간을 기반으로 가상의 행과 열을 찾았습니다. 그것은 그리드처럼 보이고 원하는만큼 "무작위"가 아니지만, 풍선이 같은 두 클래스를 가지고 있지 않는 한 서로 겹치지 않습니다. -webkit-user-select 나는 8 × 8 그리드를 사용하기로 결정했지만 첫 번째 "행"과 "열"을 남겨 두어 풍선이 브라우저의 왼쪽과 상단 가장자리를 모호하게하지 않도록했습니다.

플레이어에게 축하를 전하십시오 (또는 축하하지 않음) 우리는 대부분의 게임 구성 요소가 준비되어 있지만, 지정된 시간 내에 모든 풍선을 성공적으로 찌르는 것을 플레이어에게 축하하는 팝업 박스를 갖는 것이 좋습니다.

모든 것이

요소로 돌아갑니다. 요소가 열려 있지 않으면 게임이 끝나고 마지막 단계는 마지막 풍선을 찌르는 것입니다. 따라서 요소에 ID를 제공하면

를 사용하여 숨길 수 있습니다. 여기, pseudo-selector를 사용하는 것이 좋습니다. 왜냐하면 가 닫히면 #root id의 자식 요소를 선택할 수 있으므로 요소의 부모 요소를 선택할 수 있기 때문에 요소의 부모 요소를 선택할 수 있기 때문입니다. (예, 아이러니하다는 것을 알고 있습니다.) display: none;

우리 가이 시점에서 게임을한다면, 우리는 모든 풍선을 찌르지 않고 승리 메시지를받을 수 있습니다. 다시 한 번, 올바른 버튼을 클릭하지 않으면 수동 팝업 상자가 닫히지 않습니다.

<div popover="">...</div>

팝업 상자가 여전히 열려있는 경우 CSS에서 알 수있는 방법이 있습니까? 예,

의사 클래스를 입력하십시오. :has() #root 의사 클래스가 열린 팝업 상자를 선택합니다. 팝업 상자가 여전히 페이지에서 열릴 때 메시지가 나타나는 것을 방지하기 위해 이전 #root와 함께이를 사용할 수 있습니다. 다음은 조건부 명세서처럼 작동하도록이를 연결하는 방법입니다. #congrats

이제 플레이어가 실제로 이길 때만 축하를받을 것입니다.

<div popover="manual">...</div>

대조적으로, 플레이어가 1 분의 타이머가 만료되기 전에 플레이어가 모든 풍선을 찌를 수 없다면, 우리는 플레이어에게 게임 종료를 알리야합니다. 우리는 CSS에 조건부 명령이 없기 때문에 (적어도 아직 아님), 우리는 1 분의 애니메이션을 실행 하여이 메시지가 게임을 끝내기 위해 사라집니다.

<details></details> 그러나 우리는 승리 화면이 표시 될 때 고장 메시지가 발사되는 것을 원하지 않으므로 메시지와 동시에

메시지가 동시에 표시되는 것을 방지하기 위해 선택기를 작성할 수 있습니다.

:popover-open 우리는 게임 타이머가 필요합니다 플레이어는 모든 풍선을 얼마나 많은 시간을 보내는 지 알아야합니다. 화면의 전체 너비 (100VW)를 차지하고 수평으로 스케일을 조정하고 위의 애니메이션과 일치하는 요소가있는 다소 "간단한"타이머를 만들 수 있습니다.

단 하나의 실패점 만 게임을 너무 간단하게 만들 수 있으므로 두 번째 요소를 추가하고 두 번째 "루트"ID, 를 사용해 보겠습니다. 마찬가지로, :popover-open를 사용하여 :has() 및 요소가 열려 있는지 확인한 다음 메시지가 표시되는지 확인할 수 있습니다. and

<details open=""></details>

요약 남은 유일한 것은 게임을하는 것입니다!

> 재미? 자체 부과 JavaScript 메서드 제한없이 더 강한 것을 구축 할 수 있다고 확신하며 접근성을 심각하게 받아들이지 않지만 API를 한도로 밀어내는 것은 재미 있고 교육적인 일입니다.

나는 관심이있다 : 팝업 박스를 사용하기 위해 어떤 다른 이상한 아이디어를 생각할 수 있습니까? 어쩌면 다른 게임, 일부 예쁜 UI 효과 또는 팝업 상자를 앵커 포지셔닝과 같은 다른 신흥 CSS 기능과 결합하는 영리한 방법을 생각할 수도 있습니다. 그것이 무엇이든, 공유하십시오!