<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre du dessin animé interactif</title>

<script>

	var persistanceretinienne = 23;
	var nbimg = null;
	var nbboucle = 70;
    	var mua1 = 0;
	var vitesseDuVent = 40;
	var ouioui;
	var joueur = 'fleur';
	var joueur1;
	var joueur2;





function acelereLeVent(){

  if(vitesseDuVent>123){
  clearInterval(nbimg);
vitesseDuVent = vitesseDuVent -40;
nbboucle = 70;
lancertout();
  }

}

function diminuLeVent(){
  clearInterval(nbimg);
vitesseDuVent = vitesseDuVent + 300;
nbboucle = 70;
lancertout();
}





function restecalme(joueur1){
for (var placier = 1; placier < 25; placier++) {
	joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';
}
  document.getElementById(joueur1).className = 'sortdutrou';
}


function lancerChange1(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange2(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange3(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange4(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange5(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange6(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange7(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange8(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange9(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange10(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange11(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange12(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange13(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange14(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange15(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange16(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange17(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange18(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange19(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange20(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange21(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange22(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange23(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function lancerChange24(persistanceretinienne){
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
restecalme(joueur1);
}
function change(persistanceretinienne)
{

  switch (persistanceretinienne) {
    	case 0:
lancerChange1(persistanceretinienne);
JoueLeSon2();
   	break;
    	case 1:
lancerChange2(persistanceretinienne);
   	break;
    	case 2:
lancerChange3(persistanceretinienne);

JoueLeSon1();
   	break;
    	case 3:
lancerChange4(persistanceretinienne);
JoueLeSon4();
   	break;
    	case 4:
  lancerChange5(persistanceretinienne);
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
JoueLeSon(mua1);
   	break;
    	case 5:
  lancerChange6(persistanceretinienne);
JoueLeSon5();
   	break;
    	case 6:
lancerChange7(persistanceretinienne);
JoueLeSon6();
   	break;
    	case 7:
lancerChange8(persistanceretinienne);
JoueLeSon7();
   	break;
    	case 8:
lancerChange9(persistanceretinienne);
JoueLeSon2();
   	break;
    	case 9:
lancerChange10(persistanceretinienne);
   	break;
    	case 10:
lancerChange11(persistanceretinienne);

JoueLeSon1();
   	break;
    	case 11:
lancerChange12(persistanceretinienne);
JoueLeSon8();
   	break;
    	case 12:
  lancerChange13(persistanceretinienne);
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
JoueLeSon(mua1);
   	break;
    	case 13:
  lancerChange14(persistanceretinienne);
JoueLeSon9();
   	break;
    	case 14:
lancerChange15(persistanceretinienne);
   	break;
    	case 15:
lancerChange16(persistanceretinienne);
JoueLeSon10();
   	break;
    	case 16:
lancerChange16(persistanceretinienne);
JoueLeSon11();
   	break;
    	case 17:
lancerChange18(persistanceretinienne);
JoueLeSon12();
   	break;
    	case 18:
lancerChange19(persistanceretinienne);

JoueLeSon1();
   	break;
    	case 19:
lancerChange20(persistanceretinienne);
JoueLeSon13();
   	break;
    	case 20:
  lancerChange21(persistanceretinienne);
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
JoueLeSon(mua1);
   	break;
    	case 21:
  lancerChange22(persistanceretinienne);
   	break;
    	case 22:
lancerChange23(persistanceretinienne);
   	break;
    	case 23:
lancerChange24(persistanceretinienne);
   	break;
  }

}



function durermax()
{
  clearInterval(nbimg);
/*   lancerChange4();	*/
}
function seance()
{



change(persistanceretinienne);
  persistanceretinienne--;
if ((nbboucle>1)&&(persistanceretinienne<0))
{ 
/* persistanceretinienne = 8;*/
persistanceretinienne = 23;
nbboucle = nbboucle-1;
}


}
function lancertout()
{
  nbimg = setInterval(seance, vitesseDuVent);
  setTimeout(durermax, persistanceretinienne * 41000);
change(persistanceretinienne)
}	

  function JoueLeSon(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("23awav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("1bwav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("1cwav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("1dwav");
  multia4.play();
  }
  }

  function JoueLeSon1(){
  var multib1 = document.getElementById("24awav");
  multib1.play();
  }
  function JoueLeSon2(){
  var multic1 = document.getElementById("25awav");
  multic1.play();
  }
  function JoueLeSon3(){
  var multic1 = document.getElementById("26awav");
  multic1.play();
  }
  function JoueLeSon4(){
  var multic1 = document.getElementById("27awav");
  multic1.play();
  }
  function JoueLeSon5(){
  var multic1 = document.getElementById("28awav");
  multic1.play();
  }
  function JoueLeSon6(){
  var multic1 = document.getElementById("29awav");
  multic1.play();
  }
  function JoueLeSon7(){
  var multic1 = document.getElementById("30awav");
  multic1.play();
  }
  function JoueLeSon8(){
  var multic1 = document.getElementById("31awav");
  multic1.play();
  }
  function JoueLeSon9(){
  var multic1 = document.getElementById("32awav");
  multic1.play();
  }
  function JoueLeSon10(){
  var multic1 = document.getElementById("33awav");
  multic1.play();
  }
  function JoueLeSon11(){
  var multic1 = document.getElementById("34awav");
  multic1.play();
  }
  function JoueLeSon12(){
  var multic1 = document.getElementById("35awav");
  multic1.play();
  }
  function JoueLeSon13(){
  var multic1 = document.getElementById("36awav");
  multic1.play();
  }

</script>
<style>

.petales1 {


position: absolute;
width: 180px;
border-width: 75px 22px 0;
border-style: solid;
border-color: #CCCCFF transparent;
}
.petales1:before {
content: "";
position: absolute;
height: 0px;
width: 0px;
top: -85px;
left: -18px;
border-width: 0 40px 15px;
border-style: solid;
border-color: transparent transparent #CCCCFF;
} 

.tourne15 {
    float: left;
    -ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Safari */
    transform: rotate(15deg);
}
.tourne30 {
    float: left;
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari */
    transform: rotate(30deg);
}
.tourne45 {
    float: left;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
}
.tourne60 {
    float: left;
    -ms-transform: rotate(60deg); /* IE 9 */
    -webkit-transform: rotate(60deg); /* Safari */
    transform: rotate(60deg);
}
.tourne75 {
    float: left;
    -ms-transform: rotate(75deg); /* IE 9 */
    -webkit-transform: rotate(75deg); /* Safari */
    transform: rotate(75deg);
}
.tourne90 {
    float: left;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
}
.tourne105 {
    float: left;
    -ms-transform: rotate(105deg); /* IE 9 */
    -webkit-transform: rotate(105deg); /* Safari */
    transform: rotate(105deg);
}
.tourne120 {
    float: left;
    -ms-transform: rotate(120deg); /* IE 9 */
    -webkit-transform: rotate(120deg); /* Safari */
    transform: rotate(120deg);
}
.tourne135 {
    float: left;
    -ms-transform: rotate(135deg); /* IE 9 */
    -webkit-transform: rotate(135deg); /* Safari */
    transform: rotate(135deg);
}
.tourne150 {
    float: left;
    -ms-transform: rotate(150deg); /* IE 9 */
    -webkit-transform: rotate(150deg); /* Safari */
    transform: rotate(150deg);
}
.tourne165 {
    float: left;
    -ms-transform: rotate(165deg); /* IE 9 */
    -webkit-transform: rotate(165deg); /* Safari */
    transform: rotate(165deg);
}
.tourne180 {
    float: left;
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
}
.tourne165m {
    float: left;
    -ms-transform: rotate(-165deg); /* IE 9 */
    -webkit-transform: rotate(-165deg); /* Safari */
    transform: rotate(-165deg);
}
.tourne150m {
    float: left;
    -ms-transform: rotate(-150deg); /* IE 9 */
    -webkit-transform: rotate(-150deg); /* Safari */
    transform: rotate(-150deg);
}
.tourne135m {
    float: left;
    -ms-transform: rotate(-135deg); /* IE 9 */
    -webkit-transform: rotate(-135deg); /* Safari */
    transform: rotate(-135deg);
}
.tourne120m {
    float: left;
    -ms-transform: rotate(-120deg); /* IE 9 */
    -webkit-transform: rotate(-120deg); /* Safari */
    transform: rotate(-120deg);
}
.tourne105m {
    float: left;
    -ms-transform: rotate(-105deg); /* IE 9 */
    -webkit-transform: rotate(-105deg); /* Safari */
    transform: rotate(-105deg);
}
.tourne90m {
    float: left;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg);
}
.tourne75m {
    float: left;
    -ms-transform: rotate(-75deg); /* IE 9 */
    -webkit-transform: rotate(-75deg); /* Safari */
    transform: rotate(-75deg);
}
.tourne60m {
    float: left;
    -ms-transform: rotate(-60deg); /* IE 9 */
    -webkit-transform: rotate(-60deg); /* Safari */
    transform: rotate(-60deg);
}
.tourne45m {
    float: left;
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Safari */
    transform: rotate(-45deg);
}
.tourne30m {
    float: left;
    -ms-transform: rotate(-30deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Safari */
    transform: rotate(-30deg);
}
.tourne15m {
    float: left;
    -ms-transform: rotate(-15deg); /* IE 9 */
    -webkit-transform: rotate(-15deg); /* Safari */
    transform: rotate(-15deg);
}
.indique{
  cursor:pointer;
}
.cachemoi {
    display: none;
}

.sortdutrou {
    display: inline;
}

</style>
</head>

<body onload="javascript:lancertout();">





<div><audio id="1bwav" preload> 
<source src="http://www.letime.net/alpha/b.wav">
</audio></div>

<div><audio id="1cwav" preload> 
<source src="http://www.letime.net/alpha/c.wav">
</audio></div>

<div><audio id="1dwav" preload> 
<source src="http://www.letime.net/alpha/d.wav">
</audio></div>








<div><audio id="23awav" src="http://www.letime.net/PianoBaul/Violin/a2/c2.wav" preload></audio></div>

<div><audio id="24awav" src="http://www.letime.net/PianoBaul/Violin/a2/v2.wav" preload></audio></div>

<div><audio id="25awav" src="http://www.letime.net/PianoBaul/Violin/a2/b2.wav" preload></audio></div>

<div><audio id="26awav" src="http://www.letime.net/PianoBaul/Violin/a2/n2.wav" preload></audio></div>

<div><audio id="27awav" src="http://www.letime.net/PianoBaul/Violin/a2/02.wav" preload></audio></div>

<div><audio id="28awav" src="http://www.letime.net/PianoBaul/Violin/a2/12.wav" preload></audio></div>

<div><audio id="29awav" src="http://www.letime.net/PianoBaul/Violin/a2/22.wav" preload></audio></div>

<div><audio id="30awav" src="http://www.letime.net/PianoBaul/Violin/a2/32.wav" preload></audio></div>

<div><audio id="31awav" src="http://www.letime.net/PianoBaul/Violin/a2/42.wav" preload></audio></div>

<div><audio id="32awav" src="http://www.letime.net/PianoBaul/Violin/a2/52.wav" preload></audio></div>

<div><audio id="33awav" src="http://www.letime.net/PianoBaul/Violin/a2/62.wav" preload></audio></div>

<div><audio id="34awav" src="http://www.letime.net/PianoBaul/Violin/a2/72.wav" preload></audio></div>

<div><audio id="35awav" src="http://www.letime.net/PianoBaul/Violin/a2/82.wav" preload></audio></div>

<div><audio id="36awav" src="http://www.letime.net/PianoBaul/Violin/a2/92.wav" preload></audio></div>



 <div id="fleur1"> 
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>


 <div id="fleur2" class="cachemoi" >
<div class="petales1 tourne15" onMouseDown="acelereLeVent();" style="margin-left:147px ; margin-top:110px;">
</div>
 </div>

 <div id="fleur3" class="cachemoi">
<!---->
<div class="petales1 tourne30 indique" onMouseDown="acelereLeVent();" style="margin-left:152px ; margin-top:115px;">
</div>
 </div>

 <div id="fleur4" class="cachemoi">
<div class="petales1 tourne45 indique" onMouseDown="acelereLeVent();" style="margin-left:157px ; margin-top:120px;">
</div>
 </div>


 <div id="fleur5" class="cachemoi">
<div class="petales1 tourne60 indique" onMouseDown="acelereLeVent();" style="margin-left:162px ; margin-top:125px;">
</div>
 </div>


 <div id="fleur6" class="cachemoi" >
<div class="petales1  tourne75 indique" onMouseDown="acelereLeVent();" style="margin-left:172px ; margin-top:125px;">
</div>
 </div>

 <div id="fleur7" class="cachemoi">
<!---->
<div class="petales1 tourne90 indique" onMouseDown="acelereLeVent();" style="margin-left:182px ; margin-top:125px;">
</div>
 </div>

 <div id="fleur8" class="cachemoi">
<div class="petales1 tourne105 indique" onMouseDown="acelereLeVent();" style="margin-left:192px ; margin-top:125px;">
</div>
 </div>

 <div id="fleur9" class="cachemoi" >
<div class="petales1 tourne120 indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>


 <div id="fleur10" class="cachemoi" >
<div class="petales1 tourne135 indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>

 <div id="fleur11" class="cachemoi">
<!---->
<div class="petales1 tourne150 indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>

 <div id="fleur12" class="cachemoi">
<div class="petales1 tourne165 indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>


 <div id="fleur13" class="cachemoi">
<div class="petales1 tourne180 indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>


 <div id="fleur14" class="cachemoi" >
<div class="petales1  tourne165m indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>

 <div id="fleur15" class="cachemoi">
<!---->
<div class="petales1 tourne150m indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>

 <div id="fleur16" class="cachemoi">
<div class="petales1 tourne135m indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>

 <div id="fleur17" class="cachemoi" >
<div class="petales1 tourne120m indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>


 <div id="fleur18" class="cachemoi" >
<div class="petales1 tourne105m indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>

 <div id="fleur19" class="cachemoi">
<!---->
<div class="petales1 tourne90m indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>

 <div id="fleur20" class="cachemoi">
<div class="petales1 tourne75m indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>


 <div id="fleur21" class="cachemoi">
<div class="petales1 tourne60m indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>


 <div id="fleur22" class="cachemoi" >
<div class="petales1  tourne45m indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>

 <div id="fleur23" class="cachemoi">
<!---->
<div class="petales1 tourne30m indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>

 <div id="fleur24" class="cachemoi">
<div class="petales1 tourne15m indique" onMouseDown="acelereLeVent();" style="margin-left:142px ; margin-top:105px;">
</div>
 </div>

</body>

</html>