js없이 html과 css만을 사용하여 구현한 게임 몇가지를 소개하려고 합니다.
1. 퍼즐
https://css-tricks.com/how-i-made-a-pure-css-puzzle-game/
trick 페이지에 소개된 pure css 퍼즐 게임을 소개합니다.
css만으로 퍼즐게임을 만들수 있다는게 신기했는데요,
페이지내에 자세하게 설명되어 있지만,
퍼즐을 조각내는 방법, 그리고 퍼즐을 어떻게 드래그해서 맞춰지게 하는지에 대한 부분을
잘 살펴보시면 될것 같습니다.
물론 css로만 만들다보니 버그도 존재하고, 크롬 브라우저외에는 잘 작동이 안되는거 같긴합니다만,
이정도까지 구현할 수 있다는게 정말 대단한거 같습니다.
2. 울펜스타인
https://css-tricks.com/hacking-css-animation-state-and-playback-time/
다음은 1인칭 FPS의 시초라고 할수 있는 울펜스타인을 모티브로 만든 게임입니다.
당연히 CSS로만 만들어졌는데요,
주인공 캐릭터과 벽들의 어떻게 이동시키고 있는지,
주인공이 총을 쐈을때, 또는 총을 맞은 상태를 어떻게 체크하는지가 주요 포인트일것 같습니다.
정말..세상엔 천재가 많다고 느꼈습니다.
3. 두더지 게임
https://css-tricks.com/whack-a-mole-the-css-edition/
이번엔 모두가 다 알고계시는 두더지 게임입니다.
input과 애니메이션을 활용하여 어떻게 게임을 구현할 수 있는지 기본적인 개념을 이해할 수 있는 코드라고 보여집니다.
앞서 보여드린 울펜스타인도 비슷한 방식을 사용하고 있었구요.
마우스 클릭했을때의 두더지 체크 여부와 점수 체크 방식 등에 포인트를 두고 코드를 분석해 보시면 도움이 많이 될 것 같습니다.