Skip to content

Instantly share code, notes, and snippets.

@ryanmr
Forked from anonymous/index.html
Created Jul 15, 2015
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<style id="jsbin-css">
html, body {overflow: hidden;}
canvas {border: 1px solid #efefef; box-shadow: 1px 1px 2px #efefef;}
</style>
</head>
<body>
<div class="canvas-holder">
<canvas id="canvas" width="400" height="200"></canvas>
</div>
<script id="jsbin-javascript">
// http://www.createjs.com/docs/easeljs/classes/Sprite.html
// to see it actually work, try opening the preview in fulls screen mode
function start() {
var stage = new createjs.Stage(document.getElementById('canvas'));
var ss = new createjs.SpriteSheet({
animations: {
down: {
frames: [0, 1],
speed: 0.35
},
up: {
frames: [2,3], speed: 0.35
},
left: {
frames: [4,5], speed: 0.35
},
right: {
frames: [6,7], speed: 0.35
},
},
images: ['http://ifupdown.com/dev/ayenet2/kino.png'],
frames: {
height: 64,
width: 32,
}
});
var avatar = new createjs.Sprite(ss, 'down');
window.onkeydown = function(e){
var code = e.keyCode;
console.log(code);
switch(code) {
case 37: // left
avatar.gotoAndPlay('left');
avatar.x -= 8;
avatar.advance();
break;
case 39: // right
avatar.gotoAndPlay('right');
avatar.x += 8;
avatar.advance();
break;
case 38: // up
avatar.gotoAndPlay('up');
avatar.y -= 8;
avatar.advance();
break;
case 40: // down
avatar.gotoAndPlay('down');
avatar.y += 8;
avatar.advance();
break;
}
e.preventDefault();
stage.update();
};
stage.addChild(avatar);
createjs.Ticker.setFPS(10);
createjs.Ticker.addEventListener('tick', stage);
}
window.onload = start;
</script>
<script id="jsbin-source-css" type="text/css">html, body {overflow: hidden;}
canvas {border: 1px solid #efefef; box-shadow: 1px 1px 2px #efefef;}</script>
<script id="jsbin-source-javascript" type="text/javascript">// http://www.createjs.com/docs/easeljs/classes/Sprite.html
// to see it actually work, try opening the preview in fulls screen mode
function start() {
var stage = new createjs.Stage(document.getElementById('canvas'));
var ss = new createjs.SpriteSheet({
animations: {
down: {
frames: [0, 1],
speed: 0.35
},
up: {
frames: [2,3], speed: 0.35
},
left: {
frames: [4,5], speed: 0.35
},
right: {
frames: [6,7], speed: 0.35
},
},
images: ['http://ifupdown.com/dev/ayenet2/kino.png'],
frames: {
height: 64,
width: 32,
}
});
var avatar = new createjs.Sprite(ss, 'down');
window.onkeydown = function(e){
var code = e.keyCode;
console.log(code);
switch(code) {
case 37: // left
avatar.gotoAndPlay('left');
avatar.x -= 8;
avatar.advance();
break;
case 39: // right
avatar.gotoAndPlay('right');
avatar.x += 8;
avatar.advance();
break;
case 38: // up
avatar.gotoAndPlay('up');
avatar.y -= 8;
avatar.advance();
break;
case 40: // down
avatar.gotoAndPlay('down');
avatar.y += 8;
avatar.advance();
break;
}
e.preventDefault();
stage.update();
};
stage.addChild(avatar);
createjs.Ticker.setFPS(10);
createjs.Ticker.addEventListener('tick', stage);
}
window.onload = start;</script></body>
</html>
html, body {overflow: hidden;}
canvas {border: 1px solid #efefef; box-shadow: 1px 1px 2px #efefef;}
// http://www.createjs.com/docs/easeljs/classes/Sprite.html
// to see it actually work, try opening the preview in fulls screen mode
function start() {
var stage = new createjs.Stage(document.getElementById('canvas'));
var ss = new createjs.SpriteSheet({
animations: {
down: {
frames: [0, 1],
speed: 0.35
},
up: {
frames: [2,3], speed: 0.35
},
left: {
frames: [4,5], speed: 0.35
},
right: {
frames: [6,7], speed: 0.35
},
},
images: ['http://ifupdown.com/dev/ayenet2/kino.png'],
frames: {
height: 64,
width: 32,
}
});
var avatar = new createjs.Sprite(ss, 'down');
window.onkeydown = function(e){
var code = e.keyCode;
console.log(code);
switch(code) {
case 37: // left
avatar.gotoAndPlay('left');
avatar.x -= 8;
avatar.advance();
break;
case 39: // right
avatar.gotoAndPlay('right');
avatar.x += 8;
avatar.advance();
break;
case 38: // up
avatar.gotoAndPlay('up');
avatar.y -= 8;
avatar.advance();
break;
case 40: // down
avatar.gotoAndPlay('down');
avatar.y += 8;
avatar.advance();
break;
}
e.preventDefault();
stage.update();
};
stage.addChild(avatar);
createjs.Ticker.setFPS(10);
createjs.Ticker.addEventListener('tick', stage);
}
window.onload = start;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment