Rev. 2.73

210938218g.jpg

HTML5 게임 프로그래밍은 Jacob Seidelin씨가 작성하고 webgenie(장현희)님이 현지화한 개발 서적으로, HTML5를 이용하여 완성도 높은 보석 퍼즐(비주얼드와 유사한) 게임을 만드는 과정을 소개하고 있습니다. 데스크탑/모바일용 브라우저를 지원하도록 하는 화면배치 및 이벤트 처리방법을 다루고 고급 CSS3 처리 기법과 HTML5 Audio, WebGL, Canvas, LocalStorage, WebSocket, WebWorker 등의 명세가 실제 게임을 제작하는 과정에 포함하고 있어 재미있게 학습할 수 있도록 구성된 것이 특징입니다. 그래서 자바스크립트를 어느정도 다룰 줄 안다는 전제하에 HTML5 명세를 이해하는 것이 아니라 사용하는 것에 초점이 맞추어져 있습니다.

선물로 득템하여 짬짬히 내용을 살피는 요 며칠동안 마치 게임을 직접 만드는 듯한 설렘을 느낄 수 있었습니다. HTML5의 모든 명세를 사용하기에는 역시 게임만한 것이 없는 것 같네요.

Comments

얼마 전 Flotr2를 배포한 Humble software development에서 만든 JS-ImageDiff는 HTML5 Canvas 요소를 이용하여 이미지의 변동사항을 비교할 수 있게 하는 자바스크립트로 작성된 작은 유틸리티입니다. Node.JS용으로도 배포되었으며 사용법과 실행 결과는 다음과 같습니다.

var a = new Image()
  , b = new Image()
  , count = 0
  , canvas, context, c;

a.onload = b.onload = function () {
  count++;
  
  // Both images have loaded.
  if (count >= 2) {
    canvas = imagediff.createCanvas();
    canvas.width = 200;
    canvas.height = 200;
    context = canvas.getContext('2d');
    c = imagediff.diff(a, b);
    context.putImageData(c, 0, 0);
    document.body.appendChild(canvas);
  }
};

a.src = '/image/a.jpg';
b.src = '/image/b.jpg';

document.body.appendChild(a);
document.body.appendChild(b);

Comments