ballanim-scene-class-starter.js

// some default values
const defaultConfig = {
  width: 500,
  height: 500,
  gravity: 0.25,
  friction: 0.98
}

// classes are functions that create objects
// and we're exporting it to use in another file
export class Scene {
  // constructor function is the equivalent of
  // the init function
  constructor (canvasId = 'gameCanvas', config) {
    // get the canvas and context
    this.canvas = document.getElementById(canvasId)
    this.ctx = this.canvas.getContext('2d')

    // world/physics settings
    // merge default config & any passed in config by *spreading* them
    this.config = {
      ...defaultConfig,
      ...config
    }

    // set the canvas size
    this.canvas.width = this.config.width
    this.canvas.height = this.config.height

    // begin update loop
    // use an *arrow function* so that we can use `this` properly
    document.addEventListener('DOMContentLoaded', () => this.update())
  }

  update () {
    // *destructure* the scene's variables
    const { ctx, config } = this

    // queue the next update
    window.requestAnimationFrame(() => this.update())

    // clear the canvas
    ctx.clearRect(0, 0, config.width, config.height)

    // draw objects
  }
}

// only use export with the boilerplate; otherwise ignore it
export default Scene