CSS에서 스도쿠스 생성 (및 해결!)

나는 CSS가하지 말아야 할 일을하는 것을 좋아합니다. Minecraft에서 계산기를 구축하는 문제 해결 뇌 훈련의 유형입니다. 아마도 Minecraft Redstone과 함께 일하는 것이 아무리 좋든 상관없이 CSS 기술은 실제 돈의 가치가 있으며 많은 일반 프로그램 선수는 CSS를 두려워하기 때문에 팩에서 눈에 띄는 방법이 될 수 있습니다. 또한 CSS로 불가능한 일을했을 때 모든 일반 CSS 작업이 쉬운 것처럼 보입니다.

CSS가 튜링 완전 언어인지 CSS 및 HTML이 프로그래밍 언어로 자격이 있는지에 대한 흥미로운 토론을 읽었습니다. 나는 결정하지 않았지만 표준적인 방식으로 일반적인 UI 패턴을 지원하기 위해서는 새로운 CSS 기능 중 일부가 스타일링과 기능 사이의 선을 흐리게한다고 말할 수 있습니다.

CSS와 HTML만으로 논리적 문제를 해결하기 위해 스스로 도전하면 사용자 지정 속성 및 논리적 기능과 같은 CSS의 새로운 기능과 같은 일부 기능으로 양질의 시간을 보내도록 할 수 있습니다. CSS 만 사용하여 스도쿠 솔버를 구축하는 데 어떻게 사용될 수 있는지는 아직 명확하지 않았지만 아이디어가 들리는만큼 미친 듯이 스도쿠의 제약 기반 논리는 CS의 선언적 특성과 호환되는 것처럼 보였으므로 다른 사람이“CSS3 스도쿠 솔루션 솔버”를 구축했다고 주장하는 것에 충격을받지 않았습니다. 결과적으로, 이것은 솔버보다 CSS의 스도쿠 유효성 검사기와 비슷했습니다. 또한 작은 JavaScript를 사용하여 TextBoxes를 사용했습니다.

순수한 CSS로 전체 스도쿠 솔버와 발전기 앱을 구축하려고 며칠이 지나면 세 가지를 배웠습니다.

1. SASS 기능과 Mixins 테스트를 단위 할 수 있습니다. 이 SASS 기능을 크게 사용하고 재사용하는 경우, 그들이 의도 한 바에 따르면, 코드베이스의 다른 부분만큼 미션 크리티컬이되고 변화하는 것은 무서워집니다. 그들은 그들 주위에 시험을받을 자격이 있습니다.
2. Chrome Devtools는 50MB의 사스 생성 CSS를 던질 때 무한한 죽음의 스피너를 보여줍니다.
3. 이 파이썬 스크립트와 같은 것을 순수한 CSS로 번역하는 것은 불가능할 수도 있습니다. 아마도.

그러나 아래에서 연주 할 수있는 16 평방 스도도를위한 스도쿠 솔버 및 발전기 앱을 달성 할 수 있습니다. 그런 다음 기능의 작동 방식을 분류합니다. 지금 당신의 신, 어린 아이들을위한 단순한 퍼즐은 어디에 있습니까?

값 선택기

우리는 CSS를 실험하고 있기 때문에, 우리는 Sudoku 플레이어가 UI를 감상하는 것처럼 보이지만 시각적으로 흥미로운 것을 포함시켜야 할 의무가 있습니다. 내 생각에, 스도쿠 앱 중 일부에서 숫자를 선택하는 방법은 더 직관적 일 수 있으므로 방사형 메뉴 UI 패턴을 적용하기로 결정했습니다.이 패턴은 흑백 Macintosh의 날로 거슬러 올라가며 현대 비디오 게임에서 여전히 인기가 있습니다. 누군가는 실제로 방사형 메뉴를 위해 멋진 순수한 CSS 라이브러리를 만들었지 만, 주위의 원이있는 항목을 선택하는 방식과 사용 가능한 동작을 매력적으로 표시하는 방식을 좋아하기 때문에 React Planet에 호감을 얻었습니다. CSS에서도 비슷한 효과를 낼 수 있는지 확인하고 싶었습니다.

나는이 펜에서 점선 코드 중 일부를 가져간 다음 오래된 Border-Radius : 50% 트릭을 사용하여 레이블에서 숫자를 만들었고, 절대 포지셔닝을 사용하여 애니메이션이 크기를 변경할 때에도 숫자를 점선의 올바른 지점으로 만듭니다.

 .context .number.top {
  배경 : 녹색;
  마진 좌파 : 자동;
  마진 오른쪽 : 자동;
  왼쪽 : 0;
  오른쪽 : 0;
  상단 : -12.5px;
}

