https://developer.mozilla.org/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임
지난 시간에 도형과 글자에 애니메이션 효과를 부여 했었습니다.애니메이션 효과를 다루다 보니 왠지 게임을 해야 할 것 같은 생각이 들 더 군요. 실제 D3.js로 게임을 만들지 않았고 게임 하나를 만드는 것도 시간이 좀 걸려서 가장 빠르고 쉬운 방법으로 인터넷에서 떠도는 게임 소스를 가져다 분석하고 나만의 게임을 만들면 좋을 것 같다는 생각에 찾아보니깐 자바스크립트를 이용한 "2D 벽돌깨기 게임"이 튜토리얼로 제공하고 있어서 그 자료를 소개하면 좋을 것 같아서 post로 작성했네요.
https://developer.mozilla.org/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임
모질라 개발 사이트에 튜토리얼에 벽돌깨기 게임이 아래와 같이 있더군요.
그리고 튜토리얼 강의 내용은 다음과 같은 순서로 진행 되네요.
각 소스와 설명이 자세히 나와 있으니 한번 따라서 공부해보시면 재미 있을 거라 생각 됩니다.
이 게임은 충돌 이벤트 처리가 핵심입니다. 물체와 물체가 서로 부딪치거나 벽에 부딪칠 때 움직이는 물체에 대한 충돌 처리입니다. 자세한 내용은 해당 홈페이지에 가셔서 보시면 나와 있으며 제가 짠 코딩이 아니기 때문에 자세한 설명을 못 드립니다. 그냥 충돌 이벤트 처리를 이용한 게임이라고 생각 하시면 됩니다.
저도 해당 튜토리얼에 따라서 진행해서 마지막 완성을 보니 괜찮은 자바스크립트 게임 같더군요. 메모장으로 코딩 한 뒤에 웹브라우저로 실행 시키니 아래와 같은 결과를 얻게 되었네요.
모질라 게임 사이트의 있는 게임 튜토리얼을 따라 코딩해 봤는데 괜찮더군요. 소스나 내용은 post에 담지 못했지만 이런 게임을 자바스크립트로 많은 양의 코딩을 하지 않고 재밌는 게임이 만들어지는데 게임을 공부하는 초보분들에게는 꽤 괜찮은 자료라고 생각 되네요. 그래서 간단히 소개 합니다.
원래는 D3.js로 수정하여 만들어 봐야 하는데 시간 상 그냥 포기 했네요.
그외로,
위 목차를 보시면 다양한 게임 자료를 제공하고 있네요. 한번 해당 사이트에 가셔서 보고 공부를 해보세요. 아마 재밌을거라 생각 됩니다.