testin easeljs

testin easeljs

by SnakeFox

HTML

<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
 <form id="myform" >
                <label for="firstName">Enter your firstName:</label>
                <input type="text" id="fistName/><br>
                <label for="lastName">Enter your lastName:</label>
                <input type="text"  id="lastName"/><br>
                <br>
                <input type="checkbox" id="case" />
                <label for="case">Alpha 50%</label><br>
                <p id="submit" >
                    <input type="submit" value="Submit"/>
                </p>
            </form>

X:<input type="text" id="myx" size="3" disabled="disabled">,Y:<input type="text" id="myy" size="3" disabled="disabled">,Vueltas:<input type="text" id="vuel" size="3" disabled="disabled"><br>
<canvas id="demoCanvas" width="350" height="350" style="border:1px solid #000000;"></canvas>

CSS

body{
    font-family: 'Arial', sans-serif;
    font-size: 0.8em;
    width: 100%;
    min-width :800px;
}
#canvas{
    margin: auto;
    border-style:solid;
    border-color:#ffffff;
}
#main{
    width : 800px;
    padding-bottom: 20px;
    margin: auto;
}
 
form{
    font-size: 0.8em;
    width: 300px;
    background-color: #0066DD;
    margin: auto;
    padding: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: #0099FF;
    text-align: left;
    color: #ffffff;
    opacity:0;
}
#submit{
    text-align: right;
}

JavaScript

$(document).ready(function(){
var dy = 0;    
    //Create a stage by getting a reference to the canvas
var vueltas = 0;
stage = new createjs.Stage("demoCanvas");
    
    var avion = new createjs.Bitmap("http://www.clker.com/cliparts/g/2/A/2/R/h/military-tank-th.png");
    console.log(avion);
    
     avion.x = 350;
    avion.y = 100;
    stage.addChild(avion);
    stage.update();


    var circle = new createjs.Bitmap("http://www.clker.com/cliparts/b/5/2/b/1197118645589569366ryanlerch_molotov_cocktail.svg.thumb.png");
    circle.x = circle.y = 0;
       
    //Add Shape instance to stage display list.
    stage.addChild(circle);
    //Update stage will render next frame
    stage.update();

        
form = document.getElementById("myform");
formDOMElement =  new createjs.DOMElement(form);
//move it's rotation center at the center of the form
formDOMElement.regX = form.offsetWidth*0.5;
formDOMElement.regY = form.offsetHeight*0.5;
//move the form above the screen
formDOMElement.x = -100;
formDOMElement.y =  -100;
stage.addChild(formDOMElement);
stage.update();
//console.log(Timeline);

   /* circle.addEventListener("click",function(){
alert("gol");    
    });*/
    
$(circle).click(function(){
    if(dy == 0){
createjs.Tween.get(formDOMElement).to({alpha:1, y:stage.height * 0.5,rotation:720},2000,createjs.Ease.cubicOut);
        dy =1
    }else{
formDOMElement.x = -100;
formDOMElement.y =  -100;
        dy = 0;
    }
});
 createjs.Ticker.addEventListener("tick", handleTick);

    function handleTick() {
     //Circle will move 10 units to the right.
       console.log(avion);
        avion.x -=5;
        if(avion.x == -100){
        avion.x = 350;
        }
            
        
        circle.x += 1;
        circle.y += 1;
        $("#myx").val(circle.x);
        $("#myy").val(circle.y);
        //Will cause the circle to wrap back
        if (circle.x > stage.canvas.width) { 
            circle.x = 5;
            circle.y = 5;
            vueltas += 1;
      ...