<!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>