댓글 검색 목록

[css] 순수한 CSS 게임을 만드는 방법

페이지 정보

작성자 운영자 작성일 20-05-24 14:44 조회 1,177 댓글 0

인터넷의 역동성은 대부분 JavaScript 언어와 관련이 있습니다. 그러나 CSS가 이러한 가능성 중 일부를 제공 할 수 있게 된지 꽤 오래되었습니다.

https://medium.com/cssclass-com/how-to-create-pure-css-games-2a29c777bf4

이러한 가능성을 테스트하기 위해 나만의 순수 CSS 게임 인 Coronavirus Invaders를 만들기로 결정했습니다. 이 기사에서는 JavaScript로만 만들 수 있다고 생각한 것을 만드는 방법을 알려 드리겠습니다. 순수한 CSS 게임을 통해 이러한 기능을 시연함으로써 그렇게 할 것입니다.

시작하기 전에 CSS 기사, 오픈 소스 등을 위해 CssClass.com의 새로운 커뮤니티에 참여하십시오.

참고 : 이러한 CSS 트릭 중 일부는 CSS를 사용하여 가능하지만 의미론 및 접근성의 관점에서 매일 사용하는 것이 좋습니다.

1*ZN5DJn-gj8DHeiEiSXWWng.gif

기능적인 메인 네비게이션 만들기

기능적인 내비게이션을 만들기 위해 상단 확인란을 사용했습니다.

1. 이 트릭에서는 HTML의 시작 부분에 몇 개의 확인란을 삽입했습니다. 이 확인란은 게임의 기본 상태를 나타냅니다. 시각적으로 숨기려면 position : absolute with top : -40px 및 opacity : 0.001로 스타일을 지정했습니다. 게다가, 나는 그들 각각을 제어하기 위해 각각의 고유 한 ID를 부여했습니다 (예 : id =”whoAmIPopup”).

2. 게임의 시각적 버튼은 속성이 <label> 요소입니다. for 속성의 값은 섹션 1의 확인란의 고유 ID 속성에 연결됩니다. 이제 <label> 요소 중 하나를 클릭하면 연결된 확인란이 선택 / 선택 취소됩니다. 이런 방식으로 확인란을 타겟팅하고 상태를 저장할 수 있습니다.

3. CSS에서는 확인란이 선택된 경우 의사 선택기 : : checked로 확인할 수 있습니다. 그리고 ~의 형제 선택기로 형제 요소 (및 그 형제 요소의 모든 자식)를 대상으로 하고 표시할지 숨길지를 결정할 수 있습니다.

4. 같은 방식으로 (섹션 3의) 재생 시작 ( "세계 저장")은 트리거 확인란으로, 메인 화면이 없고 표시 : 게임의 프레임을 차단합니다.

1*tpHI9Y0J-TZH1Djo-aCrVw.gif

HTML

<input class="logic-checkbox" type="checkbox" id="toggleGame">
<input class="logic-checkbox" type="checkbox" id="HowToPlayPopup">
<input class="logic-checkbox" type="checkbox" id="whoAmIPopup"><!--game navigation-->
<section class="game-menu-frame"> 
  <ul class="game-nav-list">
    <li class="game-nav-item">
      <label for="toggleGame" tabindex="0">Save the World</label>
    </li>
    <li class="game-nav-item">
      <label for="HowToPlayPopup" tabindex="0">How to Play</label>
    </li>
    <li class="game-nav-item">
      <label for="whoAmIPopup" tabindex="0">Who Am I</label>
    </li>
  </ul>
</section><section class="game-frame">
    <!--game frame-->
</section><section class="popup common-content" id="whoAmI">
    <!-- Who Am I popup -->
</section><section class="popup common-content" id="HowToPlay">
    <!-- How to play popup -->
</section>

CSS (Scss)

/* checkbox which triggering popup */
#whoAmIPopup:checked ~ #whoAmI,
#HowToPlayPopup:checked ~ #HowToPlay{
  display: block;
}/* checkbox of start playing - 
 trigger by pressing "save the world" button */
#toggleGame:checked {
    ~ .game-menu-frame{ display: none; }
    ~ .game-frame{ display: block; }    
}/* hide popup and game frame */
#whoAmI,
#HowToPlay,
#game-frame{display: none;}

https://codepen.io/elad2412/pen/42e74f1f1c51c5fade553b6ebe0606ac

Killing Coronavirus

