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