사용자 삽입 이미지
Andrew Wooldridge씨가 CanvasQuest라는 단순한 Rogue 와 비슷한 게임을 만들었습니다. 맵 로딩 같은 재밌는 기능도 포함되어있고, 스프라이트를 통해 텍스트를 렌더링하는데 그래픽을 사용했습니다.

from Canvas Quest: Roque like RPG game on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

Markus Inger 씨가 Mootools 로 BeJewelled 같은 게임인 BeSlimed를 작성하셨습니다.

from BeSlimed: MooTools Gaming on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

또 다시 Jacob Seidelin 씨의 작품입니다. 아예 JavaScript 게임이라는 분야를 만들 작정으로 보일 정도네요. ^^;; 이번 작품은 수퍼 마리오 카트입니다. 당연히 JavaScript를 이용했습니다.

대부분의 렌더링은 canvas 엘리먼트를 이용했으며, FF2, FF3, Opera(9.27과 beta) 그리고 Safari 3.1.1에서 동작합니다. Safari에서는 카트 스프라이트에 사소한 결함이 있습니다만, 게임을 즐기는 데는 지장이 없을 것 같습니다. 또한, WebKit nightly 빌드를 이용하신다면, 최신판인지 확인해보시길 바랍니다. 최근의 몇몇 버전들은 canvas에 문제가 있었습니다. IE 지원은 고려하고 있지 않습니다. 죄송합니다.

(축소된) 코드의 용량은 11kb이지만 지난달의 마리오 게임과는 다르게 몇개의 외부 이미지 파일을 사용했습니다. 이것은 게임을 보다 부드럽게 즐기기 위한 테스트이지만, 어쨌든 파일 크기는 중요하지 않습니다. 제가 보기엔 꽤 괜찮습니다.

몇 가지의 렌더링 옵션을 설정할 수 있습니다. "Quality" 는 얼마나 많은 수직선이 렌더링 되느냐를 다루고, "Screen scale"은 화면의 크기를 다룹니다. 둘 다 시각적인 효과와 성능을 맞바꾸는 옵션들입니다.

달려보실래요?

from JavaScript Super Mario Kart on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 2

Live Chess
Piotr Dachtera씨가 자신이 예전에 만들었던 체스를 Comet을 이용해 보다 확장성있도록 만들었습니다. 클라이언트 사이드에는 dojox.cometd 를 사용했고 서버로는 Jetty를 사용했습니다. Dylan씨가 이에 대한 글을 작성했습니다.

Mathieu Nouzareth씨는 역시 Jetty와 Comet 기술을 사용한 Flash 기반 게임 플랫폼인 Cafe.com에 대한 글을 코멘트에 남겼습니다.

from Live Chess with Comet on Ajaxian

Posted by 행복한고니 트랙백 0 : 댓글 0
아래는 Ajaxian에 있는 글을 그대로 번역했습니다. 즉, "저"라고 하면 Dion씨인 것이고, "우리"라고 하면 Ben씨와 Dion씨입니다. 이 글을 보고 나니 더더욱 Wii 를 사고 싶어지네요. 그전엔 소년의 혼(?)이었다면 이번에는 개발자의 혼(?)으로요. ^-^
_________________________
Ben과 저는 JavaOne에서 Ajax의 새로운 점에 대한 프리젠테이션을 진행했습니다. 이 행사가 JavaOne이기 때문에 우리는 Java쪽 주제를 조금 더 다루었는데, 주제 중 하나가 웹 페이지 밖이나 브라우저 종료후에도 계속 애플릿를 실행할 있는 멋진 새 기능을 지원하는 Java Plugin 사용에 관한 것이었습니다. Java는 이제 "Java가 전체 브라우저를 종료"하던 문제를 일으키던 프로세스 내부 실행을 벗어났습니다.

어쨌든, 다시 데모 이야기를 하겠습니다. For some context, 지난해 JavaOne에서 우리는 스테이지에서 기타 히어로(Guitar Hero)를 시연했었는데, 이 때 어떤 식으로든 게임 콘솔을 사용해야겠다라고 생각했습니다. 올해에 컨트롤러를 사용하기로 결심했지만, 그 다짐은 콘솔대신 Wii가 되었습니다.

그 컨트롤러를 이용해서 웹 페이지를 컨트롤 할 수 있으면 끝내주지 않을까? 라고 생각했고, 작업을 시작했습니다. 블루투스를 통해 Wii 모트와 교신할 수 있는데, 우리는 그를 가능하게 해줄 스택이 필요했습니다. Java에는 블루투스 스택이 있었죠. 우리는 Java 스택과 교신할 애플릿을 구할 수 있었습니다. 흠.

다양한 스택을 테스트하는 것은 실제로 시간이 꽤 걸렸습니다. 결국 우리는 많은 Wii 해커들이 사용하는 Wiiuse라는 네이티브 시스템을 사용했습니다. Wiiusej라는 wrapper 라이브러리는 정확하게 우리가 필요로 하던 것이었습니다.

간단한 테스트 후에 리모트와 프로그램간 통신을 하는 응용프로그램이 만들어졌습니다. 메인 컨트롤러가 Wii 센서바에 있는 일련의 IR(적외선) 빛들을 감지하기 때문에, 적당한 IR 소스만 있으면 시스템을 시뮬레이션할 수 있습니다. 프리젠테이션 룸에서 무대를 비추던 커다란 빛은 센서바의 역할을 할만큼 충분히 강해서 우리는 그것을 사용할 필요가 없었습니다.

