Tutoriel HTML5JavaScript PDF

Tutoriel pour
lintroduction
lanimation en HTML5
et JavaScript
Frdric Gugan Olivier Fauvel-Jaeger Giacomo Rombaut
Table des matires

1.
Introduction ............................................................................................................................... 2
2.
Cration de lenvironnement...................................................................................................... 2
3.
Cration dun fichier JavaScript .................................................................................................. 3
4.
Cration dun objet graphique.................................................................................................... 4
5.
Affichage du texte ...................................................................................................................... 7
6.
La gestion du son ........................................................................................................................ 8
Tutoriel pour lintroduction lanimation en HTML5 et JavaScript
Page 1 of 8
1. Introduction
Ce tutoriel a pour but daider des tudiants ou des professeurs dbutant en HTML5 (HyperText
Markup Langage) & JavaScript raliser une animation graphique avec ces deux outils.
Ce tutoriel va essentiellement aborder des notions en JavaScript afin de crer une animation.
Il na donc pas pour but de vous apprendre coder en JavaScript mais uniquement de vous
apprendre utiliser certaines fonctions. De plus la plupart des nouveauts dHTML5 ne seront pas
abord.
2. Cration de lenvironnement
Tout dabord nous allons crer un environnement HTML5 afin que le navigateur internet puisse
interprter votre code.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>VOTRE TITRE</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Lunar Lander</h1>
<div id=conteneur>
<canvas id="canvas" width="600" height="400">
<p>
This browser does not support the <code>canvas</code> element.
</p>
</canvas>
</div>
</body>
</html>
Ici, pas de relles difficults, il sagit uniquement dune page HTML basique sans aucunes
fioritures mais uniquement un cadre nomm conteneur contenant un canvas . Vous pouvez
donc rajouter une page de style de type CSS (Cascading Style Sheets) dans la balise <head> grce
linclusion suivante :
<link rel="stylesheet" href="url_page_css.css" />
On remarque que la structure dune page HTML5 est lgrement simplifie par rapport aux
anciennes versions.
La balise <canvas> est une spcificit du HTML5 et elle permet assez simplement de faire une
animation graphique. En attribut de cette balise on passe deux arguments, width et height qui
permettent de dfinir respectivement la largueur et la hauteur de notre animation.
Nous verrons plus tard dans le tutoriel lajout de la balise <audio> permettant de jouer un
son.
Page 2 of 8
A prsent nous allons voir comment ajouter nos pages JavaScript.

Lajout de ces pages ce fait juste avant la fin de la balise <body> grce linstruction suivantes :
<script type="text/javascript" src="url_page_javascript.js"></script>
Toutes les pages JavaScript seront appels les unes aprs les autres, par consquent il faut
respecter un certain ordre cest--dire que si une page JavaScript est incluse dans une autre il faut la
placer avant dans le code HTML.
Afin de faciliter lappelle la fonction principal de votre animation, il est prfrable dappeler
directement cette fonction au chargement du corps de la page. Pour ce fait on utilise la technique
suivante :
<body onload="initialisation_animation();">
Ainsi ds que la balise <body> est ouverte la fonction initialisation_animation() sera recherch
dans vos pages JavaScript est excut.
3. Cration dun fichier JavaScript

