Quintus Ball Animation

game.js

var Q = Quintus().include("Sprites").setup({maximize: true});

// My extended module
Q.Sprite.extend("MySprite", {
  orientation: {
    horizontal: 'h',
    vertical: 'v'
  },

  leftEdge: function() {
    return this.p.x - this.p.w/2;
  },

  rightEdge: function() {
    return this.p.x + this.p.w/2;
  },

  topEdge: function() {
    return this.p.y - this.p.h/2;
  },

  bottomEdge: function() {
    return this.p.y + this.p.h/2;
  },

  isAtEdgeAlong: function(orientation) {
    switch(orientation) {
      case this.orientation.horizontal:
        return this.rightEdge() > Q.width || this.leftEdge() < 0;
      case this.orientation.vertical:
        return this.bottomEdge() > Q.height || this.topEdge() < 0;
    }
  }
});

Q.MySprite.extend("Ball", {
  init:function(p) {
    this._super(p,{
      asset: "ball.jpg",
      x: 200,
      y: 150,
      vx: 150,
      vy: 150
    }); 
  },

  step: function(dt) {
    if(this.isAtEdgeAlong('h')) {
      this.p.vx *= -1;
    }
    if(this.isAtEdgeAlong('v')) {
      this.p.vy *= -1;
    }
    this.p.x += this.p.vx * dt;
    this.p.y += this.p.vy * dt;
  }
});

Q.load(["ball.jpg"],function() {
  var ball = new Q.Ball();
  Q.gameLoop(function(dt) {
    ball.update(dt);
    Q.clear();
    ball.render(Q.ctx);
  });
});