houkanshan/.DS_Store

## .DS_Store

      
    Raw
  

              .DS_Store
            
          
            View raw
        
    
## cat-1.png

      
    Raw
  

              cat-1.png
            
          
## cat-10.png

      
    Raw
  

              cat-10.png
            
          
## cat-11.png

      
    Raw
  

              cat-11.png
            
          
## cat-12.png

      
    Raw
  

              cat-12.png
            
          
## cat-13.png

      
    Raw
  

              cat-13.png
            
          
## cat-14.png

      
    Raw
  

              cat-14.png
            
          
## cat-15.png

      
    Raw
  

              cat-15.png
            
          
## cat-2.png

      
    Raw
  

              cat-2.png
            
          
## cat-3.png

      
    Raw
  

              cat-3.png
            
          
## cat-4.png

      
    Raw
  

              cat-4.png
            
          
## cat-5.png

      
    Raw
  

              cat-5.png
            
          
## cat-6.png

      
    Raw
  

              cat-6.png
            
          
## cat-7.png

      
    Raw
  

              cat-7.png
            
          
## cat-8.png

      
    Raw
  

              cat-8.png
            
          
## cat-9.png

      
    Raw
  

              cat-9.png
            
          
## cat.js
var imageData = {}

var imageCount = 15
var imageIndexArr = []

for(var i = 0, ilen = imageCount; i < ilen; i++) {
  imageIndexArr.push(i + 1)
}

;(imageIndexArr).forEach(function(v) {
  imageData[v] = {
    src: './cat-' + v + '.png'
  }
})

function Cat() {
  this.imageSets = new ImageSets({ images: imageData })
  this.loopOrder = imageIndexArr.concat(imageIndexArr.slice(1, -1).reverse())
  this.initData()
  setInterval(function() { this.startKick() }.bind(this), 2000)
}
var fn = Cat.prototype

fn.update = function(dt) {
  if (!this.doingKick) {
    this.currIndex = 0
    return
  }

  this.timeStep += dt
  this.currIndex = (this.timeStep / this.stepDelay) | 0
  if (this.currIndex >= this.loopOrder.length) {
    this.initData()
  }
}

fn.initData = function() {
  this.currIndex = 0
  this.doingKick = false
  this.timeStep = 0
}

fn.getImage = function() {
  var image = this.imageSets.get(this.loopOrder[this.currIndex])
  return image.image
}

fn.startKick = function(lastTime) {
  lastTime = lastTime || 400
  this.doingKick = true
  this.stepDelay = lastTime / this.loopOrder.length
}

fn.draw = function() {}

## image-sets.js
function ImageSets(opts) {
  this.opts = opts
  this.images = opts.images
  this.init()
}

var fn = ImageSets.prototype

fn.init = function() {
  var image
  for(var name in this.images) {
    image = this.images[name]
    image.image = new Image()
    image.image.onload = function() {
      image.loaded = true
    }
    image.image.src = image.src
  }
}

