| Accueil | table JavaScript | index JavaScript | précédent | suivant |

Exemple - boule de billard

Toujours pour illustrer le mouvement d'une image, voici un script qui simule le mouvement d'une boule de billard.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple19</title>
<meta name="description" content="site http://www.construireunsite.fr" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Jstyle07.css" />

<script type="text/javascript">
var C1top=10; // position du cadre1
var C1left=150;
var C1width=500; // dimensions du cadre1
var C1height=50;
var C2top=60;
var C2height=300;
var xmouse, ymouse; // position du curseur
var image; // objet image
var moving=false; // témoin mouvement
var x0image=340;
var y0image=190;
var ximage=x0image; // position de la boule
var yimage=y0image;
var dx, dy, xpos, ypos;
var d; // distance click/image
var N; // numéro de la période
var timer; // compteur de temps
var v=3; // vitesse de la boule (en pixels par 10ms)
var kx, ky; // paramètres du déplacement

function click1(e)
{

if(moving)
{

moving=false;
N=1;
x0image=ximage;
y0image=yimage;

}
else
{moving=true;}
N=1;
xmouse=e.clientX-C1left-10;
ymouse=e.clientY-C2top-10;
dx=xmouse-ximage;
dy=ymouse-yimage;
d=Math.sqrt(dx*dx+dy*dy);
kx=v*dx/d; // vitesse x cos angle de déplacement
ky=v*dy/d; // vitesse x sin angle de déplacement
Step();

}

function Step()
{if(moving) {timer=setTimeout("Move()", 10);}}

function Move()
{

clearTimeout(timer);
ximage=x0image+Math.round(N*kx);
yimage=y0image+Math.round(N*ky);
image=document.getElementById("imageD");

if(ximage < 0) // bordure W
{

ximage=0;
yimage=Math.round(y0image-x0image*ky/kx);
kx=-kx;
N=1;
x0image=0;
y0image=yimage;

}

if(ximage > (C1width-20)) // bordure E
{

ximage=C1width-20;
yimage=Math.round(y0image+(C1width-20-x0image)*ky/kx);
kx=-kx;
N=1;
x0image=C1width-20;
y0image=yimage;

}

if(yimage < 0) // bordure N
{

yimage=0;
ximage=Math.round(x0image-y0image*kx/ky);
ky=-ky;
N=1;
x0image=ximage;
y0image=0;

}

if(yimage > C2height-20) // bordure S
{

yimage=C2height-20;
ximage=Math.round(x0image+(C2height-20-y0image)*kx/ky);
ky=-ky;
N=1;
x0image=ximage;
y0image=yimage;

}

xpos=ximage.toString().concat("px");
ypos=yimage.toString().concat("px");
image.style.left=xpos;
image.style.top=ypos;
N++;
Step();

}
</script>

</head>

<body>
<!-- Jscript19 -->
<div id="cadre1">
<p class="texte1"><b>Clic en avant de la boule pour la lancer; clic pour l'arrêter</b></p>
</div>

<div id="cadre2" onclick="click1(event)" >
<div id="imageD">
<img src='boule2.bmp' alt='boule' />
</div>
</div>

<script type="text/javascript">
var cadre1=document.getElementById("cadre1");
cadre1.style.top=C1top.toString().concat("px"); // positionner le cadre 1
cadre1.style.left=C1left.toString().concat("px");
cadre1.style.width=C1width.toString().concat("px");
cadre1.style.height=C1height.toString().concat("px");

var cadre2=document.getElementById("cadre2");
cadre2.style.top=C2top.toString().concat("px"); // positionner le cadre 2
cadre2.style.left=C1left.toString().concat("px");
cadre2.style.width=C1width.toString().concat("px");
cadre2.style.height=C2height.toString().concat("px");
cadre2.style.backgroundColor="rgb(91,140,86)";
cadre2.style.cursor="pointer";

var image=document.getElementById("imageD");
xpos=ximage.toString().concat("px");
ypos=yimage.toString().concat("px");
image.style.left=xpos;
image.style.top=ypos;

</script>

</body>
</html>


Afficher cette page



suivant