canvas game

i don't have up or down arrow keyz programm'd!

by edwardsharp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script>
<button id="toggleAnimation">toggle</button>
<canvas id="c" height="5000" width="5000"></canvas>

CSS

html, body{
  margin: 0;
  padding: 0;
}
#c{
  height: 5000px;
  width: 5000px;
  background: hotpink;
  overflow: scroll;
}
#toggleAnimation{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#room1 {
  position: absolute;
  top: 100px;
  left: 500px;
  height: 500px;
  width: 500px;
  background-color: black;
}

#rooom2{
  position: absolute;
  top: 300px;
  left: 1000px;
  height: 250px;
  width: 250px;
  background-color: black;
}

JavaScript

(function() {
  var canvas = this.__canvas = new fabric.StaticCanvas('c');

  canvas.add(
    new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
    new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
    new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
  );

	var isAnimating = false;
  
  $("#toggleAnimation").click(function(){
    	if(isAnimating){
      	isAnimating = false;
      }else{
      	isAnimating = true;
        animate();
      }
  });
  
  $(document).keyup(function(event){
		var _offset = 50
    	, _duration = 50
      ;
    
  	if(event.key === 'ArrowRight'){
    	canvas.item(1).animate('left', canvas.item(1).getLeft() + _offset, { 
        duration: _duration,
        onChange: canvas.renderAll.bind(canvas)
      });
    }else if(event.key === 'ArrowLeft'){
    	canvas.item(1).animate('left', canvas.item(1).getLeft() - _offset, { 
        duration: _duration,
        onChange: canvas.renderAll.bind(canvas)
      });
    }
  });
  
  function animate() {
  	if(isAnimating){
      canvas.item(0).animate('top', canvas.item(0).getTop() === 500 ? '100' : '500', { 
        duration: 1000,
        onChange: canvas.renderAll.bind(canvas),
        onComplete: animate
      });
    }
  }
  
})();