<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Richard GAUTHIER">
<title>EaselJS Démo: Balle rebondissante</title>
<style type="text/css">
canvas {
border: solid 3px #000000;
background-color: #ffff00;
}
</style>
<script type='text/javascript' src='js/easeljs-0.7.0.min.js'></script>
<script type='text/javascript' >
//déclaration des variables globales
var stage; //la scene à animer
var balle;
var largeurEcran;
var hauteurEcran;
var deplaX;
var deplaY;
var angleDegre;
var vitesse = 20;
var rayon = 30;
//première fonction appelée lorsque la page html est chargée
function init() {
//lier la scène au canvas sUr la page html
stage = new createjs.Stage("rgCanvas");
largeurEcran = stage.canvas.width;
hauteurEcran = stage.canvas.height;
balle = new createjs.Shape();
balle.graphics.beginFill("red").drawCircle(0, 0, rayon);
//Positionne la balle au milieu de l'écran
balle.x = largeurEcran / 2;
balle.y = hauteurEcran / 2;
//Met la balle sur la scène.
stage.addChild(balle);
angleDegre = Math.random() * 360;
calcul(angleDegre);
//crée une fonction boucle à 20 images par secondes
createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(20);
}//fin fonction init
function calcul( angleDegre )
{
this.angleDegre = angleDegre;
//Convertir l'angle en radian
var angleRadian = angleDegre * Math.PI / 180;
//gestion du déplacement suivant X et Y
deplaX = vitesse * Math.cos(angleRadian);
deplaY = - vitesse * Math.sin(angleRadian);
}//fin fonction calcul
//la boucle infinie pour animer la scène
function tick(event) {
balle.x += deplaX;
balle.y += deplaY;
//tests pour rester dans la scène
if (balle.x > largeurEcran - rayon) calcul(180 -angleDegre -2);
if (balle.x < rayon) calcul(180 -angleDegre -2);
if (balle.y < rayon) calcul(-angleDegre -2);
if (balle.y > hauteurEcran - rayon) calcul(-angleDegre -2);
//mise à jour de la scène
stage.update(event);
}//fin fonction tick
</script>
</head>
<body onload="init()" >
<h1>EaselJS Démo: Balle rebondissante</h1>
<canvas id="rgCanvas" width="300" height="300">
Dommage votre navigateur ne gère pas les canvas!
</canvas>
</body>
</html>
Source : rebond.zip