<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Exercice 6 : manipulation du positionnement d'objet</title>
<style>
BODY {font-family: Arial; font-size: 10pt}
</style>
</head>
<body onresize="redimensionner()">
<img id="balle" style="position: absolute; left: 0pt; top: 0pt" src="balle.gif" width="11" height="11" border="0" alt="Balle">
<div id="arreter" style="position: absolute; width: 100%">
<p align="center"><a href="javascript: stop_animation()"><b>Arrêter<b></a></p>
</div>
<div id="relancer" style="position: absolute; width: 100%">
<p align="center"><a href="javascript: go_animation()"><b>Relancer<b></a></p>
</div>
<script language="javascript">
<!--
var X = 0; // coordonnées de départ en x de la balle
var Y = 0; // coordonnées de départ en y de la balle
var direction_X = 1; // direction de la balle en X. 1 = de la gauche vers la droite
var direction_Y = 1; // direction de la balle en Y. 1 = du haut vers le bas
var timer;
var ecran_X = document.body.clientWidth;
var ecran_Y = document.body.clientHeight;
// animation de la balle
function animation(){
var img_balle = document.getElementById('balle');
// déplacement de la balle en X
img_balle.style.left = (direction_X) ? ++X : --X;
// déplacement de la balle en X
img_balle.style.top = (direction_Y) ? ++Y : --Y;
// rebond de la balle en X
if ((X + img_balle.width) >= ecran_X)
direction_X = 0;
else if (X == 0)
direction_X = 1;
-
// rebond de la balle en Y
if ((Y + img_balle.height) >= ecran_Y) {
direction_Y = 0;
}
else if (Y == 0)
direction_Y = 1;
}
// rééchantillonage de la fenêtre si celle ci est redimensionnée par l'utilisteur
function redimensionner(){
ecran_X = document.body.clientWidth;
ecran_Y = document.body.clientHeight;
}
// arrêter l'animation
function stop_animation(){
clearInterval(timer);
document.getElementById('balle').style.display = "none";
document.getElementById('arreter').style.display = "none";
document.getElementById('relancer').style.display = "";
}
//lancement du timer
function go_animation(){
// initialisation des variables
X = 0; Y = 0; direction_X = 1; direction_Y = 1;
// initialisation des calques
document.getElementById('balle').style.display = "";
document.getElementById('arreter').style.display = "";
document.getElementById('relancer').style.display = "none";
// lancement du timer
timer = setInterval("animation()", 1);
}
go_animation();
//-->
</script>
</body>
</html>
Cliquez pour agrandir
