머드초보의 블로그

저번에 해커톤에 가서 코딩하고 온 할리갈리 게임입니다.
jQuery Mobile와 Java와 html5의 Cavans의 짬뽕 조화로.....이루어져있습니다....ㄷㄷ
Client는 Cavans로 만들었는데, IE계열에서 전혀 동작하지 않네요. IE9에서도 안되네요ㅠ 그리고 Android계열 브라우저에도 잘 안되는 듯 합니다. 되는 곳은 iPhone계열 밖에 없네요ㅠ 아이폰이랑은 같이 게임을 하실 수 있을겁니다^^
뭐 그냥 ChannelAPI 공부하는데에 전혀 무리 없이 보실 수 있을 것 같습니다.
물론 공식사이트에 있는 Tic-Tac-Toc 예제가 더 심플하고 보기 쉬운 예제입니다ㅠ 
http://code.google.com/p/java-channel-tic-tac-toe/

 그래도 그 외에 방 개념을 넣어서 만든거라 한서버당 여러 게임을 즐길 수 있어요!
근데 몰랐는데, 문제는 무료 계정을 사용할 경우 Resource에 한계가 있습니다. 근데, 이 ChannelAPI의 Channel Created 리소스는 너무 쪼잔하게 줍니다. 하루에 100개가 제한입니다. 결국은 접속자 100명이 들어오면 끝나는 것이죠....ㄷㄷ 페이지당 채널하나니 뭐 그냥 몇명이 게임하면 끝나는 것이죠 ㅇㅇ

 그래서 다음에는 Node.js로 만들어서 무료호스팅 하는 곳에 올려볼 생각입니다!
스샷

일단 원리는 간단합니다.

1. 해당 게임페이지에 접속 시 채널생성.

채널을 생성하고 Javascript에서 Open요청을 하면 /_ah/channel/connected 요청이 호출됩니다. 여기서 입장을 시키면 됩니다. 서버에 접속되었다고 객체의 유저목록에 추가하면 됩ㄴ니다. 그 뒤에 이 사용자가 끊어질 경우 /_ah/channel/disconnected 요청이 호출되므로 그때 유저목록에서 삭제해주면 되죠!

2. 해당 방에 객체를 만들어 ClientId저장

ClientId를 저장해두어야 나중에 해당 방에 있는 유저들에게만 데이터를 보낼 때 해당 ClientId로 보낼 수 있습니다. 

쓰다보니 별거없네... 암튼 이런식으로 되는거라......
 
소스는 여기에
https://github.com/mudchobo/HalliGalliForAppEngine 

올려놓은 사이트는 여기에
http://halligalligame.appspot.com/ 

PS. 만들면서 느끼는 게 Javascript로 타이머 하나 걸면 무조건 이기겠더라구요... 웹게임에 대한 어뷰저는 어떻게 처리를 해야할 지 고민이 크네요... 

한번 만들어보려고 했는데요... 그냥 우연히 Canvas를 이용한 Coverflow 라이브러리가 있을 것 같아서 검색해보니 역시 있네요.
근데 얘좀 잘못 만들어진 듯-_- Canvas를 여러개 만들어놓고 돌리고 있네요-_- Canvas 하나면 될 듯한데...




사이트
http://jcoverflow.sourceforge.net/

사용법은 파일 다운로드해서 압축풀면, coverflow.js랑 coverflow.css넣고,
[code]<div id="coverflowHolder">
    <div id="__cvfl-coverflow-holder" style="display:none">
        <div id="__cvfl-coverflow">
            <div id="__cvfl-coverflow-wrapper"></div>
            <div id="smallerPreview"></div>
            <div id="__cvfl-coverflow-label"></div>
        </div>
    </div>
</div>[/code]
이런 div를 html에 넣고,
[code]Coverflow.init([리스트배열], {createLabel, onSelectCenter, refill});[/code]
이런식으로 호출해주면 되네요.
저기 리스트배열에는
[{src, labelObject}] 형식으로 src는 이미지 주소를 넣고, labelObject는 선택되었을 때 넣을 데이터를 넣으면 나중에 보여줄 때 편리하게 하는 것 같습니다.
그리고, 함수정의로 createLabel은 현재위치의 coverflow의 정보를 보여주기 위한 html을 리턴하는 함수입니다.
onSelectCenter는 선택된 것 클릭했을 때 액션이고,refill은 잘 모르겠습니다-_-

여러가지 기능이 더 있는 것 같은데, 몬가 문서정리가 하나도 안되어있는 것 같습니다.

아! 주의사항!
coverflow.js파일을 상단에 임포트하려고할 때 window.addEventListener가 undefined가 나와서, 로드가 완료된 뒤 처리하도록 바꿔야해요. 휠이 먹히도록 하는 부분인 듯 한데,
728~729줄을
[code]window.onload = function(){
    두줄넣기
}
[/code]
요렇게 처리!

이걸 응용해서만든! 가수별 앨범목록!
http://mudchobo.tomeii.com/jcoverflow/


안드로이드에서도 잘 되네요. 근데, 약간 느리고, 문제가 있긴 하지만, 일단 잘됩니다(응?)...