جاوا اسکریپت: یک نقطه بکشید

بیایید یاد بگیریم که چگونه یک نقطه را در جاوا اسکریپت در یک مرورگر ترسیم کنیم.. این کار از نظر فنی دشوار نیست، اما فقط برای کسانی که سرگردان هستند، و برای کسانی که آمادگی ترسیم یک نقطه در اینترنت را ندارند - البته این یک دستاورد کامل است.

راه های زیادی برای ترسیم نقطه وجود دارد، بیایید به آنها نگاه کنیم

سازندگان بازی



با استفاده از Unity/Godot/microStudio یا هر یک از هزاران سازنده بازی.. همه آنها به هر طریقی کدی را ایجاد می کنند که جاوا اسکریپت یا وب اسمبلی خواهد بود و همچنان نکته را به ما نشان می دهند.ما علاقه ای به این مسیر نداریم.ما واقعاً نمی‌فهمیم چه اتفاقی می‌افتد، کنترل روی کد در کد منبع حداقل و غیرقابل خواندن خواهد بود، علاوه بر آن بسیار زیاد است.

چارچوب های جاوا اسکریپت

این مسیر جدی تا حد امکان به ما نزدیک است، زیرا.کد ما مثل روز بزرگ و واضح نخواهد بود، ما زیاد انتزاع نخواهیم کرد، کد خود را با کتابخانه ها بسیار افزایش نمی دهیم.کنترل کد نیز عالی خواهد بود

جاوا اسکریپت خالص

البته این روش جدی است.کد تا حد امکان پیچیده است، حداکثر کنترل چیزهایی که، همانطور که بود، نیازی به کنترل ندارد.کدهای منبع حداقل ترین هستند و با آگاهی از جاوا اسکریپت می توانیم با خیال راحت به سراغ کار برویم، زیرا.ما به چنین افرادی نیاز داریم

اما وظیفه ما یافتن کار نیست، بلکه ترسیم یک نقطه به روشی ساده و آسان است.بردار ما سرعت و انعطاف پذیری است.

من کتابخانه را انتخاب کردم

p5js برای کشیدن یک نقطهاین فقط این نیست، البته، اگر وظیفه ترسیم یک نقطه بود و تمام است، البته، همه چیز باید با جاوا اسکریپت خالی انجام می شد، اما من این کار را در منظر، .k انجام می دهم.سپس من و شما کارهای دیگری انجام خواهیم داد که شگفت انگیز به نظر می رسند و برای این کار به یک ابزار خوب نیاز داریم.یکی از آنها p5js است.

در golim جاوا اسکریپت، باید یک بوم برای تعریف توابع اولیه و ترسیم مجدد ایجاد کنیم، در p5 نیز این کار انجام می شود، اما بسیار مختصر.

اما اول..

حداقل تنظیم محیط برای توسعه جاوا اسکریپت

دانلود

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 قابل درک است، اما این چه نوع کد جاوا اسکریپت است؟

تابع 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 خالص بدون جاوا اسکریپت بکشیم. چه شکلی است؟

این کار را ابتدایی و حتی ساده تر می کند، اما اصول کاملاً متفاوت است، در اینجا کد نهایی برای ترسیم مربع در مرکز صفحه نمایش است.

<!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