.context .number.left {
  배경 : 오렌지;
  마진-탑 : 자동;
  마진 바닥 : 자동;
  상단 : 0;
  하단 : 0;
  왼쪽 : -12.5px;
}

애니메이션은 Z- 인덱스를 높이기 위해 숫자 피커를 희미 해져 클릭 할 수 있습니다. 우리는 또한 상단과 왼쪽 여백을 50%에서 0에서 0으로 애니메이션하여 원이 중앙에서 확장되어 사용 가능한 공간을 채 웁니다.

 @keyframes 바운스 아웃 {
  0% {
    Z- 인덱스 : -1;
    너비 : 35%;
    높이 : 35%;
    마진 왼쪽 : 50%;
    마진-탑 : 50%;
    불투명도 : 0;
  }
  100% {
    z- 인덱스 : 2;
    불투명도 : 1;
    너비 : var (-Circle-Radius);
    높이 : var (-Circle-Radius);
  }
}

그런 다음 React Planet과 유사한 탄력 물리학을 시뮬레이션하기 위해 애니메이션에서 Cubic-Bezier () 기능을 사용합니다. Website Easings.net은 완화 기능을 쉽게 만드는 데 큰 도움이되었습니다.

 .문맥 {
  애니메이션 : 바운스 입방-베 지어 (.68, -0.6, .32, 2.5) .5S Forwards;        
}

선택한 제곱의 값 선택기를 열는 값 선택 및 동작은 라디오 버튼 해킹을 사용하여 작동하여 어떤 값이 선택되었는지 기억하고 상호 독점 성을 달성합니다. CSS-Tricks는 Checkbox 및 Radio Button Hacks에 대한 훌륭한 기사를 가지고 있으므로 여기에서 해당 정보를 반복하지는 않지만이 실험이 작동하는 방식의 중심이므로 CSS 변수를 Sudoku CSS 그리드 수준에서 설정하는 방법을 보여 드리겠습니다.

변수를 사용하므로 값이 설정 될 때 값이 설정 될 때 동일한 동작을 얻을 수 있습니다. 사용자가 값을 지정하기 위해 상자를 확인하는지 여부에 관계없이 정사각형에 대해 동일한 값의 퍼즐 생성기 설정을 확인합니다. 사각형과 값의 많은 조합이 있으므로 모든 조합을 손으로 쓰기보다는 Sass를 사용하고 있습니다. 또한 각 가치 제곱 조합에 대해 별도의 비트 값을 생성하고 있으며 정사각형이 해결되지 않은지 알려주는 다른 사용자 정의 속성을 만들고 있습니다. CSS는 한 값을 다른 값과 비교할 수있는 능력이 제한되어 있기 때문입니다 (가능하지만 까다로울 수 있습니다). 우리는 처음에는 조금 이상하게 보일 수있는 방식으로 이러한 값을 정의하고 있지만 스도쿠 스퀘어 값 세트가 해결 될 수 있는지 여부를 검증 할 때 인생을 더 쉽게 만들 수 있습니다.

 @for $ i부터 1 ~ 16 {
  @for $ j부터 1 ~ 4 {
    #select-#{$ j}-값-값-값-{$ i} : checked ~ .sudoku {
       -스퀘어-#{$ i}-해결 : 0; 
       ---square-#{$ i}-equals-#{$ j} : 1;
    }
  }
}

그리드 검증

