sugendran/jsbin.pokij.css

## jsbin.pokij.css
/*
 * Yes this CSS is ugly, but it's a demo
 * about canvas and not styling html+css.
 */

html, body {
	background: black;
	color: white;
	font-family: monospace;
    margin: 0;
    padding: 0;
}

h1 strike {
	color: #CCC;
}

#game-canvas {
	background: white;
}

dl.legend dt, dl.legend dd {
	display: inline;
	margin-left: 0px;
}

dl.legend dt img {
	background: white;
	width: 20px;
	margin-left: 40px;
}

## jsbin.pokij.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">
  <title>JS Bin</title>
  <script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
</head>
<body onload="window.skigratis('game-canvas')">
<!--     <h1>Ski <strike>Free</strike> Gratis</h1> -->
	<canvas id="game-canvas"></canvas>
<!-- 	<p> Use your mouse or finger to steer. All icons are Japanese characters.</p>
	<dl class="legend">
	          <dt><img src="https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/person.png" /></dt>
	          <dd>Person</dd>
	          <dt><img src="https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/tree.png" /></dt>
	          <dd>Wood/Tree</dd>
	          <dt><img src="https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/rock.png" /></dt>
	        <dd>Rock</dd>
	      </dl>
-->
  <!-- https://github.com/sugendran/ski-gratis -->
</body>
</html>

## jsbin.pokij.js
/*
 * Ski Gratis
 * =====
 * A game that looks very much like ski free
 *
 * This game was written to explore using easel.js
 * At some point I will turn this into a blog post
 * and perhaps even try and give some sort of talk.
 *
 * -- Sugendran
 */
