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

En poursuivant votre navigation sur mon site, vous acceptez l’utilisation des Cookies et autres traceurs  pour réaliser des statistiques de visites et enregistrer sur votre machine vos activités pédagogiques. En savoir plus.