Une page de type JavaScript est relativement simple crire. Dbutons avec notre fonction
dinitialisation.
function initialisation_animation() {
//Corps de la fonction
};
Dans le cadre de notre projet nous avons utilis un certain de nombre de fonction
permettant de grer une animation.
La fonction suivante est la principale fonction permettant dafficher une animation. Elle se
compose de deux parties :
(function drawFrame () {
//1re partie
window.requestAnimationFrame(drawFrame, canvas);
//2me partie
context.clearRect(0, 0, canvas.width, canvas.height);
}());
_ La premire partie sera suivie par le traitement des informations (interactions avec
lutilisateur, calcul de position, changement des variables etc
_ La seconde partie permet supprimer tout ce qui est affich lcran et donc elle sera suivit
du nouvelle affichage de notre animations avec donc les nouvelles positions ou variables calculs juste
prcdemment.
Page 3 of 8
Deux objets sont indispensables pour notre animation. Ce sont les objets que lon nommera
canvas et context. Ils sont propres notre cadre canvas dfinit sur notre page HTML. On les rcupre
de la faon suivante :
var canvas = document.getElementById(canvas),
context = canvas.getContext('2d') ;
Ces deux objets sont donc dfinir avant la fonction drawFrame car elle utilise lobjet canvas.
Lobjet context sera utilis par la suite.
4. Cration dun objet graphique

Une fois notre page crer et notre affichage rafrachit, il est quand mme intressant de savoir
y dessiner des lments. Cette cration nest pas ce quil y a de plus vident, cest pourquoi il existe
un certain nombre de librairies permettant de crer des objets prdfinis. Nous avons donc dcrit
lutilisation dune de ces librairies dans notre deuxime tutoriel :
Tutoriel pour lintroduction lanimation en HTML5 et JavaScript laide de la libraire JavaScript
Box2D
Nous allons donc ici crer un lment de toutes pices.
Commenons par la construction dune ligne. Nous allons donc crer un fichier line.js qui
contiendra toutes les spcificits de notre objet ligne. Dans ce fichier nous allons faire une premire
fonction qui servira la cration et linitialisation dune ligne.
function Line (length, color) {
if (length === undefined) { length = 60; }
if (color === undefined) { color = "red"; }
this.x = 0;
this.y = 0;
this.length = length;
this.color = color;
this.rotation = 0;
}
Les deux premires lignes du corps de la fonction permettent de dfinir une valeur par dfaut
au deux variables length et color si elles ne le sont pas prcis au moment de la cration. Les deux
suivantes permettent de dfinir les coordonnes de base de la ligne la position (0, 0). Attention cette
coordonne sera par dfaut en haut gauche de lcran. Enfin les trois dernires lignes permettent
dinitialiser les variables this.length, this.color et this.rotation par dfaut. Il faut savoir que par dfaut
la variable length ne sera pas accessible dans d autres fonction, do lutilisation du this.length qui elle
le sera.
Page 4 of 8
Entrons prsent dans le rel dessin de notre ligne. Pour ce fait nous allons crer une
deuxime fonction dans le ce mme fichier line.js qui sera nomme draw .
Line.prototype.draw = function (context) {
};
Cette fonction est de type prototype cest dire quil sagit dune fonction propre lobjet.
Cette mthode permet de rajouter des fonctions un objet dj existant ou de redfinir une fonction
existante. Enfin elle prend en paramtre lobjet context car il sera ncessaire de le connaitre afin de
pouvoir lui afficher une ligne. Puis un certain nombre de fonctions sont appels pour commencer le
dessin.
Permet de sauvegarder les context son tat dorigine.
context.save();
Permet dappliquer un dcalage si les coordonnes de base sont modifies.
context.translate(this.x, this.y);
Permet dappliquer une rotation lobjet.
context.rotate(this.rotation);
Permet de dfinir lpaisseur de la ligne.
context.lineWidth = 1;
Permet de dfinir la couleur de la ligne.
context.strokeStyle = this.color;
Permet dinitialiser le dbut du trac.
context.beginPath();
Dplace le curseur la position indique. Cette fonction est trs utilise pour des objets
comme des rectangles permettant de dfinir le centre du rectangle en son centre et donc de
commencer le trac un de ses coins.
context.moveTo(0, 0);
Permet de dessiner une ligne jusqu la position x et y. Ici on part donc du point (0, 0) et on
trace la ligne jusqu la coordonnes (this.length, 0). On obtiendra donc une ligne horizontale de taille
length.
context.lineTo(this.length, 0);
Affiche la ligne.
context.stroke();
Restaure le context dans son tat dorigine plus la ligne trac.
context.restore();
Page 5 of 8
Voici le rsum de notre fichier line.js :

function Line (length, color) {
if (length === undefined) { length = 60; }
if (color === undefined) { color = "red"; }
this.x = 0;
this.y = 0;
this.length = length;
this.color = color;
this.rotation = 0;
}
Line.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.lineWidth = 1;
context.strokeStyle = this.color;
context.beginPath();
context.moveTo(0, 0);
context.lineTo(this.length, 0);
context.stroke();
context.restore();
};
Page 6 of 8
5. Affichage du texte
Nous allons prsent voir comment on peut afficher du texte sur notre animation. Laffichage
du texte est trs utile et peut avoir diffrente fonction comme laffichage des variables du jeu, afficher
un message lutilisateur etc
Tout dabord, il faut dfinir la taille du texte ainsi que sa police grce linstruction suivante :
context.font = "8pt Calibri";
Puis, il faut dfinir la couleur du texte :
context.fillStyle = "rgb(255, 255, 255)";
Cette couleur peut-tre dfinit directement en indiquant le nom de la couleur en Anglais, en
hxadecimal ou en RGB (red, green, blue) comme dans lexemple. Ici la couleur du texte sera donc
blanche.
Enfin il faut dfinir le contenu du texte ainsi que son emplacement :
context.fillText(Votre texte, 100, 100);
Pour rsum, dans cette exemple il y aura le texte Votre texte affich partir de la
coordonnes (100, 100) en blanc et crit en taille 8 en calibri.
Page 7 of 8
6. La gestion du son
Passons prsent la gestion du son. En effet dans quasiment toutes les animations, un certain
nombre de bande-son sont prsentes que ce soit en introduction, pour signaler un vnement prcis,
la fin dune partie ou autre.
Commenons tout dabord par rajouter llment ncessaire dans notre page HTML.
<audio id="player">
This browser does not support the <code>audio</code> element.
</audio>
La balise <audio> fait donc partie des nouveauts dHTML5. Mme si un affichage dun lecteur
audio est visible aprs lajout de cette balise, on ne soccupera pas de cet affichage.
Puis nous allons initialiser les paramtres du lecteur.
Dans un fichier JavaScript, par exemple sound.js nous allons faire une fonction qui sera appel
lors dun vnement et qui aura pour but de jouer le son voulu.
Il faut tout dabord initialiser le lecteur avec le son voulu :
document.getElementById("player").setAttribute('src', 'ressource/explosion.wav');
Ici on rcupre llment player et on lui attribue notre son grce la fonction setAttribut.
Puis il suffit jouer le son avec la fonction play. Pour continuer notre exemple :
document.getElementById("player").play();
Il y a dautres fonctions disponibles pour la balise <audio>. Comme par exemple la fonction
pause() ou encore la fonction loop.
La fonction loop sutilise ainsi :
document.getElementById("player").loop = true;
Elle permet une boucle sur le son, et donc si le son arrive la fin il est directement recharg et
rejou.
Nous arrivons la fin de ce tutoriel. Il sagit bien videment que dune bauche de toutes les
possibilits offertes par ces deux langages coupls. En revanche, les outils prsents ici nous ont permis
de dvelopper une animation assez simpliste sur le point de vue graphique mais contenant des
quations physique permettant de faire une reprsentation de la ralit. De plus nous avons ralis
cette animation en peu de temps (environ deux semaines) en partant dun niveau proche de zro dans
ces langages.
Page 8 of 8

Tutoriel HTML5JavaScript PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tutoriel HTML5JavaScript PDF

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

Tutoriel pour

Frdric Gugan Olivier Fauvel-Jaeger Giacomo Rombaut

Table des matires

Cration dun fichier JavaScript .................................................................................................. 3

Cration dun objet graphique.................................................................................................... 4

Affichage du texte ...................................................................................................................... 7

La gestion du son ........................................................................................................................ 8

Tutoriel pour lintroduction lanimation en HTML5 et JavaScript

A prsent nous allons voir comment ajouter nos pages JavaScript.

3. Cration dun fichier JavaScript

4. Cration dun objet graphique

Tutoriel pour lintroduction lanimation en HTML5 et JavaScript

Tutoriel pour lintroduction lanimation en HTML5 et JavaScript

Voici le rsum de notre fichier line.js :

Tutoriel pour lintroduction lanimation en HTML5 et JavaScript

Tutoriel pour lintroduction lanimation en HTML5 et JavaScript

Tutoriel pour lintroduction lanimation en HTML5 et JavaScript

Vous aimerez peut-être aussi