// should probably encapsulate and play nice
(function(window, document, createjs) {

    var IMG_PERSON = "https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/person.png";
    var IMG_TREE = "https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/tree.png";
    var IMG_ROCK = "https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/rock.png";
    var IMG_CRASH = "https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/crash.png";
    var IMG_BEAR = "https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/bear.png";

	// list of rows of things to draw
	// screen is broken into 64x64 grid
	// creating this as multiple worlds so that
	// in theory we can have many ski free games
	// all at the same time!
	function newWorld(stage, stageWidth, stageHeight) {
		// "Constants"
		var TILE_EDGE = 64;
		var TILE_EDGE_MINUS = -TILE_EDGE;
		var HALF_TILE_EDGE = TILE_EDGE * 0.5;
		var DIFFICULTY = 28;

		// "privates" (Haha... I made you say privates in your head)
		var _gameGrid = [];
		var _maxCols = Math.floor(stageWidth / TILE_EDGE) + 16;
		var _maxRows = Math.floor(stageHeight / TILE_EDGE) + 8;
		var _offsetX = 0;
		var _offsetY = 0;
		var _direction = 0;
		var _crashed = false;
		var _score = 0;
		var _offsetYPerTick = TILE_EDGE / 1000;
		var _offsetXPerTick = 2 * TILE_EDGE / 1000;
		var _offsetYSpeedUp = 0;
		var _bearUnleashed = false;

		// no z-indexes anywhere... WTF.
		// gonna setup a "container" for each layer
		var bgContainer = new createjs.Container();
		var skierContainer = new createjs.Container();
		stage.addChild(bgContainer);
		stage.addChild(skierContainer);

		// displaying the frames per second
		// seems like a popular thing to do
		var fpsDisplay = new createjs.Text();
		fpsDisplay.textAlign = "right";
		fpsDisplay.x = stageWidth - 10;
		fpsDisplay.y = stageHeight - 10;
		skierContainer.addChild(fpsDisplay);

		// draw the score in the top right
		var scoreDisplay = new createjs.Text();
		scoreDisplay.textAlign = "right";
		scoreDisplay.x = stageWidth - 10;
		scoreDisplay.y = 24;
		scoreDisplay.font = "bold 24px monospace";
		skierContainer.addChild(scoreDisplay);

		// now add our skier
		var skier = new createjs.Bitmap(IMG_PERSON);
		skier.regX = HALF_TILE_EDGE;
		skier.regY = TILE_EDGE;
		skier.x = (stageWidth * 0.5);
		skier.y = (stageHeight * 0.5);
		skierContainer.addChild(skier);

		// also add a crash/stumble icon, but keep it hidden
		var crash = new createjs.Bitmap(IMG_CRASH);
		crash.regX = HALF_TILE_EDGE;
		crash.regY = TILE_EDGE;
		crash.x = (stageWidth * 0.5);
		crash.y = (stageHeight * 0.5);
		crash.visible = false;
		crash.alpha = 0;
		skierContainer.addChild(crash);

		// load the sprite sheet
		var bearSpriteSheet = new createjs.SpriteSheet({
			images: [IMG_BEAR],
			// each frame is a 64x64 square
			frames: {width: 64, height: 64, count: 4, regX: 32, regY: 64},
			// only one animation in the list and it uses frames zero to three
			animations: { run: [0, 3, true, 10] }
		});
		// make a bitmap object for sticking onto the screen
		var bear = new createjs.Sprite(bearSpriteSheet);
		// start that running animation up
		bear.gotoAndPlay("run");
		bear.x = -TILE_EDGE;
		bear.y = -TILE_EDGE;
		skierContainer.addChild(bear);

		// build up the grid
		// the grid is a map of the world
		// that wraps around as we move about it
		while(_gameGrid.length < _maxRows) {
			var newRow = [];
			for(var i=0, ii=_maxCols; i<ii; i++) {
				var r = Math.floor(Math.random() * DIFFICULTY);
				if(r == 1) {
					var tree = new createjs.Bitmap(IMG_TREE);
					bgContainer.addChild(tree);
					newRow.push(tree);
				} else if(r == 2) {
					var rock = new createjs.Bitmap(IMG_ROCK);
					bgContainer.addChildAt(rock);
					newRow.push(rock);
				} else {
					newRow.push(0);
				}
			}
			_gameGrid.push(newRow);
		}

		// functions for messing with arrays in the grid
		function shiftPush(arr) {
			arr.push(arr.shift());
		}
		function popSplice(arr) {
			arr.splice(0, 0, arr.pop());
		}
		// move rows/cols around if we have moved to far
		// also update the x,y co-ords of everything in the grid
		function updateGrid() {
			if(_offsetY < TILE_EDGE_MINUS) {
				// take a row of cells from the top and move them to the bottom
				shiftPush(_gameGrid);
				_offsetY += TILE_EDGE;
			}
			if(_offsetX < TILE_EDGE_MINUS) {
				// gotta take one from the left and put it on the right
				_gameGrid.forEach(shiftPush);
				_offsetX += TILE_EDGE;
			} else if (_offsetX > TILE_EDGE) {
				// gotta take one from the right and put it on the left
				_gameGrid.forEach(popSplice);
				_offsetX -= TILE_EDGE;
			}

			// updated all locations
			var y = _gameGrid.length + _offsetY;
			for(var i=0; i<_maxRows; i++) {
				var row = _gameGrid[i];
				var x = _offsetX;
				for(var j=0; j<_maxCols; j++) {
					row[j].x = x;
					row[j].y = y;
					x += TILE_EDGE;
				}
				y += TILE_EDGE;
			}
		}
		// first run to get some locations happening before we draw
		updateGrid();

		// we should speed up as time goes by and then reset it when we crash!
		setInterval(function(){
			_offsetYSpeedUp = Math.min(8, _offsetXPerTick + (_offsetYPerTick * 0.5));
		},1000);

        function between(val, min, max) {
          return val < max && val > min;
        }

		// this function will do a very simple collision check
		// it just checks to see if the anchor point of the person
		// collides with ANY object below it.
		function checkForCollision() {
			if(_crashed) {
				return;
			}
            var hit = false;
			for(var i=0; !hit && i<_maxRows; i++) {
				var row = _gameGrid[i];
				for(var j=0; !hit && j<_maxCols; j++) {
                  if (row[j].getBounds) {
                    var bounds = row[j].getBounds();
                    hit = between(skier.x, row[j].x, row[j].x+bounds.width) &&
                        between(skier.y, row[j].y, row[j].y+bounds.height);
                  }
				}
			}
			var obj = bgContainer.getObjectUnderPoint(skier.x, skier.y);
			if(hit) {
				// we probably didn't need the tweening here but the switch
				// between the sprites was very jarring so I stuck it in.
				// plus you get to see tween.js work
				_crashed = true;
				createjs.Tween.get(skier).to({alpha: 0}, 200).set({visible: false});
				createjs.Tween.get(crash).set({visible: true}).to({alpha: 1}, 200);
				_offsetYSpeedUp = 0;
				_score -= 50;
				setTimeout(function(){
					createjs.Tween.get(crash).to({alpha: 0}, 200).set({visible: false});
					createjs.Tween.get(skier).set({visible: true}).to({alpha: 1}, 200);
					_crashed = false;
				}, 2300);
			}
		}


		function killPlayer() {
			createjs.Tween.get(bear).to({x: skier.x, y: skier.y}, 3000, createjs.Ease.elasticOut).call(function(){
				crash.alpha = 1;
				skier.alpha = 0;
				createjs.Ticker.setPaused(true);
			});
		}

		// we want to move 1 tile every 1 second
		// so we need to work out how many pixels
		// are moved per tick
		// The tick function gets called with the elapsed time
		// since the last time it was called
		this.tick = function(evt) {
          var elapsed = evt.delta;
			_offsetY -= (_offsetYPerTick + _offsetYSpeedUp) * elapsed;
			_offsetX -= _direction * _offsetXPerTick * elapsed;
			updateGrid();
			checkForCollision();

			if(!_crashed) {
				_score += (elapsed / 100);
			}

			if(_score > 1000 && !_bearUnleashed) {
				// unleash the bear and end the game
				killPlayer();
			}

			fpsDisplay.text = "fps: " + ~~createjs.Ticker.getMeasuredFPS();
			scoreDisplay.text = Math.floor(_score) + " points";
			stage.update(evt);
		};

		// just going to skew the object along the Y-axis
		// so that it looks liek they're changin direction
		// really should load up a different sprite for this... meh.
		function updatePersonOrientation() {
			skier.skewY = -0.3 * TILE_EDGE * _direction;
		}

		// the following bits of code deal with mouse/touch events
		var mouseActive = false;
		stage.addEventListener('stagemouseup', function () {
			mouseActive = false;
		});
		stage.addEventListener('stagemouseup', function () {
			mouseActive = true;
		});
		stage.addEventListener('stagemousemove', function(mouseEvent) {
			if(!mouseActive || _crashed) {
				return;
			}
			var mx = Math.round(mouseEvent.stageX / TILE_EDGE);
			var px = Math.round(skier.x / TILE_EDGE);
			var delta = mx - px;
			if(delta < 0 && _direction > -1) {
				_direction = -1;
			} else if(delta > 0 && _direction < 1) {
				_direction = 1;
			} else if (delta === 0 && _direction !== 0) {
				_direction = 0;
			}
			updatePersonOrientation();
		});

		// added this so that I can hook in keyboard events
		this.setDirection = function(d) {
			if(_crashed) {
				return;
			}
			_direction = d;
			updatePersonOrientation();
		};

		return this;
	}

	// loads a self contained game in the given element
	function loadSkiGratis(elementId) {
		// setup the canvas
		canvasElement = document.getElementById(elementId);
		var width = canvasElement.width = innerWidth;
		var height = canvasElement.height = innerHeight;
		var stage = new createjs.Stage(canvasElement);
		// create our world object
		var world = newWorld(stage, width, height);
		// tell the Ticker to call world.tick such that
		// it renders at 60 FPS
        createjs.Ticker.addEventListener("tick", world.tick);
        createjs.Ticker.useRAF = true;
        createjs.Ticker.setFPS(60);

        // allow touches to work
        createjs.Touch.enable(stage);

        // global listener - not cool for embedding, but nice for debugging
        window.addEventListener("keypress", function(e) {
			if(e.charCode == 97) {
				//a
				world.setDirection(-1);
			} else if(e.charCode == 115) {
				// s
				world.setDirection(0);
			} else if (e.charCode == 100) {
				// d
				world.setDirection(1);
			}
		});
	}

	window.skigratis = loadSkiGratis;
})(window, document, createjs);
	/*
	* Yes this CSS is ugly, but it's a demo
	* about canvas and not styling html+css.
	*/

	html, body {
	background: black;
	color: white;
	font-family: monospace;
	margin: 0;
	padding: 0;
	}

	h1 strike {
	color: #CCC;
	}

	#game-canvas {
	background: white;
	}

	dl.legend dt, dl.legend dd {
	display: inline;
	margin-left: 0px;
	}

	dl.legend dt img {
	background: white;
	width: 20px;
	margin-left: 40px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">
	<title>JS Bin</title>
	<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
	</head>
	<body onload="window.skigratis('game-canvas')">
	<!-- <h1>Ski <strike>Free</strike> Gratis</h1> -->
	<canvas id="game-canvas"></canvas>
	<!-- <p> Use your mouse or finger to steer. All icons are Japanese characters.</p>
	<dl class="legend">
	<dt><img src="https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/person.png" /></dt>
	<dd>Person</dd>
	<dt><img src="https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/tree.png" /></dt>
	<dd>Wood/Tree</dd>
	<dt><img src="https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/rock.png" /></dt>
	<dd>Rock</dd>
	</dl>
	-->
	<!-- https://github.com/sugendran/ski-gratis -->
	</body>
	</html>
	/*
	* Ski Gratis
	* =====
	* A game that looks very much like ski free
	*
	* This game was written to explore using easel.js
	* At some point I will turn this into a blog post
	* and perhaps even try and give some sort of talk.
	*
	* -- Sugendran
	*/
	// should probably encapsulate and play nice
	(function(window, document, createjs) {

	var IMG_PERSON = "https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/person.png";
	var IMG_TREE = "https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/tree.png";
	var IMG_ROCK = "https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/rock.png";
	var IMG_CRASH = "https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/crash.png";
	var IMG_BEAR = "https://raw.githubusercontent.com/sugendran/ski-gratis/master/images/bear.png";

	// list of rows of things to draw
	// screen is broken into 64x64 grid
	// creating this as multiple worlds so that
	// in theory we can have many ski free games
	// all at the same time!
	function newWorld(stage, stageWidth, stageHeight) {
	// "Constants"
	var TILE_EDGE = 64;
	var TILE_EDGE_MINUS = -TILE_EDGE;
	var HALF_TILE_EDGE = TILE_EDGE * 0.5;
	var DIFFICULTY = 28;

	// "privates" (Haha... I made you say privates in your head)
	var _gameGrid = [];
	var _maxCols = Math.floor(stageWidth / TILE_EDGE) + 16;
	var _maxRows = Math.floor(stageHeight / TILE_EDGE) + 8;
	var _offsetX = 0;
	var _offsetY = 0;
	var _direction = 0;
	var _crashed = false;
	var _score = 0;
	var _offsetYPerTick = TILE_EDGE / 1000;
	var _offsetXPerTick = 2 * TILE_EDGE / 1000;
	var _offsetYSpeedUp = 0;
	var _bearUnleashed = false;

	// no z-indexes anywhere... WTF.
	// gonna setup a "container" for each layer
	var bgContainer = new createjs.Container();
	var skierContainer = new createjs.Container();
	stage.addChild(bgContainer);
	stage.addChild(skierContainer);

	// displaying the frames per second
	// seems like a popular thing to do
	var fpsDisplay = new createjs.Text();
	fpsDisplay.textAlign = "right";
	fpsDisplay.x = stageWidth - 10;
	fpsDisplay.y = stageHeight - 10;
	skierContainer.addChild(fpsDisplay);

	// draw the score in the top right
	var scoreDisplay = new createjs.Text();
	scoreDisplay.textAlign = "right";
	scoreDisplay.x = stageWidth - 10;
	scoreDisplay.y = 24;
	scoreDisplay.font = "bold 24px monospace";
	skierContainer.addChild(scoreDisplay);

	// now add our skier
	var skier = new createjs.Bitmap(IMG_PERSON);
	skier.regX = HALF_TILE_EDGE;
	skier.regY = TILE_EDGE;
	skier.x = (stageWidth * 0.5);
	skier.y = (stageHeight * 0.5);
	skierContainer.addChild(skier);

	// also add a crash/stumble icon, but keep it hidden
	var crash = new createjs.Bitmap(IMG_CRASH);
	crash.regX = HALF_TILE_EDGE;
	crash.regY = TILE_EDGE;
	crash.x = (stageWidth * 0.5);
	crash.y = (stageHeight * 0.5);
	crash.visible = false;
	crash.alpha = 0;
	skierContainer.addChild(crash);

	// load the sprite sheet
	var bearSpriteSheet = new createjs.SpriteSheet({
	images: [IMG_BEAR],
	// each frame is a 64x64 square
	frames: {width: 64, height: 64, count: 4, regX: 32, regY: 64},
	// only one animation in the list and it uses frames zero to three
	animations: { run: [0, 3, true, 10] }
	});
	// make a bitmap object for sticking onto the screen
	var bear = new createjs.Sprite(bearSpriteSheet);
	// start that running animation up
	bear.gotoAndPlay("run");
	bear.x = -TILE_EDGE;
	bear.y = -TILE_EDGE;
	skierContainer.addChild(bear);

	// build up the grid
	// the grid is a map of the world
	// that wraps around as we move about it
	while(_gameGrid.length < _maxRows) {
	var newRow = [];
	for(var i=0, ii=_maxCols; i<ii; i++) {
	var r = Math.floor(Math.random() * DIFFICULTY);
	if(r == 1) {
	var tree = new createjs.Bitmap(IMG_TREE);
	bgContainer.addChild(tree);
	newRow.push(tree);
	} else if(r == 2) {
	var rock = new createjs.Bitmap(IMG_ROCK);
	bgContainer.addChildAt(rock);
	newRow.push(rock);
	} else {
	newRow.push(0);
	}
	}
	_gameGrid.push(newRow);
	}

	// functions for messing with arrays in the grid
	function shiftPush(arr) {
	arr.push(arr.shift());
	}
	function popSplice(arr) {
	arr.splice(0, 0, arr.pop());
	}
	// move rows/cols around if we have moved to far
	// also update the x,y co-ords of everything in the grid
	function updateGrid() {
	if(_offsetY < TILE_EDGE_MINUS) {
	// take a row of cells from the top and move them to the bottom
	shiftPush(_gameGrid);
	_offsetY += TILE_EDGE;
	}
	if(_offsetX < TILE_EDGE_MINUS) {
	// gotta take one from the left and put it on the right
	_gameGrid.forEach(shiftPush);
	_offsetX += TILE_EDGE;
	} else if (_offsetX > TILE_EDGE) {
	// gotta take one from the right and put it on the left
	_gameGrid.forEach(popSplice);
	_offsetX -= TILE_EDGE;
	}

	// updated all locations
	var y = _gameGrid.length + _offsetY;
	for(var i=0; i<_maxRows; i++) {
	var row = _gameGrid[i];
	var x = _offsetX;
	for(var j=0; j<_maxCols; j++) {
	row[j].x = x;
	row[j].y = y;
	x += TILE_EDGE;
	}
	y += TILE_EDGE;
	}
	}
	// first run to get some locations happening before we draw
	updateGrid();

	// we should speed up as time goes by and then reset it when we crash!
	setInterval(function(){
	_offsetYSpeedUp = Math.min(8, _offsetXPerTick + (_offsetYPerTick * 0.5));
	},1000);

	function between(val, min, max) {
	return val < max && val > min;
	}

	// this function will do a very simple collision check
	// it just checks to see if the anchor point of the person
	// collides with ANY object below it.
	function checkForCollision() {
	if(_crashed) {
	return;
	}
	var hit = false;
	for(var i=0; !hit && i<_maxRows; i++) {
	var row = _gameGrid[i];
	for(var j=0; !hit && j<_maxCols; j++) {
	if (row[j].getBounds) {
	var bounds = row[j].getBounds();
	hit = between(skier.x, row[j].x, row[j].x+bounds.width) &&
	between(skier.y, row[j].y, row[j].y+bounds.height);
	}
	}
	}
	var obj = bgContainer.getObjectUnderPoint(skier.x, skier.y);
	if(hit) {
	// we probably didn't need the tweening here but the switch
	// between the sprites was very jarring so I stuck it in.
	// plus you get to see tween.js work
	_crashed = true;
	createjs.Tween.get(skier).to({alpha: 0}, 200).set({visible: false});
	createjs.Tween.get(crash).set({visible: true}).to({alpha: 1}, 200);
	_offsetYSpeedUp = 0;
	_score -= 50;
	setTimeout(function(){
	createjs.Tween.get(crash).to({alpha: 0}, 200).set({visible: false});
	createjs.Tween.get(skier).set({visible: true}).to({alpha: 1}, 200);
	_crashed = false;
	}, 2300);
	}
	}


	function killPlayer() {
	createjs.Tween.get(bear).to({x: skier.x, y: skier.y}, 3000, createjs.Ease.elasticOut).call(function(){
	crash.alpha = 1;
	skier.alpha = 0;
	createjs.Ticker.setPaused(true);
	});
	}

	// we want to move 1 tile every 1 second
	// so we need to work out how many pixels
	// are moved per tick
	// The tick function gets called with the elapsed time
	// since the last time it was called
	this.tick = function(evt) {
	var elapsed = evt.delta;
	_offsetY -= (_offsetYPerTick + _offsetYSpeedUp) * elapsed;
	_offsetX -= _direction * _offsetXPerTick * elapsed;
	updateGrid();
	checkForCollision();

	if(!_crashed) {
	_score += (elapsed / 100);
	}

	if(_score > 1000 && !_bearUnleashed) {
	// unleash the bear and end the game
	killPlayer();
	}

	fpsDisplay.text = "fps: " + ~~createjs.Ticker.getMeasuredFPS();
	scoreDisplay.text = Math.floor(_score) + " points";
	stage.update(evt);
	};

	// just going to skew the object along the Y-axis
	// so that it looks liek they're changin direction
	// really should load up a different sprite for this... meh.
	function updatePersonOrientation() {
	skier.skewY = -0.3 * TILE_EDGE * _direction;
	}

	// the following bits of code deal with mouse/touch events
	var mouseActive = false;
	stage.addEventListener('stagemouseup', function () {
	mouseActive = false;
	});
	stage.addEventListener('stagemouseup', function () {
	mouseActive = true;
	});
	stage.addEventListener('stagemousemove', function(mouseEvent) {
	if(!mouseActive \|\| _crashed) {
	return;
	}
	var mx = Math.round(mouseEvent.stageX / TILE_EDGE);
	var px = Math.round(skier.x / TILE_EDGE);
	var delta = mx - px;
	if(delta < 0 && _direction > -1) {
	_direction = -1;
	} else if(delta > 0 && _direction < 1) {
	_direction = 1;
	} else if (delta === 0 && _direction !== 0) {
	_direction = 0;
	}
	updatePersonOrientation();
	});

	// added this so that I can hook in keyboard events
	this.setDirection = function(d) {
	if(_crashed) {
	return;
	}
	_direction = d;
	updatePersonOrientation();
	};

	return this;
	}

	// loads a self contained game in the given element
	function loadSkiGratis(elementId) {
	// setup the canvas
	canvasElement = document.getElementById(elementId);
	var width = canvasElement.width = innerWidth;
	var height = canvasElement.height = innerHeight;
	var stage = new createjs.Stage(canvasElement);
	// create our world object
	var world = newWorld(stage, width, height);
	// tell the Ticker to call world.tick such that
	// it renders at 60 FPS
	createjs.Ticker.addEventListener("tick", world.tick);
	createjs.Ticker.useRAF = true;
	createjs.Ticker.setFPS(60);

	// allow touches to work
	createjs.Touch.enable(stage);

	// global listener - not cool for embedding, but nice for debugging
	window.addEventListener("keypress", function(e) {
	if(e.charCode == 97) {
	//a
	world.setDirection(-1);
	} else if(e.charCode == 115) {
	// s
	world.setDirection(0);
	} else if (e.charCode == 100) {
	// d
	world.setDirection(1);
	}
	});
	}

	window.skigratis = loadSkiGratis;
	})(window, document, createjs);