Περιεχόμενα

Τη δημιουργία βρόγχου παιχνίδι Επέκταση του HTML

Ανταποκρίνεται σχεδιαγράμματα

Αυτό το μάθημα δείχνει πώς να δημιουργήσετε ανταποκρίνεται διατάξεις χρησιμοποιώντας JavaScript. Προσθέστε δύο κουτιά στη βιβλιοθήκη. Κάνει ένα κόκκινο και ένα πράσινο. Αυτά τα πλαίσια είναι μόνο παραδείγματα. Οποιαδήποτε σχήματα ή τα αντικείμενα που θα μπορούσαν να χρησιμοποιηθούν.


Ανταποκρίνεται σχεδιαγράμματα 1

Ανταποκρίνεται σχεδιαγράμματα 2

Ανταποκρίνεται σχεδιαγράμματα 3

Προσθέσετε πλαίσια στο συντάκτη.


Ανταποκρίνεται σχεδιαγράμματα 4

Τακτοποιήστε τα πλαίσια, έτσι ώστε γεμίζουν την αριστερή και στην δεξιά πλευρά. Αφήστε ένα περίγραμμα γύρω από τους.


Ανταποκρίνεται σχεδιαγράμματα 5

Αυτό τώρα είναι ένα παράδειγμα μιας ιστοσελίδας με περιεχόμενο στις πλευρές αριστερά και δεξιά. Θα φανεί πρόστιμο σε ένα πρόγραμμα περιήγησης web στην επιφάνεια εργασίας ή ένα τηλέφωνο στον τρόπο τοπίων. Δυστυχώς, αυτή η διάταξη δεν θα λειτουργήσει καλά με κατακόρυφο προσανατολισμό. Είτε, τα δύο πλαίσια πρέπει να συρρικνωθεί μικρό για να χωρέσει, ή να επεκταθεί και να γεμίσει την οθόνη, και διακόπτει τις πλευρές του τα πλαίσια.


Ανταποκρίνεται σχεδιαγράμματα 6

Ανταποκρίνεται σχεδιαγράμματα 7

Η κατάσταση αυτή είναι όπου απαιτούνται ανταποκρίνεται σχεδιαγράμματα. Με κατακόρυφο προσανατολισμό, ένα κουτί πρέπει να κινηθεί πάνω από το άλλο. Για να γίνει αυτό, πρέπει να μετακινήσετε τα πλαίσια χρησιμοποιώντας JavaScript. Αυτό σημαίνει στροφή μακριά 'Χρήση της λωρίδας χρόνου' για τόσο κουτιά και ρύθμιση ένα 'Αναγνωριστικό δέσμης ενεργειών'.


Ανταποκρίνεται σχεδιαγράμματα 8

Ανταποκρίνεται σχεδιαγράμματα 9

Ανταποκρίνεται σχεδιαγράμματα 10

Για να μετακινήσετε τα πλαίσια έξω από τα όρια της ταινίας, πρέπει να απενεργοποιήσετε κλιπ στις ιδιότητες του ταινία.


Ανταποκρίνεται σχεδιαγράμματα 11


Το καλύτερο μέρος για να ταξινομήστε τα σχήματα είναι σε το 'Κατά την αλλαγή μεγέθους' ταινία εκδήλωση.

Οι λειτουργίες που χρειαζόμαστε είναι GetLeft, GetTop, GetWidth και GetHeight. Οι συναρτήσεις αυτές δίνουν τα όρια του προγράμματος περιήγησης web ή την συσκευή χρησιμοποιώντας τις συντεταγμένες της ταινίας. Όταν είναι ενεργοποιημένη η κλιπ, αυτές οι τιμές επιστρέψουν τα όρια της ταινίας. Εάν χρησιμοποιείτε το 'καμία' ταινία κλίμακα, GetLeft και GetTop πάντα θα επιστρέψει την τιμή 0, και μπορεί να αγνοηθεί.

Αρχικά αφήνει να ταξινομήστε τα δύο σχήματα έτσι μία συμπληρώνει την αριστερή πλευρά και ο άλλος συμπληρώνει την δεξιά πλευρά.



BoxA.SetBounds(GetLeft(),GetTop(),GetWidth()/2,GetHeight());
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());

Ανταποκρίνεται σχεδιαγράμματα 13

Στη συνέχεια, θα προσθέσουμε ένα περίγραμμα του μεγέθους 10. Αυτή η τιμή 10 δεν είναι απαραίτητα σε pixel, είναι στην ίδια κλίμακα της ταινίας. Χρήση της ταινίας 'Καμία' κλίμακα για τα πάντα να είναι σε pixel.



var Border=10;
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);

Ανταποκρίνεται σχεδιαγράμματα 15

Τέλος θα δοκιμαστεί να δούμε αν το πλάτος του web browser ή της συσκευής είναι μικρότερο από το ύψος. Όταν αυτό συμβεί, να αναδιατάξετε τα πλαίσια κάθετα.



var Border=10;
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}

Ανταποκρίνεται σχεδιαγράμματα 17

Τώρα μπορείτε να δείτε, εάν αλλάζετε το player, τα δύο πλαίσια θα τακτοποιούνται αυτόματα. Αυτά τα δύο κιβώτια μπορεί εύκολα να αντικατασταθεί με άλλα σχήματα και αντικείμενα. Αυτό το παράδειγμα μπορεί να επεκταθεί για να χειριστεί τις πιο σύνθετες διατάξεις.


Τη δημιουργία βρόγχου παιχνίδι Επέκταση του HTML
Η τεκμηρίωση αυτή Μεταφράστηκε από τα Αγγλικά, χρησιμοποιώντας ένα online Μεταφραστής. Ζητούμε συγγνώμη αν βρείτε οποιαδήποτε λάθη. Αν θα θέλατε να μας βοηθήσουν να κάνουμε διορθώσεις. Υπάρχει ένα επεξεργαστή μεταφράσεων σε Hippani Animator (στο μενού "Βοήθεια"). Δίνουμε δωρεάν άδεια κλειδιά στους όποιος διορθώνει πάνω από 100 φράσεις. Επικοινωνήστε μαζί μας για περισσότερες λεπτομέρειες.