Base EaselJS Fiddle

Sets up a canvas, stage, and tick

by dirkk0

HTML

<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

// Configuration.
	var widthOfCircle = 10;
	var startX = widthOfCircle;
	var startY = widthOfCircle;

	// The jump to make on each frame.
	var speedX = 5;
	var speedY = 3;

	// The amount of frames to render each second.
	var framesPerSecond = 60;

	// End configuration.



	// Give the canvas its dimension.
	var canvas = document.getElementById("canvas"),
	    notBounce;

	var canvasLeft = 50;
	var canvasTop = 50;
	var screenWidth = 200;
	var screenHeight = 200;

	canvas.width = screenWidth;
	canvas.height = screenHeight;

	var stage = new createjs.Stage(canvas);

	var circle = new createjs.Shape();

	var circleRadius = widthOfCircle / 2;


	circle.graphics.beginFill("#0000FF").drawCircle(0, 0, circleRadius);

	circle.x = startX;
	circle.y = startY;



	stage.addChild(circle);
	stage.update();

	createjs.Ticker.setFPS(framesPerSecond);

	createjs.Ticker.addEventListener("tick", function () {

	    circle.x += Math.round(speedX);
	    circle.y += Math.round(speedY);

	    // Bounce when the ball hits the right side of the canvas.
	    if ((circle.x + circleRadius) >= stage.canvas.width) {
	        speedX *= -1;
	        stage.canvas.style.left = (canvasLeft += 10) + "px";


	    }

	    // Bounce when the ball hits the left side of the canvas.
	    else if ((circle.x - circleRadius) <= 0) {
	        speedX *= -1;
	        stage.canvas.style.left = (canvasLeft -= 10) + "px";


	    }
	    // Bounce when the ball hits the bottom of the canvas.
	    if ((circle.y + circleRadius) >= stage.canvas.height) {
	        speedY *= -1;
	        stage.canvas.style.top = (canvasTop += 10) + "px";


	    }
	    // Bounce when the ball hits the top of the canvas.
	    else if ((circle.y - circleRadius) <= 0) {
	        speedY *= -1;
	        stage.canvas.style.top = (canvasTop -= 10) + "px";

	    }

	    stage.update();
	});