Comme dans les bons vieux casse-briques, une balle rebondit sur les bords de la fenêtre.
Démo : En cours...
Etape 1 : Copier l'image suivante que vous placerez dans le répertoire de votre page :
Etape 2 : Ajouter juste entre les balises <HEAD> :
<script> <!-- // Bouncing Image © Hass - http://go.to/hass // ------------------------------------------ // Configurer les trois variables suivantes var ballWidth = 40; // la largeur de l'image var ballHeight = 40; // la hauteur de l'image var BallSpeed = 11; // la vitesse // BallSpeed de 1 à 50, plus élevé = plus vite // ------------------------------------------- var maxBallSpeed = 50; var xMax; var yMax; var xPos = 0; var yPos = 0; var xDir = 'right'; var yDir = 'down'; var superballRunning = true; var tempBallSpeed; var currentBallSrc; var newXDir; var newYDir; function initializeBall() { if (document.all) { xMax = document.body.clientWidth yMax = document.body.clientHeight document.all("superball").style.visibility = "visible"; } else if (document.layers) { xMax = window.innerWidth; yMax = window.innerHeight; document.layers["superball"].visibility = "show"; } setTimeout('moveBall()',400); } function moveBall() { if (superballRunning == true) { calculatePosition(); if (document.all) { document.all("superball").style.left = xPos + document.body.scrollLeft; document.all("superball").style.top = yPos + document.body.scrollTop; } else if (document.layers) { document.layers["superball"].left = xPos + pageXOffset; document.layers["superball"].top = yPos + pageYOffset; } setTimeout('moveBall()',30); } } function calculatePosition() { if (xDir == "right") { if (xPos > (xMax - ballWidth - BallSpeed)) { xDir = "left"; } } else if (xDir == "left") { if (xPos < (0 + BallSpeed)) { xDir = "right"; } } if (yDir == "down") { if (yPos > (yMax - ballHeight - BallSpeed)) { yDir = "up"; } } else if (yDir == "up") { if (yPos < (0 + BallSpeed)) { yDir = "down"; } } if (xDir == "right") { xPos = xPos + BallSpeed; } else if (xDir == "left") { xPos = xPos - BallSpeed; } else { xPos = xPos; } if (yDir == "down") { yPos = yPos + BallSpeed; } else if (yDir == "up") { yPos = yPos - BallSpeed; } else { yPos = yPos; } } if (document.all||document.layers) window.onload = initializeBall; window.onresize = new Function("window.location.reload()"); // --> </script> <style type="text/css"> #superball { position:absolute; left:0; top:0; visibility:hide; visibility:hidden; width:40; height:40; } </style>
Si vous changez d'image, il faut modifier ;
Etape 3: Ajouter juste après la balise <BODY> :
<span id="superball"><img name="superballImage" src="superball.gif" height="40" width="40"></span>
