API tools faq
paste
Advertisement
marongiuchristian93

[JS] 7 - Animazione Palline

marongiuchristian93
May 10th, 2012
141
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.80 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>Animazione Palline</title>
  4. <meta name="author" content="Christian Marongiu" />
  5. <script type="text/javascript">
  6.  
  7. /*
  8. ##################################################################
  9. ## SCRIPT BY:   Christian Marongiu                              ##
  10. ## INFO:        http://chrmar.altervista.org                    ##
  11. ## CONTACT:     christianmarongiu93@gmail.com                   ##
  12. ## DATA:        10th May 2012 - 18.35           ##
  13. ##                                                              ##
  14. ## Pagina HTML/JavaScript per generare delle palline            ##
  15. ## in movimento con numero di palline richiesto                 ##
  16. ##                              ##
  17. ## Fonte parziale: R.Nikolassy - JavaScript Edizioni Hoepli ##
  18. ## Script riadattato e rielaborato con modifiche        ##
  19. ##################################################################
  20. */
  21.  
  22. // Numero palline richiesto all'utente
  23. var palline = prompt("Inserisci numero di palline: (da 1 a 8)");
  24. // Velocità di animazione
  25. var speed = 20;
  26. // Array globali per la posizione dell'elemento (pallina) in verticale (Y)
  27. // e orizzontale (X) e la direzione del movimento (X e Y)
  28. var xpos = new Array();
  29. var ypos = new Array();
  30. var xdir = new Array();
  31. var ydir = new Array();
  32. // La funzione che calcola la nuova posizione della
  33. // pallina contando direzione e posizione precedenti
  34. // riceve il parametro NUM che è l'indice delle
  35. // immagini images[] ed indica quale pallina da spostare
  36. // images[] risulta da document.images
  37. // che indica quanti tag IMG ci sono nel documento
  38. // esempio inserendo 4 palline avremo 4 IMG
  39.  
  40. function calcolaPosizione(num) {
  41.   // Controllo direzione orizzontale
  42.   // Se xdir è false significa che la direz. oriz. e' a Destra
  43.     if(!xdir[num]) {
  44.     // Controllo se la posizione è a fine margine finestra destra
  45.         if(xpos[num] > (document.body.clientWidth-speed-30)) {
  46.         // Se e' a fine margine destra, cambio direzione
  47.         xdir[num] = true; // Quindi lo rendo true cosi' la direz. oriz. e' a Sinistra
  48.         }
  49.     }
  50.     else {
  51.     // E' true quindi sta andando a sinistra, controllo se è a fine margine finestra sinistra
  52.         if(xpos[num] < speed) {
  53.             // Se e' a fine margine sinistra, cambio direzione
  54.             xdir[num] = false; // Lo metto a false cosi' va a destra
  55.         }
  56.     }
  57.  
  58.   // Controllo direzione verticale
  59.   // Se direz. verticale è false significa che va giu'  
  60.     if(!ydir[num]) {
  61.         // Controllo se posizione è a fine margine finestra in basso
  62.         if(ypos[num]>document.body.clientHeight-speed-20) {
  63.             // Se e' a fine margine basso, cambio direzione
  64.             ydir[num]=true; // Lo metto a true cosi' va verso l'alto
  65.         }
  66.     }
  67.     else {
  68.         // Se direz vertic. e' true significa che va in su
  69.         // quindi controllo
  70.         if(ypos[num]<speed) {
  71.         // se è a fine margine finestra in alto
  72.             ydir[num]=false; // Lo metto a false cosi' va verso il basso
  73.         }
  74.     }
  75.     // Aggiornamento nuova posizione
  76.     // Se direzione orizzontale è false va a destra
  77.     if(!xdir[num]) xpos[num] = parseInt(document.images[num].style.left)+speed;
  78.     // Altrimenti va a sinistra
  79.     else xpos[num] = parseInt(document.images[num].style.left)-speed;
  80.     // Se direzione verticale è true va in su
  81.     if(ydir[num]) ypos[num]=parseInt(document.images[num].style.top)-speed;
  82.     // Altrimenti va in giu
  83.     else ypos[num]=parseInt(document.images[num].style.top)+speed;
  84. }
  85.  
  86. // Funzione che calcola la nuova posizione e sposta le palline
  87. // Agendo sulle proprietà style.left e style.top
  88. function move() {
  89.   for(var x=0;x<palline;x++) {
  90.     // Chiamata della funzione che calcola la posizione
  91.     // dell'elemento inviato come parametro (x) che non è
  92.     // altro che la pallina
  93.     calcolaPosizione(x);
  94.     // Calcola posizione ha aggiornato il vettore di posizione
  95.     // che viene associato alla proprietà di posizione verticale (top)
  96.     // ed orizzontale dell'elemento
  97.     document.images[x].style.left=xpos[x];
  98.     document.images[x].style.top=ypos[x];
  99.   }
  100.   // Attivazione del timer che ogni 50millisec sposta di nuovo le palline
  101.   // richiamando questa funzione
  102.   timer = window.setTimeout("move();",50);
  103. }
  104.  
  105. // Funzione attivata all'apertura della pagina
  106. function start() {
  107.     // Se inserisco un numero di palline minore di 1 o maggiore di 8
  108.     if(palline < 1 || palline > 8) {
  109.         document.write("Errore - Numero di palline possibili: da 1 ad 8 - Aggiorna la pagina.");
  110.         return false;
  111.     }  
  112.    
  113.     // Col prompt la risposta creata diventa una stringa
  114.     // quindi il numero di palline mi risulta una stringa
  115.     // per questo adotto questo metodo per poter verificare
  116.     // se sono stati inseriti valori che non siano un numero tra 1 e 8
  117.     // ad esempio se l'utente inserisce una lettera
  118.     if(palline != 1 &&
  119.     palline != 2 &&
  120.     palline != 3 &&
  121.     palline != 4 &&
  122.     palline != 5 &&
  123.     palline != 6 &&
  124.     palline != 7 &&
  125.     palline != 8) {
  126.         document.write("Errore - Valori ammissibili: Numeri da 1 a 8 - Aggiorna la pagina");
  127.         return false;
  128.     }
  129.     // Ciclo che per il totale delle palline
  130.     for(var x=0;x<palline;x++) {       
  131.         // Creo un numero di immagini pari al numero di palline richieste
  132.         var newImage = document.createElement('img');
  133.         newImage.setAttribute("src","palla"+x+".png");
  134.         newImage.setAttribute("style", "position:absolute; top:"+x+"00; left:"+x+"50;");
  135.         document.body.appendChild(newImage);
  136.        
  137.         dir_oriz=[true,false];
  138.         dir_vert=[true,false];
  139.         // Aggiorna array di posizione con la posizione attuale
  140.         xpos[x] = parseInt(document.images[x].style.left);
  141.         ypos[x] = parseInt(document.images[x].style.top);
  142.         // Scelta della direzione iniziale casuale
  143.         // True va a sinistra, false va verso destra
  144.         xdir[x] = dir_oriz[Math.round(Math.random())];
  145.         // True va su, false va giu
  146.         ydir[x] = dir_vert[Math.round(Math.random())];
  147.     } // End for
  148.     // Chiamata funzione che attiva il movimento   
  149.     move();
  150. }
  151. </script>
  152. </head>
  153. <body onLoad="start()" bgcolor="#FFFFFF" style="overflow:hidden">
  154. </body>
  155. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!