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