JavaScript: چېكىت سىزىڭ

توركۆرگۈدە JavaScript دا قانداق بىر نۇقتىنى سىزىشنى ئۆگىنىۋالايلى .. بۇ تېخنىكىلىق قىيىن ئەمەس ، پەقەت گاڭگىراپ قالغانلار ۋە ئىنتېرنېتتە نۇقتا سىزىشقا تەييارلانمىغانلار ئۈچۈن - بۇ ئەلۋەتتە بىر مۇۋەپپەقىيەت.

بىر نۇقتىنى سىزىشنىڭ نۇرغۇن ئۇسۇللىرى بار ، ئۇلارغا قاراپ باقايلى

ئويۇن ياسىغۇچىلار



Unity / Godot / microStudio ياكى مىڭلىغان ئويۇن قۇرغۇچىلارنىڭ بىرىنى ئىشلىتىش .. ئۇلارنىڭ ھەممىسى مەلۇم ئۇسۇلدا JavaScript ياكى Webassemble بولىدىغان كودلارنى بارلىققا كەلتۈرىدۇ ، يەنىلا بىزگە بۇ نۇقتىنى كۆرسىتىپ بېرىدۇ.بىز بۇ يولغا قىزىقمايمىز.بىز يۈز بېرىۋاتقان ئىشلارنى ھەقىقىي چۈشىنەلمەيمىز ، كودنى كونترول قىلىش ئەسلى كودىدا ئەڭ ئاز ۋە ئوقۇغىلى بولمايدۇ ، ئۇنىڭدىن باشقا ئۇ ناھايىتى چوڭ.

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>

schech.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 كودى؟

تەڭشەش ئىقتىدارى دەسلەپكى قەدەمدە ئېلىپ بېرىلىدۇ ، ئۇ بىر قېتىم ئىجرا بولىدۇ ، ئۇنىڭدا بىز كاناي يازىمىز.بىز بىر نۇقتىنى سىزىدىغان رايون.windows.innerWidth, window.innerHeight

ئېكراننىڭ كەڭلىكى ۋە ئېگىزلىكى ، يەنىبىز پۈتۈن ئېكرانلىق كانايغا ئېنىقلىما بېرىمىز ، شۇنداق ، HTML نىڭمۇ بۇنىڭ ئۈچۈن ئىنتايىن مۇھىم ئۇسلۇبى بار

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

بىز باشقا ئىشنى باشلىشىمىزنىڭ ھاجىتى يوق ، پەقەت بىر چېكىت سىزىشىمىز كېرەك.بۇ يەردىكى پرىنسىپقا قاراڭ .. سىزىش ئىقتىدارى ئىجرا بولىدۇ ، مەسىلەن ، سېكۇنتتا 60 قېتىم ، سېكۇنتتا 60 قېتىم بىز ئۆزىمىزنىڭ نۇقتىسىنى سىزىمىز .. قارىماققا بۇ ئەخمەقتەك قىلىدۇ ، بىز پەقەت بىر نۇقتىنى سىزىشىمىز كېرەك ، ئۇ بولسىمۇ ئۇ كەلگۈسىدە ئومۇمىي كارتوننىڭ ئاساسى بولىدۇ.

ئادەتتە ، بىر نۇقتىنى سىزىشنىڭ كودى ئىنتايىن ئاددىي:

point(10,10)

and all!

قانداقلا بولمىسۇن ، بىزنىڭ كودىمىز سەل چوڭراق

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

تەگلىك قارا

ئاق يۇلتۇز

چېكىت قېلىنلىقى 10

ھەمدە ئۇنى تىك ۋە توغرىسىغا توغرىلايمىز.

ياخشى .. بىز كانايغا بىر چېكىت سىزدۇق ، ھەممە نەرسە كۆڭۈلدىكىدەك ، ئەمما بىز ئۇنى JavaScript بولمىسا ساپ 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