CSS와 함께 시간 여행 : 대상

CSS, 확인란 및 라디오 버튼 기술로 게임을 만드는 것은 악명 높다 (또는 널리 알려져 있음). 그러나 사용자 입력을 기반으로 한 다른 요소도 영리하게 활용되고 게임 화에 사용될 수 있습니다. 개발자는

의사-범주를 기반으로하는 매우 멋진 CSS 게임 케이스와 pseudo-category를 기반으로 한 게임을 만들었습니다.

그러나 그러나, 나는 의사 클래스 가이 CSS 기술 분야에서 미숙 한 것으로 보인다는 것을 알았습니다. 그것에 대해 생각한 후, 이것은 과소 평가 된 강력한 CSS 기능입니다. : target :hover는 선택한 점프 링크를 기반으로 모든 요소를 ​​스타일링 할 수 있습니다. 즉, 브라우저에는 간단한 버전의 클라이언트 라우팅이 내장되어 있습니다! 미친 과학자가되어 우리를 어디로 데려 갈 수 있는지 보자. :valid CSS의 무적 ai 이 단어를 함께 연결 했습니까? 우리가 특이점에 도달 할 때까지 CSS를 열렬히 사용해야합니까? 아래 스타일 시트에서 Tic Toe 게임을 물리 치고 직접 결정하십시오.

스타일 시트는 때때로 게임이 넥타이로 끝나도록 허용하므로 적어도 은색 안감이 있습니다.

:target 걱정하지 마세요! CSS는 아직 Skynet이되지 않았습니다. CSS 트릭과 마찬가지로 게임 상태 수 에서 CSS로 게임을 구현할 수 있는지 여부를 결정하는 경험 법칙. 4 × 4 스도쿠 솔버를 만들 수 있었을 때 이것을 깨달았고 9 × 9 버전이 구현하기가 거의 불가능하다는 것을 알았습니다. CSS 속임수는 궁극적으로 게임 상태를 숨기고 표시하기 위해 사용자 입력에 응답하는 선택기에 의존하기 때문입니다. X가 먼저 진행되면 Tic Toe는 달성 할 수있는 5478 개의 법적 상태를 가지고 있으며, 법적 상태에서 최상의 움직임을 계산할 수있는 잘 알려진 알고리즘이 있습니다. 따라서 CSS를 완전히 사용하여 TIC 발가락 게임을 구현할 수 있습니다.

알았어, 어떻게하는지?

어떤 의미에서, 우리는 CSS를 전혀 깨뜨리지 않고 CSS를 하나님의 뜻으로 사용합니다. "스마트"는 HTML이 생성되는 방식에 있습니다. 그것은 Tic-Toe Multiverse의 모든 가능한 상태를 포함하는 "자신의 모험 선택"책과 같습니다.

우리는 Ruby에서 구현 된 Minimax 알고리즘의 변형을 사용하여 그것을 생성합니다. Codepen이 Haml (루비 블록 지원)을 지원한다는 것을 알고 있으며, 비밀리에 루비 놀이터로 사용할 수 있습니까? 이제 알다시피.

우리의 haml에 의해 생성 된 각 상태는 html에서 다음과 같습니다.

놀랍게도 간단한 CSS만으로 선택기를 사용하여 현재 선택된 게임 상태 만 표시 할 수 있습니다. 또한 컴퓨터의 역사적 움직임에 클래스를 추가하여 컴퓨터의 최신 동작에서 필기 애니메이션 만 트리거 할 수 있습니다. 이것은 우리가 보드에서 게임을하고있는 것처럼 느끼게 만들고 실제로 우리는 문서의 다른 부분들 사이에서 뛰어 내리고 있습니다.

<div>
  <svg><circle></circle></svg><a href="https://www.php.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

  <svg><circle></circle></svg><svg><circle></circle></svg><div></div>

  <a href="https://www.php.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

빈 정사각형을 클릭하여 점프 링크를 선택할 때 의사 클래스는 업데이트 된 게임 상태 ()를 표시하며 컴퓨터에 미리 계산 된 응답이 애니메이션 방식으로 나타납니다 ().

게임을 시작할 때 특별한 상황에 주목하십시오. :target 사용자가 점프 링크를 선택하기 전에 초기 빈 그리드를 표시해야합니다. 스타일의 내용은 처음에 설정되지 않으므로 점프 링크가 선택되면 .s 선택기를 사용하여 초기 상태를 숨 깁니다. 마찬가지로, .c를 사용하여 실험을 만들면 사용자가 페이지와 상호 작용하기 시작하기 전에 초기보기를 렌더링해야합니다.

요약 나는 JavaScript의 "Easy"접근 방식을 사용하지 않고 CSS에서 이것을 구현하는 이유에 대한 깊이에 빠지지 않을 것입니다. 이것은 CSS 경계를 추진하는 재미 있고 교육적인 방법입니다. 예를 들어, 우리는 클래식 체크 박스 트릭을 사용하여이를 수행 할 수 있습니다. 실제로 누군가가 수행했습니다. 를 사용하는 것이 흥미로운 것이 있습니까? 나는 예라고 생각합니다. 왜냐하면 : :target :body:has(:target) #--------- :target 우리는 CSS로 게임을 저장할 수 있습니다! 남은 상태 북마크를 사용하여 언제든지 URL에 액세스하십시오.

브라우저의 "뒤로"및 "전방"버튼을 게임 컨트롤로 사용할 수 있습니다. 앞으로 돌아가거나 재생 운동으로 움직임을 취소 할 수 있습니다.

를 체크 박스 트릭과 결합하여 브레이드 전통에서 시간 여행 메카닉으로 게임을 만듭니다.

게임 상태를 공유하십시오. 이것은 wordle과 같은 쇼 오프 권리를 얻을 가능성이 있습니다. Invincible CSS Tic Toe 알고리즘을이기거나 그리는 경우 URL을 공유하여 업적을 세상에 보여줄 수 있습니다.

완전히 시맨틱 html입니다. 체크 박스 트릭을 사용하려면 체크 박스 나 라디오 버튼을 숨겨야하므로 접근성과 관련하여 항상 기술과 고통스러운 거래입니다. 우리는 단지 점프 링크와 div와 그 스타일을 사용하고 있기 때문에이 방법은 트릭이 없을 것입니다. 이렇게하면 쉽게 접근 경험을 제공 할 수있는“더 쉬운”말을 할 수도 있습니다. 그러나 그것은 상자 밖으로 쉽게 액세스 할 수 있다고 말하는 것은 아닙니다.

:target

위 내용은 CSS와 함께 시간 여행 : 대상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!