Disegnare, con paint, una pallina di dimensioni non superiori a 50x50 e salvarla con nome "pallina" e scegliere estensione "gif".
Posizionare la pallina sulla pagina web, all'interno di una sezione e assegnare le proprietà di stile alla sezione:
<html>
<head>
<script>
</script>
<body>
<div id="pallina" style="position:absolute;top:10px;left:10px">
<img src="pallina.gif">
</div>
<br><br>la pallina passa sopra questa scritta
</body>
</html>
Far rimbalzare la pallina in direzione orizzontale tra le coordinate 10 e 400.
Se la pallina si muove verso destra, e non ha ancora superato la coordinata 400px, la sua posizione viene incrementata di 10px.
Se la pallina si muove verso sinistra e non ha ancora superato la coordinata 10px, la posizione viene decrementata di 10 pixel.
La posizione viene mantenuta nella variabile x, mentre la direzione viene mantenuta nella variabile direzione.
<script>
var x=10
var direzione = 1
function muovi() {
document.getElementById("pallina").style.left = x + "px"
if (x < 10 || x > 400) direzione = -direzione
x += direzione*10
setTimeout("muovi()", 200)
}
</script>
</head>
<body onload="muovi()">
La variabile direzione assume alternativamente i valori 1 e -1, ogni volta che raggiunge uno dei due bordi laterali dell'area in cui è confinata. Quindi moltiplicando questa variabile per 10, si ha un valore positivo o un valore negativo da aggiungere alla posizione della pallina, che corrisponde a incrementare o decrementare la proprietà left.
completare lo script precedente in modo che comprenda anche il movimento verticale:
Aggiungere due variabili per mantenere la posizione verticale (y) e la direzione (giu):
<script>
var x=10
var direzione = 1
var y = 10
var giu = 1
function muovi() {
document.getElementById("pallina").style.left = x + "px"
if (x < 10 || x > 400) direzione = -direzione
x += direzione*10
document.getElementById("pallina").style.top = y + "px"
if (y<10 || y > 300) giu = -giu
y += giu*10
setTimeout("muovi()", 200)
}
</script>
</head>
Aggiungere una seconda pallina che si muova nell'area tra le coordinate (400,300) e (600, 600)
Simulare una bolla che entra dalla parte inferiore dello schermo e salga, con movimento zig-zag, e scompaia quando raggiunge la paret superiore dello schermo.