Created
July 15, 2015 10:46
-
-
Save anonymous/48846cbde63df83febcb to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/fefuxa
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body {overflow: hidden;} | |
canvas {border: 1px solid #efefef; box-shadow: 1px 1px 2px #efefef;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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