이 글에서는 CSS 학습을 위한 11가지 작은 게임을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

CSS 학습에 도움이 되는 게임이 인터넷에 많이 있습니다. 이 기사에서는 매우 실용적인 무료 CSS 게임을 모아서 CSS의 재미를 다시 경험하는 데 도움이 되기를 바랍니다.

인정합니다. 기억력이 별로 좋지 않습니다. 특히 Flexbox 레이아웃 등과 같은 CSS가 기억나지 않습니다. 플렉스 컨테이너의 속성justify-content은 12개 이상의 서로 다른 값을 가질 수 있으며, 그 중 다수는 safe 또는 unsafe 키워드와 결합될 수 있습니다.

최근 우연히 타워디펜스 스타일의 플렉스박스 교육 게임을 발견했습니다. 이 게임은 정말...

잠깐, 뭐라고 했죠?

맞게 들었습니다. 인터넷에는 CSS 학습에 도움이 되는 게임이 실제로 많이 있다는 것이 밝혀졌습니다. 매우 실용적인 무료 CSS 게임을 모아봤습니다. 이 게임이 CSS의 재미를 다시 경험하는 데 도움이 되기를 바랍니다.

Flexbox Defense

이것이 위에서 언급한 게임입니다. flex 속성인 align-items, justify-content, flex-direction, align-self 및 order를 다룹니다. 게임 자체에는 총 12개의 레벨이 있습니다. 특히 마지막 4개의 레벨은 매우 흥미롭고 매우 어렵습니다.

게임 주소: http://www.flexboxdefense.com

Flexbox Froggy

Flexbox와 관련된 게임이기도 하며 align-items, justify-content, align과 같은 더 많은 플렉스 속성을 포함합니다. -content, flex-direction, align-self, flex-wrap 및 flex-flow가 있으며 게임에는 총 24개의 레벨이 있습니다. 레벨을 완료하면 꼭 알려주세요.

게임 주소: https://flexboxfroggy.com

Grid Garden

이 게임에는 CSS 그리드 레이아웃을 배울 수 있는 총 28개의 레벨이 있습니다. 다음과 같은 그리드 속성을 다룹니다: 그리드-열-시작, 그리드-열-끝, 그리드-열, 그리드-행-시작, 그리드-행-끝, 그리드-행, 그리드-영역, 순서, 그리드-템플릿-열 , 그리드 템플릿 행 및 그리드 템플릿.

게임 주소: https://cssgridgarden.com

CSS Diner

이 게임은 총 32개의 레벨이 있습니다. 자신을 CSS 선택기 전문가라고 생각해 보세요. 플레이를 하면 할수록 배가 고파질 것입니다.

게임 주소: http://flukeout.github.io

Unfold

이것은 정확히 게임이 아니라 CSS 3D 변환에 대한 대화형 데모에 가깝습니다. 지루하다고 생각할 수도 있지만 저를 믿으세요. 게임의 애니메이션은 매우 흥미롭고 순수한 CSS로는 그러한 효과를 얻는 것이 불가능하다고 확실히 생각할 것입니다.

게임 주소: https://rupl.github.io/unfold

Roadmap

이 게임을이기려면 어느 정도의 기술과 속도가 필요하지만 게임 자체는 CSS와 HTML만을 사용하여 만들어졌습니다. CSS를 직접 가르치지는 않지만 소스 코드를 연구하면 @keyframes를 사용한 클립 경로, 변환 및 애니메이션에 대해 많은 것을 배울 수 있습니다! 아래에 댓글을 남겨서 레벨을 완료하는 데 몇 번이나 시도했는지 알려주세요. 8번의 시도가 필요했습니다!

게임 주소: http://victordarras.fr/cssgame

Carnival

8초 이내에 모든 목표를 달성해야 합니다! 이것은 체크박스와 CSS 애니메이션을 사용하는 아주 멋진 작은 CSS 게임입니다.

게임 주소: https://codepen.io/una/pen/NxZaNr

Tic-Tac-Toe (Tic-Tac-Toe 게임)

이것은 고전적인 작은 게임입니다. 이 순수 CSS tic-tac-toe 게임은 단 2개의 레벨만 갖고 있으며 체크박스와 CSS 애니메이션도 사용합니다.

게임 주소: https://codepen.io/alvaromontoro/pen/BexWOw

Flexbox Zombies

이 게임에는 Flexbox와 석궁 좀비를 사용하여 싸우는 방법을 배울 수 있는 스토리라인이 포함되어 있습니다. 이 게임은 등록이 필요합니다.

게임 주소: https://mastery.games/p/flexbox-zombies

가격: $179

Service Workies

이 어드벤처 게임에서는 PWA 트랩을 피하는 방법을 배울 수 있습니다. 게임 속 캐릭터들과 함께 실력을 향상하고 성장할 수 있습니다. 어쩌면 수세기 동안 가난한 마을을 황폐화시켜온 사나운 짐승을 죽이려고 할 수도 있습니다! 이 게임은 등록이 필요합니다.

게임 주소: https://serviceworkies.com

가격: $179

Grid Critters

이 게임에서 CSS Grid를 마스터하기 위한 여정은 이 신비한 그리드 전사와 함께 시작됩니다. 당신의 임무는 강력한 그리드 도구를 사용하여 외계 생명체를 멸종으로부터 구하는 것입니다. 이 게임은 등록이 필요합니다.

게임 주소: https://gridcritters.com

가격: $179

학습 영상 공유:css 영상 튜토리얼

위 내용은 CSS를 배우기 위한 11가지 작은 게임, 얼마나 알고 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!