msanatan/coin-sprite-sheet.png

## coin-sprite-sheet.png

      
    Raw
  

              coin-sprite-sheet.png
            
          
## coin.js
class AssetManager {
  constructor() {
    this.successCount = 0;
    this.errorCount = 0;
    this.loadQueue = [];
    this.cache = {};
  }

  enqueueAsset(path) {
    this.loadQueue.push(path);
  }

  downloadAll(callback) {
    if (this.loadQueue.length === 0) {
      callback();
    }

    for (let i = 0; i < this.loadQueue.length; i++) {
      let img = new Image();
      img.onload = () => {
        this.successCount++;
        if (this.isComplete()) {
          callback();
        }
      };
      img.onerror = () => {
        this.errorCount++;
        if (this.isComplete()) {
          callback();
        }
      };
      img.src = this.loadQueue[i];
      this.cache[this.loadQueue[i]] = img;
    }
  }

  isComplete() {
    return this.loadQueue.length === this.successCount + this.errorCount;
  }

  getAsset(path) {
    return this.cache[path];
  }
}


class Coin {
  constructor(x=0, y=0, spriteSheet, coinCount) {
    this.x = x;
    this.y = y;
    this.count = 0;
    this.spriteSheet = spriteSheet;
    this.coinWidth = Math.floor(this.spriteSheet.width / coinCount);
    this.coinHeight = this.spriteSheet.height;
  }

  update(dt) {
    if (this.count === 9) {
      this.count = 0;
    } else {
      this.count++;
    }
    this.x = this.count * this.coinWidth;
    this.y = this.coinHeight;
  }

  render(context, tFrame) {
    context.drawImage(this.spriteSheet, this.x, 0, this.coinWidth, this.coinHeight, 0, 0, this.coinWidth, this.coinHeight);
  }
}

let animation = {
  width: window.innerWidth,
  height: window.innerHeight,
  fps: 60,
  canvas: document.getElementsByClassName('animation')[0],
  stopMain: 0,
  lastTick: 0,
  tickLength: 0,
  lastRender: 0
};

let animate = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function(callback) {
      return window.setTimeout(callback, 1000 / animation.fps);
    };

animation.canvas.width = animation.width;
animation.canvas.height = animation.height;
animation.canvas.focus();
animation['ctx'] = animation.canvas.getContext('2d');
let coin = null;

let update = function(dt) {
  'use strict';
  coin.update(dt);
};

let render = function(tFrame) {
  'use strict';
  animation.ctx.clearRect(0, 0, coin.coinWidth, coin.coinHeight);
  coin.render(animation.ctx, tFrame);
};

let queueUpdates = function(numTicks) {
  for (let i = 0; i < numTicks; i++) {
    animation.lastTick = animation.lastTick + animation.tickLength;
    update(animation.lastTick);
  }
};

let main = function(tFrame) {
  animation.stopMain = animate(main);
  let nextTick = animation.lastTick + animation.tickLength;
  let numTicks = 0;

  if (tFrame > nextTick) {
    let timeSinceTick = tFrame - animation.lastTick;
    numTicks = Math.floor(timeSinceTick / animation.tickLength);
  }

  //update();
  queueUpdates(numTicks);
  render(tFrame);
  animation.lastRender = tFrame;
};

let assetManager = new AssetManager();
assetManager.enqueueAsset('coin-sprite-sheet.png');
assetManager.downloadAll(function() {
  coin = new Coin(0, 0, assetManager.getAsset('coin-sprite-sheet.png'), 10);
  animation.lastTick = performance.now();
  animation.lastRender = animation.lastTick;
  animation.tickLength = animation.fps;
  main(performance.now());
});

