JavaScript: σχεδιάστε μια τελεία

Ας μάθουμε πώς να σχεδιάζουμε ένα σημείο σε JavaScript σε ένα πρόγραμμα περιήγησης.. δεν είναι τεχνικά δύσκολο, αλλά μόνο για όσους ψαχουλεύουν και για όσους δεν είναι έτοιμοι να σχεδιάσουν ένα σημείο στο Διαδίκτυο - αυτό είναι φυσικά ένα ολόκληρο επίτευγμα.

Υπάρχουν πολλοί τρόποι για να τραβήξετε ένα σημείο, ας τους δούμε

Κατασκευαστές παιχνιδιών



Χρησιμοποιώντας το Unity/Godot/microStudio ή οποιονδήποτε από τους χιλιάδες κατασκευαστές παιχνιδιών.. θα δημιουργήσουν όλοι κάποιο κώδικα με τον έναν ή τον άλλον τρόπο που θα είναι JavaScript ή Webassembly, και θα μας δείχνουν ακόμα την ουσία.Δεν μας ενδιαφέρει αυτή η διαδρομή.δεν θα καταλάβουμε πραγματικά τι συμβαίνει, ο έλεγχος του κώδικα θα είναι ελάχιστος και αδιάβαστος στον πηγαίο κώδικα, εκτός αυτού είναι τεράστιος.

JavaScript Frameworks

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

Καθαρή JavaScript

Αυτός είναι φυσικά ο τρόπος των Τζεντάι.Ο κώδικας είναι όσο το δυνατόν πιο περίπλοκος, ο μέγιστος έλεγχος των πραγμάτων που, σαν να λέγαμε, δεν χρειάζεται να ελεγχθεί.Οι πηγαίοι κώδικες είναι οι πιο ελάχιστοι και με τη γνώση της golimy JavaScript, μπορούμε απλά να πάμε με ασφάλεια να βρούμε δουλειά, γιατί.χρειαζόμαστε τέτοιους ανθρώπους.

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

Διάλεξα τη βιβλιοθήκη

p5js να σχεδιάσετε μια τελεία.Δεν είναι μόνο αυτό, φυσικά, εάν η εργασία ήταν να σχεδιάσω ένα σημείο και αυτό ήταν όλο, φυσικά, όλα θα έπρεπε να γίνουν σε γυμνή JavaScript, αλλά το κάνω με προοπτική, .k.τότε εσύ και εγώ θα κάνουμε άλλα πράγματα που θα φαίνονται καταπληκτικά, και γι' αυτό χρειαζόμαστε ένα καλό εργαλείο.Ένα από αυτά είναι το p5js.

Στο golim JavaScript, πρέπει να δημιουργήσουμε έναν καμβά για να ορίσουμε τις συναρτήσεις αρχικοποίησης και επανασχεδίασης, στο p5 αυτό γίνεται επίσης, αλλά πολύ συνοπτικά.

Αλλά πρώτα..

Ελάχιστη ρύθμιση περιβάλλοντος για ανάπτυξη JavaScript

Κατεβάστε

p5.min.js και κρατήστε το δίπλα δίπλα.

σαν αυτό

index.html

    <html>
    <head>
        <script src="p5.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body style="margin: 0px;">
        <main>
        </main>
    </body>
    </html>

σκίτσο.js

    function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    }

    function draw() {
    background(0);
    stroke('white');
    strokeWeight(10);
    point(window.innerWidth/2,window.innerHeight/2);
    }

Αυτό θα ανοίξει στο πρόγραμμα περιήγησής σας ως εξής:

Λοιπόν, η HTML είναι κατανοητή, αλλά τι είδους κώδικας JavaScript είναι αυτός;

η συνάρτηση setup είναι αρχικοποίηση, εκτελείται μία φορά, σε αυτήν δημιουργούμε έναν καμβά, δηλ.περιοχή όπου θα σχεδιάσουμε ένα σημείο.window.innerWidth, window.innerHeight

είναι το πλάτος και το ύψος της οθόνης, δηλ.ορίζουμε έναν καμβά πλήρους οθόνης και ναι, το HTML έχει ένα πολύ σημαντικό στυλ και για αυτό

<body style="margin: 0px;">

Δεν χρειάζεται να αρχικοποιήσουμε τίποτα άλλο, απλά πρέπει να σχεδιάσουμε μια τελεία.Κοιτάξτε την αρχή εδώ .. η συνάρτηση σχεδίασης εκτελείται, για παράδειγμα, 60 φορές ανά δευτερόλεπτο, και 60 φορές ανά δευτερόλεπτο θα σχεδιάσουμε το σημείο μας .. φαίνεται ότι αυτό είναι ανόητο, απλά πρέπει να σχεδιάσουμε ένα σημείο και αυτό είναι αλλά στο μέλλον θα είναι η βάση για γενικά όλα τα κινούμενα σχέδια.

Γενικά, ο κώδικας για τη σχεδίαση ενός σημείου είναι εξαιρετικά απλός:

point(10,10)

και τέλος!

Ωστόσο, ο κωδικός μας είναι ελαφρώς μεγαλύτερος

  background(0);
  stroke('white');
  strokeWeight(10);
  point(window.innerWidth/2,window.innerHeight/2);

μαύρο φόντο

λευκό αστέρι

πάχος κουκκίδας 10

και το σχεδιάζουμε στο κέντρο της κάθετης και της οριζόντιας.

Λοιπόν.. σχεδιάσαμε μια κουκκίδα στον καμβά, όλα είναι όπως θα έπρεπε, αλλά μπορούσαμε να τη σχεδιάσουμε ακόμη και σε καθαρό HTML χωρίς JavaScript. Πώς θα ήταν;

Το κάνει στοιχειώδες και ακόμα πιο εύκολο, αλλά οι αρχές είναι τελείως διαφορετικές, εδώ είναι ο τελικός κώδικας για τη σχεδίαση ενός τετραγώνου στο κέντρο της οθόνης

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black;">
    <div style="position: fixed; top: 50%; left: 50%; background-color: white; width: 10px; height: 10px;"></div>
</body>
</html>

Το αποτέλεσμα είναι σχεδόν το ίδιο

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

Αν φανταστώ ότι θέλω να φτιάξω έναν έναστρο ουρανό σε γυμνό CSS, τότε δεν θα μου πάνε όλα, γιατίτα αστέρια πρέπει να εμφανίζονται σε τυχαίες θέσεις και αν έχουν προ-δημιουργηθεί συντεταγμένες, δεν θα είναι τόσο όμορφο και όχι τόσο απλό, γιατί μπορείτε να γράψετε μια γεννήτρια τυχαίων αριθμών στο CSS, αλλά αυτός ο κώδικας θα φαίνεται εντελώς άσχημος, δυσανάγνωστος και δύσκολος. καταλαβαίνουν!



bg bs ca ceb co cs cy da de el en eo es et fa fi fr fy ga gd gl gu ha haw hi hmn hr ht hu id ig is it iw ja jw ka kk km kn ko ku ky la lb lo lt lv mg mi mk ml mn mr ms mt my ne nl no ny or pa pl ps pt ro ru rw sd si sk sl sm sn so sr st su sv sw ta te tg th tk tl tr tt ug uk ur uz vi xh yi yo zh zu
Text to speech
QR-Code generator
Parsedown cheatsheet. Markdown
Filter data by column with regular expressions
Engines for creating games on LUA ?
JavaScript: draw a point
JavaScript: Speaking text in Chinese