html5 로 개발된 컨텐츠 관련

 

 

=================================

=================================

=================================

 

 

 

 

 

html5 로 개발된 컨텐츠 관련

 

 

브라우져 퀘스트

 

 

 

출처: http://onlinegame119.com/80165826286

 

 

 

 

 

 

 

안녕하세요. 온라인게임설명서입니다.

오늘 소개할 온라인게임은 Browser Quest(브라우저 퀘스트)라는 온라인게임입니다. 우선 이 온라인게임은 자바스크립트와 HTML5로 개발되었고, 홈페이지를 통해 무료로 플레이 해볼 수 있습니다. 구동 브라우저는 파이어폭스, 크롬, 사파리에서만 플레이를 진행할 수 있으며, 무료 오픈 소스를 통해 유저들 스스로가 게임을 개발하고 구현시켜나갈 수 있습니다.(익스플로어에서는 안되요..)스마트폰이나 테블렛PC를 통해서도 플레이가 가능하며, 직접 PC와 스마트폰으로 플레이를 진행해본 결과 정말 잘 제작되고 구성되어 있다는 생각이 듭니다. 현재 한국에서 Browser Quest를 기반으로 더욱 컨텐츠를 확장시키고 있는 분들도 계셔서 이 게임을 바탕으로 다양한 웹게임을 개발할 수 있을 것 입니다. 위 Browser Quest의 소스 코드는 Github를 통해 공유 받을 수 있으며, 준비된 서버나 인력이 있다면 바로 서버를 열고 게임을 구동시킬 수 있습니다. 게임의 경우 상당히 PC에서 뿐만 아니라 스마트폰에서도 움직임이나 플레이가 상당히 원활하다고 느낀 부분이 많고, 오래전 머드게임을 하는듯한 느낌을 받아 오랜만에 잠시나마 재미있게 플레이를 한 것 같습니다.

 

기본적으로 데모 웹게임으로 구성해 놓은 게임이기 때문에 다양한 레벨업 구간이나 아이템, 조합이나 컨텐츠는 존재하지 않으며, 일반 RPG게임을 하는 것과 같이 몬스터를 잡고, 최종 보스까지 이동하는 방식으로 컨텐츠를 모두 소모하게 됩니다. 아래를 살펴보시면 게임에 관련된 플레이 리뷰를 남겨 놓은 것이니 게임을 개발하고 공부하시는 분들에게는 많은 도움이 될 것 같습니다. 전체적인 게임의 요소는 영상에서도 살펴볼 수 있듯이 도트 그래픽을 가지고 있으며 다중 접속 및 WebSocket기술(각 서버는 다중의 가상 세계 인스턴스를 가지고 있어서 사용자의 이동에 따라 로직 이동 및 동기화가 진행 됩니다. 이 서버는 Node.js를 활용하며 자바스크립트 기반의 이벤트 처리 능력에 탁월한 성능을 보여 줍니다)을 사용하여 쌍방향 통신이 잘 이루어집니다.

 

 

게임에 접속하기 전

손가락을 꾸욱 누르고!

(로그인 없이 클릭 가능)

 

 

Browser Quest - http://browserquest.mozilla.org/

 

Github - https://github.com/mozilla/BrowserQuest 

 

 

 

 

웹 기반 게임 플랫폼(링크를 클릭하시면 웹페이지로 이동합니다)

 

BrowserQuest는 다양한 웹 표준 기술을 사용하였습니다:

• HTML5 Canvas: 2D 타일 기반 그래픽 엔진.
• Web workers: 가상 세계 지도를 처음 가져 올 때 클라이언트 로드 분산 기능.
• localStorage: 캐릭터가 하는 동작을 계속적으로 클라이언트에 저장.
• CSS3 Media Queries: 게임을 다중 다바이스에서 실행 가능하도록 기술 제공.
• HTML5 audio: 게임 동작 할 때 나는 소리(죽거나 할때) 효과!

 

 

 

 

▲다양한 퀘스트 외 업적을 통해 게임을 진행하게 됩니다

 

 

 

