JavaScript: צייר נקודה

בואו ללמוד איך לצייר נקודה ב-JavaScript בדפדפן.. זה לא קשה טכנית, אלא רק למי שמפשפש, ולמי שלא מוכן לצייר נקודה באינטרנט - זה כמובן הישג שלם.

ישנן דרכים רבות לצייר נקודה, בואו נסתכל עליהן

בוני משחקים



באמצעות Unity/Godot/microStudio או כל אחד מאלפי בוני המשחקים.. כולם ייצרו קוד כלשהו בצורה כזו או אחרת שיהיה JavaScript או Webassembly, ועדיין יראו לנו את הנקודה.אנחנו לא מתעניינים בדרך הזו.לא באמת נבין מה קורה, השליטה בקוד תהיה מינימלית ולא קריא בקוד המקור, חוץ מזה שהיא ענקית.

מסגרות JavaScript

הדרך הזו של הג'דיי קרובה אלינו ככל האפשר, כי.הקוד שלנו לא יהיה גדול וברור כמו היום, לא נפשט הרבה, לא נגדיל מאוד את הקוד שלנו עם ספריות.גם בקרת קוד תהיה נהדרת

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>

sketch.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 זה?

פונקציית ההתקנה היא אתחול, היא מבוצעת פעם אחת, בה אנו יוצרים קנבס, כלומר.אזור שבו נצייר נקודה.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