이 게임에서 떠 다니는 코로나 바이러스는 기능적인 메인 네비게이션과 매우 유사하지만 두 가지 작은 조정이 있습니다.

1*UiRAjq3bZtA8xRq4flN63g.gif

먼저 모든 코로나 바이러스는 부동 <label>이지만 <input type =”checkbox”트리거 대신 <input type =”radio”>를 트리거 합니다. 이렇게 하면 바이러스를 클릭 할 때 바이러스가 검사 상태가 됩니다.

이 확인 된 상태는 바이러스가 죽었음을 나타냅니다. 라디오 버튼 입력이므로 바이러스 상태를 한 번만 변경할 수 있습니다 (: checked = dead).

둘째, <입력 유형 =”라디오”>는 <라벨> 안에 있습니다. 이 방법으로 <label> 요소를 클릭하면 <input type =”radio”>를 즉시 대상으로 합니다. 이 경우 입력의 id 속성과 <label>에 for 속성을 제공 할 필요가 없습니다. 이 중첩 된 연결은 자체적으로 트리거 됩니다.

스타일의 논리는 <input type =”radio”>가 : checked 일 때, 코로나의 형제 <div class =”body”> 요소가 불투명하게 됩니다 : 0. 이런 식으로, 코로나 바이러스는 화면.

HTML

CSS (Scss)

/* kill corona */
input[type="radio"]{
  opacity:0.001; /* hide radio *//*if radio is checked hide virus*/
  &:checked{
    ~ .body {opacity:0;}
  }
}

https://codepen.io/elad2412/pen/e10a0026b9ab93610300dc0580b3a1ca

런타임에서 점수 결과 계산

게임을 하는 동안 <label> 바이러스를 눌렀을 때 <input type =”radio”> : checked. 이제 우리는 : checked 입력 [type =”radio”]을 모두 세어야 합니다. CSS 2.1 버전부터 존재하는 CSS 카운터를 사용합니다.

1*6XU2A95kne4YuyKP0w6cuw.gif

단계별로 해봅시다 :

1. 먼저 counter-reset 속성으로 CSS 카운터를 정의합니다. 값은 우리가 제공하는 이름입니다.이를 카운터 값이라고 합니다. 작동하려면 HTML의 모든 <input type =”radio”> 요소 앞에 있는 HTML 요소에서 정의해야 합니다. 우리의 경우 : body {카운터 리셋 : corona; }.