fn.get = function(name) {
  return this.images[name]
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <canvas height="1000px" width="1000px"></canvas>

  <script src="./mainloop.js"></script>
  <script src="./image-sets.js"></script>
  <script src="./layer.js"></script>
  <script src="./cat.js"></script>
  <script src="./index.js"></script>
</body>
</html>

## index.js
var mainloop = new MainLoop()
var cat = new Cat()
var layer = new Layer({ canvas: 'canvas' })

cat.draw = function() {
  layer.drawImage(this.getImage())
}

mainloop.preDraw = function() {
  layer.clearLayer()
}

mainloop.addSpirit(cat)
mainloop.start()

## layer.js
function Layer(opts) {
  this.canvas = document.querySelector(opts.canvas)
  this.ctx = this.canvas.getContext('2d')
}

var fn = Layer.prototype

fn.init = function() {
}

fn.clearLayer = function() {
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
}
fn.drawImage = function(image) {
  this.ctx.drawImage(image, 0, 0, image.width, image.height)
}

## mainloop.js
window.requestAnimationFrame = (function(){
  return  window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    window.oCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
    function( callback ){
      window.setTimeout(callback, 1000 / 60);
    }
}())
window.cancelAnimationFrame = (function(){
  return window.cancelAnimationFrame ||
  window.webkitCancelAnimationFrame ||
  window.mozCancelAnimationFrame ||
  window.oCancelAnimationFrame ||
  window.msCancelAnimationFrame ||
  window.clearTimeout
})

function MainLoop(opts) {
  this.spirits = []
}

MainLoop.prototype = {
  constructor: MainLoop.prototype.constructor
, start: function() {
    this.lasttime = Date.now()
    var step = (function () {
      this.tick()
      this.timer = requestAnimationFrame(step)
    }).bind(this)

    this.timer = requestAnimationFrame(step)
  }
, stop: function() {
    cancelAnimationFrame(this.timer)
    this.timer = null
  }
, isRunning: function() {
    return !!this.timer
  }
, preUpdate: function() {}
, preDraw: function() {}
, tick: function() {
    var now = Date.now()
      , dt = (now - this.lasttime)
    if (dt < 5) { return }
    dt /= 1
    this.lasttime = now

    this.preUpdate(dt)
    this.preDraw()

    this.spirits.forEach(function(spirit, i) {
      spirit.update(dt)
      spirit.draw()
    })
  }
, addSpirit: function(spirit) {
    var origDestroy = spirit.destroy
      , spirits = this.spirits

    spirit.destroy = function() {
      var index = spirits.indexOf(spirit)
      if (index > -1) {
          spirits.splice(index, 1);
      }
      origDestroy.apply(this, arguments)
    }

    spirits.push(spirit)
  }
, resetSpirit: function() {
    this.spirits = []
  }
}
	var imageData = {}

	var imageCount = 15
	var imageIndexArr = []

	for(var i = 0, ilen = imageCount; i < ilen; i++) {
	imageIndexArr.push(i + 1)
	}

	;(imageIndexArr).forEach(function(v) {
	imageData[v] = {
	src: './cat-' + v + '.png'
	}
	})

	function Cat() {
	this.imageSets = new ImageSets({ images: imageData })
	this.loopOrder = imageIndexArr.concat(imageIndexArr.slice(1, -1).reverse())
	this.initData()
	setInterval(function() { this.startKick() }.bind(this), 2000)
	}
	var fn = Cat.prototype

	fn.update = function(dt) {
	if (!this.doingKick) {
	this.currIndex = 0
	return
	}

	this.timeStep += dt
	this.currIndex = (this.timeStep / this.stepDelay) \| 0
	if (this.currIndex >= this.loopOrder.length) {
	this.initData()
	}
	}

	fn.initData = function() {
	this.currIndex = 0
	this.doingKick = false
	this.timeStep = 0
	}

	fn.getImage = function() {
	var image = this.imageSets.get(this.loopOrder[this.currIndex])
	return image.image
	}

	fn.startKick = function(lastTime) {
	lastTime = lastTime \|\| 400
	this.doingKick = true
	this.stepDelay = lastTime / this.loopOrder.length
	}

	fn.draw = function() {}
	function ImageSets(opts) {
	this.opts = opts
	this.images = opts.images
	this.init()
	}

	var fn = ImageSets.prototype

	fn.init = function() {
	var image
	for(var name in this.images) {
	image = this.images[name]
	image.image = new Image()
	image.image.onload = function() {
	image.loaded = true
	}
	image.image.src = image.src
	}
	}

	fn.get = function(name) {
	return this.images[name]
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>
	<canvas height="1000px" width="1000px"></canvas>

	<script src="./mainloop.js"></script>
	<script src="./image-sets.js"></script>
	<script src="./layer.js"></script>
	<script src="./cat.js"></script>
	<script src="./index.js"></script>
	</body>
	</html>
	var mainloop = new MainLoop()
	var cat = new Cat()
	var layer = new Layer({ canvas: 'canvas' })

	cat.draw = function() {
	layer.drawImage(this.getImage())
	}

	mainloop.preDraw = function() {
	layer.clearLayer()
	}

	mainloop.addSpirit(cat)
	mainloop.start()
	function Layer(opts) {
	this.canvas = document.querySelector(opts.canvas)
	this.ctx = this.canvas.getContext('2d')
	}

	var fn = Layer.prototype

	fn.init = function() {
	}

	fn.clearLayer = function() {
	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
	}
	fn.drawImage = function(image) {
	this.ctx.drawImage(image, 0, 0, image.width, image.height)
	}
	window.requestAnimationFrame = (function(){
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oCancelAnimationFrame \|\|
	window.msCancelAnimationFrame \|\|
	function( callback ){
	window.setTimeout(callback, 1000 / 60);
	}
	}())
	window.cancelAnimationFrame = (function(){
	return window.cancelAnimationFrame \|\|
	window.webkitCancelAnimationFrame \|\|
	window.mozCancelAnimationFrame \|\|
	window.oCancelAnimationFrame \|\|
	window.msCancelAnimationFrame \|\|
	window.clearTimeout
	})

	function MainLoop(opts) {
	this.spirits = []
	}

	MainLoop.prototype = {
	constructor: MainLoop.prototype.constructor
	, start: function() {
	this.lasttime = Date.now()
	var step = (function () {
	this.tick()
	this.timer = requestAnimationFrame(step)
	}).bind(this)

	this.timer = requestAnimationFrame(step)
	}
	, stop: function() {
	cancelAnimationFrame(this.timer)
	this.timer = null
	}
	, isRunning: function() {
	return !!this.timer
	}
	, preUpdate: function() {}
	, preDraw: function() {}
	, tick: function() {
	var now = Date.now()
	, dt = (now - this.lasttime)
	if (dt < 5) { return }
	dt /= 1
	this.lasttime = now

	this.preUpdate(dt)
	this.preDraw()

	this.spirits.forEach(function(spirit, i) {
	spirit.update(dt)
	spirit.draw()
	})
	}
	, addSpirit: function(spirit) {
	var origDestroy = spirit.destroy
	, spirits = this.spirits

	spirit.destroy = function() {
	var index = spirits.indexOf(spirit)
	if (index > -1) {
	spirits.splice(index, 1);
	}
	origDestroy.apply(this, arguments)
	}

	spirits.push(spirit)
	}
	, resetSpirit: function() {
	this.spirits = []
	}
	}