25/05/14 13:11
pbe
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?
aaa
25/05/14 14:18
Roby94
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.
aaa
25/05/14 14:54
pbe
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ì.
aaa
25/05/14 15:02
Roby94
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.
aaa
04/06/14 13:12
pbe
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:
<!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
benzocode.altervista.org/…
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 05/06/14 11:57
aaa