Google 박사는 16 개의 사각형만으로도 4 억 개의 가능한 조합이 있다고 말합니다. 그러나 스도쿠 규칙에 따라 이러한 모든 조합을 강화하고 유효한 조합을 출력하는 프로그램은 4 × 4 스도쿠에는 288 개의 유효한 솔루션 만 있음을 보여줍니다. 이는 9 × 9 그리드에서 가능한 유효한 솔루션의 수와 큰 차이가 있습니다. 288 개의 가능한 솔루션만으로 Sass가 실제로 자체적으로 들어올 수있는 곳입니다. CSS가 완전한 언어인지 확실하지 않지만 SASS는 여전히 목록과 같은 적절한 데이터 구조를 제공합니다. 약간의 Regex Magic을 사용하면 위에 연결된 유효한 4 × 4 퍼즐 목록을 Sass 기반 2 차원 목록으로 변환 할 수 있습니다!

 $ 솔루션 : ((1,2,3,4,3,4,1,2,2,1,4,3,4,3,2,1), (3,1,2,2,4,1,3,3,4,2,4,2,3,3,1), (1,2,3,4,4,2,2,3,4,4,1,1,3), Mans 나중에 ...*/(2,4,3,1,3,4,2,4,2,1,3,1,3,2,4), (4,3,3,2,1,1,4,3,3,4,2,1,2,3,3,4);

달콤한! CSS 해킹이 다중 계층 응용 프로그램이라면 데이터베이스가 될 것입니다. 검증은 소개에서 본 9 × 9 유효성 검사기와 같은 행 및 열 값을 확인하는 것과 동일한 접근 방식을 사용했을 수 있지만, 우리는 답을 알고 있기 때문에 블록과 열 및 행을 확인하는 것을 귀찮게 할 필요가없는 것 같습니다. 대신 입력 된 숫자가 여전히 유효한 퍼즐인지 여부를 확인할 수 있습니다. Pseudocode에서 이것은 다음과 같은 것처럼 보일 수 있습니다.

 foreach (s in squares) 
{
  if (SolutionScrantains (s.value, s.index) 또는 s.isunsolved ())
  {
    showValidationError ();
  } 
}

제곱 값이 선택 될 때마다 이상한 변수를 만들었습니다.

 -스퀘어-#{$ i}-해결 : 0;        
---square-#{$ i}-equals-#{$ j} : 1;

이제 우리는 위의 의사 코드 3 행의 조건에서 두 질문에 대한 답변을 가지고 있지만 CSS에서 논리적 또는 연산자를 어떻게 수행 할 수 있습니까? CSS 트릭에 대한 CSS 트릭을 사용하여 CSS의 논리 연산자를 시뮬레이션하는 것에 대한 훌륭한 기사가 있으며, 스도쿠 솔버의 코드 중 일부를 생각하지 않았을 것입니다. 그러나 해당 기사에서 설명 된 일부 공식은 다루기 힘들어지고, 특히 두 개 이상의 오페라가있는 중첩 및 및 ORS를 원한다면 약간 다루기가 어렵습니다. 예를 들어, 우리는이 의사 코드와 동등한 CSS가 필요합니다.

 if ((smareoneequalsone 및 squaretwoequalstwo /*...*/ 및 squaresixteenequalsone) 또는 (Squareonequalsone 및 squaretwoequalsthrepe /*...*/ 및 squaresixteenequalsone)).
  {
    sudokuisvalid ();
  } 
}

