Worlds Collide : 스타일 쿼리를 사용한 KeyFrame Collision Detection

처음에는 Manuel Schaller의 Codepen 인 CSS 전용 Pong 게임은 현대 CSS 충돌 감지에 대한 탐사를 촉발했습니다. 아케이드 머신과의 데모의 유사성에서 영감을 얻은 저자는 (가상의) 마법에 걸린 토큰을 사용하여 게임을 향상시켜 범위 입력을 통해 라이프 카운터와 플레이어 제어를 추가했습니다. 이 업그레이드는 Alex Walker의 2013 "Hack River"Pong 구현 이후 CSS 상호 작용의 진화를 보여주는 스타일 쿼리, 사용자 정의 속성 및 애니메이션 타임 라인을 활용했습니다.

CSS 충돌 감지 : 10 년간의 진전

저자는 스타일 쿼리를 사용하여 현재의 접근 방식을 Alex Walker의 2013 기술과 대조하여 CSS 기능의 중요한 발전을 강조합니다. 현대적인 구현은 여전히 ​​한계를 다루지 만 "해킹"과 같은 느낌이 들며 언어의 특징을 자연스럽게 적용하는 것과 비슷합니다. 스타일 쿼리, 애니메이션 가능한 커스텀 속성 및 애니메이션 타임 라인의 조합은 CSS의 증가 된 힘과 표현성을 보여줍니다. 인라인 조건부 및 사용자 정의 기능과 같은 미래의 기능은 이러한 구현을 더욱 단순화 할 수 있습니다.

충돌 감지를위한 스타일 쿼리

업데이트 된 Pong 게임은 스타일 쿼리를 사용하여 플레이어의 패들과 볼 사이의 충돌을 감지합니다. 공은 미리 정해진 경로를 따릅니다. 유일한 사용자 상호 작용은 패들이 볼을 가로 채는지 여부입니다. 이 "Quick Time Event"스타일의 게임 플레이 스타일은 제한된 잠재적 결과로 인해 가능합니다. 저자는 복잡한 게임에 이상적이지는 않지만 CSS 상호 작용에서 중요한 단계를 차지한다고 지적했다.

도전은 스타일 쿼리의 한계에 있습니다. 컨테이너 스타일 쿼리는 숫자 값에 대한 "직접"또는 "보다 큰"비교가 부족한 이름 값 쌍만 지원합니다. min() 함수를 사용한 해결 방법은 공의 위치가 패들의 범위에 속하는지 확인하기 위해 사용됩니다. 필드의 배경색 (히트의 경우 녹색, 미스의 빨간색) 및 생명을 얻는 애니메이션의 상태는 이러한 충돌 점검을 기반으로 제어됩니다.

 몸 {
  --int-ball-position-x : round (down, var (-ball-position-x));
  -Min-ball-position-y and-top-of-paddle : min (var (-ballposition-y) var (-ball-height), var (-ping-position));
  -Min-ball-position-y and-bottom-of-paddle : min (var (-allposition-y), var (-ping-position) var (-Paddle-Height));
}

@Container Style (-int-ball-position-x : var (-볼-왼쪽-바운드)) {
  .Screen {
    -Lives-Decrement : 달리기;

    .필드 {
      배경 : 빨간색;
    }
  }
}

@Container Style (-Min-Ball-Position-y and-Top-of-Paddle)) 및 스타일 (-Min-Ball-Position-y and-Bottom-of-Paddle) 및 스타일 (-int-ball-position-x : var (-볼-왼쪽-바운드)) {
  .Screen {
    -Lives-Decrement : 일시 중지;

    .필드 {
      배경 : 녹색;
    }
  }
}

충돌 및 게임 오버 처리

Life Counter는 Collision Detection에 의해 제어되는 일시 정지/부착 된 키 프레임 애니메이션을 사용하여 구현됩니다. 공이 패들을 놓치면 애니메이션이 실행되어 수명 수가 줄어 듭니다. 제로 라이브에 도달하면 "게임 오버"화면을 유발합니다. 이는 애니메이션 및 스타일 쿼리를 통한 시상 할 수없는 속성의 간접 제어를 보여줍니다.

 몸 {
  애니메이션 : Ball 8S Infinite Linear, Living 80ms 전진 단계 (4) var (-Lives-Decrement);
  -Lives-Decrement : 일시 중지;        
}

.lives :: 후 {
   내용 : var (-rives);
}

@keyframes lives {
  0% {
    -리브 : "3";
  }
  25% {
    -리브 : "2";
  }
  75% {
    -리브 : "1";
  }
  100% {
    -리브 : "0";
  }
}

@Container Style (-int-ball-position-x : var (-볼-왼쪽-바운드)) {
  .Screen {
    -Lives-Decrement : 달리기;

    .필드 {
      배경 : 빨간색;
    }
  }
}

@Container Style (-Min-Ball-Position-y and-Top-of-Paddle : var (-ping-position)) 및 스타일 (-min-ball-position-y and-bottom-of-paddle) 및 스타일 (-int-ball-position-x : 8) {
  .Screen {
    -Lives-Decrement : 일시 중지;

    .필드 {
      배경 : 녹색;
    }
  }
}

@Container Style (-Lives : '0') {
  .필드 {
     디스플레이 : 없음;
  }

  . 게임-오버 {
     디스플레이 : Flex;
  }
}

저자는 타이머 드리프트 또는 레이스 조건으로 인해 충돌 감지에서 예상치 못한 불일치에 대해 논의합니다. 애니메이션 기간을 8의 배수로 설정하는 것은이 문제를 해결하는 것처럼 보였지만 근본적인 원인은 여전히 ​​추측의 대상입니다.

결론

이 기사는 게임 개발을위한 CSS의 힘과 한계에 대한 반영으로 끝납니다. 구현 된 Pong 게임은 인상적인 기능을 보여 주지만, 더 복잡한 시나리오에 대한 추가 개선 및 잠재적 인 대안 접근법의 필요성을 강조합니다. 저자는 CSS를 한계로 밀어내는 것이 의도하지 않은 결과를 초래할 수 있다고 장난스럽게 제안합니다. 이 프로젝트는 Manuel Schaller의 Codepen에 기반을두고 작가의 아이들이 놀랐습니다.

위 내용은 Worlds Collide : 스타일 쿼리를 사용한 KeyFrame Collision Detection의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!