K3TH3R/App.js

## App.js
// EaselJS still has some problems compiling with Webpack/CommonJS as of this
// publishing (01/23/2016), which makes it difficult to write modularity
// in ES6 for it. However, it's not that hard to work around:
import { Car, Mustang } from './Cars';

let createjs = window.createjs; // local reference to createjs and bypasses the current module issues
let stage = new createjs.Stage('car_canvas');
let car = new Car({
  color: '#0081c9',
  id: 'car1',
  name: 'Bog Standard Car',
  x: '50',
  y: '50',
  radius: '35'
});
car.type(); // I am a normal car and my name is: Bog Standard Car

let mustang = new Mustang({
  color: '#fff',
  id: 'mustang',
  name: 'Mustang Sally',
  x: '200',
  y: '200',
  radius: '50'
});
mustang.type(); // I am a Mustang and my name is: Mustang Sally

function tick(event) {
  // update stage code
}

document.addEventListener('DOMContentLoaded', function () {
  stage.addChild(bg1);
  stage.addChild(bg2);
  stage.addChild(ug);

  createjs.Ticker.setFPS(30);
  createjs.Ticker.addEventListener('tick', stage);
  createjs.Ticker.addEventListener('tick', tick);
});

## Cars.js
let Shape = window.createjs.Shape;

export class Car extends Shape {
  constructor(options) {
    super();
    // The Shape class's constructor doesn't fire through the normal
    // ES6 constructor->super() function, so we have to initiate the
    // old way, and then return it as as the constructed object
    let c = new Shape();

    c.id = options.id;
    c.name = options.name;
    c.color = options.color;
    c.graphics
      .beginFill(options.color)
      .drawCircle(0, 0, options.radius);
    c.x = options.x;
    c.y = options.y;
    g.type = this.type;
    return g;
  }

  type() {
    console.log('I am a normal car and my name is: ', this.name);
  }
}

export class Mustang extends Card {
  constructor(options) {
    // Car's constructor->super() is returning an object still,
    // so we need to return that again or the Mustang object
    // doesn't draw itself properly
    return super(options);
  }

  type() {
    console.log('I am a Mustang and my name is: ', this.name);
  }
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>EaselJS with ES6 Classes</title>
</head>
<body>
  <canvas id="car_canvas" width="800" height="800"></canvas>
  <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
  <script src="app.js"></script>
</body>
</html>
	// EaselJS still has some problems compiling with Webpack/CommonJS as of this
	// publishing (01/23/2016), which makes it difficult to write modularity
	// in ES6 for it. However, it's not that hard to work around:
	import { Car, Mustang } from './Cars';

	let createjs = window.createjs; // local reference to createjs and bypasses the current module issues
	let stage = new createjs.Stage('car_canvas');
	let car = new Car({
	color: '#0081c9',
	id: 'car1',
	name: 'Bog Standard Car',
	x: '50',
	y: '50',
	radius: '35'
	});
	car.type(); // I am a normal car and my name is: Bog Standard Car

	let mustang = new Mustang({
	color: '#fff',
	id: 'mustang',
	name: 'Mustang Sally',
	x: '200',
	y: '200',
	radius: '50'
	});
	mustang.type(); // I am a Mustang and my name is: Mustang Sally

	function tick(event) {
	// update stage code
	}

	document.addEventListener('DOMContentLoaded', function () {
	stage.addChild(bg1);
	stage.addChild(bg2);
	stage.addChild(ug);

	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick', stage);
	createjs.Ticker.addEventListener('tick', tick);
	});
	let Shape = window.createjs.Shape;

	export class Car extends Shape {
	constructor(options) {
	super();
	// The Shape class's constructor doesn't fire through the normal
	// ES6 constructor->super() function, so we have to initiate the
	// old way, and then return it as as the constructed object
	let c = new Shape();

	c.id = options.id;
	c.name = options.name;
	c.color = options.color;
	c.graphics
	.beginFill(options.color)
	.drawCircle(0, 0, options.radius);
	c.x = options.x;
	c.y = options.y;
	g.type = this.type;
	return g;
	}

	type() {
	console.log('I am a normal car and my name is: ', this.name);
	}
	}

	export class Mustang extends Card {
	constructor(options) {
	// Car's constructor->super() is returning an object still,
	// so we need to return that again or the Mustang object
	// doesn't draw itself properly
	return super(options);
	}

	type() {
	console.log('I am a Mustang and my name is: ', this.name);
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>EaselJS with ES6 Classes</title>
	</head>
	<body>
	<canvas id="car_canvas" width="800" height="800"></canvas>
	<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
	<script src="app.js"></script>
	</body>
	</html>