Image moving animation - Javascript Canvas

Javascript examples for Canvas:Animation

  1. HOME
  2. Javascript
  3. Canvas
  4. Animation

Description

Image moving animation

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://code.createjs.com/createjs-2013.09.25.combined.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  w w  w . ja v  a 2  s.  c om*/
var canvas;
var stage;
var score;
var bitmap;
var bmpList;
var txt;
var play;
function init() {
    canvas = document.getElementById("canvas");
    stage = new createjs.Stage(canvas);
    score = 0;
    var image = new Image();
    image.src = "http://i.imgur.com/NSL60.jpg";
    image.onload = maakTegenstander;
}
init();
function maakTegenstander(event){
    console.log("asdas");
    var image = event.target;
    var container = new createjs.Container();
    stage.addChild(container);
    var l = 5;
    bmpList=[]; // dit is een array
    for(var i=0; i<l; i++){
        bitmap = new createjs.Bitmap(image);
        container.addChild(bitmap);
        bitmap.name="stone"+i;
        verwijderTegenstander(bitmap);
        bitmap.regX = bitmap.image.width/2|0;
        bitmap.regY = bitmap.image.height/2|0;
        bitmap.mouseEnabled = true;
        bmpList.push(bitmap);
    }
    txt = new createjs.Text ("Score: 0", "24px Arial", "#333");
    txt.textBaseline="top";
    txt.x = 400;
    txt.y = 20;
    stage.addChild(txt);
    play=true;
    createjs.Ticker.addEventListener("tick", tick);
}
function verwijderTegenstander(stone){
    stone.y = canvas.height - 700;
    stone.x = canvas.width* Math.random() + 30;
    stone.speed = (Math.random()*5)+2;
    }
function tick(){
    if(play == true){
        var l=bmpList.length;
    }
    if (play == true){
        var l = bmpList.length;
        for(var i=0; i<l; i++){
            var bmp = bmpList[i];
            if (bmp.y < 650){
                bmp.y += bmp.speed;
            }
        }
    }
    txt.text = "Punten: "+score;
    stage.update();
}
    }

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="960" height="580"></canvas>  
   </body>
</html>

Related Tutorials