▲유저들과 함께 협동 플레이를 진행할 수 있습니다

 

 

 

▲더욱 좋은 아이템을 착용할 수 있으며, 레벨 제한이 없습니다

 

 

 

▲최종 보스와의 전투를 펼치는 온게설의 모습

 

다음과 같이 Browser Quset의 최종 컨텐츠는 해골 보스입니다. 하지만, 자신이 직접 개발해 나간다면 레벨 구간이나 몬스터, 최종 보스를 추가할 수 있습니다. 다양한 아이템을 추가하고 인첸트, 아이템창 등을 추가하여 게임을 더욱 재미있게 만들어 나갈 수 있을 것 같습니다. 머드 게임의 모습을 하고 있지만, 웹으로 이러한 기능이 가능하다고 생각하니 많이 놀랍습니다. 현재 한국에서 Browser Quest를 기반으로 제작하고 있는 "안생겨요" 게임을 살펴보니 레벨 구간 및 레이드, 새로운 아이템, 몬스터 등을 추가한 모습을 살펴볼 수 있었습니다. 게임에 관심이 있거나 개발을 하시는 분들은 위 링크 또는 오픈 소스를 통해 공부를 해보시길 바랍니다. 잘 구성된 게임을 통해 더욱 완성된 게임이 개발된다면 유저들에게는 새로운 즐길거리가 생길 것 같습니다. 오랜만에 이런 도트 그래픽 온라인게임을 보니 좀 신기하고 재미있게 플레이를 한 것 같습니다. Browser Quest는 아직까지 레벨 구간 "감히 접근할 수 없습니다"라는 레벨 통제가 없으며, 아이템도 레벨 1부터 바로 지존 아이템을 입을 수 있기 때문에 밀어주는 사람이 있다면 10분 만에 지존을 만들 수 있습니다. 오늘도 올림픽이 계속되고 있네요..힘들어도 대한민국을 응원해야하겠죠!?

 

 

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://gigglehd.com/zbxe/5689293

 

HTMl5를 사용하여 개발된 웹 기반 게임들입니다.

 

1.Chain Reaction

 

링크: http://www.yvoschaap.com/chainrxn/

 

 

 

 

 

2.Biolab Disaster

 

링크: http://playbiolab.com/

 

 

 

 

 

3.Bubble Trouble

 

링크: http://xwuz.com/bubble/

 

 

 

 

 

 4.Runfield

 

링크: https://mozillademos.org/demos/runfield/demo.html

 

 

 

 

 

 5.Sand Trap

 

링크: http://gopherwoodstudios.com/sandtrap/sand-trap.htm

 

 

 

 

 

6.Torus

 

링크: http://www.benjoffe.com/code/games/torus/

 

 

 

 

 

7.Space War

 

링크: http://www.redskygames.com/html5/

 

 

 

 

 

8.Google Pacman

 

링크: http://macek.github.com/google_pacman/

 

 

 

 

 

9.Angry Birds(구글 크롬만 가능)

 

링크: http://chrome.angrybirds.com/

 

 

 

 

 

10.RGB Invaders

 

링크: http://10k.aneventapart.com/Uploads/392/

 

 

 

 

 

11.Canvas Rider

 

링크: http://canvasrider.com/tracks/523677

 

 

 

 

 

12.Blinkwang

 

링크: http://storypixel.com/lab/blinkwang

 

 

 

 

 

13.Cover Fire

 

링크: http://www.wiicade.com/playJSGame.aspx?gameID=1317&gameName=Coverfire

 

 

 

 

 

14.HTML5 Helicopter

 

링크: http://arandomurl.com/2010/08/05/html5-helicopter.html

 

 

 

 

 

15.Blobby Volley

 

링크: http://blobby.sourceforge.net/data/bv2browser/index.html

 

 

 

 

 

 

=================================

=================================

=================================

 

 

 

http://www.html5games.net/

 

http://html5games.com/

 

http://www.bluega.com/

 

http://m.anne-soft.com/game/

 

 

=================================

=================================

=================================