pbe (Normal User)
Pro
 
Messaggi: 131
Iscritto: 24/05/2014
|
Ho cercato su internet delle guide sul come realizzare dei movimenti di alcuni div nella pagina web.
Ho trovato un paio di librerie grafiche, tra cui JqFloat la quale fa ondeggiare semplicemente il div scelto in un tot di larghezza e in un tot di altezza.
Quale libreria posso usare per fare un movimento in linea retta fino a un totale di lunghezza che decido io?
|
|
|
Roby94 (Member)
Guru
Messaggi: 1170
Iscritto: 28/12/2009
|
Guarda, dalla tua domanda si capisce subito che più che una libreria, ti serve molto studio dello Javascript, per quanto riguarda le animazioni e l'interazione con l'html dopo uno studio approfondito di Javascript, ti consiglierei lo studio della libreria Jquery che migliora la sintassi dello javascript e la sua possibilita di interagire con la pagina.
|
|
|
pbe (Normal User)
Pro
Messaggi: 131
Iscritto: 24/05/2014
|
Ok grazie mille 
|
|
|
pierotofy (Admin)
Guru^2
Messaggi: 6230
Iscritto: 04/12/2003
|
|
|
|
pbe (Normal User)
Pro
Messaggi: 131
Iscritto: 24/05/2014
|
Per esempio a me era venuto in mente di creare in una pagina web una pedina che si muoveva nelle direzioni che l'utente dava con le frecce direzionali.
Con il CSS non credo che si possano gestire gli eventi della tastiera, con il Javascript sì.
|
|
|
Roby94 (Member)
Guru
Messaggi: 1170
Iscritto: 28/12/2009
|
Allora il CSS3 è un ottima idea per le sole animazioni, purtroppo non ho mai approfondito l'argomento, perché trovavo molto piu semplice compatta e modulabile l'operazione da JS con JQuery, visto anche il fatto che mi potevo scrivere le estensioni per conto mio.
Ad ogni modo credo che nel tuo caso il solo CSS non basti assolutamente.
Tienilo comunque presente, come faro io, per altri progetti.
|
|
|
pbe (Normal User)
Pro
Messaggi: 131
Iscritto: 24/05/2014
|
Ok
|
|
|
pbe (Normal User)
Pro
Messaggi: 131
Iscritto: 24/05/2014
|
Come consigliato mi sto esercitando con la libreria JQuery e ho realizzato una specie di giochino nel quale ho due pedine che si muovono in un determinato spazio. Per il momento tutto questo non ha un determinato scopo ma quando avrò imparato bene tutte le funzionalità di JQuery potrò sbizzarrirmi in molte idee.
Ecco il codice completo:
Codice sorgente - presumibilmente Javascript |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>gioco</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="http://www.html.it/guide/esempi/jquery/esempi/jquery-1.3.2.js"></script> <style type="text/css"> #contenitore { position:relative; background:#efefef; display:block; width:400px; height:400px; } ul { list-style-type: disc; padding: 10px; background-color:#FFFFFF; } ul li { margin-top: 3px; margin-bottom: 3px; line-height: 16px; } #box { position:absolute; top:0; left:0; display:block; width:50px; height:50px; background-color:#CCCCCC; border:1px solid #666666; } #box2 { position:absolute; top:347.5px; left:347.5px; display:block; width:50px; height:50px; background:red; border:1px solid #666666; } </style> <script type="text/javascript"> var keys = {}; $(document).keydown(function (evt) { keys[evt.which] = true; var charCode = (evt.which)?evt.which:event.keyCode; switch (charCode) { //MOSSE GRIGIO case 97: test_animate_left (); break; case 115: test_animate_down (); break; case 100: test_animate_right (); break; case 119: test_animate_up (); break; case 65: test_animate_left (); break; case 83: test_animate_down (); break; case 68: test_animate_right (); break; case 87: test_animate_up (); break; //MOSSE ROSSO case 37: test2_animate_left (); break; case 40: test2_animate_down (); break; case 39: test2_animate_right (); break; case 38: test2_animate_up (); break; } function test_animate_up () { $("#box").animate({ "marginTop" : "-=4px" }, "fast", function () { } ); } function test_animate_down () { $("#box").animate({ "marginTop" : "+=4px" }, "fast", function () { } ); } function test_animate_right () { $("#box").animate({ "marginLeft" : "+=4px" }, "fast", function () { } ); } function test_animate_left () { $("#box").animate({ "marginLeft" : "-=4px" }, "fast", function () { } ); } function test2_animate_up () { $("#box2").animate({ "marginTop" : "-=4px" }, "fast", function () { } ); } function test2_animate_down () { $("#box2").animate({ "marginTop" : "+=4px" }, "fast", function () { } ); } function test2_animate_right () { $("#box2").animate({ "marginLeft" : "+=4px" }, "fast", function () { } ); } function test2_animate_left () { $("#box2").animate({ "marginLeft" : "-=4px" }, "fast", function () { } ); } }); $(document).keyup(function (evt) { delete keys[evt.which]; }); </script> </head> <body> <div id="out"></div> <div id="contenitore"> <div id="box"></div> <div id="box2"></div> </div> <script> </script> </body></html>
|
Potete vedere l'esempio in esecuzione a http://www.benzocode.altervista.org/copia_di_gioco.html
A questo punto ho due problemi/domande:
1)Come faccio a far muovere i quadratini box e box2 contemporaneamente?
2)Come posso fare per gestire il contatto tra le due figure?
Aspetto impazientemente risposte...  (anche solo a una delle due) (codice sistemato  )
Ultima modifica effettuata da pbe il 05/06/2014 alle 13:57 |
|
|
Roby94 (Member)
Guru
Messaggi: 1170
Iscritto: 28/12/2009
|
pbe scusa se ti metto in difficoltà ma se lavori su un server "pubblico" potresti postare una demo del tuo progetto cosi da aiutarti con facilità.
Grazie
|
|
|
| 
