Ciao, capisco ora come vorresti che funzionasse lo script. Ad ogni modo, dal momento che si tratta per te di un esercizio a scopo didattico, per risponderti in maniera esaustiva bisognerebbe andare in ordine e vedere punto per punto l'intero codice perché ci sono diversi strafalcioni a prescindere dalla parte javascript.
Mi scuso in anticipo per la lungaggine della risposta.
Punto 1, validazione del codice:
Correggi gli errori strutturali e sintattici del codice HTML/CSS, in modo da avere un codice valido a tutti gli effetti. Cerca di essere più ordinato durante la stesura del codice, sicuramente ne troverai giovamento tu stesso.
Come già ti avevo consigliato in altre discussioni, nel momento in cui sviluppi un documento html sarebbe utile usare un validatore (vedi questo) per verificare che il codice sia valido ed eventualmente correggerlo laddove non lo fosse. Questo, anche prima di provare l'elaborato sul browser.
Nello specifico:
- Correggi il DTD (definizione del tipo di documento). <!DOCTYPE html PUBLIC> non è valido. Hai mischiato un po' di cose tra HTML5 e altre versioni. Se si tratta di HTML5 allora PUBLIC non ci sta a fare nulla, diversamente vanno inserite opportune specifiche (obbligatorie) dopo quel PUBLIC.
Il DTD per HTML5 è semplicemente questo :
Da tener presente che è case insensitive, cioè non c'è distinzione tra maiuscole o minuscole, per cui è valido anche se lo scrivi, ad esempio, in questo modo:
- In HTML5 nel tag <script> non serve specificare language=JavaScript perché questo è il linguaggio di default; il validatore segnala un "warning", meglio se lo togli così da avere una migliore pulizia del codice.
- Correggi la chiusura del tag </script>; hai dimenticato una parentesi angolare.
- Inserisci un opportuno tag <title> dentro <head>, obbligatorio in un documento HTML. Anche se dovesse trattarsi di un semplice e banale esempio è sempre meglio che il codice risulti valido.
- La parentesi angolare aperta < (segno di minore) non può essere usata liberamente nel corpo del documento perché va in conflitto con il carattere usato per la scrittura dei tag HTML.
Il validatore infatti segnala questo errore:
Bad character = after <. Probable cause: Unescaped <. Try escaping it as <.
La parte incriminata è questa:
codice:
controlollo condizione (y>= 550 || <=10)<input...
in particolare quel carattere < nel testo <=10 genera chiaramente un conflitto per il parsing HTML che normalmente dovrebbe andare a considerarlo come apertura di un tag.
In tal caso, per risolvere è possibile sostituire tale caratter con la corrispondente entità HTML:
codice:
controlollo condizione (y>= 550 || <=10)<input...
Poi anche l'italiano vuole la sua parte, eventualmente correggi pure "controlollo".
- Occhio al CSS. Nel tag <p> hai specificato width:1100; height:550; ma ovviamente per quei valori manca l'unità di misura che in questo caso è obbligatoria. Dovrebbe essere width:1100px; height:550px;
Probabile che alcuni browser riescano a "risolvere" comunque questo tipo di errore ma, a scanso di equivoci, e sempre meglio avere un codice valido.
Punto 2, pulizia del codice (consigli):
A prescindere dalla validazione è sempre meglio organizzare il proprio elaborato in maniera pulita e usando opportunamente i vari elementi. Prendi comunque, questi a seguire, come consigli.
- Script alla fine del body.
Prendi per buono ciò che ti indico anche se magari al momento potresti non afferrare bene questo concetto. Non è una regola fissa ma a volte può risultare comodo avere il blocco <script> alla fine del <body> piuttosto che dentro <head>. In particolare, in questo esercizio può tornare utile tale impostazione perché potresti definire più facilmente delle variabili a livello globale, le quali fanno riferimento agli elementi del DOM da manipolare attraverso script stesso, i quali risultano infatti già creati nella pagina quando lo script viene eseguito, a differenza di quanto avverrebbe se lo stesso script (senza particolari accorgimenti) fosse inserito ed eseguito dentro <head>.
Nello specifico, ad esempio, potresti definire e inizializzare già a livello globale la variabile oggetto in questo modo:
codice:
var oggetto = document.getElementById("para1");
così da non dover eseguire l'assegnazione stessa all'interno della funzione muovi(). Fondamentalmente (seppure in maniera alquanto minima in questo caso) si va ad ottimizzare il processo di esecuzione perché tale variabile viene valorizzata una prima e unica volta all'inizio dello script, evitando quindi l'esecuzione di una istruzione in più che diversamente sarebbe ripetuta di continuo dentro la funzione.
Sia chiaro, risultano essere comunque dei minimi accorgimenti, forse anche irrilevanti da un punto di vista del funzionamento in questo semplice caso, ma personalmente preferisco sempre un approccio più pulito possibile durante lo sviluppo di codice, semplice o complesso che sia.
- Separazione del CSS dal codice HTML.
Se non ricordo male ti avevo già fatto presente questo aspetto in qualche altra discussione. Ad ogni modo sarebbe più ottimale, a livello di organizzazione del progetto (semplice o complesso che sia), definire tutto il CSS (nei limiti del possibile) in modo separato dal codice HTML, così da evitare possibili situazioni di "disordine" nel codice stesso, che a lungo andare possono influire negativamente sullo sviluppo e/o sullo studio del progetto in questione.
Meglio se tutto sta al proprio posto. Quindi il mio consiglio è: apriti un tag <style> e, in maniera accuratamente ordinata, schiaffaci dentro tutte le regole degli elementi in gioco.
- Separazione dello script dal codice HTML.
Anche in questo caso, come il precedente, vedo più ottimale, tenere distinta l'azione (JavaScript) dalla struttura (HTML). Mi riferisco alle funzioni richiamata direttamente sui tag attraverso gli eventi HTML. Personalmente preferisco definire tutto ciò che riguarda lo script, compresa l'assegnazione di funzioni come gestori degli eventi, esattamente dove sta il resto dello script (dentro il tag <script>).
- Uso più consono degli elementi HTML.
Per definizione, il tag <p> identifica un "paragrafo", cioè un contenitore specifico per elementi inerenti il contesto testuale della pagina. Per tale motivo, un elemento <p> possiede anche dei valori di default di alcune regole CSS, come il margin, che servono ad impaginare opportunamente il contenuto di tipo testuale.
Ora, hai qualche particolare motivo per usare dei paragrafi come elementi del tuo gioco?
Forse in questo contesto sarebbe più opportuno usare un tipo di contenitore generico come il <div>, sia a livello logico che dal punto di vista del CSS, perché partiresti da elementi "puliti" a livello di impaginazione, cioè privi di eventuali regole con valori di default che potrebbero, ad esempio, generare dei risultati inattesi nel posizionamento degli elementi in gioco.
- Usare sempre nomi autodescrittivi.
Sia per i riferimenti degli elementi HTML (name, id, class) sia per i nomi delle variabili nello script, è una tra quelle best practice (della programmazione in generale) utilizzare dei termini che identifichino le cose in modo esplicito, diretto, intelligibile, facilmente comprensibile; così da non doversi fermare ad un certo punto della programmazione e dire "oh, ma che acciderbolina era testo1, porca paletta!", perdendo il filo di ciò che si stava facendo per andare magari a recuperarne l'identità chissà dove nel resto del progetto.
Questo è valido in particolar modo durante la fase di sviluppo dove è preferibile che ogni cosa sia identificabile nel modo più rapido e semplice possibile, anche a costo di ottenere delle righe di codice maggiormente estese per via della lunghezza dei nomi, ma chiaramente per una futura ed eventuale fase di pubblicazione del progetto si potrà sempre fare uso di opportuni strumenti atti alla compressione/minimizzazione del codice.
Punto 3, studio di un opportuno algoritmo:
Arrivando al dunque; come già detto, mi pare che qualcosa non vada nell'algoritmo che stai usando per il calcolo dello spostamento da applicare all'oggetto.
Ma ho voluto (per esercizio) che il punto si muovesse con un angolo a scelta alfa=angolo.value (e quindi dy dipende da alfa)
Non mi è chiaro perché stai calcolando dy in funzione di dx e della tangente dell'angolo, ma la stessa dx la stai lasciando invariata. Teoricamente anche questa dovrebbe variare in funzione dell'angolo, no?
e così il punto "rimbalza" orizzontalmente, ma non verticalmente come dovrebbe con le condizioni poste:
Questo infatti è il motivo per cui la condizione su dx viene vista mentre quella su dy no, proprio perché dy viene ricalcolata ogni volta (falsando il risultato ottenuto dalla condizione) mentre dx no.
Teoricamente dovresti ricalcolarle comunque entrambe quelle due variabili.
Dalle mie rimembranze nell'uso remoto di calcoli trigonometrici a motivo ludico, ricordo che dato un angolo usavo seno e coseno per calcolare il relativo spostamento di y e x da un punto.
Detto questo, dovresti eseguire il calcolo per entrambi i valori ma in modo "preventivo" così da valutare le due condizioni è solo dopo ricalcolare i valori finali in base alla direzione che può variare dopo le condizioni.
La cosa è impostata più o meno allo stesso modo nel tutorial che ti ho linkato, cioè nella condizione viene usato un calcolo preventivo dove ad esempio la variabile dx è sommata al valore di x per stabilire se l'oggetto supera i "muri" e, nel caso, viene invertito il segno di dx per poi riapplicare il calcolo che determina l'effettivo spostamento dell'oggetto. Tu stai saltando questo passaggio.
Ad ogni modo ho voluto provare a rielaborare il tutto in base a tutti i punti che ho riportato su questa discussione. Sia chiaro, non ho nulla da dimostrare a nessuno, l'ho fatto principalmente per tenere in esercizio il cervello e perché, prendendolo magari come base di partenza, spero possa essere utile a te o ad altri nello studio di applicazioni del genere.
Riporto il codice completo nel post seguente.
Mi scuso, ma non ho uso la console e dovrei imparare ad usarla.
Tra parentesi: ho visto anche il tuo PM, ma preferisco risponderti qui.
Per quanto riguarda l'uso della console web e relativi strumenti di sviluppo del browser, per il momento posso giusto consigliarti di iniziare col metodo console.log() che puoi inserire direttamente all'interno dei tuoi script per monitorare ad esempio il valore di qualche variabile, così come ti ho indicato nel post precedente.
Chiaramente una volta aperta la console (F12) puoi vedere ciò che viene restituito in output (cioè nel pannello della console) attraverso i console.log() che avrai inserito nel codice. Ovviamente l'output salta fuori quando quell'istruzione viene eseguita, cioè durante la normale esecuzione dello script e nel punto in cui l'istruzione stessa è stata inserita.
Se piazzi dei console.log() che sono eseguiti inizialmente all'apertura della pagina, e non avevi ancora aperto la console, ricorda di fare un refresh della pagina (f5) per vederne gli output dopo che avrai aperto la console.
Qui puoi trovare qualche altra indicazione a riguardo:
http://www.html.it/pag/45639/gli-str...avoro/#console
Al momento penso sia sufficiente iniziare con queste semplici azioni di debug giusto per iniziare ad ambiantarti con lo strumento, poi eventualmente potrai sempre approfondire a tempo debito.
Rispondi quotando