<!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

Affichages : 7335