Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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>
  
</head>
<body>
<div class="canvas-holder">
  
  <canvas id="canvas" width="400" height="200"></canvas>
</div>
  
</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 s, 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;
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ryanmrpro
0viewers