|
Disegnare con i layer
La mia idea originaria era quella di fare un gioco in Javascript tipo Snake dei telefonini Nokia (avete presente il serpente che quando mangia un coso nero si allunga di una unità?). Per generare tutti i "pezzi" che compongono il serpente ho utilizzato dei layer generati da un loop del tipo:
for(var a=0;a<100;a++){
document.write("<div id=\"pezzo"+a+"\" style=\"position:absolute; background-color:000000; width=ecc...\"><div>")
}
Questo script per esempio genera 100 layer di nome pezzo0 pezzo1 pezzo2 ... pezzo 98 pezzo99. Controllarli in funzione della loro numerazione non sarà difficile tramite il comodissimo metodo getElementById(). Ad esempio, se vogliamo posizionare l'N-simo il layer a 100 pixels di distanza dal margine sinistro, basterà fare:
document.getElementById("pezzo"+N).style.left="100px"
... dove N è una variabile numerica. Per simulare lo spostamento del serpente basta, in parole povere, prendere la coda e mettergliela davanti alla testa. Le difficoltà sono sopraggiunte quando mi sono ricordato che in Javascript non si possono utilizzare i tasti per attivare metodi; quindi mi è venuto in mente di riciclare tutti quello che avevo fatto per far seguire al serpente percorsi preordinati e "geometrici". Un effetto decisamente carino si ottiene facendo spostare orizzontalmente il lombricone proporzionatamente alla somma dei coseni di due angoli via via crescenti con velocità diverse, e verticalmente secondo la somma dei loro seni. Oppure si può far scegliere al serpente ogni centesimo di secondo una diversa direzione casuale, generando simpatici scarabocchi.
Inoltre i "pezzi" del serpente possono anche essere colorati ordinatamente (o disordinatamente) seguendo (o scegliendo casualmente) le stringhe di un Array contenenti colori.
Noterete che i programmini che ho messo in questo sito aprono tutti la medesima pagina che contienei metodi fondamentali per la gestione dei layer. Ciò che cambia tra un esempio e l'altro è soltanto il tipo di dati che viene passato al file principale dove appaiono i disegni.
In tutte le mascherine che userete per generare le figure ci sono dei tasti freccia per spostare il cursore di quante unità inserirete nel box sottostante; inoltre con un click potrete conoscere le coordinate attuali del cursore (funzionalità utile quando supera il margine superiore o sinistro della pagina). All'apertura della "tavolozza" vi verrà chiesto quanti layer volete inserire (vi consiglio un migliaio o poco più per non rallentare troppo il programma) e la dimensione in pixels di ogni "pezzo" di serpente (per ottenere forme geometriche precise non andate sopra le 2 o tre unità).
Le "tavolozze" funzionano solo con il browser Internet Explorer. È necessario abilitare l'uso di finestre di prompt in strumenti -> opzioni internet -> protezione facendo una delle seguenti cose...
abbassare al minimo il livello di protezione per l'area Internet
(consigliato) cliccare su livello personalizzato e in esecuzione script selezionare attivare la voce consenti ai siti Web di richiedere informazioni mediante finestre di script
... e poi ricaricare la pagina
NOTA: potrebbe anche essere necessario consentire il contenuto "bloccato" se appare la barra di avviso in alto
|
|