웹캐치마인드 게임 (html5, node.js, now.js, sqlite)

Question

안녕하세요? 요즘 유머자료에 나오는 넷마블 캐치마인드 게임을 웹으로 즐길수 있게 약간 허접하게 만들어봤습니다. 구현 기술은 HTML5, Canvas, node.js, now.js sqlite로 순수 자바스크립트로만 100% 기능 구현을 했습니다. canvas 때문에 IE8이하를 제외한 모든 브라우저에서 즐기실 수 있습니다. (크롬 강추) IE9도 가능하게 할려고 했으나 IEcanvas js 라이브러리의 속도 이슈 땜에 포기 했습니다. ㅠㅠ&#160;캐치 마인드란 게임을 잘모르시는 분들을 위해서 여러 접속자가 게임에 입장하면 방장이 있는데 방장이 캔버스 위에 그림을 그리면 실시간으로 다른 게임 참여자들에게 그림 그려지는 과정이 보여지며 정답을 맞추는 게임입니다. 넷마블 캐치마인드 화면 캡쳐 ㅋㅋ 여러개의 채널이나 방기능은 호스팅(nodester)의 한정된 네트워크 압박으로 하나의 방으로만 게임이 가능하게 만들었으며 nodester 호스팅이 외국이어서 실시간 그림을 보여줄 때 약간의 딜레이가 있습니다. 역시 네트워크의 압박으로 8명만 입장 가능하게 제한을 걸어두었습니다. 게임을 해보니 발로 그린 그림에 대한 답을 맞추는게 재미가 쏠쏠하네요.그림 그리기 말고도 플리커 api 랜덤 이미지 추출로 그림과 선그리기 조합으로&#160;다른 형식의 문제 출제도 가능합니다. &#160;정답을 맞출경우 정답 맞춘 사용자가 나와서 춤도 춥니다 ㅎㅎ 크롬으로 처음에 들어올시에 notification 알림 동의 하시고 나서 방에 있으면 다른 사용자가 로그인시 알림창이 나옵니다. 들어가실 때 아무도 없을경우 창 여러개 띄우시고 로그인 하셔서 셀프 테스트 동수 놀이 하셔도 됩니다 ㅎㅎ 방장 위임이나 여러 부가 기능들은 심플하게 만들기 위해서 제외 시켰습니다. ㅠㅠ node.js 서버의 경우 300줄로 완성 되었고 확실히 웹기반 통신이나 게임은 쉽고 빠르게 자바스크립트 기반으로 구현 가능하다는 것을 몸소 경험한 것 같습니다. 급하게 만드느라 약간의 버그가 있을 수 있습니다. http://redia.woobi.co.kr

gondwana · Answer

잠깐이나마 재미있게 했습니다 ㅎㅎ 발전될 모습이 기대가 되네요

keoerd1 · Answer

와... 제가 구현하고 싶어하는걸 구현하셨네요... 저는 이걸 통해서 회의하려는걸 만들고 싶었는데...

redia90 · Answer

/쿄스케 넹~회의 뿐만 아니라 실시간 프리젠테이션 기능 같은 것도 응용할려고 계획중입니다 ㅋ Front 자바스크립트와 Server 자바스크립트가 강력하게 결합하니 활용 방안은 무궁무진 해지네요

웹캐치마인드 게임 (html5, node.js, now.js, sqlite)

3개의 답변

Q&A 목록