Beginner 2d Game Programming [JS] - 4 - Example

Assets.js

//more code

  var candy = new Assets("candy", 'res/textures/candy.png', 30, 80)
  candy.front = {
	stand: candy.sheet.crop(20, 150),
	step_l: candy.sheet.crop(60, 150),
	step_r: candy.sheet.crop(100, 150)
  }

//more code

Display.js

//more code  
CanvasRenderingContext2D.prototype.myDrawImage = function (asset, _x, _y, _width, _height) {
	_width = _width ? _width : asset.width
	_height = _height ? _height : asset.height

	this.drawImage(asset.sheet, asset.x, asset.y, asset.width, asset.height,
		_x, _y, _width, _height)
  }
//more code

Game.js

  //more code
i = 0
  function render() {

	g.clearRect(0, 0, width, height)
	g.fillRect(10, 10, 50, 100)

	var candy = Assets.getAssets("candy")
	if (i % 12 < 4) {
	  g.myDrawImage(candy.front.stand, 20, 20)
	} else if (i % 12 >= 4 && i % 12 < 8) {
	  g.myDrawImage(candy.front.step_l, 20, 20)
	} else {
	  g.myDrawImage(candy.front.step_r, 20, 20)
	}

	i++
  }
//more code

SpriteSheet.js

define(['Class'], function (Class) {

  var SpriteSheet = Class.extend({

	init: function (_sheet, _swidth, _sheight) {
	  this.sheet = _sheet
	  this.swidth = _swidth
	  this.sheight = _sheight
	}
  })
  

  SpriteSheet.prototype.crop = function (_x, _y, _width, _height) {
	_width = _width ? _width : this.swidth
	_height = _height ? _height : this.sheight
	return {"sheet": this.sheet, x: _x, y: _y, width: _width, height: _height}
  }

  return SpriteSheet
})