Calc ()를 사용하여 논리를 수행하는 방법을 보여주는 기사는 2019 년에 작성되었습니다. 요즘 Calc () 외에도 우리는 잘 지원되는 Min () 및 Max () 수학 기능이 더 나은 필요를 충족시킵니다. Google "CSS Min, Max 및 Clamp"(마지막이 Min () 및 Max ()의 조합을위한 편리한 설탕 인 경우, 유체 타이포그래피를 단순화하는 데 사용되는 방법을 보여줍니다. 그것은 하나의 매력적인 사용 사례이지만, 당신은 숫자를 사용하는 곳 어디에서나 이러한 수학 기능을 사용할 수 있으며, 이는 CSS에 많은 힘을 더합니다. 예를 들어, 비트 플래그 변수를 CSS MIN ()로 전달하면 이와 동일합니다. 동일한 플래그를 CSS Max ()에게 전달하는 경우 OR과 같습니다. 우리는 다음 진실 테이블을 사용하여 이것을 증명할 수 있습니다.

우리는 특히 당신이 calc ()가 min ()과 max () 내에서 할 수있는 일을 할 수 있다는 유용한 사실을 추가 할 때 매우 정교 할 수 있습니다. CSS는 자신의 이상한 스크립팅 언어가되는 데 한 걸음 더 다가갔습니다. 이제 CSS에서 위의 유효성 검사 의사 코드에서 조건을 구현할 수 있습니다. (실제로, 우리는 매우 반복적이기 때문에 Sass에서 이것을 생성합니다.)

 .sudoku { 
  -Square-1-Matches-Puzzle-1 : MAX (VAR (-Smarte-1-Unsolved), var (-Square-1-equals-1, 0));
  -Square-2-Matches-Puzzle-1 : MAX (VAR (-Strime-2-Unsolved), var (-Smare-2-equals-2, 0));
  /*...*/
  -Square-16-Matches-Puzzle-1 : max (var (-Square-16-Unsolved), var (-Square-16-equals-1, 0));
  -Puzzle-1-found : min (var (-Smare-1-matches-puzzle-1), 
  /*...*/ 
  var (-smare-16-matches-puzzle-1));
  -솔루션-ound : max (var (-퍼즐 -1-- ound), /*.../ var (-퍼즐 -288-found));
}

SASS 2D 목록에서 사전 계산 된 솔루션 중 하나에 동일한 위치에있는 각 정사각형이 해독되지 않았는지 확인함으로써 현재 정의 된 사각형이 유효한 4 × 4 스도쿠 퍼즐에 존재하는지 여부를 알려주는 변수를 생성 할 수 있습니다. 이제 CSS에서 동작을 주도 할 숫자를 찾을 수있는 한, CSS 동작을-솔루션별로 기반으로 할 수 있습니다. 예를 들어, 유효하지 않은 경우 그리드를 빨간색으로 돌리려면 각 사각형에 넣을 수 있습니다.

 .정사각형 {
  색상 : RGB (calc (255 * (1- var (-솔루션)), 0, 0);
}

모든 CSS 속성이 숫자에 의해 구동 될 수있는 것은 아니지만 많은 캔, Z-Index와 불투명도는이 사용에 대해 특히 다재다능한 CSS 속성입니다. 다른 행동은 까다 롭지 만 종종 달성 할 수 있습니다. 예를 들어, 나는 숫자 비트 깃발 속성으로 유효하지 않은 그리드의 흔들림 애니메이션을 트리거하는 방법에 대해 약간의 생각을했기 때문에 그리드가 무효가되도록 그리드가 흔들릴 수 있도록 그리드가 흔들릴 수 있도록 CSS가 사양을 읽고 각 속성의 가장자리 케이스를 이해하도록하는 훌륭한 예입니다. 이 페이지에서 애니메이션 기간에 대한 솔루션을 찾았습니다.

기본값 인 0S의 값은 애니메이션이 발생하지 않아야 함을 나타냅니다.

따라서 Shake Animation의 애니메이션 지속 시간을-솔루션 창립에 따라 숫자를 클릭 할 때마다 애니메이션을 제거 할 수 있습니다. Active 의사 클래스를 사용하여 솔루션이 유효하지 않아서 애니메이션을 재생할 수 있으며 그렇지 않으면 아무것도 수행하지 않습니다.

 #select-#{$ j}-값-값-값-{$ i} : active { 
  애니메이션 : 없음;
}

 #select-#{$ j}-값-값-값-{$ i} : checked ~ .sudoku {
  애니메이션 : 입방 침체 (.36, .07, .19, .97) calc ((클램프 (0, 1- var (-솔루션), 1) * 1s) Forwards;
}

CSS 사용자 정의 속성이 없다면 순수한 CSS 스도쿠 앱은 아마도 불가능할 것입니다. 그리고 그들은 언뜻보기에 보이는 것보다 더 강력합니다. 변경에 의존 할 때마다 UI를 재평가하고 UI를 업데이트하는 방식은 VUE와 같은 멋진 JavaScript 프레임 워크에서 얻는 반응성의 간단한 버전과 같습니다. 반응성이 CSS 변수 형태로 브라우저에 바로 구축되었다고 말하는 것은 공평합니다!

이제 우리는 검증을위한이 접근법을 갖추고 있으며 스타일 시트는 스도쿠에서 유효한 값을 설정할 때마다 잠재 의식의 솔루션을 알고 있습니다. 우리는 솔버를 구현하는 데 가깝습니다!

4 × 4 스도쿠마다 해결

이 중간 변수를 도입했을 때를 기억하십니까?

 .sudoku { 
  -Puzzle-1-found : min (var (-Smare-1-matches-puzzle-1), 
  /*...*/ 
  var (-smare-16-matches-puzzle-1));
}

유효성 검사 코드를 더 쉽게 작성하고 이해할 수 있도록하는 것이 아닙니다. 288 개의 가능한 퍼즐 중 어느 것이 일치하는지 알면 솔버를 쓸 수 있습니다!

 #없음 해결 {
  z- 인덱스 : 1;
  색상 : 빨간색;
}
@for $ Solution-Index의 1 ~ 288 {
label [for = solution-#{$ solution-index}] {
  커서 : 포인터;
  z-index : calc (var (-퍼즐- #{$ solution-index}-found) * #{$ solution-index});
}

#Solution-#{$ Solution-Index} : 확인 ~ .sudoku {
  @for $ Square부터 1 ~ 16 {
    ---square-#{$ square} -solution : "#{nth (nth ($ Solutions, $ Solution-Index), $ square)}";
    -스퀘어-#{$ square} -color : 회색;
    --auto-#{$ square} : 1;
  }

사용자가 많은 사각형을 채우지 않은 경우 여러 가지 유효한 솔루션이있을 수 있기 때문에 옵션을 위의 "퍼즐"이라는 단어로 선정했습니다. 나는이 JavaScript와 같은 솔버를 파기로 인간이 추측하지 않고 해결할 수 있도록 충분한 값을 지정하지 않더라도 솔루션을 빠르게 생성 할 수 있습니다.

CSS 솔버의 트릭은 "해결"버튼이 단일 버튼처럼 보이지만 실제로는 288 개의 라디오 버튼 레이블이 서로 쌓여 있지만 모두 동일하게 보입니다. 카드 더미를 상상해보십시오. 그들은 모두 뒷면에 같은 디자인을 가지고 있지만 앞면에는 다른 값을 가지고 있습니다. 솔버 로직 (Solver Logic)은 z- 인덱스로 더미 상단에 솔루션이있는 카드를 넣고 있으므로, 그것을 집어 들고 다른 쪽을 읽으면 항상 올바른 솔루션을 갖게됩니다. 유효한 답변 목록의 뒷부분에 나오는 솔루션이 맨 위에 배치되기 때문에 여러 가지 올바른 솔루션이있는 경우에도 여전히 작동합니다. 플래그에 $ Solution-Index를 곱하여 z-index를 계산하기 때문입니다. 솔루션이 일치하지 않으면 모든 해결 버튼의 z-index는 0이되며 "잘못된 퍼즐"메시지가있는 버튼의 버튼 버전에 z-index가 있기 때문에 상단에 나타납니다. 퍼즐 번호 1이 솔루션이라면, 유효하지 않은 버튼이 HTML에서 더 일찍 오기 때문에 퍼즐 1 버튼이 여전히 표시됩니다.

쌓는 컨텍스트는 읽지 않으면 예기치 않게 행동 할 수 있으므로, 이것은 비 끔찍한 스태킹 동작 중 하나에 대한 좋은 예입니다.

퍼즐 생성

우리는 생성 퍼즐을 추가 요구 사항을 가진 다른 버전의 솔버로 생각할 수 있습니다.

1. 퍼즐 생성기 버튼을 누르면 일부 임의의 사각형을 해결되지 않아야합니다.
2. 무작위로 해결되지 않은 사각형과 올바른 솔루션의 조합은 발전기 버튼을 누를 때마다 달라야합니다.
3. 해결 버튼을 누르면 완전한 솔루션이 드러납니다.
4. 사용자가 생성 된 퍼즐을 수동으로 해결하는 경우, 우리는 그들이 얼마나 빨리 해결했는지에 대한 피드백을 제공하는 승리 화면으로 보상하고 싶습니다.

CSS에는 랜덤 () 함수가 없으므로 (Sass는 그렇습니다), 동일한 버튼을 누를 때마다 어떻게 다른 동작을 얻을 수 있는지는 분명하지 않을 수 있습니다. 그러나 위의 솔버 설명은 이미 단일 요소처럼 보이지만 현재 유효한 솔루션에 따라 다른 버튼과 비슷한 일을하고 있기 때문에 약간의 스포일러였습니다.

"생성"버튼의 질문은 클릭 할 때마다 예측할 수없는 결과를 얻는 방법입니다. CSS 트릭에 관한 기사에 대해 Alvaro Montoro에게 CSS만으로 겉보기에 임의의 값을 생성하는 방법에 대한 전액 신용. 라디오 버튼 해킹과 스태킹 순서 애니메이션의 조합은 잘 작동하는 것 같습니다. 나는 추가 마크 업없이 할 수 있는지 알아보기 위해 열심히 노력했지만이 접근법이 가장 좋고 가장 간단하다고 결론을 내 렸습니다. 솔버 설명에서 카드 데크 비유를 재사용하려면 퍼즐 카드 데크가 항상 보이지 않게 뒤섞여 카드를받을 때마다 다른 얼굴을 발견 할 수 있습니다.

이 의사 임의성을 SASS Random () 함수가 제공하는 실제 임의성과 결합하여 스도쿠 게임 재생 값을 제공 할 수 있습니다.

 @for $ j부터 0 ~ 287 {
  label [for = 생성#{$ j}] { 
    애니메이션 델리 : #{$ j * .35S}; 
  }
  label [for = generate#{$ j}] : active : after {
    Z- 인덱스 : 300;
    너비 : 100%;
  }
  #generate#{$ j} : 확인 ~ .sudoku { 
    $ blockcounts : (1 : 2, 2 : 2, 3 : 3, 4 : 2);
    $ SHUFFLESQUARES : (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);

     @for $ Square부터 1 ~ 16 {
       $ index1 : random (16);
       $ index2 : random (16);

       $ temp : nth ($ shufflesquares, $ index1);
       $ SHUFFLESQUARES : SET-NTH ($ SHUFFLESQUARES, $ index1, nth ($ SHUFFLESQUARES, $ index2));
       $ SHUFFLESQUARES : SET-NTH ($ SHUFFLESQUARES, $ index2, $ temp);
     }

     @each $ square in $ shufflesquares {
       $ 행 : CEIL ($ Square/4);
      $ 열 : 1 ($ Square -1) % 4;

       $ block : if ($ row & lt; 3, 1, 3) if ($ column  0) {
         $ blockcounts : map -merge ($ blockcounts, ($ block : $ count -1));
        -스퀘어-#{$ square}-해결 : 0; 
        -Square-#{$ square}-equals-#{$ val} : 1;

        @for $ 1 ~ 4 {기타 값 {
          @if ($ 기타 값! = $ val) {
            ---square-#{$ square}-equals-#{$ elopt-value} : 0;   
          }
        }

        -스퀘어-#{$ square} -color : 회색;
        --auto-#{$ square} : 1;
      }
    } 
  }
}

각 "블록"(주위에 두꺼운 테두리가있는 스도쿠 그리드의 4 × 4 섹션에 대한 스도쿠를 사용하는 것)에 대해, 우리는 Sass를 사용하여 하나의 미지의 광장이있는 하나의 "gimme"사각형을 제외하고 4 개의 사각형 중 2 개를 무작위로 선택합니다. 유효성 검사 로직 및 솔버 로직은 값 선택기를 사용하여 확인 된 값을 직접 기반으로하는 것이 아니라 변수를 사용하기 때문에 유효성 검사 및 해결 로직은 동일한 방식으로 작동합니다. 즉, 생성 된 값은 사용자가 각 값을 개별적으로 선택한 것과 동일하게 처리됩니다.

해결 타이머

다음은 처음 11 초 동안 타이머가 똑딱 거리지 않습니다.

우리는 잠시 동안 해결 타이머를 위해 CSS로 뛰어 들지만, 먼저 CSS 오버플로가 숨겨져있는 숫자 중 하나가 어떻게 보이는지, 요소 주위에 녹색 테두리가 있는데 애니메이션의 각 단계에서 사용자가 볼 수있는 부분을 보여줍니다.

우리는 무한히 반복되는 키 프레임 애니메이션을 사용하여 가능한 숫자 목록을 원하는 간격으로 왼쪽으로 왼쪽으로 바꾸고 있습니다 (각 캐릭터가 동일한 정확한 너비를 차지할 수 있도록 단일 포스 페이스 글꼴을 사용합니다). 초의 숫자는 0에서 9까지, 다음 자리는 5 개까지 올라가서 10 초당 한 번 증가하여 초의 두 자리가 0으로 재설정되어야합니다.

각 숫자는 애니메이션 배경을 애니메이션으로 이동시키기 위해 애니메이션 배경을 이동하는 대신 CSS에서 스프리 시트를 애니메이션하는 데 사용할 수있는 동일한 기술을 사용하여 애니메이션을 사용하고 있습니다.

CSS의 많은 작업과 마찬가지로 CSS에서 애니메이션 카운터를 만드는 방법이 여러 개 있습니다. 그러나 일부는 크로스 브라우저를 작동시키지 않으며 실제로 코드를 간결하게 유지하기 위해 전처리자를 요구합니다. 나는 그것이 매우 짧기 때문에 내 접근 방식이 마음에 듭니다. CSS는 다음 숫자로 이동하는시기와 방법을 파악하기 위해 무거운 리프팅을 수행합니다. 모든 마크 업은 각 숫자가가는 자리 표시자를 만들어 타이머를 제시하는 방법에 대한 자유를 제공하는 것입니다.

마크 업은 다음과 같습니다.

 <div>  
  <div> </div>
  <div> : </div>
  <div> </div>
  <div> </div>
</div>

… 그리고 CSS :

 .StopWatch {
  텍스트 정렬 : 센터;
  유대 가족 : 모노 스페이스;
  마진 바닥 : 10px;
}

.symbol {
  너비 : 1CH;
  오버플로 : 숨겨진;
  디스플레이 : 인라인-플렉스;
  글꼴 크기 : 5CH;
}

.symbol : nth-Child (1) :: 이후 {
  애니메이션 : 3600 년대 단계 (6, 끝) 무한;
  내용 : '012345';
}

.symbol : nth-Child (2) :: 이후 {
  애니메이션 : 단위 600S 단계 (10, 끝) 무한;
  내용 : '0123456789';
}

.symbol : nth-Child (4) :: 이후 {
  애니메이션 : 60 년대 단계 (6, 끝) 무한;
  내용 : '012345';
}

.symbol : nth-Child (5) :: 이후 {
  애니메이션 : 단위 10s 단계 (10, 끝) 무한;
  내용 : '0123456789';
}

@keyframes units {
  에게 {
    변환 : translatex (-10ch);
  }
}

@keyframes tens {
  에게 {
    transform : translatex (-6ch);
  }
}

한 시간 후에 카운터가 처음부터 다시 시작되는 것을 알 수 있습니다. 모든 반복 카운트가 무한대로 설정 되었기 때문입니다. 우리는 그것을 고칠 수 있었지만 누군가가 한 시간 동안 이들 중 하나를 해결하는 데 시간을 보내면 아이들의 스도쿠 퍼즐보다 더 큰 문제가 있습니다. ?

그러나 불공평 한 것은 사용자가 신선한 퍼즐을 생성 할 때에도 동일한 타이머가 계속 똑딱 거리는 경우입니다. 우리는 그것을 재설정 할 수 있습니까? 우리는이 기사의 첫 번째 단계에서 이미이 문제를 해결했으며, 다음과 같은 숫자 선택기에 대한 애니메이션을 제거하고 조건부로 다시 집어 넣었습니다. 활성 의사 클래스. 이번에는 "생성"버튼을 누를 때마다 모든 숫자의 애니메이션을 제거하여 다시 0으로 가져 가려고하기 때문에 실제로 간단합니다. 라디오 버튼이 더 이상 활성화되지 않으면 애니메이션이 다시 시작됩니다. 따라서 생성 할 때마다 타이머를 재설정하는 데 필요한 CSS의 한 줄에 불과합니다!

 입력 [이름 = generate] : active ~ .StopWatch .symbol :: 이후 {
  애니메이션 : 없음;
}

Sudokumeter ™ 슬

퍼즐이 해결 되더라도 플레이어에게 시간 성능에 대한 시각적 피드백을 제공하고 퍼즐을 더 빨리 해결하도록 도전하여 리플레이 가치를 제공하고 싶습니다. 또한 자신의 프로젝트에서 재사용 할 수있는 미니멀리스트 원형 게이지를 제공함으로써 기사를 통해이 기사를 통해이 기사를 작성 한 것에 대해 보상하고 싶습니다. 다음은 실험 할 수있는 원형 게이지가있는 독립형 펜입니다.

우리는 게임에서 승리 화면에 사용 된 것과 동일한 원칙을 적용하고 있습니다.이 펜에서는 표시된 등급이 라디오 버튼 해킹으로 제어되는 반면, 게임에서는 시간이 지남에 따라 천천히 등급으로 이동하는 애니메이션으로 제어됩니다. 게임의 게이지는 불투명도를 사용하여 숨겨져 있으며 퍼즐이 수동으로 해결되었음을 감지 할 때만 표시 (및 일시 중지)됩니다.

우리가 양쪽으로 나뉘어져있는 반원의 환상을 어떻게 색으로 나누는 지 설명해 봅시다. 실제로 오버플로를 사용하여 하단 절반이 숨겨져있는 전체 CSS 원입니다.

의 절반을 채우는 의사 요소를 사용하여 두 가지 색상을 적용합니다.

그런 다음 중간에 구멍을 자르고 게임의 배경색으로 채워진 다른 원을 사용하고 Flexbox를 사용하여 더 큰 원 안에있는 도넛을 사용하여 도넛을 만듭니다.

다음으로, 컨테이너의 크기를 전체 원보다 키가 크게 만들고 오버플로를 사용하여 컨테이너의 크기를 절반으로 만들어서 절반을 숨 깁니다.

이제 우리가 도넛을 회전하면 도넛을 음성 또는 양수로 회전시키는 지에 따라 게이지가 녹색으로 채워 지거나 녹색을 잃는 것처럼 보입니다!

게이지의 양쪽 끝과 그 사이의 설명에 레이블을 넣고 싶습니다. Flexbox는 우아한 솔루션입니다.

 #Rating {
  글꼴 크기 : 30px;
  디스플레이 : Flex;
  너비 : 300px;
  정당화 컨텐츠 : 공간 중간;
}

마크 업은 다음과 같습니다.

 <div>
  <div>? </div>
  <div> </div>
  <div>? </div>
</div>

그것이 우리가 라벨을 배치하는 데 필요한 전부입니다. 등급

가 원의 직경의 너비 인 경우 Flexbox는 이모티콘 레이블을 끝에 놓고 원의 중앙에 설명을 배치합니다!

설명이 말하는 내용을 제어 할 때, 우리는 타이머에 사용한 트릭과 유사합니다.이 시간을 제외하고는 피드백 설명이 가변적이기 때문에 수평보다는 수직으로 수행합니다. 그러나 그들은 항상 같은 높이입니다.

결론

CSS가 프로그래밍 언어인지에 대한 질문 으로이 기사를 열었습니다. CSS 만 사용하여 구현할 수 있었던 논리는 프로그래밍이 아니었지만 그 중 일부는 CSS의 특이한 사용법을 가장 적게 말하는 것은 어렵습니다. 기술 세계의 많은 것들과 마찬가지로, 대답은“의존적”인 것 같습니다.이 실험을 통해 CSS에 대해 배운 것만 큼 프로그래밍은 기술만큼이나 사고 방식에 관한 것임을 설명했습니다.

우리가 CSS에서 정교한 논리를 구현하고 프로세스에서 많은 것을 배울 수 있음을 보여 주지만 CSS 해킹 기사는 완료되지 않습니다. 대부분의 시간은 유지 가능성, 접근성 및“융합”으로 끝나는 다른 단어로 인해 생산에서이를 수행해서는 안됩니다.

그러나 우리는 또한 CSS 변수로 얻을 수있는 내장 반응성으로 생각하는 것과 같은 몇 가지가 CSS에서는 매우 편리하지만 JavaScript의 후프를 통과하고 프레임 워크를 사용해야 할 수도 있습니다. CSS의 한계를 넓히면 결국 제작 앱에서 합리적으로 사용할 수 있다고 생각하는 원형 게이지를 만들었으며, 실제로 필요한 것보다 더 무겁고 더 많은 JavaScript 위젯에 도달하는 것보다 옳은 일이 될 수도 있습니다.

CSS Swoku 앱의 위시리스트에는 재설정 버튼이 있습니다. 현재 새로운 스도쿠 게임을 시작하려면 페이지를 새로 고침해야합니다. 이는 CSS 해킹이 기존 프로그래밍과 다른 라디오 버튼 해킹의 고유 한 제한입니다. 한 단계에서 나는 애니메이션이 CSS 변수를 설정하는 데 사용될 수 있다고 생각했을 때 해결책을 찾았다 고 생각했지만 CSS Houdini의 일부이며 Chromium 기반 브라우저에서만 지원되는 것으로 밝혀졌습니다. 그것이 어디에서나 지원되면 판도라의 해킹 상자를 열고 많은 재미가 될 것입니다. 향후 기사에서는 Chrome에있는이 무해한 기능이 CSS 해킹을위한 게임 체인저인지 여부를 탐색 할 수도 있습니다.

배심원은 CSS에서 81 평방 스도도 솔버가 가능한지 여부에 대해 여전히 벗어나지 만, 궁금한 점이 있다면 의견에 피드백을 남겨 두십시오. 충분한 사람들이 그것을 원한다면, 우리는 토끼 구멍을 함께 내려 가서 그 과정에서 우리가 밝힐 수있는 CS의 어두운 구석을 볼 수 있습니다.

위 내용은 CSS에서 스도쿠스 생성 (및 해결!)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!