Vanilla(Pure) JS를 활용한 2D 벽돌깨기 게임 만들기.

 https://limselect.github.io/mdn-2dBreakGame/

Gamedev Canvas Workshop

 

 

 

 

 

 위 링크를 통해 게임을 플레이 하실 수 있습니다!

 

 

 오늘은 MDN(Mozilla Developer Network)에서 제공하는 '2D breakout game using pure JavaScript' 프로그램을 만들어봤다.
 
 간략한 게임 설명에 앞서 JS면 JS지 Vanilla JS란 무엇이냐?라고 궁금증을 가진 사람들이 있는데 프레임워크이나 라이브러리를 활용하지 않은 순수 자바스크립트를 의미한다. 다시 말해, jQuery, React 같은 프레임워크나 라이브러리를 사용하지 않은 순수한 JavaScript를 말한다.
 
 평소 아이스크림 기본맛 하면 가장 먼저 떠오르는 맛이 Vanilla맛이다. Vanilla JS라고 하기도 하고 Pure JS라고 부르기도 하니 큰 의의는 두지 말자.
 
 그렇다면 왜 Vanilla JS를 활용해야 하는지에 대한 의구심도 들지 않겠는가?
 
 장점을 나열해 보자면, 1번 호환성이 좋다. 2번 디버깅이 빠르다. 무엇보다, JS는 지속적인 개선 사항이 업데이트되기 때문에 대부분의 기능을 Vanilla JS로도 처리할 수 있게 되었다. 그리고 필요한 기능을 직접 만들어야 하니 개발자가 직접 생각하고 실험해야 하는 부분이 많아 개발자 능력 자체에 향상을 기대할 수 있다.
 장점이 있다면 단점도 있는 법, 그냥 프로그래머가 작성할 내용이 많아진다. 프레임워크나 라이브러리를 이용할 때보다 더 많은 비용을 요구한다는 뜻이다.
 
 라이브러리, 프레임워크를 무조건적으로 지양하자는 뜻이 아니다. 필요하면 본인이 해결할 수 있는 능동적인 개발자가 되길 바랄 뿐이다.
 
 잡설은 그만두고 게임 설명을 하자면!
 

여기서 누른다고 게임 실행 안된다. 설마,,, 없겠지.

 
 '알카노이드' 게임이 떠오른다. 스타트 버튼을 누르면 오른쪽처럼 게임이 시작된다.
 
 키보드 좌, 우 방향키를 사용해 공이 바닥에 떨어지지 않게 '패들'과 상, 우, 좌 세 벽을 활용하여 벽돌을 깨는 게임이다.
 
 벽돌 15개를 모두 처리하기 전에 패들에 공을 튕기지 못하고 바닥에 보낸 횟수가 3번이면 게임 오버, 모두 처리하면 게임 성공 메시지가 뜬다.

이거 보여주려고 일부러 실패해 봤다. 진짜다.

 
 오늘의 코드는 양이 방대하고 작성 방향, 시간에 따른 파일을 나눌 필요성이 있다고 판단하여 깃허브 링크로 대신하겠다.
 
 레포지토리 명은 '2D-BREAK-BRICK'
 
 분명 이해하지 못한 부분도 있고 생각보다 쉽게 넘어갈 수 있었던 부분들도 있다.
 
 개인적으로 배열과 오프셋의 이해가 필요하고 프로그램 작성에 따른 '컴퓨터적 사고', '프로그래머 논리'를 다시 생각해 봐야 될 것 같다.
 
 오늘 이 프로그램에 매달리고 작성하고 생각하면서 꽤 많은 내용을 습득할 수 있어 아주아주 좋은 기회였다.
 
 다들 그저 보기만 하지 말고 직접 따라 해봤으면 좋겠다.
 
 나도 했으니 너도 할 수 있다.

 

 

 
 
 앞서 언급한 나의 레포지토리 링크, 많은 관심 부탁 ( _ _)
https://github.com/Limselect/2D-BREAK-BRICK-GAME-in-MDN-VANILLA-JS

GitHub - Limselect/2D-BREAK-BRICK-GAME-in-MDN-VANILLA-JS

 
 
 
* 참조링크: mdn, (한국어 언어설정이 가능하나 가급적 영어 원문을 볼 것을 추천.)
 
https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

2D breakout game using pure JavaScript - Game development | MDN