Class
  • 강좌게시판
  • Tip&Tech
  • Download
  • Tip&Tech
  • HOME > Class > Tip&Tech > 웹캐치마인드 게임 (html5, node.js, now.js, sqlite)
[스크립트] 웹캐치마인드 게임 (html5, node.js, now.js, sqlite)
글쓴이 기술레벨커뮤니티레벨크어억123 날 짜 11-12-29 16:11 조 회 3035
간편URL http://www.phpschool.com/link/tipntech/74805 복사

SyntaxHighlight로 보기

Link1 http://redia.woobi.co.kr/ (572)
안녕하세요? 요즘 유머자료에 나오는 넷마블 캐치마인드 게임을 웹으로

즐길수 있게 약간 허접하게 만들어봤습니다.

구현 기술은 HTML5, Canvas, node.js, now.js sqlite로 순수 자바스크립트로만

100% 기능 구현을 했습니다.

canvas 및 now.js 일부 버그 때문에 IE를 제외한 모든 브라우저에서 즐기실 수 있습니다.

(크롬 강추)


캐치 마인드란 게임을 잘모르시는 분들을 위해서

여러 접속자가 게임에 입장하면 방장이 있는데

방장이 캔버스 위에 그림을 그리면 실시간으로 다른 게임 참여자들에게

그림 그려지는 과정이 보여지며 정답을 맞추는 게임입니다.

넷마블 캐치마인드 화면 캡쳐 ㅋㅋ


여러개의 채널이나 방기능은 호스팅(nodester)의 한정된 네트워크 압박으로 하나의

방으로만 게임이 가능하게 만들었으며 nodester 호스팅이 외국이어서

실시간 그림을 보여줄 때 약간의 딜레이가 있습니다.


역시 네트워크의 압박으로 8명만 입장 가능하게 제한을 걸어두었습니다.

게임을 해보니 발로 그린 그림에 대한 답을 맞추는게 재미가 쏠쏠하네요.

들어가실 때 아무도 없을경우 창 여러개 띄우시고 로그인

하셔서 셀프 테스트 동수 놀이 하셔도 됩니다 ㅎㅎ


방장 위임이나 여러 부가 기능들은 심플하게 만들기 위해서 제외 시켰습니다. ㅠㅠ



node.js 서버의 경우 300줄로 완성 되었고 확실히 웹기반 통신이나 게임은

쉽고 빠르게 자바스크립트 기반으로 구현 가능하다는 것을 몸소 경험한 것 같습니다.


급하게 만드느라 약간의 버그가 있을 수 있습니다.

http://redia.woobi.co.kr/

전체댓글수 12

  • 기술레벨커뮤니티레벨.NETSCHOOL 11-12-29 17:10

    소스보기

  • IE9 잘됩니다. IE9부터 캔버스 지원되기 때문에 전혀 문제는 없지만 다른 사람이 없어서 같이 못하는게 아쉽군요.
    하지만 이런 작품 남기는 것도 웹이 발전하는데 큰 도움이 되겠군요.
  • 기술레벨커뮤니티레벨크어억123 11-12-29 20:20

    소스보기

  • 네 방금 들어갔는데 아무도 없네요. ie9 지원하는걸 깜빡했네요. ie의 경우 node.js는 polling으로 소켓통신 가능하니까요. 잠깐 다른분이랑 했는데 오늘의 핫이슈 도지사를 가지고 게임
    진행해 봤습니다. ㅎㅎ
  • 기술레벨커뮤니티레벨함트 11-12-29 19:57

    소스보기

  • 예전에 캔버스로 차트를 그린적이 있었는데 그때 ie브라우저에서도 컨트롤 가능토록 캔버스를 한번 감싸준 라이브러리가있어서 ie에서도 보여준 적이 있습니다.
    멋진 작품 잘 보고갑니다^^b
  • 기술레벨커뮤니티레벨크어억123 11-12-29 20:19

    소스보기

  • 감사합니다. 추후에 계속 업그레이드 하면서 말씀하신 excanvas 라이브러리로 IE에서도 가능하게끔
    해야 할거 같습니다. 귀차니즘의 압박과 ie 저항정신 때문에 일단 보류를 했습니다.ㅎㅎ
  • 기술레벨커뮤니티레벨.NETSCHOOL 11-12-30 09:29

    소스보기

  • IE8로 excanvas 라이브러리 커버는 가능하지만 그리기 성능이 ㅤㅅㅞㅅ입니다. 그냥 안하는게 건강에 좋습니다.
  • 기술레벨커뮤니티레벨크어억123 11-12-30 09:34

    소스보기

  • 과감히 IE8 이하는 버려야 하겠네요 ㅎㅎ
  • 기술레벨커뮤니티레벨php™웹맨 11-12-31 14:28

    소스보기

  • 소스 공개 힘드실까요?? 공부좀 하고 싶어서요~~
  • 기술레벨커뮤니티레벨나의기도 12-01-03 09:36

    소스보기

  • 잘 보고 갑니다...  저도 공부해야 겠다는 생각이 드네요 ^^
  • 기술레벨커뮤니티레벨슬기유치원 12-01-03 11:18

    소스보기

  • ie9 스크립트 오류 나서 안되네요
  • 기술레벨커뮤니티레벨뇨노 12-01-05 18:39

    소스보기

  • 저도 안되네요 ㅠ
  • 기술레벨커뮤니티레벨돼지코구뇽 13-01-13 23:03

    소스보기

  • 흠 크롬에서 되네요 익스10 안되요
  • 기술레벨커뮤니티레벨밥 13-01-31 10:35

    소스보기

  • ㅋㅋㅋㅋㅋ 잘보고 갑니다 !
  • 게시물 12,477건 RSS
