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

<script>

var persistanceretinienne = 7;
var nbimg = null;
var nbboucle = 70;
    	 var mua1 = 0;
var vitesseDuVent = 83;

function acelereLeVent(){

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

}

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

function lancerChange1(){
  document.getElementById('fleur4').className = 'cachemoi';
  document.getElementById('fleur3').className = 'cachemoi';
  document.getElementById('fleur2').className = 'cachemoi';
  document.getElementById('fleur1').className = 'sortdutrou';
}
function lancerChange2(){
  document.getElementById('fleur4').className = 'cachemoi';
  document.getElementById('fleur3').className = 'cachemoi';
  document.getElementById('fleur2').className = 'cachemoi';
  document.getElementById('fleur1').className = 'sortdutrou';
}
function lancerChange3(){
  document.getElementById('fleur4').className = 'cachemoi';
  document.getElementById('fleur3').className = 'cachemoi';
  document.getElementById('fleur2').className = 'sortdutrou';
  document.getElementById('fleur1').className = 'cachemoi';
}
function lancerChange4(){
  document.getElementById('fleur4').className = 'cachemoi';
  document.getElementById('fleur3').className = 'cachemoi';
  document.getElementById('fleur2').className = 'sortdutrou';
  document.getElementById('fleur1').className = 'cachemoi';
}
function lancerChange5(){
  document.getElementById('fleur4').className = 'cachemoi';
  document.getElementById('fleur3').className = 'sortdutrou';
  document.getElementById('fleur2').className = 'cachemoi';
  document.getElementById('fleur1').className = 'cachemoi';
}
function lancerChange6(){
  document.getElementById('fleur4').className = 'cachemoi';
  document.getElementById('fleur3').className = 'sortdutrou';
  document.getElementById('fleur2').className = 'cachemoi';
  document.getElementById('fleur1').className = 'cachemoi';
}
function lancerChange7(){
  document.getElementById('fleur4').className = 'sortdutrou';
  document.getElementById('fleur3').className = 'cachemoi';
  document.getElementById('fleur2').className = 'cachemoi';
  document.getElementById('fleur1').className = 'cachemoi';
}
function lancerChange8(){
  document.getElementById('fleur4').className = 'sortdutrou';
  document.getElementById('fleur3').className = 'cachemoi';
  document.getElementById('fleur2').className = 'cachemoi';
  document.getElementById('fleur1').className = 'cachemoi';
}


function change(persistanceretinienne)
{

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

JoueLeSon1();
   	break;
    	case 3:
lancerChange4();
   	break;
    	case 4:
  lancerChange5();
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
JoueLeSon(mua1);
   	break;
    	case 5:
  lancerChange6();
   	break;
    	case 6:
lancerChange7();
   	break;
    	case 7:
lancerChange8();
   	break;

  }

}



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



change(persistanceretinienne);
  persistanceretinienne--;
if ((nbboucle>1)&&(persistanceretinienne<0))
{ 
/* persistanceretinienne = 8;*/
persistanceretinienne = 7;
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("1awav");
  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("2awav");
  multib1.play();
  }
  function JoueLeSon2(){
  var multic1 = document.getElementById("3awav");
  multic1.play();
  }

</script>
<style>

.petales1 {
	position: absolute;
  border: 1.5px solid black;

display:block;
	width:16px;
	height:40px;
background-color: red;
-webkit-border-radius: 50px 50px 50px 50px / 20px 20px 90px 90px;
border-radius: 50% 50% 50% 50% / 20% 20% 90% 90%;
} 

.tige1{
	position:absolute;
  width: 40px;
  height: 40px;
  border: 0px;
  border-right: 2.5px solid green;
border-top-left-radius:4px;
border-top-right-radius:4px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
}

.tige2{
	position:absolute;
  width: 40px;
  height: 40px;
  border: 0px;
  border-right: 2.5px solid green;

border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
}

.tige3{
	position:absolute;
  width: 20px;

  height: 40px;
  border: 0px;
  border-right: 2.5px solid green;

border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
}



.tige4{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-right: 2.5px solid green;
  border-top: 2.5px solid green;
border-top-left-radius:4px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
}

.feuille1 {

	position: absolute;
  border: 1.5px solid black;

display:block;
	width:32px;
	height:10px;
background-color: green;
-webkit-border-radius: 50px 50px 50px 50px / 20px 20px 90px 90px;
border-radius: 50% 50% 50% 50% / 20% 20% 90% 90%;

}


.tourne21m {
    float: left;
    -ms-transform: rotate(-21deg); /* IE 9 */
    -webkit-transform: rotate(-21deg); /* Safari */
    transform: rotate(-21deg);
}
.tourne90m {
    float: left;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg);
}
.tourne21 {
    float: left;
    -ms-transform: rotate(21deg); /* IE 9 */
    -webkit-transform: rotate(21deg); /* Safari */
    transform: rotate(21deg);
}
.tourne30m {
    float: left;
    -ms-transform: rotate(-30deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Safari */
    transform: rotate(-30deg);
}
.tourne60m {
    float: left;
    -ms-transform: rotate(-60deg); /* IE 9 */
    -webkit-transform: rotate(-60deg); /* Safari */
    transform: rotate(-60deg);
}

.indique{
  cursor:pointer;
}
.cachemoi {
    display: none;
}

.sortdutrou {
    display: inline;
}

</style>
</head>

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



<div><audio id="1awav" preload> 
<source src="https://www.letime.net/alpha/a.wav">
<source src="https://www.letime.net/alpha/galop.mp3">
</audio></div>

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

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

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

<div><audio id="2awav" preload> 
<source src="https://www.letime.net/alpha/galop1.wav">
<source src="https://www.letime.net/alpha/galop1.mp3">
</audio></div>

<div><audio id="3awav" preload> 
<source src="https://www.letime.net/alpha/galop2.wav">
<source src="https://www.letime.net/alpha/galop2.mp3">
</audio></div>




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

<div class="feuille1 tourne21m indique"  onMouseDown="diminuLeVent();" style="margin-left:150px ; margin-top:147px;">
</div>

<div class="tige1" style="margin-left:110px ; margin-top:145px;">
</div>

 </div>

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



<!---->
<div class="feuille1 tourne21m indique"  onMouseDown="diminuLeVent();" style="margin-left:150px ; margin-top:147px;">
</div>


<!---->
<div class="tige3" style="margin-left:130px ; margin-top:145px;">
</div>

 </div>



 <div id="fleur2" class="cachemoi" >
<div class="petales1 tourne30m" onMouseDown="acelereLeVent();" style="margin-left:104px ; margin-top:108px;">
</div>

<div class="feuille1 tourne21m" style="margin-left:130px ; margin-top:147px;">
</div>

<div class="tige2" style="margin-left:90px ; margin-top:145px;">
</div>

 </div>



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

<div class="feuille1 tourne21" style="margin-left:123px ; margin-top:150px;">
</div>

<div class="tige4" style="margin-left:110px ; margin-top:145px;">
</div>

 </div>




</body>

</html>