어쨌든, 다시 프로그램 얘기를 하죠. 우리는 리모트가 무엇을 하고 있는지 알려줄 상태 머신 역할을 할 Java 클래스를 작성했습니다. 그것은 움직임과 어떤 버튼이 눌렸는지, 장치가 얼마나 빨리 움직이는지 감지할 수 있었습니다. 이 데이터로 우리는 간단한 다트 게임을 작성했습니다. 상태 머신 Java 코드와 정보를 노출시키는 Applet wrapper로 프로그램의 Ajax 부분을 완료했습니다.

우리는 화면에 다트판을 그리고 JSObject를 통해 JavaScript가 Applet을 폴링하도록 했습니다(이것처럼 간단하게: document.nameofapplet.pollmethod()). 이벤트 드리븐 대신 폴링을 하긴 했지만, 다른 방식의 통신보다 더 안정적이었습니다. JavaScript 코드가 애플릿을 폴링할 때 리모트의 좌표 데이터를 포함한 데이터 구조체를 되돌려 받았습니다. 리모트의 움직임에 따라서 화면상의 다트 이미지를 이동시켰고, 발사하면 다트판을 향해 날아가는 다트의 애니메이션을 시작했습니다.

처음에는, 상당히 단순했습니다. 조준하고 쏘면 항상 그 자리에 정확히 맞습니다. 재밌는 게임은 아니었죠. 우리는 몇가지 간단한 물리법칙을 Ajax 게임에 추가하기로 하고, 던지는 속도(힘이 약하면 떨어집니다)와 경로(얼마나 일직선으로 던지는지)를 추가했습니다. 만약 던질 때 흔들렸다면 다트는 정확하게 날아가진 않습니다.

아래의 동영상이 프로그램의 데모입니다. 설명과 함께 소스코드도 포함하고 있으며 보다 자세한 사항을 볼 수 있습니다.

Wii Darts in Ajax from Dion Almaer on Vimeo.

from Wii Darts: Powering Ajax applications with Wii Controllers on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1
Pictionary


XSketch는 "여러명이 즐기는 단어 스케치 게임입니다. Adobe Flash, Java, Ajax, GWT 등을 이용해 작성되었습니다. 게임 진행방법은 다른 게이머들에게 자신이 가진 단어를 맞추도록 그림을 그려 설명하는(혹은 그 반대로) Pictionary와 유사합니다.

Ryan Dewsbury 씨가 이 게임을 만들어 그의 컬렉션 GPokrKDice에 추가했습니다.

이건 특히 중독성있네요!

from XSketch: Pictionary with GWT on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
JavaScript의 한계는 어디까지일까요. Basic, Ruby, Smalltalk 를 구현한 데 이어 또 다른 언어를 구현했습니다.

John Resig 씨에 따르면, 일본의 Shibuya.JS 사용자 그룹에서 JavaScript로 JavaVM을 구현한 Orto [PDF, 일본어] 프로젝트를 진행하고 있다고 합니다. 보다 정확히 말하면 Java를 작성하고, bytecode로 컴파일한 뒤 Orto를 통해 실행해볼 수 있다는 것입니다(이 때 Orto에서 Java -> JavaScript로의 변환과정을 거칩니다).

생성되는 코드는 이런 형태로 사람이 읽을만한 모양은 아닙니다:
"java/lang/Thread 1316742099":function(){var orto333=orto245[0];
var orto336=orto350(orto333);
if(orto336.orto340!=orto310){orto223("java/lang/IllegalThreadStateException",null);
return ;
}
case 117:orto246[orto247-2]={high:(~orto246[orto247-2].high)
  &0xffffffff,low:(~orto246[orto247-2].low+1)&0xffffffff};
if(orto246[orto247-2].low==0){orto246[orto247-2].high++;
orto246[orto247-2].high&=0xffffffff;
orto246[orto247-2].low=0;
}break;

실행해볼 수 있는 예제로 테트리스가 있는데, 사람이 밀리는지 접속이 여의치 않네요.
Tetris

Orto에서 실행한 Tetris


다만, 몇 가지 부족한 부분도 있는데, 이를 테면 쓰레드 구현을 위해 setTimeout을 엄청나게 쓸 수 밖에 없었다와 같은 문제들입니다(JavaScript는 싱글스레드라서 어쩔 수 없는 문제입니다).

John Resig 씨의 블로그에 가보면 댓글에 iPhone에서도 작동했다는 얘기가 있습니다.

from Java in JavaScript from Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Pierre Chassaing 씨가 Prototype과 Script.aculo.us를 이용해서 JavaScript로 ProtoRPG라는 롤 플레잉 게임을 만들었습니다. 느낌은 꼭 NetHack 스타일인 것 같습니다.

ProtoRPG

ProtoRPG


이 글은 현재 Ajaxian 에서 삭제된 상태입니다.
Posted by 행복한고니 트랙백 0 : 댓글 0
from Super Mario; 14KB of JavaScript on Ajaxian

사용자 삽입 이미지
Jacob Seidelin씨가 재밌는 것을 만들어냈습니다. 14KB의 코드로 닌텐도의 히트작인 수퍼 마리오 게임을 만들었네요.

한 개의 JavaScript 파일에 작게 유지되는 실험을 하나 했습니다. 어떠한 이미지를 비롯 어떠한 외부 파일도 사용되지 않았으며, 모든 것은 canvas 엘리먼트와 구식 방법인 div 생성/배열(IE에서)으로만 렌더링됩니다. 스프라이트는 인코딩된 문자열에 저장되며 각 스프라이트 당 4색상만 허용하는 포맷을 이용합니다. 하지만 각 스프라이트별로 40~60 바이트 정도의 용량은 차지합니다.

우리는 base64로 인코딩된 (URI 형태의) MIDI 음악도 있습니다. IE에서는 음악이 없고, 브라우저마다 조금씩의 사소한 문제가 있는 것 같지만, 작업 예정에 있습니다.

Posted by 행복한고니 트랙백 0 : 댓글 0