번호분류제목글쓴이날짜조회
12,457 정보 테스트 도메인과 쿠키의 상관관계 [4] 기술레벨커뮤니티레벨전진하는아르고 13-04-17 490
12,456 정보 [수정]pecl-imagick 프로젝트가 중단된 것 같습니다. [5] 링크 기술레벨커뮤니티레벨송효진 13-04-17 455
12,455 DBMS MySQL 설치후 보안 강화 - mysql_secure_installation [3] 링크 기술레벨커뮤니티레벨ibin 13-04-17 468
12,454 보안 XSS 방지 태그 필터 [12] 링크 기술레벨커뮤니티레벨레어닉 13-04-16 678
12,453 스크립트 Easing 효과의 모든것 jQuery plugin + CSS transition [4] 링크 기술레벨커뮤니티레벨폭스테리어 13-04-16 534
12,452 보안 (1원) 크롬으로 웹개발 시 참고사항(?) [3] 기술레벨커뮤니티레벨레어닉 13-04-15 942
12,451 문법 json 스타일로 php 데이터 표현하기. [7] 기술레벨커뮤니티레벨송효진 13-04-11 942
12,450 기타 GIT Branch 배우기 (기초부터 그림으로) [10] 링크 기술레벨커뮤니티레벨폭스테리어 13-04-11 643
12,449 스크립트 jQuery 1.9 부터 지원되지 않는 문법 $().after().appendTo() [8] 기술레벨커뮤니티레벨송효진 13-04-09 925
12,448 스크립트 CommonJs Promises/A 자바스크립트 비동기프로그래밍 [3] 링크 기술레벨커뮤니티레벨폭스테리어 13-04-04 773
12,447 스크립트 d3.js: 데이터 기반 문서 표현하기 [2] 링크 기술레벨커뮤니티레벨폭스테리어 13-04-03 640
12,446 기타 Chrome Tip: Browser의 AJAX Call을 curl 명령어로,, [3] 기술레벨커뮤니티레벨폭스테리어 13-04-03 497
12,445 스크립트 php RECURSION 에 안전한 JSON 을 console.log() 에서 복원. [1] 기술레벨커뮤니티레벨송효진 13-04-02 432
12,444 알고리즘 swap 알고리즘 한개 [16] 인기 기술레벨커뮤니티레벨RGB255 13-03-26 1164
12,443 기타 네트워크 계산기 [7] 첨부파일 인기 기술레벨커뮤니티레벨그네 13-03-24 1242
12,442 기타 utf8 체크하기 [7] 기술레벨커뮤니티레벨BigSando 13-03-23 968
12,441 스크립트 jQuery) mouse wheel extend plugin [4] 기술레벨커뮤니티레벨엔시™ 13-03-22 731
12,440 DBMS [MySQL] 함수, 프로시져, 트리거, 이벤트 작성에 참고하세요 [2] 기술레벨커뮤니티레벨그네 13-03-21 761
12,439 기타 CASE WHEN ~ (MySQL 의 IF문 역활) [1] 기술레벨커뮤니티레벨BigSando 13-03-20 593
12,438 스크립트 마우스 이벤트를 터치이벤트로 자동전환 [2] 기술레벨커뮤니티레벨최용훈 13-03-20 615
 
12345678910
글쓰기
SEARCH 검색하기