Rev. 2.73


마우스 왼쪽 버튼을 클릭하면 작은 사각형 물체를 생성하며, 오른쪽 버튼을 클릭하면 화면을 초기화 합니다.

얼마전 Web Worker(DOM Worker)의 사용방법을 간략하게 알아보고 실제로 적용할 수 있는 분야를 곰곰히 생각해 보면서 여러가지 실험을 시도했습니다. 위 화면은 워커(싱글스레드)에 의해 드로잉되는 Box2D 물리엔진입니다. 순수 자바스크립트로 드로잉 되는 예제와 직접 비교해 보세요. 지속적으로 생성되는 사각형들의 인스턴스 단위로 스레드를 할당해 보려고 시도 했지만 번번히 실패하고 말았습니다. 시간이 허락한다면 멀티스레드가 가능하도록 재시도 해 볼 생각입니다.

John Resig씨도 워커를 이용하여 RayTracing, Movement Tracking흥미로운 멀티스레드 실험들을 시도했더군요. 그리고 Rick Waldron씨는 워커를 PHP와 연동하여 Ajax로 통신하는데 성공하였습니다. 브라우저로 하여금 비교적 많은 리소스를 요구하는 Ajax 통신에 워커를 사용하는 아이디어는 매우 현실성 있어 보입니다. 그래서 실험적으로 Prototype의 Ajax.Request 메서드를 워커에서 실행하도록 교체하여 사용해 보고 있는데요. 브라우저가 조금은 덜 힘들어 하는 것을 직접적으로 느낄 수 있었습니다. 문제점이라면 파이어폭스에서 간헐적으로 죽는 현상이 발생하며, 송/수신 패킷이 모니터링하기가 힘들다는 점 정도입니다. 웹 워커에 점점 빠져들고 있어요.

Comments

기다리고 기다리던 구글 웨이브 팀으로부터의 초청메일이 도착했습니다. 당장에 가입절차를 마치고 아티클을 작성하여 embed 해 보았습니다. 현재 embed된 웨이브 컨텐츠는 계정을 가지고 있는 사용자에게만 나타나며(로그인 필요), 아래와 같은 자바스크립트 코드 몇줄을 작성하여 이루어집니다.

var wavePanel = new WavePanel('http://wave.google.com/a/wavesandbox.com/');
wavePanel.setUIConfig('transparent', '#444', 'Malgun Gothic', '10pt');
wavePanel.loadWave('wavesandbox.com!w+JqlftomE%A');
wavePanel.init(document.getElementById('waveframe'));

"JqlftomE%A"는 웨이브 컨텐트 ID로써 우측 상단의 "Debug" > "Get current Wave ID" 메뉴를 선택하여 얻을 수 있습니다. 아직은 많이 불안정한 모습이지만, 웨이브의 기본 기능들을 훑어보기에는 무리가 없었습니다. 웨이브의 핵심은 API로 중무장한 리얼타임 인터랙션이더군요. cometd 세상이 오려나 봅니다.

Comments

http://firejune.com/attach/0720/090720220157225244/117164.gif

Mr. Speaker는 자바스크립트와 DOM을 이용한 고전적인 방법으로 플랫포머(platformer) 게임을 만들었습니다. 간결하게(기교없이) 작성된 자바스크립트 파일들은 character, enemy, item, levels, player, tile로 구성되어 있으며 html파일에서 프로그램되고 있습니다. 주인공을 방향키로 이동하고 스페이스로 점프시킬 수 있으며, 지도속의 몬스터들을 피해 아이템을 습득하고 다음 단계로 진행하는 룰을 가진 기본에 충실한 아케이드 게임입니다. 참으로 훌륭한 학습자료네요. 이 밖에도 그가 작업한 Deamons Of SpaceCorporate BFFs 자바스크립트 게임들도 즐겨보세요. 기가 막힙니다.

Comments