자바스크립트로 퐁(Pong) 게임 만들기 Part - 1

게임 러너 루프

GameRunner는 매우 일반적입니다. 자바 스크립트 사전 요구 사항 (아래 참조)과 기본 게임 루프를 제공합니다.

- 주자 초기화

- 캔버스 front, back 버퍼 생성

- 게임 인스턴스 생성

- 60fps 루프 시작

루프 반복마다 :

- game.update () 호출 - 마지막 프레임 이후 dt 타이머 간격 제공

- game.draw () 호출 - 그리기 위한 버퍼 캔버스 컨텍스트 제공

- 플립 백 및 프론트 버퍼

- 프레임 속도 통계 업데이트

그리고 그게 전부입니다. 여기에서 데모를 찾을 수 있습니다.

Javascript 사전 요구 사항

제 3 자 라이브러리가 필요없는 프레임 워크를 만들고 싶습니다. 이 게임은 HTML <canvas>를 기반으로하고 최신 브라우저에서만 지원되기 때문에 jQuery 나 prototype.js와 같은 전체 라이브러리를 포함 할 필요는 없습니다.

그러나 우리가 필요로하는 몇 가지 전제 조건이 있습니다.

- 캔버스

- Function.bind

- Object.create

- Object.extend

- addEventListener

- DOMContentLoaded

- 이미지 로더

캔버스

우리는 HTML5 <canvas> 요소를 사용하여 게임을 제작하고 있습니다. 우리는 HTML5 <canvas> 요소가 필요합니다! 이것은 모든 최신 브라우저에서 지원되므로 아무런 문제가 없어야합니다.

IE의 이전 버전은 대개 제 3 자 라이브러리 (excanvas.js)를 필요로하지만, IE9는 기본 캔버스를 가지고 있기 때문에 이전 버전의 IE에 대한 지원을 중단하게됩니다.

Function.bind

이 메소드는 ECMAScript 5의 표준입니다. 이것은 자바 스크립트 개발에서 가장 중요한 메소드 중 하나이며, 콜백 (예 : 이벤트 핸들러)으로 사용되는 인스턴스 메소드가 올바른 세트를 갖도록하기 위해 사용됩니다. 그것도 메서드를 합성 할 때 인자를 사용합니다.

이 방법은 대부분의 최신 브라우저에서 제공되지만 구형 브라우저를 제공하기에 쉽기 때문에 샘플 구현은 mozilla에서 제공합니다

if (!Function.prototype.bind) {
  Function.prototype.bind = function(obj) {
    var slice = [].slice,
        args  = slice.call(arguments, 1),
        self  = this,
        nop   = function () {},
        bound = function () {
          return self.apply(this instanceof nop ? this : (obj || {}), args.concat(slice.call(arguments)));
        };
    nop.prototype   = self.prototype;
    bound.prototype = new nop();
    return bound;
  };
}

Object.create

또 다른 ECMAScript5 표준은 특정 프로토 타입을 사용하여 객체의 구성을 캡슐화합니다.

자바 스크립트에서 OOP 클래스 구조 패턴을 모방하기 위한 많은 시도가 있었지만, 많은 경우에 이들을 완전히 피하고 자바 스크립트의 원형을 받아들이는 것이 더 간단 할 수 있습니다.

다시 말하지만, 현대의 브라우저는이 방법을 제공 할 것이지만 필요할 때 쉽게 구현할 수 있습니다.

if (!Object.create) {
  Object.create = function(base) {
    function F() {};
    F.prototype = base;
    return new F();
  }
}

Object.create에서 빠진 것은 어떤 종류의 생성자 함수에 인수를 전달하는 기능입니다. 나는 표준 Object.create 에 이 추가 동작을 제공하는 Object.construct를 추가하려고합니다.

if (!Object.construct) {
  Object.construct = function(base) {
    var instance = Object.create(base);
    if (instance.initialize)
      instance.initialize.apply(instance, [].slice.call(arguments, 1));
    return instance;
  }
}

Object.extend

표준은 아니지만 일반적으로 jQuery 또는 프로토 타입과 같은 라이브러리에서 제공합니다. 한 개체의 모든 속성을 다른 개체의 속성으로 복사하는 기능은 매우 유용 할 수 있습니다.

if (!Object.extend) {
  Object.extend = function(destination, source) {
    for (var property in source) {
      if (source.hasOwnProperty(property))
        destination[property] = source[property];
    }
    return destination;
  };
}

addEventListener

물론 우리는 DOM 이벤트에 응답 할 수 있어야합니다. 오래된 브라우저를 지원하기위한 여러 가지 방법이 있지만 <canvas>를 사용하여 최신 브라우저 만 지원하므로 표준 addEventListener를 지원할 수 있습니다 (예 : Internet Explorer 9에서도 지원)

DOMContentLoaded

페이지를 로드 할 준비가되면 jQuery 및 prototype.js와 같은 타사 라이브러리에서도 문제가 해결되지만 최신 브라우저 만 지원하기 때문에 이러한 브라우저가 DOMContentLoaded 이벤트를 지원함을 알 수 있습니다 (예. IE9는 이것을 지원합니다)

이미지 로더

<canvas> 기반 게임의 한 가지 문제는 이미지가 로드 될 때까지 이미지를 사용할 수 없다는 것입니다. 로드가 완료 될 때까지 이미지를 사용하지 않으려면 여러 이미지를로드하고 마지막 이미지 로드가 완료되면 콜백을 수행하는 도우미 메서드가 필요합니다.

loadImages: function(sources, callback) { /* load multiple images and callback when ALL have finished loading */
  var images = {};
  var count = sources ? sources.length : 0;
  if (count == 0) {
    callback(images);
  }
  else {
    for(var n = 0 ; n < sources.length ; n++) {
      var source = sources[n];
      var image = document.createElement('img');
      images[source] = image;
      Game.addEvent(image, 'load', function() { if (--count == 0) callback(images); });
      image.src = source;
    }
  }
}