1. Mise en place du tp
Créer un dossier « Lille_sous_la_neige », contenant un sous-dossier « images ».
1) Télécharger les images ci-dessous dans ce sous-dossier « images » :
2) Créer un fichier « index.html » dans votre dossier « Lille_sous_la_neige » et y copier le code html ci-dessous. Enregistrer votre fichier
<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8">
<title>Et tombe la neige</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Titillium+Web:300,700" rel="stylesheet">
</head>
<body >
<div id="conteneur">
<header>
Winter is coming...où comment utiliser l'élément canvas pour faire de l'animation.
</header>
<article>
<div>
<h1>Etape 1 : Image de Lille sous la neige</h1>
<img src="images/Lille.png">
</div>
</article>
<footer>SNT, Lycée Faidherbe 2020</footer>
</div>
</body>
<script src="js/script.js"></script>
</html>
3) Créer un fichier « style.css » dans votre dossier « Lille_sous_la_neige » et y copier le code css ci-dessous. Enregistrer
@media all and (min-width: 600px) {
body{
background-image :url(images/fond_body.png);
background-position: left;
background-position: bottom;
background-repeat: no-repeat;
background-attachment: fixed;
}
#conteneur{
margin-left: 600px;
width : 900px;
}
header,footer {
font-family: 'Amatic SC', cursive;
border-width:1px;
border-style: outset;
border-color: #000;
margin-top: 15px;
margin-bottom: 15px;
font-size: 30px;
padding-left: 50px;
color: black;
}
article{
font-family: 'Titillium Web', sans-serif;
display: flex;
flex-direction: row;
justify-content: space-around;
border-width:1px;
border-style: outset;
border-color: #000;
margin-top: 15px;
margin-bottom: 15px;
}
article h1{
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
}
@media all and (max-width: 600px) {
#conteneur{
width : 95%;
position : center;
}
header,footer {
font-family: 'Amatic SC', cursive;
border-width:1px;
border-style: outset;
border-color: #000;
margin-top: 15px;
margin-bottom: 15px;
font-size: 30px;
padding-left: 50px;
color: black;
}
header {
height: 350px;
background-image :url(images/fond_body.png);
background-position: left;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
article{
font-family: 'Titillium Web', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
border-width:1px;
border-style: outset;
border-color: #000;
margin-top: 15px;
margin-bottom: 15px;
}
article h1{
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
img {
width: 80%;
position: center;
}
}4) Observer le rendu de la page dans le navigateur de votre choix. Réduire la largeur de la page de votre navigateur pour observer la modification de la mise en page.
2. La programmation orientée objet ou POO
“La programmation orientée objet (POO), ou programmation par objet, est un paradigme de programmation informatique élaboré par les Norvégiens Ole-Johan Dahl et Kristen Nygaard au début des années 1960 et poursuivi par les travaux de l’Américain Alan Kay dans les années 1970. Il consiste en la définition et l’interaction de briques logicielles appelées objets ; un objet représente un concept, une idée ou toute entité du monde physique, comme une voiture, une personne ou encore une page d’un livre. Il possède une structure interne et un comportement, et il sait interagir avec ses pairs… Il existe actuellement deux grandes catégories de langages à objets :
https://fr.wikipedia.org/wiki/Programmation_orientée_objet
3. Le but de ce TP.
Comme dans cette vidéo d’une célèbre chanson, on veut faire tomber la neige sur notre image de Lille.
Nous allons donc pour cela devoir créer des flocons de neige.
On peut considérer qu’un flocon est un objet défini par certaines propriétés et certains comportements : on parlera de propriétés et de méthodes en POO.
Avant de se lancer dans la programmation, il faut réfléchir sur ces propriétés et méthodes qui vont définir nos flocons.
a) Propriétés des flocons
On peut considérer qu’un flocon sera défini par :
– sa position sur l’écran donc par deux coordonnées x et y,
– son type : pour un rendu plus réaliste, on va prévoir 3 tailles différentes correspondant à 3 types différents.
b) Méthodes associées.
A un flocon, on va associer 2 méthodes ou 2 comportements ou interactions possibles :
– un déplacement aléatoire,
– une représentation graphique.
c) Nature des flocons.
On peut envisager que nos flocons soient des éléments HTML et manipuler le DOM ( Document Object Model ) à l’aide du javascript pour les créer et les animer.
Plus simplement, ici, on va considérer qu’il s’agit de dessins que l’on va manipuler dans un élément canvas.
4. Mise en place de l’animation.
a) On remplace l’élément image par un élément canvas.
Supprimer de votre fichier html, l’image ( élément <img> ) et le remplacer par un élément <canvas> auquel on va attribuer une id.
<canvas id="mon_canvas"></canvas>b) On modifie le css pour mettre notre image en fond de notre canvas.
Ajouter au fichier css les propriétés suivantes dans les 2 types de règles appliquées en fonction de la taille de l’écran.
#mon_canvas {
background-image: url("images/Lille.png");
background-position: center top; /* On centre l'image */
background-repeat: no-repeat; /* on ne la répète pas */
background-size: cover; /* l'image recouvre l'élément */
height: 200px; /* on fixe les dimensions du canvas */
width: 400px;
}c) On ajoute un fichier js pour gérer notre interaction.
Créer dans votre répertoire où figurent le fichier html et le fichier css un fichier « script.js » et y copier le code suivant :
// on déclare un élément canvas qui correspond à l'élément dont l'id est tutoriel
var canvas = document.getElementById("mon_canvas");
// on déclare notre feuille de dessin ctx qui sera une version 2D du canvas
ctx = canvas.getContext("2d");
// On déclare une liste d'objets appelé flocon
var flocon=[];
// on crée 30 flocons
//creation_flocons(30);
//
window.requestAnimationFrame(dessiner_la_carte);
// on définit le constructeur et les propriétés et méthodes associées
function Flocon(x,y,type) {
// on recupère les arguments x et y de la fonction
// pour les attribuer à l'objet en question
this.x=x;
this.y=y;
this.type=type;
// on crée 2 méthodes
// la méthode dessiner en fonction du type de flocon : 0 gros, 1 moyens, 2 petits
this.deplacement=function(){
switch (this.type) {
// cas 0 : on dessine un cercle non rempli
case 0:
vitesse=0.9;
break;
// cas 1 : on dessine un cercle colorié en noir
case 1:
vitesse=0.7;
break;
// cas 2 : un demi-cercle vers le bas
case 2:
vitesse=0.6;
break;
}
this.x=this.x+(Math.floor(Math.random()*3)-1)*vitesse;
this.y=this.y+vitesse;
if (this.y>canvas.height){this.y=0;}
}
// la méthode déplacement en fonction du type
this.dessiner=function(){
var taille;
var transparences;
switch (this.type) {
// cas 0 : on dessine un cercle non rempli
case 0:
taille=6;
transparence = 0.5;
break;
// cas 1 : on dessine un cercle colorié en noir
case 1:
taille=4;
transparence = 0.8;
break;
// cas 2 : un demi-cercle vers le bas
case 2:
taille=2;
transparence = 1;
break;
}
ctx.beginPath();
ctx.arc(this.x,this.y,taille,0,Math.PI*2, true);
ctx.fillStyle = 'rgb(255,255,255,'+transparence+')';
ctx.fill();
ctx.closePath();
}
// fin du constructeur
}
function dessiner_la_carte(){
var nbe_aleatoire;
var type;
// on efface avec un fond noir
if (flocon.length<300){
nbe_aleatoire=Math.random();
if (nbe_aleatoire<0.1){type=0;}
if (nbe_aleatoire>=0.1 && nbe_aleatoire<0.3){type=1;}
if (nbe_aleatoire>=0.3){type=2;}
flocon[flocon.length]= new Flocon(Math.floor(Math.random()*canvas.width),Math.floor(Math.random()*canvas.height),type);
}
//ctx.clearRect(0,0,600,800);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i=0;i<flocon.length;i++){
flocon[i].dessiner();
flocon[i].deplacement();
}
window.requestAnimationFrame(dessiner_la_carte);
}
Insérer dans votre html l’appel à vote script en le plaçant judicieusement :
<script src="script.js"></script>d) Modifier le script pour comprendre son fonctionnement
Modifier le script js pour :
- avoir moins de flocons,
- changer la taille des flocons,
- etc …….
5) La suite
Reprendre le tp pour créer les bases d’un jeu de type Frog en se limitant pour l’instant aux simples objets qui se déplacent sur la route.