# Squelette de Projet Universel
# Multi-plateformes - Multi-entrées
*Valéry Bruniaux - 21 Mars 2018*
#  Sommaire 
---
### But du squelette de projet
### Architecture du projet
### L'animation
### Gestion des Events
### Détection des collisions
### Conclusion et améliorations
##  Ce que je vais apprendre 
---
#### [Parcours de formation HTML/CSS/JS (Sept. à déc.)](http://ens-info.irem.univ-mrs.fr/?p=26)
#### Éviter le syndrome de la page blanche
#### Obtenir un résultat "bleeding-edge technology" ;-)
(Smartphone, tablette, pilotage accéléromètre, etc.)
#### Travailler des technologies modernes et d'avenir
#### [Volontairement non finalisé...](projet/index.html)
##  Architecture du projet 
---
#### HTML et CSS ➫ Canvas + JavaScript
#### JavaScript
- Initialisation des Canvas et Context
- Callbacks des Events
- Animation
- Dessin
- Gestion des collisions
##  L'animation 
---
#### Lancement de la boucle d'animation (onload)
setInterval(animate,20);
#### Boucle d'animation
function animate() // Animation core
{
avance_position();
if ( isCollision() )
{
// Collision : Que faire ?
}
else
{
// Pas de collision : Que faire ?
}
dessine();
}
##  Gestion des Events - 1 
---
##### Gestion de la souris
```JavaScript
window.onmousemove=function(event) // Mouse control
{
direction = ["",""];
if ( event.clientX - posX ≻ mouseSensibility ) direction[0] = "D"
else if ( event.clientX - posX ≺ -mouseSensibility ) direction[0] = "G"
...
}
```
##### Gestion du clavier
```JavaScript
window.onkeydown=function(event) // At key pressed
{
switch ( event.keyCode )
{
case 39 : direction[0] = "D";
break;
case 40 : direction[1] = "B";
break;
...
}
}
window.onkeyup=function(event) // At key released
{
if ( event.keyCode == 39 || event.keyCode == 37 ) direction[0] = ""
else if ( event.keyCode == 38 || event.keyCode == 40 ) direction[1] = ""
}
```
##  Gestion des Events - 2 
---
#### Gestion de l'inclinaison (onload)
```javascript
window.addEventListener('deviceorientation', function(event)
{
tiltLR = event.gamma; // Get the left-to-right tilt (in degrees).
titleFB = event.beta; // Get the front-to-back tilt (in degrees).
//direction = event.alpha; // Get the direction of the device (in degrees).
if ( tiltLR ≻ angleLimite ) direction[0] = "D"
else if ( tiltLR ≺ -angleLimite ) direction[0] = "G"
else direction[0] = "";
if ( titleFB ≻ angleLimite ) direction[1] = "B"
else if ( titleFB ≺ -angleLimite ) direction[1] = "H"
else direction[1] = ""
}, false);
```
##  Détection des collisions 
---
function isCollision() // Check for color detection
{
var photo = backgroundContext.getImageData(posX, posY,largeurcarre,largeurcarre);
for (var i = 0 ; i < photo.data.length ; i += 4)
{
// test rouge
if (photo.data[i] == 237 && photo.data[i+1] == 28 && photo.data[i+2] == 36)
{
alert("Rouge !");
return true;
}
// test bleu
if (photo.data[i] == 63 && photo.data[i+1] == 72 && photo.data[i+2] == 204 )
{
alert("Bleu !");
return true;
}
// test noir
if (photo.data[i] == 0 && photo.data[i+1] == 0 && photo.data[i+2] == 0 )
{
alert("Noir !");
return true;
}
}
return false;
}
##  Conclusion et améliorations 
---
#### Démarrage rapide
#### Squelette flexible
#### Pas assez "responsive"
#### Travailler "en ligne" avant...
#### [Résultats plaisants :-)](http://isnrimbaud.esy.es/)