## index.html
<!doctype html>
<html>
  <head>
    <title>Coin Animation</title>
    <style>
      *, body {
        width: 100%;
        height:100%;
        margin: 0;
        padding: 0;
      }

      .animation {
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas class="animation"></canvas>
    <script type="application/javascript" src="coin.js"></script>
  </body>
</html>
	class AssetManager {
	constructor() {
	this.successCount = 0;
	this.errorCount = 0;
	this.loadQueue = [];
	this.cache = {};
	}

	enqueueAsset(path) {
	this.loadQueue.push(path);
	}

	downloadAll(callback) {
	if (this.loadQueue.length === 0) {
	callback();
	}

	for (let i = 0; i < this.loadQueue.length; i++) {
	let img = new Image();
	img.onload = () => {
	this.successCount++;
	if (this.isComplete()) {
	callback();
	}
	};
	img.onerror = () => {
	this.errorCount++;
	if (this.isComplete()) {
	callback();
	}
	};
	img.src = this.loadQueue[i];
	this.cache[this.loadQueue[i]] = img;
	}
	}

	isComplete() {
	return this.loadQueue.length === this.successCount + this.errorCount;
	}

	getAsset(path) {
	return this.cache[path];
	}
	}


	class Coin {
	constructor(x=0, y=0, spriteSheet, coinCount) {
	this.x = x;
	this.y = y;
	this.count = 0;
	this.spriteSheet = spriteSheet;
	this.coinWidth = Math.floor(this.spriteSheet.width / coinCount);
	this.coinHeight = this.spriteSheet.height;
	}

	update(dt) {
	if (this.count === 9) {
	this.count = 0;
	} else {
	this.count++;
	}
	this.x = this.count * this.coinWidth;
	this.y = this.coinHeight;
	}

	render(context, tFrame) {
	context.drawImage(this.spriteSheet, this.x, 0, this.coinWidth, this.coinHeight, 0, 0, this.coinWidth, this.coinHeight);
	}
	}

	let animation = {
	width: window.innerWidth,
	height: window.innerHeight,
	fps: 60,
	canvas: document.getElementsByClassName('animation')[0],
	stopMain: 0,
	lastTick: 0,
	tickLength: 0,
	lastRender: 0
	};

	let animate = window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	function(callback) {
	return window.setTimeout(callback, 1000 / animation.fps);
	};

	animation.canvas.width = animation.width;
	animation.canvas.height = animation.height;
	animation.canvas.focus();
	animation['ctx'] = animation.canvas.getContext('2d');
	let coin = null;

	let update = function(dt) {
	'use strict';
	coin.update(dt);
	};

	let render = function(tFrame) {
	'use strict';
	animation.ctx.clearRect(0, 0, coin.coinWidth, coin.coinHeight);
	coin.render(animation.ctx, tFrame);
	};

	let queueUpdates = function(numTicks) {
	for (let i = 0; i < numTicks; i++) {
	animation.lastTick = animation.lastTick + animation.tickLength;
	update(animation.lastTick);
	}
	};

	let main = function(tFrame) {
	animation.stopMain = animate(main);
	let nextTick = animation.lastTick + animation.tickLength;
	let numTicks = 0;

	if (tFrame > nextTick) {
	let timeSinceTick = tFrame - animation.lastTick;
	numTicks = Math.floor(timeSinceTick / animation.tickLength);
	}

	//update();
	queueUpdates(numTicks);
	render(tFrame);
	animation.lastRender = tFrame;
	};

	let assetManager = new AssetManager();
	assetManager.enqueueAsset('coin-sprite-sheet.png');
	assetManager.downloadAll(function() {
	coin = new Coin(0, 0, assetManager.getAsset('coin-sprite-sheet.png'), 10);
	animation.lastTick = performance.now();
	animation.lastRender = animation.lastTick;
	animation.tickLength = animation.fps;
	main(performance.now());
	});
	<!doctype html>
	<html>
	<head>
	<title>Coin Animation</title>
	<style>
	*, body {
	width: 100%;
	height:100%;
	margin: 0;
	padding: 0;
	}

	.animation {
	display: block;
	margin: 0 auto;
	}
	</style>
	</head>
	<body>
	<canvas class="animation"></canvas>
	<script type="application/javascript" src="coin.js"></script>
	</body>
	</html>