JavaScript: هڪ نقطو ٺاھيو

اچو ته سکو ته برائوزر ۾ JavaScript ۾ پوائنٽ ڪيئن ڪڍجي.. اهو ٽيڪنيڪل طور تي ڏکيو ناهي، پر صرف انهن لاءِ جيڪي ڀڄن ٿا، ۽ انهن لاءِ جيڪي انٽرنيٽ تي پوائنٽ ڪڍڻ لاءِ تيار نه آهن- يقيناً اها هڪ مڪمل ڪاميابي آهي.

نقطي ٺاھڻ جا ڪيترائي طريقا آھن، اچو ته انھن کي ڏسو

راند ٺاهيندڙ



Unity/Godot/microStudio استعمال ڪندي يا ھزارين گيم بلڊرز مان.. اھي سڀ ھڪڙي طريقي سان ڪجھ ڪوڊ ٺاھيندا جيڪي JavaScript يا Webassembly ھوندا، ۽ اڃا تائين اسان کي پوائنٽ ڏيکاريندا.اسان کي هن رستي ۾ دلچسپي نه آهي.اسان حقيقت ۾ نه سمجھندا سين ته ڇا ٿي رهيو آهي، ڪوڊ تي ڪنٽرول گهٽ ۾ گهٽ هوندو ۽ سورس ڪوڊ ۾ اڻ پڙهيل هوندو، ان کان علاوه اهو تمام وڏو آهي.

جاوا اسڪرپٽ فريم ورڪ

جديءَ جو هي رستو اسان کي جيترو ٿي سگهي ويجهو آهي، ڇاڪاڻ ته.اسان جو ڪوڊ ڏينهن وانگر وڏو ۽ صاف نه هوندو، اسان گهڻو خلاصو نه ڪنداسين، اسان پنهنجي ڪوڊ کي لائبريرين سان گهڻو نه وڌائينداسين.ڪوڊ ڪنٽرول پڻ وڏو هوندو

خالص جاوا اسڪرپٽ

اهو يقيناً جديءَ جو طريقو آهي.ڪوڊ ممڪن طور تي پيچيده آهي، شين جو وڌ کان وڌ ڪنٽرول جيڪو، جيئن هو، ڪنٽرول ٿيڻ جي ضرورت ناهي.ماخذ ڪوڊ تمام گهٽ آهن ۽ گولمي جاوا اسڪرپٽ جي ڄاڻ سان، اسان صرف محفوظ طور تي نوڪري حاصل ڪرڻ لاء وڃي سگهون ٿا، ڇاڪاڻ ته.اسان کي اهڙن ماڻهن جي ضرورت آهي.

پر اسان جو ڪم نوڪري ڳولڻ ناهي، پر هڪ سادي ۽ آسان طريقي سان هڪ نقطو ڪڍڻ آهي.اسان جو ویکٹر رفتار ۽ لچڪدار آهي.

مون لائبريري چونڊيو

p5js هڪ نقطو ڪڍڻ.اهو صرف ايترو نه آهي، يقينا، جيڪڏهن ڪم هڪ نقطي کي ڇڪڻ هو ۽ اهو ئي آهي، يقينا، هر شي کي ننگي جاوا اسڪرپٽ ۾ ڪرڻو پوندو، پر مان اهو ڪري رهيو آهيان تناظر ۾، .k.پوءِ تون ۽ مان ٻيون شيون ڪنداسين جيڪي شاندار نظر اينديون، ۽ ان لاءِ اسان کي سٺي اوزار جي ضرورت آھي.انهن مان هڪ آهي p5js.

گولم جاوا اسڪرپٽ ۾، اسان کي شروعات ڪرڻ ۽ ٻيهر ڊرائنگ جي ڪمن کي بيان ڪرڻ لاء هڪ ڪينواس ٺاهڻ جي ضرورت آهي، 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 سمجھ ۾ اچي ٿو، پر ھي ڪھڙي قسم جو جاوا اسڪرپٽ ڪوڊ آھي؟

سيٽ اپ فنڪشن شروعاتي آهي، اهو هڪ ڀيرو عمل ڪيو ويندو آهي، ان ۾ اسان هڪ ڪئنوس ٺاهيندا آهيون، يعني.علائقو جتي اسان هڪ نقطو ٺاهينداسين.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 ۾ بي ترتيب نمبر جنريٽر لکي سگهو ٿا، پر اهو ڪوڊ بلڪل بدصورت، اڻ پڙهيل ۽ ڏکيو نظر ايندو. سمجھو!





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