뱀게임의 추억
개요
개인적으로 중학교때 처음 터보씨를 친구에게서 복사해서 갖게 된 후, 가장 처음 C언어로 만들었던 프로그램이 바로 뱀 게임이었다.
만우절 이벤트를 준비하다가 팀장님이 전에 지나가듯이 "이스터 에그를 하나 숨겨봐" 라고 했던 말이 떠올라서 뭘 넣어볼까 하다가 떠오른 게 뱀게임이었다.
한 20분 정도 JS 로 뚝딱뚝딱 만들어서 홈페이지에 달았는데, 사실 아무도 못 찾을 거라고 생각했지만 어느새 누군가가 찾아낸 걸 보고 신기하고 놀랍고 그랬다.
스크린샷
데모 및 코드
기술적인 내용
사실 여기 사용된 기술이라는 건 별 거 없다. 고민했던 건 주로 '어떻게 하면 콘솔 화면 느낌을 쉽게 낼 수 있을까' 였는데, 게임 판으로 사용되는 부모 엘리먼트에 실제로 콘솔 화면처럼 열과 행을 지정해 각 칸에 해당하는 만큼의 span 으로 채워넣는 것으로 해결했다.
이런 방식으로 하면 두 글자 이상의 텍스트를 표시하기 위해서는 별도의 함수를 작성해야 하지만, 사실 그런 기능도 필요 없이 아주 간단하게 게임화면만 보여줄 생각이었기 때문에 무시하고 그냥 진행했다.
브라우저 호환성을 무시할 수 없기 때문에 최대한 고급기능을 제외해야 했고, 코드 길이가 길어지면 부담이 되기 때문에 (꼴랑 만우절 하루 사용할 코드가 길어지면 피곤하지 않은가) 코드도 되도록 짧게 유지할 필요가 있었다.
jQuery 가 사이트에 기본으로 적용되어 있어서 부담없이 사용하긴 했지만, jQuery 없이 작성했어도 별반 다르지 않은 코드가 되었을 것 같다.
처리 속도나 편의성을 위해 실제로 셀렉터를 사용하지 않고 예전 도스시절 게임 짜던 방식대로 이중 배열을 사용해서 좌표를 표현했고, 실제로 jQuery 의 기능은 .css 와 .text 정도를 사용했는데, 이 부분은 그냥 js 로 해도 호환성이나 다른 측면에서 별 차이가 없을 부분이니까..
소스 코드
코드는 Github에서 확인할 수 있다.
jQuery 의존성을 뺀 순수 javascript 버전으로 올려두었다.
딱히 코드에서 별도로 설명하고 싶은 부분은 없고, 굳이 개선해야 할 사항을 꼽자면
키보드 방향키를 눌렀을 때, 뱀이 즉각적으로 반응하지 않는 부분을 개선할 수 있겠지만,
이 부분은 사실 현재 디자인이 원래의 내 의도였기 때문에 각자의 취향에 맞추어 고치도록 하면 될 것 같다.
게임 종료 부분을 alert 대신 다른걸로 처리해도 좋을 것 같지만 귀찮으니 패스.
라이센스
음슴. 걍 쓰세염. minify 하면 작아지니까 아무데나 갖다 다셔도 됩니다.