EaselJS学習(1) - 2

HTML

<script src="http://pyro.jp/dev/lib/js/easel.js"></script>
<div id="container">
    <canvas id="canvas" width="500" height="300"></canvas>
</div>

CSS

#container {
    background: #fff100;
    height: 300px;
    margin:0 auto;
}

JavaScript

var container, canvas, stage, 
     bmp, img,
     halfX, halfY, stageWidth, stageHeight, imgWidth, imgHeight, 
     oldX, oldY, oldmX, oldmY,
     dragTickID,
     vx = Math.random() * 10 - 5, 
     vy = 0, 
     bounce = -0.7,
     gravity = 0.5,
     friction = 0.99;

window.onload = init;
window.onresize = reisize;

function init() {
    container = document.getElementById("container");
    canvas = document.getElementById("canvas");
    reisize();
    
    stage = new Stage( canvas );
    
    img = new Image();
    img.onload = imgLoaded;
    img.src = "http://pyro.jp/dev/resources/pyrojp4.png";
}

function imgLoaded() { 
    bmp = new Bitmap(img);
    bmp.x = halfX;
    bmp.y = halfY;
    imgWidth = img.width;
    imgHeight = img.height;
    stage.addChild( bmp );
    stage.onMouseDown = function() {
        oldX = bmp.x;
        oldY = bmp.y;
        oldmX = stage.mouseX;
        oldmY = stage.mouseY;
        
        Ticker.setPaused( true );
        dragTickID = setInterval( starDrag, 20 );      
    };
    stage.onMouseUp = function() {
        clearInterval( dragTickID );
        Ticker.setPaused( false );
    };
    console.log(Ticker.getPaused);
    Ticker.setInterval( 20 );
    Ticker.addListener( window, true );
}

function tick() {
    vy += gravity;
    vx *= friction;
    bmp.x += vx;
    bmp.y += vy;
    
    if( bmp.x + imgWidth > stageWidth ) {
         bmp.x = stageWidth - imgWidth;
         vx *= bounce;  
    } else if( bmp.x < 0 ) {
         bmp.x = 0;
         vx *= bounce;  
    }
    if( bmp.y + imgHeight > stageHeight ) { 
         bmp.y = stageHeight - imgHeight;
         vy *= bounce;  
    } else if( bmp.y < 0 ) {
         bmp.y = 0;
         vy *= bounce;  
    }
    
    stage.update();
}

function starDrag() {
    bmp.x += stage.mouseX - oldmX;
    bmp.y += stage.mouseY - oldmY;
    oldmX = stage.mouseX;
    oldmY = stage.mouseY;
    
    vx = bmp.x - oldX;
    vy = bmp.y - oldY;
    oldX = bmp.x;
    oldY = bmp.y;
    
   ...