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

Part1에서 GameRunner를 사용하는것을 보았습니다. 이제 튀어 나오는 공을 그리는 것 외에는 아무것도 하지 않는 Pong 게임 객체를 정의 할 수 있습니다. 우리가해야 할 일은 다음을 구현하는 것입니다.

- initialize()

- update()

- draw()

Pong = {
  initialize: function(runner, cfg) {
    this.cfg    = cfg;
    this.runner = runner;
    this.width  = runner.width;
    this.height = runner.height;
    this.court  = Object.construct(Pong.Court,  this);
    this.ball   = Object.construct(Pong.Ball,   this)
    this.runner.start();
  },
  update: function(dt) {
    this.ball.update(dt);
  },
  draw: function(ctx) {
    this.court.draw(ctx);
    this.ball.draw(ctx);
  },
  Court: {
    // <snip>
  },
  Ball: {
    // <snip>
  }

Pong.Court

Pong.Court 객체는 벽을 그리는 방법을 알수 있습니다.

Court: {
  initialize: function(pong) {
    var w  = pong.width;
    var h  = pong.height;
    var ww = pong.cfg.wallWidth;
    this.walls = [];
    this.walls.push({x: 0,    y: 0,      width: w,  height: ww});
    this.walls.push({x: 0,    y: h - ww, width: w,  height: ww});
    this.walls.push({x: 0,    y: 0,      width: ww, height:  h});
    this.walls.push({x: w-ww, y: 0,      width: ww, height:  h});
  },
  draw: function(ctx) {
    ctx.fillStyle = 'white';
    for(var n = 0 ; n < this.walls.length ; n++)
      ctx.fillRect(this.walls[n].x, this.walls[n].y, this.walls[n].width, this.walls[n].height);
  }
}

Pong.Ball

볼 오브젝트는 움직이는 방법과 그려지는 방법을 알수 있습니다.

Ball: {
  initialize: function(pong) {
    this.pong    = pong;
    this.radius  = pong.cfg.ballRadius;
    this.minX    = pong.cfg.wallWidth + this.radius;
    this.minY    = pong.cfg.wallWidth + this.radius;
    this.maxX    = pong.width  - pong.cfg.wallWidth - this.radius;
    this.maxY    = pong.height - pong.cfg.wallWidth - this.radius;
    this.x       = Game.random(this.minX, this.maxX);
    this.y       = Game.random(this.minY, this.maxY);
    this.dx      = (this.maxX - this.minX) / (Game.random(1, 10) * Game.randomChoice(1, -1));
    this.dy      = (this.maxY - this.minY) / (Game.random(1, 10) * Game.randomChoice(1, -1));
  },
  update: function(dt) {
    this.x = this.x + (this.dx * dt);
    this.y = this.y + (this.dy * dt);
    if ((this.dx > 0) && (this.x > this.maxX)) {
      this.x = this.maxX;
      this.dx = -this.dx;
    }
    else if ((this.dx < 0) && (this.x < this.minX)) {
      this.x = this.minX;
      this.dx = -this.dx;
    }
    if ((this.dy > 0) && (this.y > this.maxY)) {
      this.y = this.maxY;
      this.dy = -this.dy;
    }
    else if ((this.dy < 0) && (this.y < this.minY)) {
      this.y = this.minY;
      this.dy = -this.dy;
    }
  },
  draw: function(ctx) {
    var w = h = this.radius * 2;
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.closePath();
  }
}

멀티 볼 데모는 여기에서 찾을 수 있습니다.