2. 이제 우리는 : checked 인 모든 입력 [type =”radio”]을 세고 싶습니다. input [type =”radio "] : checked의 CSS 선택자를 만들고 첫 번째 섹션에서 만든 카운터 값과 동일한 카운터 증가 속성을 제공합니다. 우리의 경우 : 카운터 증가 : 코로나.

3. 화면에 점수 요약을 표시하기 위해 HTML 요소를 추가합니다 (예 : <div class =”sum”>). HTML의 모든 <input type =”radio”> 요소 뒤에 있어야 합니다.

4. 이제 우리가 해야 할 일은 content 속성 스타일을 사용하는 동안 pseudo-element :: after selector를 사용하여 화면에 인쇄하는 것입니다. CSS content 속성은 카운터라는 CSS 기본 함수를 얻을 수 있습니다. 카운터는 이미 섹션 1에서 만든 코로나 카운터 값을 가져 와서 섹션 2에서 증가시킵니다. 예 : .sum :: after {content : counter (corona)“/ 100”;}.

HTML

<body> <!-- define counter --><ul class="corona-world">
  <li class="corona-location corona-virus-1-location">
    <label class="corona-virus">
      <input type="radio">
    </label>
  </li>
  ... <!-- 100 items of viruses -->
</ul><div class="sum"> 
  <span class="text">Score:</span>
</div>
...</body>

CSS

body{ 
  counter-reset: corona; 
}input[type="radio"]:checked{
    counter-increment: corona;
}.sum::after{
  content: counter(corona) "/100";
}

https://codepen.io/elad2412/pen/d084e34a3f2a3b98c5a28b1cc0f96f5d

카운트 다운 시계 만들기

이 예제에서는 CSS Animation과 의사 요소 :: before & :: after를 사용하여 카운트 다운을 만듭니다. 모든 의사 요소는 카운트 다운 수 중 하나를 나타냅니다. :: bese pseudo-element는 10 초마다 카운터를 나타내고 두 번째 숫자는 1 초 마다를 나타냅니다. 이런 식으로 99에서 0 초 사이의 카운터를 만들 수 있습니다. 나는 의사 요소 각각에 9에서 0까지 실행되는 content 속성 값에 대한 애니메이션을 제공했습니다.

1*F1XBWVPvJOrob6z8dwptBg.gif

둘 다 동일한 애니메이션을 얻었지만 타임 라인과 반복 횟수가 다릅니다. :: before는 100 초 동안 한 번 반복됩니다. :: after는 10 초씩 10 번 반복됩니다. 이런 식으로 카운터가 99에서 0으로 실행되는 것처럼 보입니다.

제대로 작동하기 위해 애니메이션 타이밍 함수 속성을 step-end 값과 함께 사용하여 초를 정확하게 점프합니다. 두 번째로 중요한 것은 애니메이션 채우기 모드 속성을 앞으로 값과 함께 사용하는 것입니다. 이런 식으로 애니메이션이 끝날 때 끝까지 유지됩니다.

HTML

<div class="count-down">
<span class="icon">⏲️</span>
<span class="count">
::before (pseudo element)
::after (pseudo element)
</span>
</div>

CSS

.count-down{
  .count{
    &::before{
      content: ""; 
      animation:countdown 100s step-end 1 forwards;
    }    
    &::after{
      content: ""; 
      animation: countdown 10s step-end 10 forwards;
    }  
  } 
}@keyframes countdown {
  0%  { content: "9" }
  10% { content: "8" }
  20% { content: "7" }
  30% { content: "6" }
  40% { content: "5" }
  50% { content: "4" }
  60% { content: "3" }
  70% { content: "2" }
  80% { content: "1" }
  90%, 100% { content: "0" }
}

참고 : CSS 단계 애니메이션 기능은 Safari 브라우저에서 지원되지 않습니다.

https://codepen.io/elad2412/pen/6bb1857414ee6abb9ea4c554c400f625

시각 타이머 만들기

Safari에서 일반 카운트 다운이 지원되지 않기 때문에 다른 시각적 타이머도 만들었습니다.

1*BrAjH44-19aji8TBFC-wUw.gif

이 타이머는 너비와 높이가 고정되어 있습니다. 타임 라인의 상태를 보여주기 위해 pseudo-element :: before를 사용했는데, 시간이 지남에 따라 애니메이션 속성으로 너비가 업데이트 됩니다.

HTML

<div class="timer">
::before
</div>

CSS

.timer {
  width: 150px; 
  height: 10px; 
  background-color: #fff; 
  border: solid 1px #333;&::before{
    content: "";
    width: 0px; 
    height: 10px; 
    display: block; 
    background-color: #ccc;animation: timer 100s linear 0s; 
    animation-fill-mode: forwards;
  }
}@keyframes timer{
  0%{width: 3%;}
  85%{width: 85%; background-color: #ccc;}
  90%{width: 90%; background-color: red;}
  100%{width: 100%; background-color: red;}
}

https://codepen.io/elad2412/pen/936fd38d75035d7fa123d88c71fe167e

게임 오버 커튼 예약

게임 오버 커튼은 class =”game-frame”안에 높이 : 0, 불투명도 : 0, 오버플로 : 숨김으로 배치됩니다. 커튼의 애니메이션은 스타일을 높이 100vh 및 불투명도 : 1로 업데이트합니다.

1*SFvhdrPgwuQTPjvFFndLdA.gif

이제 트릭은 게임 시간에 따라 커튼 애니메이션 지연을 제공하는 것입니다 (예 : animation-delay : 100s). 이런 식으로 커튼은 100 초 후에 만 나타납니다. 또한 애니메이션 애니메이션 채우기 모드를 제공합니다. 애니메이션이 끝날 때 타임 라인의 끝을 유지하는 것을 목표로 하기 때문에 앞으로 전달합니다.

HTML

<section class="game-frame">...HTML of Viruses
   ...HTML of Countdown & Timer<section class="game-over">
     <h2 class="game-title">Game Over</h2>
   </section></section>

CSS

.game-over{
  height: 0;
  overflow: hidden;
  opacity: 0;position:fixed; z-index:20;
  left:0; right:0; top:0;background-color: rgba(0, 0, 0, 0.6);animation: curtain 0.6s ease-in;     
  animation-delay: 100s; 
  animation-fill-mode: forwards;
}@keyframes curtain {
  from{height:100vh; opacity:0;}
  to {height:100vh; opacity:1;}
}