diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.bn.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.bn.png new file mode 100644 index 00000000..97449829 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.bn.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.br.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.br.png new file mode 100644 index 00000000..cbf4081a Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.br.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fi.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fi.png new file mode 100644 index 00000000..0e8c1607 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fi.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.he.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.he.png new file mode 100644 index 00000000..83a669a2 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.he.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.it.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.it.png new file mode 100644 index 00000000..c146401a Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.it.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.mo.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.mo.png new file mode 100644 index 00000000..ea4caf4f Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.mo.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.nl.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.nl.png new file mode 100644 index 00000000..bed12bcf Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.nl.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ru.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ru.png new file mode 100644 index 00000000..c696e39f Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ru.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.tr.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.tr.png new file mode 100644 index 00000000..e7050868 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.tr.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.bn.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.bn.png new file mode 100644 index 00000000..0e576e1a Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.bn.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.br.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.br.png new file mode 100644 index 00000000..9fe88756 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.br.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fi.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fi.png new file mode 100644 index 00000000..3ae91cd6 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fi.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.he.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.he.png new file mode 100644 index 00000000..a0eb798d Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.he.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.it.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.it.png new file mode 100644 index 00000000..66fcd6e5 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.it.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.mo.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.mo.png new file mode 100644 index 00000000..a036d932 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.mo.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.nl.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.nl.png new file mode 100644 index 00000000..c548476c Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.nl.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ru.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ru.png new file mode 100644 index 00000000..cb40d1fe Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ru.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.tr.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.tr.png new file mode 100644 index 00000000..c10a99b2 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.tr.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.bn.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.bn.png new file mode 100644 index 00000000..2d650ba0 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.bn.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.br.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.br.png new file mode 100644 index 00000000..13484901 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.br.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fi.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fi.png new file mode 100644 index 00000000..91c6492a Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fi.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.he.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.he.png new file mode 100644 index 00000000..9b7b1b09 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.he.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.it.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.it.png new file mode 100644 index 00000000..2a3dd978 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.it.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.mo.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.mo.png new file mode 100644 index 00000000..e0c4d784 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.mo.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.nl.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.nl.png new file mode 100644 index 00000000..9628ac00 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.nl.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ru.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ru.png new file mode 100644 index 00000000..67ed1726 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ru.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.tr.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.tr.png new file mode 100644 index 00000000..21c56b9c Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.tr.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.bn.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.bn.png new file mode 100644 index 00000000..438fc0b1 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.bn.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.br.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.br.png new file mode 100644 index 00000000..4420c6e9 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.br.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fi.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fi.png new file mode 100644 index 00000000..70cd0ae4 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fi.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.he.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.he.png new file mode 100644 index 00000000..d49efa5e Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.he.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.it.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.it.png new file mode 100644 index 00000000..62410a08 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.it.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.mo.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.mo.png new file mode 100644 index 00000000..24397d52 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.mo.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.nl.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.nl.png new file mode 100644 index 00000000..e87d52ec Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.nl.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ru.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ru.png new file mode 100644 index 00000000..55517490 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ru.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.tr.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.tr.png new file mode 100644 index 00000000..6b73b456 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.tr.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.bn.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.bn.png new file mode 100644 index 00000000..f4d14e50 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.bn.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.br.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.br.png new file mode 100644 index 00000000..1a72ff98 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.br.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fi.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fi.png new file mode 100644 index 00000000..96fbfa22 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fi.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.he.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.he.png new file mode 100644 index 00000000..835932b9 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.he.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.it.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.it.png new file mode 100644 index 00000000..3bc2842c Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.it.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.mo.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.mo.png new file mode 100644 index 00000000..56d74971 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.mo.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.nl.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.nl.png new file mode 100644 index 00000000..cf0a0c3e Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.nl.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ru.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ru.png new file mode 100644 index 00000000..e4e14d90 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ru.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.tr.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.tr.png new file mode 100644 index 00000000..a908c6db Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.tr.png differ diff --git a/translations/bn/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/bn/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 1d65d4cf..3583fef5 100644 --- a/translations/bn/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/bn/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,21 +1,21 @@ -# প্রোগ্রামিং ভাষা এবং টুলস অফ দ্য ট্রেডের পরিচিতি +# প্রোগ্রামিং ভাষা এবং প্রয়োজনীয় সরঞ্জাম সম্পর্কে পরিচিতি -এই পাঠে প্রোগ্রামিং ভাষার মৌলিক বিষয়গুলো আলোচনা করা হয়েছে। এখানে আলোচিত বিষয়গুলো আজকের আধুনিক প্রোগ্রামিং ভাষার জন্য প্রযোজ্য। 'টুলস অফ দ্য ট্রেড' অংশে, আপনি ডেভেলপার হিসেবে সহায়ক কিছু সফটওয়্যার সম্পর্কে জানতে পারবেন। +এই পাঠে প্রোগ্রামিং ভাষার মৌলিক বিষয়গুলো আলোচনা করা হয়েছে। এখানে আলোচিত বিষয়গুলো আজকের আধুনিক প্রোগ্রামিং ভাষার জন্য প্রযোজ্য। 'প্রয়োজনীয় সরঞ্জাম' অংশে, আপনি এমন কিছু সফটওয়্যার সম্পর্কে জানবেন যা একজন ডেভেলপার হিসেবে আপনার কাজে সাহায্য করবে। ![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.bn.png) > স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac) -## প্রি-লেকচার কুইজ -[প্রি-লেকচার কুইজ](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +## প্রাক-পাঠ কুইজ +[প্রাক-পাঠ কুইজ](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) ## পরিচিতি @@ -23,26 +23,26 @@ CO_OP_TRANSLATOR_METADATA: - প্রোগ্রামিং কী? - প্রোগ্রামিং ভাষার প্রকারভেদ -- প্রোগ্রামের মৌলিক উপাদান -- পেশাদার ডেভেলপারের জন্য সহায়ক সফটওয়্যার এবং টুলস +- একটি প্রোগ্রামের মৌলিক উপাদান +- পেশাদার ডেভেলপারের জন্য প্রয়োজনীয় সফটওয়্যার এবং সরঞ্জাম > আপনি এই পাঠটি [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) এ নিতে পারেন! ## প্রোগ্রামিং কী? -প্রোগ্রামিং (কোডিং নামেও পরিচিত) হলো একটি ডিভাইস যেমন কম্পিউটার বা মোবাইল ডিভাইসের জন্য নির্দেশনা লেখার প্রক্রিয়া। আমরা এই নির্দেশনা একটি প্রোগ্রামিং ভাষার মাধ্যমে লিখি, যা পরে ডিভাইস দ্বারা ব্যাখ্যা করা হয়। এই নির্দেশনার সেটগুলো বিভিন্ন নামে পরিচিত হতে পারে, যেমন *প্রোগ্রাম*, *কম্পিউটার প্রোগ্রাম*, *অ্যাপ্লিকেশন (অ্যাপ)* এবং *এক্সিকিউটেবল*। +প্রোগ্রামিং (যা কোডিং নামেও পরিচিত) হলো একটি ডিভাইস যেমন কম্পিউটার বা মোবাইল ডিভাইসের জন্য নির্দেশনা লেখার প্রক্রিয়া। আমরা এই নির্দেশনাগুলো প্রোগ্রামিং ভাষার মাধ্যমে লিখি, যা পরে ডিভাইস দ্বারা ব্যাখ্যা করা হয়। এই নির্দেশনার সেটগুলো বিভিন্ন নামে পরিচিত হতে পারে, যেমন *প্রোগ্রাম*, *কম্পিউটার প্রোগ্রাম*, *অ্যাপ্লিকেশন (অ্যাপ)* এবং *এক্সিকিউটেবল*। -একটি *প্রোগ্রাম* হলো কোড দিয়ে তৈরি যেকোনো কিছু; ওয়েবসাইট, গেমস এবং ফোন অ্যাপগুলো প্রোগ্রাম। যদিও কোড না লিখেও প্রোগ্রাম তৈরি করা সম্ভব, কিন্তু এর অন্তর্নিহিত লজিক ডিভাইস দ্বারা ব্যাখ্যা করা হয় এবং সেই লজিক সম্ভবত কোড দিয়ে লেখা হয়েছে। একটি প্রোগ্রাম যখন *চালানো* বা *এক্সিকিউট* করা হয়, তখন এটি নির্দেশনা সম্পাদন করে। আপনি যে ডিভাইস দিয়ে এই পাঠটি পড়ছেন, সেটি একটি প্রোগ্রাম চালাচ্ছে যা এটি আপনার স্ক্রিনে দেখাচ্ছে। +একটি *প্রোগ্রাম* হলো কোড দিয়ে তৈরি যেকোনো কিছু; ওয়েবসাইট, গেমস এবং ফোন অ্যাপগুলো প্রোগ্রাম। যদিও কোড না লিখেও প্রোগ্রাম তৈরি করা সম্ভব, তবে এর অন্তর্নিহিত লজিক ডিভাইস দ্বারা ব্যাখ্যা করা হয় এবং সেই লজিক সম্ভবত কোড দিয়ে লেখা হয়েছে। একটি প্রোগ্রাম যখন *চালানো* বা *এক্সিকিউট* করা হয়, তখন এটি নির্দেশনাগুলো সম্পন্ন করে। আপনি যে ডিভাইস দিয়ে এই পাঠটি পড়ছেন, সেটি একটি প্রোগ্রাম চালাচ্ছে যা এটি আপনার স্ক্রিনে দেখাচ্ছে। ✅ একটু গবেষণা করুন: কে বিশ্বের প্রথম কম্পিউটার প্রোগ্রামার হিসেবে বিবেচিত? ## প্রোগ্রামিং ভাষা -প্রোগ্রামিং ভাষা ডেভেলপারদের ডিভাইসের জন্য নির্দেশনা লেখার সুযোগ দেয়। ডিভাইস শুধুমাত্র বাইনারি (১ এবং ০) বুঝতে পারে, এবং *বেশিরভাগ* ডেভেলপারের জন্য এটি খুবই অকার্যকর যোগাযোগের মাধ্যম। প্রোগ্রামিং ভাষা হলো মানুষের এবং কম্পিউটারের মধ্যে যোগাযোগের মাধ্যম। +প্রোগ্রামিং ভাষা ডেভেলপারদের ডিভাইসের জন্য নির্দেশনা লেখার সুযোগ দেয়। ডিভাইসগুলো শুধুমাত্র বাইনারি (১ এবং ০) বুঝতে পারে, এবং *অধিকাংশ* ডেভেলপারের জন্য এটি খুবই অকার্যকর যোগাযোগের মাধ্যম। প্রোগ্রামিং ভাষা হলো মানুষের এবং কম্পিউটারের মধ্যে যোগাযোগের মাধ্যম। -প্রোগ্রামিং ভাষাগুলো বিভিন্ন ফরম্যাটে আসে এবং বিভিন্ন উদ্দেশ্যে ব্যবহার করা হয়। যেমন, জাভাস্ক্রিপ্ট প্রধানত ওয়েব অ্যাপ্লিকেশনের জন্য ব্যবহৃত হয়, আর Bash প্রধানত অপারেটিং সিস্টেমের জন্য ব্যবহৃত হয়। +প্রোগ্রামিং ভাষাগুলো বিভিন্ন ফরম্যাটে আসে এবং বিভিন্ন উদ্দেশ্যে ব্যবহার করা হয়। উদাহরণস্বরূপ, জাভাস্ক্রিপ্ট প্রধানত ওয়েব অ্যাপ্লিকেশনের জন্য ব্যবহৃত হয়, যেখানে Bash প্রধানত অপারেটিং সিস্টেমের জন্য ব্যবহৃত হয়। -*লো লেভেল ভাষা* সাধারণত *হাই লেভেল ভাষার* তুলনায় ডিভাইসের জন্য নির্দেশনা ব্যাখ্যা করতে কম ধাপ প্রয়োজন হয়। তবে, হাই লেভেল ভাষার জনপ্রিয়তার কারণ হলো এর পাঠযোগ্যতা এবং সাপোর্ট। জাভাস্ক্রিপ্ট একটি হাই লেভেল ভাষা হিসেবে বিবেচিত। +*লো লেভেল ভাষা* সাধারণত *হাই লেভেল ভাষা*র তুলনায় ডিভাইসের জন্য নির্দেশনা ব্যাখ্যা করতে কম ধাপ প্রয়োজন হয়। তবে, হাই লেভেল ভাষার জনপ্রিয়তার কারণ হলো এর পাঠযোগ্যতা এবং সাপোর্ট। জাভাস্ক্রিপ্ট একটি হাই লেভেল ভাষা হিসেবে বিবেচিত। নিম্নলিখিত কোডটি জাভাস্ক্রিপ্ট (হাই লেভেল ভাষা) এবং ARM অ্যাসেম্বলি কোড (লো লেভেল ভাষা) এর মধ্যে পার্থক্য দেখায়। @@ -83,39 +83,39 @@ back add r0,r1 end ``` -বিশ্বাস করুন বা না করুন, *দুইটি কোডই একই কাজ করছে*: ১০ পর্যন্ত একটি ফিবোনাচ্চি সিকোয়েন্স প্রিন্ট করছে। +বিশ্বাস করুন বা না করুন, *দুটোই একই কাজ করছে*: ১০ পর্যন্ত একটি ফিবোনাচি সিকোয়েন্স প্রিন্ট করছে। -✅ ফিবোনাচ্চি সিকোয়েন্স [সংজ্ঞায়িত](https://en.wikipedia.org/wiki/Fibonacci_number) হয় এমন একটি সংখ্যার সেট হিসেবে, যেখানে প্রতিটি সংখ্যা পূর্ববর্তী দুইটি সংখ্যার যোগফল। এটি ০ এবং ১ থেকে শুরু হয়। প্রথম ১০টি ফিবোনাচ্চি সংখ্যা হলো ০, ১, ১, ২, ৩, ৫, ৮, ১৩, ২১ এবং ৩৪। +✅ ফিবোনাচি সিকোয়েন্স [সংজ্ঞায়িত](https://en.wikipedia.org/wiki/Fibonacci_number) হয় এমন একটি সংখ্যার সেট হিসেবে, যেখানে প্রতিটি সংখ্যা পূর্ববর্তী দুটি সংখ্যার যোগফল। এটি ০ এবং ১ থেকে শুরু হয়। প্রথম ১০টি ফিবোনাচি সংখ্যাগুলো হলো ০, ১, ১, ২, ৩, ৫, ৮, ১৩, ২১ এবং ৩৪। -## প্রোগ্রামের উপাদান +## একটি প্রোগ্রামের উপাদান -একটি প্রোগ্রামের একক নির্দেশনাকে *স্টেটমেন্ট* বলা হয় এবং সাধারণত একটি চরিত্র বা লাইন স্পেসিং থাকে যা নির্দেশনার শেষ বা *টার্মিনেশন* চিহ্নিত করে। একটি প্রোগ্রাম কীভাবে শেষ হয় তা প্রতিটি ভাষার জন্য ভিন্ন। +একটি প্রোগ্রামের একক নির্দেশনাকে *স্টেটমেন্ট* বলা হয় এবং সাধারণত একটি চিহ্ন বা লাইন স্পেসিং থাকে যা নির্দেশনার শেষ বা *টার্মিনেশন* চিহ্নিত করে। একটি প্রোগ্রাম কীভাবে শেষ হয় তা প্রতিটি ভাষার ক্ষেত্রে ভিন্ন। -প্রোগ্রামের স্টেটমেন্টগুলো ব্যবহারকারীর দেওয়া ডেটা বা অন্য কোথাও থেকে প্রাপ্ত ডেটার উপর নির্ভর করতে পারে নির্দেশনা সম্পাদনের জন্য। ডেটা প্রোগ্রামের আচরণ পরিবর্তন করতে পারে, তাই প্রোগ্রামিং ভাষাগুলো ডেটা সাময়িকভাবে সংরক্ষণ করার একটি উপায় নিয়ে আসে, যা পরে ব্যবহার করা যায়। এগুলোকে *ভেরিয়েবল* বলা হয়। ভেরিয়েবল হলো স্টেটমেন্ট যা ডিভাইসকে তার মেমোরিতে ডেটা সংরক্ষণ করতে নির্দেশ দেয়। প্রোগ্রামের ভেরিয়েবলগুলো অ্যালজেব্রার ভেরিয়েবলের মতো, যেখানে তাদের একটি অনন্য নাম থাকে এবং তাদের মান সময়ের সাথে পরিবর্তিত হতে পারে। +প্রোগ্রামের স্টেটমেন্টগুলো ব্যবহারকারীর দেওয়া ডেটা বা অন্য কোথাও থেকে প্রাপ্ত ডেটার উপর নির্ভর করতে পারে নির্দেশনা সম্পন্ন করার জন্য। ডেটা প্রোগ্রামের আচরণ পরিবর্তন করতে পারে, তাই প্রোগ্রামিং ভাষাগুলো ডেটা সাময়িকভাবে সংরক্ষণ করার একটি উপায় নিয়ে আসে যাতে এটি পরে ব্যবহার করা যায়। এগুলোকে *ভেরিয়েবল* বলা হয়। ভেরিয়েবল হলো স্টেটমেন্ট যা ডিভাইসকে তার মেমোরিতে ডেটা সংরক্ষণ করতে নির্দেশ দেয়। প্রোগ্রামের ভেরিয়েবলগুলো অ্যালজেব্রার ভেরিয়েবলের মতো, যেখানে তাদের একটি ইউনিক নাম থাকে এবং তাদের মান সময়ের সাথে পরিবর্তিত হতে পারে। -কিছু স্টেটমেন্ট ডিভাইস দ্বারা সম্পাদিত নাও হতে পারে। এটি সাধারণত ডেভেলপার দ্বারা পরিকল্পিতভাবে লেখা হয় বা দুর্ঘটনাক্রমে ঘটে যখন একটি অপ্রত্যাশিত ত্রুটি দেখা দেয়। এই ধরনের নিয়ন্ত্রণ একটি অ্যাপ্লিকেশনকে আরও শক্তিশালী এবং রক্ষণাবেক্ষণযোগ্য করে তোলে। সাধারণত, এই নিয়ন্ত্রণের পরিবর্তন ঘটে যখন নির্দিষ্ট শর্ত পূরণ হয়। আধুনিক প্রোগ্রামিংয়ে একটি সাধারণ স্টেটমেন্ট যা প্রোগ্রাম কীভাবে চলবে তা নিয়ন্ত্রণ করে, সেটি হলো `if..else` স্টেটমেন্ট। +কিছু স্টেটমেন্ট ডিভাইস দ্বারা সম্পন্ন না হওয়ার সম্ভাবনা থাকে। এটি সাধারণত ডেভেলপার দ্বারা পরিকল্পিতভাবে লেখা হয় অথবা দুর্ঘটনাক্রমে যখন একটি অপ্রত্যাশিত ত্রুটি ঘটে। এই ধরনের নিয়ন্ত্রণ একটি অ্যাপ্লিকেশনকে আরও শক্তিশালী এবং রক্ষণাবেক্ষণযোগ্য করে তোলে। সাধারণত, এই নিয়ন্ত্রণের পরিবর্তন তখন ঘটে যখন নির্দিষ্ট শর্ত পূরণ হয়। আধুনিক প্রোগ্রামিংয়ে একটি সাধারণ স্টেটমেন্ট যা প্রোগ্রামের চলার পদ্ধতি নিয়ন্ত্রণ করে তা হলো `if..else` স্টেটমেন্ট। ✅ আপনি এই ধরনের স্টেটমেন্ট সম্পর্কে পরবর্তী পাঠে আরও শিখবেন। -## টুলস অফ দ্য ট্রেড +## প্রয়োজনীয় সরঞ্জাম [![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") -> 🎥 উপরের ছবিতে ক্লিক করুন টুলিং সম্পর্কিত একটি ভিডিও দেখার জন্য +> 🎥 উপরের ছবিতে ক্লিক করুন টুলিং সম্পর্কে একটি ভিডিও দেখার জন্য -এই অংশে, আপনি কিছু সফটওয়্যার সম্পর্কে জানবেন যা আপনার পেশাদার ডেভেলপমেন্ট যাত্রা শুরু করার সময় খুবই সহায়ক হতে পারে। +এই অংশে, আপনি কিছু সফটওয়্যার সম্পর্কে জানবেন যা আপনার পেশাদার ডেভেলপমেন্ট যাত্রা শুরু করার সময় খুবই উপকারী হতে পারে। -একটি **ডেভেলপমেন্ট এনভায়রনমেন্ট** হলো টুলস এবং ফিচারের একটি অনন্য সেট যা ডেভেলপাররা সফটওয়্যার লেখার সময় প্রায়ই ব্যবহার করে। এই টুলগুলো ডেভেলপারের নির্দিষ্ট প্রয়োজন অনুযায়ী কাস্টমাইজ করা হয়েছে এবং সময়ের সাথে পরিবর্তিত হতে পারে যদি ডেভেলপার কাজের অগ্রাধিকার পরিবর্তন করে, ব্যক্তিগত প্রকল্পে কাজ করে, বা ভিন্ন প্রোগ্রামিং ভাষা ব্যবহার করে। ডেভেলপমেন্ট এনভায়রনমেন্টগুলো ডেভেলপারদের মতোই অনন্য। +একটি **ডেভেলপমেন্ট এনভায়রনমেন্ট** হলো একটি অনন্য সরঞ্জাম এবং বৈশিষ্ট্যের সেট যা একজন ডেভেলপার সফটওয়্যার লেখার সময় প্রায়ই ব্যবহার করেন। এই সরঞ্জামগুলো ডেভেলপারের নির্দিষ্ট প্রয়োজন অনুযায়ী কাস্টমাইজ করা হয়েছে এবং সময়ের সাথে পরিবর্তিত হতে পারে যদি সেই ডেভেলপার কাজের অগ্রাধিকার পরিবর্তন করেন, ব্যক্তিগত প্রকল্পে কাজ করেন, বা অন্য প্রোগ্রামিং ভাষা ব্যবহার করেন। ডেভেলপমেন্ট এনভায়রনমেন্টগুলো ডেভেলপারদের মতোই অনন্য। ### এডিটর -সফটওয়্যার ডেভেলপমেন্টের জন্য সবচেয়ে গুরুত্বপূর্ণ টুলগুলোর একটি হলো এডিটর। এডিটর হলো যেখানে আপনি আপনার কোড লিখেন এবং কখনও কখনও যেখানে আপনি আপনার কোড চালান। +সফটওয়্যার ডেভেলপমেন্টের জন্য সবচেয়ে গুরুত্বপূর্ণ সরঞ্জামগুলোর একটি হলো এডিটর। এডিটর হলো যেখানে আপনি আপনার কোড লিখেন এবং কখনও কখনও যেখানে আপনি আপনার কোড চালান। -ডেভেলপাররা এডিটরের উপর নির্ভর করেন আরও কিছু কারণে: +ডেভেলপাররা এডিটর ব্যবহার করেন আরও কিছু অতিরিক্ত কারণে: -- *ডিবাগিং* কোডের ত্রুটি এবং ভুলগুলো খুঁজে বের করতে সাহায্য করে, লাইন বাই লাইন কোড পরীক্ষা করে। কিছু এডিটরে ডিবাগিং সুবিধা থাকে; এগুলো নির্দিষ্ট প্রোগ্রামিং ভাষার জন্য কাস্টমাইজ এবং যোগ করা যায়। +- *ডিবাগিং* কোডের ত্রুটি এবং ভুল খুঁজে বের করতে সাহায্য করে, লাইন বাই লাইন কোড পরীক্ষা করে। কিছু এডিটরে ডিবাগিং সুবিধা থাকে; এগুলো নির্দিষ্ট প্রোগ্রামিং ভাষার জন্য কাস্টমাইজ এবং যোগ করা যায়। - *সিনট্যাক্স হাইলাইটিং* কোডে রঙ এবং টেক্সট ফরম্যাটিং যোগ করে, যা পড়া সহজ করে। বেশিরভাগ এডিটর কাস্টমাইজড সিনট্যাক্স হাইলাইটিংয়ের অনুমতি দেয়। -- *এক্সটেনশন এবং ইন্টিগ্রেশন* হলো ডেভেলপারদের জন্য বিশেষায়িত টুল। এই টুলগুলো বেস এডিটরে অন্তর্ভুক্ত ছিল না। উদাহরণস্বরূপ, অনেক ডেভেলপার তাদের কোড ডকুমেন্ট করে ব্যাখ্যা করার জন্য যে এটি কীভাবে কাজ করে। তারা ডকুমেন্টেশনে টাইপো খুঁজে বের করতে সাহায্য করার জন্য একটি স্পেল চেক এক্সটেনশন ইনস্টল করতে পারে। বেশিরভাগ এক্সটেনশন নির্দিষ্ট এডিটরের জন্য ব্যবহারের উদ্দেশ্যে তৈরি করা হয়েছে এবং বেশিরভাগ এডিটর এক্সটেনশন খুঁজে বের করার একটি উপায় নিয়ে আসে। +- *এক্সটেনশন এবং ইন্টিগ্রেশন* হলো ডেভেলপারদের জন্য বিশেষায়িত সরঞ্জাম, যা ডেভেলপারদের দ্বারা তৈরি। এই সরঞ্জামগুলো বেস এডিটরে অন্তর্ভুক্ত ছিল না। উদাহরণস্বরূপ, অনেক ডেভেলপার তাদের কোড ডকুমেন্ট করেন এটি কীভাবে কাজ করে তা ব্যাখ্যা করার জন্য। তারা ডকুমেন্টেশনে টাইপো খুঁজে বের করতে একটি স্পেল চেক এক্সটেনশন ইনস্টল করতে পারেন। বেশিরভাগ এক্সটেনশন নির্দিষ্ট এডিটরের জন্য ব্যবহারের উদ্দেশ্যে তৈরি এবং বেশিরভাগ এডিটর উপলব্ধ এক্সটেনশন খুঁজে বের করার একটি উপায় নিয়ে আসে। - *কাস্টমাইজেশন* ডেভেলপারদের তাদের প্রয়োজন অনুযায়ী একটি অনন্য ডেভেলপমেন্ট এনভায়রনমেন্ট তৈরি করতে সক্ষম করে। বেশিরভাগ এডিটর অত্যন্ত কাস্টমাইজযোগ্য এবং ডেভেলপারদের কাস্টম এক্সটেনশন তৈরি করার অনুমতি দেয়। #### জনপ্রিয় এডিটর এবং ওয়েব ডেভেলপমেন্ট এক্সটেনশন @@ -135,9 +135,9 @@ back add r0,r1 ### ব্রাউজার -আরেকটি গুরুত্বপূর্ণ টুল হলো ব্রাউজার। ওয়েব ডেভেলপাররা ব্রাউজারের উপর নির্ভর করেন তাদের কোড ওয়েবে কীভাবে কাজ করে তা দেখার জন্য। এটি এডিটরে লেখা HTML এর মতো একটি ওয়েব পেজের ভিজ্যুয়াল উপাদানগুলো প্রদর্শন করতেও ব্যবহৃত হয়। +আরেকটি গুরুত্বপূর্ণ সরঞ্জাম হলো ব্রাউজার। ওয়েব ডেভেলপাররা ব্রাউজার ব্যবহার করেন তাদের কোড ওয়েবে কীভাবে কাজ করে তা দেখার জন্য। এটি এডিটরে লেখা HTML-এর মতো একটি ওয়েব পৃষ্ঠার ভিজ্যুয়াল উপাদানগুলো প্রদর্শনের জন্যও ব্যবহৃত হয়। -অনেক ব্রাউজার *ডেভেলপার টুলস* (DevTools) নিয়ে আসে, যা ডেভেলপারদের তাদের অ্যাপ্লিকেশন সম্পর্কে গুরুত্বপূর্ণ তথ্য সংগ্রহ এবং ধারণ করতে সাহায্য করে। উদাহরণস্বরূপ: যদি একটি ওয়েব পেজে ত্রুটি থাকে, কখন তা ঘটেছে তা জানা কখনও কখনও সহায়ক হতে পারে। ব্রাউজারের DevTools কনফিগার করা যেতে পারে এই তথ্য সংগ্রহ করার জন্য। +অনেক ব্রাউজার *ডেভেলপার টুলস* (DevTools) নিয়ে আসে, যা ডেভেলপারদের তাদের অ্যাপ্লিকেশন সম্পর্কে গুরুত্বপূর্ণ তথ্য সংগ্রহ এবং ধারণ করতে সাহায্য করার জন্য একটি সহায়ক বৈশিষ্ট্য এবং তথ্যের সেট। উদাহরণস্বরূপ: যদি একটি ওয়েব পৃষ্ঠায় ত্রুটি থাকে, কখন সেগুলো ঘটেছে তা জানা কখনও কখনও সহায়ক হতে পারে। ব্রাউজারের DevTools কনফিগার করা যেতে পারে এই তথ্য ধারণ করার জন্য। #### জনপ্রিয় ব্রাউজার এবং DevTools @@ -147,7 +147,7 @@ back add r0,r1 ### কমান্ড লাইন টুলস -কিছু ডেভেলপার তাদের দৈনন্দিন কাজের জন্য কম গ্রাফিকাল ভিউ পছন্দ করেন এবং কমান্ড লাইন ব্যবহার করে এটি অর্জন করেন। কোড লেখার জন্য প্রচুর টাইপিং প্রয়োজন এবং কিছু ডেভেলপার তাদের কীবোর্ডের ফ্লো ব্যাহত করতে চান না। তারা ডেস্কটপ উইন্ডো পরিবর্তন, বিভিন্ন ফাইল নিয়ে কাজ করা এবং টুল ব্যবহার করার জন্য কীবোর্ড শর্টকাট ব্যবহার করেন। বেশিরভাগ কাজ মাউস দিয়ে সম্পন্ন করা যায়, কিন্তু কমান্ড লাইনের একটি সুবিধা হলো অনেক কিছু কমান্ড লাইন টুলস দিয়ে সম্পন্ন করা যায় মাউস এবং কীবোর্ডের মধ্যে পরিবর্তন না করেই। কমান্ড লাইনের আরেকটি সুবিধা হলো এগুলো কনফিগারযোগ্য এবং আপনি একটি কাস্টম কনফিগারেশন সংরক্ষণ করতে পারেন, পরে এটি পরিবর্তন করতে পারেন এবং এটি অন্য ডেভেলপমেন্ট মেশিনে ইমপোর্ট করতে পারেন। যেহেতু ডেভেলপমেন্ট এনভায়রনমেন্টগুলো প্রতিটি ডেভেলপারের জন্য অনন্য, কিছু ডেভেলপার কমান্ড লাইন এড়িয়ে চলেন, কিছু সম্পূর্ণভাবে এর উপর নির্ভর করেন, এবং কিছু মিশ্র পদ্ধতি পছন্দ করেন। +কিছু ডেভেলপার তাদের দৈনন্দিন কাজের জন্য কম গ্রাফিকাল ভিউ পছন্দ করেন এবং কমান্ড লাইন ব্যবহার করে এটি সম্পন্ন করেন। কোড লেখার জন্য প্রচুর টাইপিং প্রয়োজন এবং কিছু ডেভেলপার তাদের কীবোর্ডের ফ্লো ব্যাহত করতে চান না। তারা ডেস্কটপ উইন্ডো পরিবর্তন করতে, বিভিন্ন ফাইল নিয়ে কাজ করতে এবং সরঞ্জাম ব্যবহার করতে কীবোর্ড শর্টকাট ব্যবহার করেন। বেশিরভাগ কাজ মাউস দিয়ে সম্পন্ন করা যায়, তবে কমান্ড লাইনের একটি সুবিধা হলো অনেক কিছু কমান্ড লাইন টুলস দিয়ে সম্পন্ন করা যায় মাউস এবং কীবোর্ডের মধ্যে পরিবর্তন না করেই। কমান্ড লাইনের আরেকটি সুবিধা হলো এগুলো কনফিগারযোগ্য এবং আপনি একটি কাস্টম কনফিগারেশন সংরক্ষণ করতে পারেন, পরে এটি পরিবর্তন করতে পারেন এবং এটি অন্য ডেভেলপমেন্ট মেশিনে ইমপোর্ট করতে পারেন। যেহেতু ডেভেলপমেন্ট এনভায়রনমেন্টগুলো প্রতিটি ডেভেলপারের জন্য এতই অনন্য, কিছু ডেভেলপার কমান্ড লাইন ব্যবহার এড়িয়ে চলেন, কিছু সম্পূর্ণভাবে এর উপর নির্ভর করেন এবং কিছু মিশ্রণ পছন্দ করেন। ### জনপ্রিয় কমান্ড লাইন অপশন @@ -182,17 +182,17 @@ back add r0,r1 ### ডকুমেন্টেশন -যখন একজন ডেভেলপার নতুন কিছু শিখতে চান, তারা সাধারণত ডকুমেন্টেশনের দিকে ঝোঁকেন এটি কীভাবে ব্যবহার করতে হয় তা শিখতে। ডেভেলপাররা প্রায়ই ডকুমেন্টেশনের উপর নির্ভর করেন টুলস এবং ভাষাগুলো সঠিকভাবে ব্যবহার করার জন্য এবং এটি কীভাবে কাজ করে তার গভীর জ্ঞান অর্জনের জন্য। +যখন একজন ডেভেলপার নতুন কিছু শিখতে চান, তারা সম্ভবত ডকুমেন্টেশনের দিকে ঝুঁকবেন এটি কীভাবে ব্যবহার করতে হয় তা শিখতে। ডেভেলপাররা প্রায়ই ডকুমেন্টেশনের উপর নির্ভর করেন সরঞ্জাম এবং ভাষাগুলো সঠিকভাবে ব্যবহার করার জন্য এবং এটি কীভাবে কাজ করে তার গভীর জ্ঞান অর্জনের জন্য। #### ওয়েব ডেভেলপমেন্টের জনপ্রিয় ডকুমেন্টেশন -- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozilla থেকে, যারা [Firefox](https://www.mozilla.org/firefox/) ব্রাউজার প্রকাশ করেছে +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozilla থেকে, [Firefox](https://www.mozilla.org/firefox/) ব্রাউজারের প্রকাশক - [Frontend Masters](https://frontendmasters.com/learn/) -- [Web.dev](https://web.dev), Google থেকে, যারা [Chrome](https://www.google.com/chrome/) প্রকাশ করেছে +- [Web.dev](https://web.dev), Google থেকে, [Chrome](https://www.google.com/chrome/) এর প্রকাশক - [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [Microsoft Edge](https://www.microsoft.com/edge) এর জন্য - [W3 Schools](https://www.w3schools.com/where_to_start.asp) -✅ একটু গবেষণা করুন: এখন যেহেতু আপনি একজন ওয়েব ডেভেলপারের এনভায়রনমেন্টের মৌলিক বিষয়গুলো জানেন, এটি একজন ওয়েব ডিজাইনারের এনভায়রনমেন্টের সাথে তুলনা করুন। +✅ একটু গবেষণা করুন: এখন যেহেতু আপনি একজন ওয়েব ডেভেলপারের পরিবেশের মৌলিক বিষয়গুলো জানেন, এটি একজন ওয়েব ডিজাইনারের পরিবেশের সাথে তুলনা করুন এবং পার্থক্য খুঁজে বের করুন। --- @@ -200,16 +200,18 @@ back add r0,r1 কিছু প্রোগ্রামিং ভাষার তুলনা করুন। জাভাস্ক্রিপ্ট বনাম জাভার কিছু অনন্য বৈশিষ্ট্য কী? COBOL বনাম Go এর ক্ষেত্রে কীভাবে তুলনা করবেন? -## পোস্ট-লেকচার কুইজ -[পোস্ট-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/2) +## পোস্ট-পাঠ কুইজ +[পোস্ট-পাঠ কুইজ](https://ff-quizzes.netlify.app/web/) -## রিভিউ এবং সেলফ স্টাডি +## পর্যালোচনা এবং স্ব-অধ্যয়ন -প্রোগ্রামারের জন্য উপলব্ধ বিভিন্ন ভাষা সম্পর্কে একটু পড়াশোনা করুন। একটি ভাষায় একটি লাইন লিখুন, এবং তারপর এটি অন্য দুইটি ভাষায় পুনরায় লিখুন। আপনি কী শিখলেন? +প্রোগ্রামারের জন্য উপলব্ধ বিভিন্ন ভাষা সম্পর্কে একটু পড়াশোনা করুন। একটি ভাষায় একটি লাইন লিখুন, এবং তারপর এটি অন্য দুটি ভাষায় পুনরায় লিখুন। আপনি কী শিখলেন? ## অ্যাসাইনমেন্ট -[Reading the Docs](assignment.md) +[ডকুমেন্ট পড়া](assignment.md) + +--- **অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়বদ্ধ নই। \ No newline at end of file +এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file diff --git a/translations/bn/1-getting-started-lessons/2-github-basics/README.md b/translations/bn/1-getting-started-lessons/2-github-basics/README.md index c59307fc..0f5cfde2 100644 --- a/translations/bn/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/bn/1-getting-started-lessons/2-github-basics/README.md @@ -1,8 +1,8 @@ -# জাভাস্ক্রিপ্ট বেসিকস: ডেটা টাইপস +# জাভাস্ক্রিপ্টের বেসিক: ডেটা টাইপস -![জাভাস্ক্রিপ্ট বেসিকস - ডেটা টাইপস](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.bn.png) +![জাভাস্ক্রিপ্টের বেসিক - ডেটা টাইপস](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.bn.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) ## প্রাক-লেকচার কুইজ -[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/7) +[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/) এই পাঠে জাভাস্ক্রিপ্টের বেসিক বিষয়গুলো আলোচনা করা হয়েছে, যা ওয়েবের ইন্টারঅ্যাকটিভিটি প্রদান করে। > আপনি এই পাঠটি [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon) এ নিতে পারেন! -[![ভেরিয়েবলস](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "জাভাস্ক্রিপ্টে ভেরিয়েবলস") +[![ভ্যারিয়েবলস](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "জাভাস্ক্রিপ্টে ভ্যারিয়েবলস") [![জাভাস্ক্রিপ্টে ডেটা টাইপস](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "জাভাস্ক্রিপ্টে ডেটা টাইপস") -> 🎥 উপরের ছবিগুলিতে ক্লিক করুন ভেরিয়েবলস এবং ডেটা টাইপস সম্পর্কিত ভিডিও দেখার জন্য +> 🎥 উপরের ছবিগুলিতে ক্লিক করুন ভ্যারিয়েবলস এবং ডেটা টাইপস নিয়ে ভিডিও দেখার জন্য -চলুন ভেরিয়েবলস এবং তাদের মধ্যে থাকা ডেটা টাইপস দিয়ে শুরু করি! +চলুন ভ্যারিয়েবলস এবং তাদের মধ্যে থাকা ডেটা টাইপস দিয়ে শুরু করি! -## ভেরিয়েবলস +## ভ্যারিয়েবলস -ভেরিয়েবলস এমন মান সংরক্ষণ করে যা আপনার কোডে ব্যবহার এবং পরিবর্তন করা যায়। +ভ্যারিয়েবলস এমন মান সংরক্ষণ করে যা আপনার কোডে ব্যবহার এবং পরিবর্তন করা যায়। -একটি ভেরিয়েবল তৈরি এবং **ডিক্লেয়ার** করার সিনট্যাক্স হলো **[keyword] [name]**। এটি দুটি অংশ নিয়ে গঠিত: +একটি ভ্যারিয়েবল তৈরি এবং **ডিক্লেয়ার** করার সিনট্যাক্স হলো **[keyword] [name]**। এটি দুটি অংশ নিয়ে গঠিত: - **কীওয়ার্ড**। কীওয়ার্ড হতে পারে `let` বা `var`। -✅ `let` কীওয়ার্ডটি ES6-এ পরিচিত হয় এবং এটি ভেরিয়েবলকে একটি _ব্লক স্কোপ_ প্রদান করে। `var` এর পরিবর্তে `let` ব্যবহার করার পরামর্শ দেওয়া হয়। আমরা ভবিষ্যতে ব্লক স্কোপ নিয়ে আরও বিস্তারিত আলোচনা করব। -- **ভেরিয়েবলের নাম**, এটি আপনি নিজের পছন্দমতো নির্ধারণ করবেন। +✅ `let` কীওয়ার্ডটি ES6 এ প্রবর্তিত হয়েছে এবং এটি ভ্যারিয়েবলকে একটি _ব্লক স্কোপ_ প্রদান করে। `var` এর পরিবর্তে `let` ব্যবহার করার পরামর্শ দেওয়া হয়। আমরা ভবিষ্যতে ব্লক স্কোপ নিয়ে আরও বিস্তারিত আলোচনা করব। +- **ভ্যারিয়েবলের নাম**, এটি আপনি নিজে পছন্দ করে নির্ধারণ করবেন। -### কাজ - ভেরিয়েবলের সাথে কাজ করা +### কাজ - ভ্যারিয়েবল নিয়ে কাজ করা -1. **একটি ভেরিয়েবল ডিক্লেয়ার করুন**। `let` কীওয়ার্ড ব্যবহার করে একটি ভেরিয়েবল ডিক্লেয়ার করুন: +1. **একটি ভ্যারিয়েবল ডিক্লেয়ার করুন**। `let` কীওয়ার্ড ব্যবহার করে একটি ভ্যারিয়েবল ডিক্লেয়ার করুন: ```javascript let myVariable; ``` - `myVariable` এখন `let` কীওয়ার্ড ব্যবহার করে ডিক্লেয়ার করা হয়েছে। এটি বর্তমানে কোনো মান ধারণ করছে না। + এখন `myVariable` ভ্যারিয়েবলটি `let` কীওয়ার্ড ব্যবহার করে ডিক্লেয়ার করা হয়েছে। এটি বর্তমানে কোনো মান ধারণ করছে না। -1. **একটি মান অ্যাসাইন করুন**। `=` অপারেটর ব্যবহার করে একটি ভেরিয়েবলে মান সংরক্ষণ করুন, এর পরে প্রত্যাশিত মান দিন। +1. **একটি মান অ্যাসাইন করুন**। `=` অপারেটর ব্যবহার করে একটি ভ্যারিয়েবলে মান সংরক্ষণ করুন, এর পরে প্রত্যাশিত মান দিন। ```javascript myVariable = 123; ``` - > নোট: এই পাঠে `=` এর ব্যবহার "অ্যাসাইনমেন্ট অপারেটর" বোঝায়, যা একটি ভেরিয়েবলে মান সেট করতে ব্যবহৃত হয়। এটি সমতা নির্দেশ করে না। + > নোট: এই পাঠে `=` এর ব্যবহার "অ্যাসাইনমেন্ট অপারেটর" বোঝায়, যা একটি ভ্যারিয়েবলে মান সেট করতে ব্যবহৃত হয়। এটি সমতা নির্দেশ করে না। - `myVariable` এখন 123 মান দিয়ে *ইনিশিয়ালাইজড* হয়েছে। + এখন `myVariable` ভ্যারিয়েবলটি 123 মান দিয়ে *ইনিশিয়ালাইজড* হয়েছে। 1. **রিফ্যাক্টর করুন**। আপনার কোডটি নিম্নলিখিত স্টেটমেন্ট দিয়ে প্রতিস্থাপন করুন। @@ -64,30 +64,30 @@ CO_OP_TRANSLATOR_METADATA: let myVariable = 123; ``` - উপরেরটি একটি _স্পষ্ট ইনিশিয়ালাইজেশন_, যেখানে একটি ভেরিয়েবল ডিক্লেয়ার করা হয় এবং একই সাথে একটি মান অ্যাসাইন করা হয়। + উপরেরটি একটি _স্পষ্ট ইনিশিয়ালাইজেশন_, যেখানে একটি ভ্যারিয়েবল ডিক্লেয়ার করা হয় এবং একই সাথে একটি মান অ্যাসাইন করা হয়। -1. **ভেরিয়েবলের মান পরিবর্তন করুন**। ভেরিয়েবলের মান নিম্নলিখিতভাবে পরিবর্তন করুন: +1. **ভ্যারিয়েবলের মান পরিবর্তন করুন**। ভ্যারিয়েবলের মান নিম্নলিখিতভাবে পরিবর্তন করুন: ```javascript myVariable = 321; ``` - একবার একটি ভেরিয়েবল ডিক্লেয়ার করা হলে, আপনি কোডের যেকোনো স্থানে `=` অপারেটর এবং নতুন মান ব্যবহার করে এর মান পরিবর্তন করতে পারেন। + একবার একটি ভ্যারিয়েবল ডিক্লেয়ার করা হলে, আপনি কোডের যেকোনো স্থানে `=` অপারেটর এবং নতুন মান ব্যবহার করে এর মান পরিবর্তন করতে পারেন। ✅ চেষ্টা করুন! আপনি আপনার ব্রাউজারেই জাভাস্ক্রিপ্ট লিখতে পারেন। একটি ব্রাউজার উইন্ডো খুলুন এবং ডেভেলপার টুলস-এ যান। কনসোলে টাইপ করুন `let myVariable = 123`, এন্টার চাপুন, তারপর টাইপ করুন `myVariable`। কী ঘটে? নোট করুন, আপনি এই ধারণাগুলি পরবর্তী পাঠে আরও শিখবেন। ## কনস্ট্যান্টস -একটি কনস্ট্যান্ট ডিক্লেয়ার এবং ইনিশিয়ালাইজ করার প্রক্রিয়া ভেরিয়েবলের মতোই, তবে এখানে `const` কীওয়ার্ড ব্যবহৃত হয়। সাধারণত কনস্ট্যান্টস সব বড় হাতের অক্ষরে ডিক্লেয়ার করা হয়। +একটি কনস্ট্যান্ট ডিক্লেয়ার এবং ইনিশিয়ালাইজ করার প্রক্রিয়া ভ্যারিয়েবলের মতোই, তবে এখানে `const` কীওয়ার্ড ব্যবহার করা হয়। সাধারণত কনস্ট্যান্টস সব বড় হাতের অক্ষরে ডিক্লেয়ার করা হয়। ```javascript const MY_VARIABLE = 123; ``` -কনস্ট্যান্টস ভেরিয়েবলের মতোই, তবে দুটি ব্যতিক্রম রয়েছে: +কনস্ট্যান্টস ভ্যারিয়েবলের মতোই, তবে দুটি ব্যতিক্রম রয়েছে: -- **অবশ্যই একটি মান থাকতে হবে**। কনস্ট্যান্টস ইনিশিয়ালাইজড হতে হবে, নতুবা কোড চালানোর সময় একটি ত্রুটি ঘটবে। -- **রেফারেন্স পরিবর্তন করা যাবে না**। একবার ইনিশিয়ালাইজড হলে কনস্ট্যান্টের রেফারেন্স পরিবর্তন করা যাবে না, নতুবা একটি ত্রুটি ঘটবে। চলুন দুটি উদাহরণ দেখি: +- **অবশ্যই একটি মান থাকতে হবে**। কনস্ট্যান্টস ইনিশিয়ালাইজড না হলে কোড চালানোর সময় একটি ত্রুটি ঘটবে। +- **রেফারেন্স পরিবর্তন করা যাবে না**। একবার ইনিশিয়ালাইজড হলে কনস্ট্যান্টের রেফারেন্স পরিবর্তন করা যাবে না, অন্যথায় কোড চালানোর সময় ত্রুটি ঘটবে। দুটি উদাহরণ দেখা যাক: - **সাধারণ মান**। নিম্নলিখিতটি অনুমোদিত নয়: ```javascript @@ -111,11 +111,11 @@ const MY_VARIABLE = 123; উপরের ক্ষেত্রে আপনি অবজেক্টের মান পরিবর্তন করছেন, কিন্তু রেফারেন্সটি নয়, যা অনুমোদিত। - > নোট, একটি `const` মানে রেফারেন্স পুনরায় অ্যাসাইনমেন্ট থেকে সুরক্ষিত। তবে মানটি _অপরিবর্তনীয়_ নয় এবং এটি পরিবর্তন হতে পারে, বিশেষত যদি এটি একটি জটিল কনস্ট্রাক্ট হয় যেমন একটি অবজেক্ট। + > নোট, একটি `const` মানে রেফারেন্সটি পুনরায় অ্যাসাইনমেন্ট থেকে সুরক্ষিত। তবে মানটি _অপরিবর্তনীয়_ নয় এবং এটি পরিবর্তন হতে পারে, বিশেষত যদি এটি একটি জটিল কনস্ট্রাক্ট যেমন অবজেক্ট হয়। ## ডেটা টাইপস -ভেরিয়েবলস বিভিন্ন ধরনের মান সংরক্ষণ করতে পারে, যেমন সংখ্যা এবং টেক্সট। এই বিভিন্ন ধরনের মানকে **ডেটা টাইপ** বলা হয়। ডেটা টাইপস সফটওয়্যার ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ কারণ এটি ডেভেলপারদের সিদ্ধান্ত নিতে সাহায্য করে যে কোডটি কীভাবে লেখা উচিত এবং সফটওয়্যারটি কীভাবে চলবে। তদ্ব্যতীত, কিছু ডেটা টাইপের অনন্য বৈশিষ্ট্য রয়েছে যা একটি মানে অতিরিক্ত তথ্য রূপান্তর বা বের করতে সাহায্য করে। +ভ্যারিয়েবলস বিভিন্ন ধরনের মান সংরক্ষণ করতে পারে, যেমন সংখ্যা এবং টেক্সট। এই বিভিন্ন ধরনের মানকে **ডেটা টাইপ** বলা হয়। ডেটা টাইপস সফটওয়্যার ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ, কারণ এটি ডেভেলপারদের সিদ্ধান্ত নিতে সাহায্য করে যে কোডটি কীভাবে লেখা উচিত এবং সফটওয়্যারটি কীভাবে চলবে। তদ্ব্যতীত, কিছু ডেটা টাইপের অনন্য বৈশিষ্ট্য রয়েছে যা একটি মানে অতিরিক্ত তথ্য রূপান্তর বা বের করতে সাহায্য করে। ✅ ডেটা টাইপসকে জাভাস্ক্রিপ্ট ডেটা প্রিমিটিভসও বলা হয়, কারণ এগুলি ভাষার দ্বারা প্রদত্ত সর্বনিম্ন স্তরের ডেটা টাইপ। এখানে ৭টি প্রিমিটিভ ডেটা টাইপ রয়েছে: string, number, bigint, boolean, undefined, null এবং symbol। এক মিনিট সময় নিয়ে কল্পনা করুন প্রতিটি প্রিমিটিভ কী প্রতিনিধিত্ব করে। একটি `zebra` কী? `0` কী? `true` কী? @@ -125,19 +125,19 @@ const MY_VARIABLE = 123; `let myVariable = 123;` -ভেরিয়েবলস সব ধরনের সংখ্যা সংরক্ষণ করতে পারে, যেমন দশমিক বা ঋণাত্মক সংখ্যা। সংখ্যাগুলি গাণিতিক অপারেটরের সাথে ব্যবহার করা যায়, যা [পরবর্তী অংশে](../../../../2-js-basics/1-data-types) আলোচনা করা হয়েছে। +ভ্যারিয়েবলস সব ধরনের সংখ্যা সংরক্ষণ করতে পারে, যেমন দশমিক বা ঋণাত্মক সংখ্যা। সংখ্যাগুলি গাণিতিক অপারেটরের সাথে ব্যবহার করা যায়, যা [পরবর্তী অংশে](../../../../2-js-basics/1-data-types) আলোচনা করা হয়েছে। ### গাণিতিক অপারেটরস গাণিতিক ফাংশন সম্পাদনের জন্য বিভিন্ন ধরনের অপারেটর রয়েছে, এবং এর মধ্যে কিছু এখানে তালিকাভুক্ত করা হলো: -| প্রতীক | বর্ণনা | উদাহরণ | -| ------ | ---------------------------------------------------------------------- | -------------------------------- | -| `+` | **যোগ**: দুটি সংখ্যার যোগফল নির্ণয় করে | `1 + 2 //প্রত্যাশিত উত্তর 3` | -| `-` | **বিয়োগ**: দুটি সংখ্যার পার্থক্য নির্ণয় করে | `1 - 2 //প্রত্যাশিত উত্তর -1` | -| `*` | **গুণ**: দুটি সংখ্যার গুণফল নির্ণয় করে | `1 * 2 //প্রত্যাশিত উত্তর 2` | -| `/` | **ভাগ**: দুটি সংখ্যার ভাগফল নির্ণয় করে | `1 / 2 //প্রত্যাশিত উত্তর 0.5` | -| `%` | **অবশিষ্টাংশ**: দুটি সংখ্যার ভাগফল থেকে অবশিষ্টাংশ নির্ণয় করে | `1 % 2 //প্রত্যাশিত উত্তর 1` | +| প্রতীক | বিবরণ | উদাহরণ | +| ------ | --------------------------------------------------------------------- | -------------------------------- | +| `+` | **যোগ**: দুটি সংখ্যার যোগফল নির্ণয় করে | `1 + 2 //প্রত্যাশিত উত্তর 3` | +| `-` | **বিয়োগ**: দুটি সংখ্যার পার্থক্য নির্ণয় করে | `1 - 2 //প্রত্যাশিত উত্তর -1` | +| `*` | **গুণ**: দুটি সংখ্যার গুণফল নির্ণয় করে | `1 * 2 //প্রত্যাশিত উত্তর 2` | +| `/` | **ভাগ**: দুটি সংখ্যার ভাগফল নির্ণয় করে | `1 / 2 //প্রত্যাশিত উত্তর 0.5` | +| `%` | **অবশিষ্টাংশ**: দুটি সংখ্যার ভাগফল থেকে অবশিষ্টাংশ নির্ণয় করে | `1 % 2 //প্রত্যাশিত উত্তর 1` | ✅ চেষ্টা করুন! আপনার ব্রাউজারের কনসোলে একটি গাণিতিক অপারেশন চেষ্টা করুন। ফলাফল কি আপনাকে অবাক করে? @@ -147,9 +147,9 @@ const MY_VARIABLE = 123; - `'এটি একটি স্ট্রিং'` - `"এটিও একটি স্ট্রিং"` -- `let myString = 'এটি একটি স্ট্রিং মান যা একটি ভেরিয়েবলে সংরক্ষিত';` +- `let myString = 'এটি একটি স্ট্রিং মান যা একটি ভ্যারিয়েবলে সংরক্ষিত';` -স্ট্রিং লেখার সময় উদ্ধৃতি ব্যবহার করতে মনে রাখুন, নতুবা জাভাস্ক্রিপ্ট এটি একটি ভেরিয়েবলের নাম বলে ধরে নেবে। +স্ট্রিং লেখার সময় উদ্ধৃতি ব্যবহার করতে ভুলবেন না, অন্যথায় জাভাস্ক্রিপ্ট এটি একটি ভ্যারিয়েবলের নাম বলে ধরে নেবে। ### স্ট্রিং ফরম্যাটিং @@ -167,9 +167,9 @@ myString1 + ", " + myString2 + "!"; //Hello, World! ``` -✅ কেন `1 + 1 = 2` জাভাস্ক্রিপ্টে, কিন্তু `'1' + '1' = 11`? চিন্তা করুন। `'1' + 1` এর ক্ষেত্রে কী হয়? +✅ কেন জাভাস্ক্রিপ্টে `1 + 1 = 2`, কিন্তু `'1' + '1' = 11`? চিন্তা করুন। `'1' + 1` এর ক্ষেত্রে কী হয়? -**টেমপ্লেট লিটারালস** স্ট্রিং ফরম্যাট করার আরেকটি উপায়, যেখানে উদ্ধৃতির পরিবর্তে ব্যাকটিক ব্যবহার করা হয়। যা কিছু সাধারণ টেক্সট নয়, তা `${ }` প্লেসহোল্ডারের মধ্যে রাখতে হবে। এর মধ্যে স্ট্রিং হতে পারে এমন যেকোনো ভেরিয়েবল অন্তর্ভুক্ত। +**টেমপ্লেট লিটারালস** স্ট্রিং ফরম্যাট করার আরেকটি উপায়, যেখানে উদ্ধৃতির পরিবর্তে ব্যাকটিক ব্যবহার করা হয়। যা কিছু সাধারণ টেক্সট নয়, তা `${ }` প্লেসহোল্ডারের মধ্যে রাখতে হবে। এর মধ্যে স্ট্রিং হতে পারে এমন যেকোনো ভ্যারিয়েবল অন্তর্ভুক্ত। ```javascript let myString1 = "Hello"; @@ -179,29 +179,29 @@ let myString2 = "World"; `${myString1}, ${myString2}!` //Hello, World! ``` -আপনার ফরম্যাটিং লক্ষ্য অর্জনে যেকোনো পদ্ধতি ব্যবহার করতে পারেন, তবে টেমপ্লেট লিটারালস স্পেস এবং লাইন ব্রেককে সম্মান করবে। +আপনি যেকোনো পদ্ধতি ব্যবহার করে আপনার ফরম্যাটিং লক্ষ্য অর্জন করতে পারেন, তবে টেমপ্লেট লিটারালস স্পেস এবং লাইন ব্রেককে সম্মান করবে। -✅ কখন আপনি একটি টেমপ্লেট লিটারাল ব্যবহার করবেন এবং কখন একটি সাধারণ স্ট্রিং ব্যবহার করবেন? +✅ আপনি কখন একটি টেমপ্লেট লিটারাল এবং কখন একটি সাধারণ স্ট্রিং ব্যবহার করবেন? ### বুলিয়ানস -বুলিয়ানসের মান কেবল দুটি হতে পারে: `true` বা `false`। বুলিয়ানস নির্ধারণ করতে সাহায্য করে কোন কোডের লাইনগুলো নির্দিষ্ট শর্ত পূরণ হলে চলবে। অনেক ক্ষেত্রে, [অপারেটরস](../../../../2-js-basics/1-data-types) বুলিয়ানের মান সেট করতে সাহায্য করে এবং আপনি প্রায়ই ভেরিয়েবলসকে ইনিশিয়ালাইজড বা তাদের মান অপারেটরের মাধ্যমে আপডেট হতে দেখবেন। +বুলিয়ানসের মান কেবল দুটি হতে পারে: `true` বা `false`। বুলিয়ানস নির্ধারণ করতে সাহায্য করে কোন কোডের লাইনগুলো নির্দিষ্ট শর্ত পূরণ হলে চলবে। অনেক ক্ষেত্রে, [অপারেটরস](../../../../2-js-basics/1-data-types) বুলিয়ানের মান সেট করতে সাহায্য করে এবং আপনি প্রায়ই ভ্যারিয়েবলসকে ইনিশিয়ালাইজড বা তাদের মান অপারেটরের মাধ্যমে আপডেট করতে দেখবেন। - `let myTrueBool = true` - `let myFalseBool = false` -✅ একটি ভেরিয়েবলকে 'truthy' বলে বিবেচনা করা যেতে পারে যদি এটি একটি বুলিয়ান `true` এ মূল্যায়িত হয়। মজার বিষয় হলো, জাভাস্ক্রিপ্টে [সব মান truthy, যদি না সেগুলো falsy হিসেবে সংজ্ঞায়িত হয়](https://developer.mozilla.org/docs/Glossary/Truthy)। +✅ একটি ভ্যারিয়েবলকে 'truthy' বিবেচনা করা যেতে পারে যদি এটি একটি বুলিয়ান `true` এ মূল্যায়িত হয়। মজার বিষয় হলো, জাভাস্ক্রিপ্টে [সব মান truthy, যদি না সেগুলো falsy হিসেবে সংজ্ঞায়িত হয়](https://developer.mozilla.org/docs/Glossary/Truthy)। --- ## 🚀 চ্যালেঞ্জ -জাভাস্ক্রিপ্ট মাঝে মাঝে ডেটা টাইপস পরিচালনার অপ্রত্যাশিত উপায়গুলোর জন্য কুখ্যাত। এই 'gotchas' সম্পর্কে একটু গবেষণা করুন। উদাহরণস্বরূপ: কেস সেনসিটিভিটি সমস্যার কারণ হতে পারে! এটি আপনার কনসোলে চেষ্টা করুন: `let age = 1; let Age = 2; age == Age` (ফলাফল `false` -- কেন?)। আপনি আর কী কী gotchas খুঁজে পেতে পারেন? +জাভাস্ক্রিপ্ট মাঝে মাঝে ডেটা টাইপস পরিচালনার অপ্রত্যাশিত উপায়গুলোর জন্য কুখ্যাত। এই 'gotchas' নিয়ে একটু গবেষণা করুন। উদাহরণস্বরূপ: কেস সেনসিটিভিটি সমস্যার কারণ হতে পারে! এটি আপনার কনসোলে চেষ্টা করুন: `let age = 1; let Age = 2; age == Age` (ফলাফল `false` -- কেন?)। আপনি আর কী কী gotchas খুঁজে পেতে পারেন? ## পোস্ট-লেকচার কুইজ -[পোস্ট-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/8) +[পোস্ট-লেকচার কুইজ](https://ff-quizzes.netlify.app) -## পর্যালোচনা ও স্ব-অধ্যয়ন +## রিভিউ এবং স্ব-অধ্যয়ন [জাভাস্ক্রিপ্ট এক্সারসাইজের এই তালিকা](https://css-tricks.com/snippets/javascript/) দেখুন এবং একটি চেষ্টা করুন। আপনি কী শিখলেন? @@ -209,5 +209,7 @@ let myString2 = "World"; [ডেটা টাইপস প্র্যাকটিস](assignment.md) +--- + **অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়বদ্ধ থাকব না। \ No newline at end of file +এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখুন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file diff --git a/translations/bn/2-js-basics/2-functions-methods/README.md b/translations/bn/2-js-basics/2-functions-methods/README.md index d1527e61..88406d67 100644 --- a/translations/bn/2-js-basics/2-functions-methods/README.md +++ b/translations/bn/2-js-basics/2-functions-methods/README.md @@ -1,8 +1,8 @@ # জাভাস্ক্রিপ্টের বুনিয়াদি: অ্যারে এবং লুপ -![জাভাস্ক্রিপ্ট বুনিয়াদি - অ্যারে](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.bn.png) +![জাভাস্ক্রিপ্ট বেসিকস - অ্যারে](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.bn.png) > স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac) ## প্রাক-লেকচার কুইজ @@ -37,13 +37,13 @@ CO_OP_TRANSLATOR_METADATA: let myArray = []; ``` -এটি একটি খালি অ্যারে, তবে অ্যারে ডেটা দিয়ে পূর্ণ অবস্থায়ও ঘোষণা করা যেতে পারে। একটি অ্যারেতে একাধিক মান কমা দিয়ে পৃথক করা হয়। +এটি একটি খালি অ্যারে, তবে অ্যারে ডেটা দিয়ে পূর্ণ অবস্থায় ঘোষণা করা যেতে পারে। একটি অ্যারেতে একাধিক মান কমা দিয়ে পৃথক করা হয়। ```javascript let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; ``` -অ্যারের মানগুলো একটি অনন্য মান পায়, যাকে **ইন্ডেক্স** বলা হয়, যা অ্যারের শুরু থেকে তার দূরত্বের উপর ভিত্তি করে একটি পূর্ণসংখ্যা হিসেবে বরাদ্দ করা হয়। উপরের উদাহরণে, "Chocolate" স্ট্রিংটির ইন্ডেক্স হলো 0, এবং "Rocky Road"-এর ইন্ডেক্স হলো 4। ইন্ডেক্স ব্যবহার করে স্কয়ার ব্র্যাকেটের মাধ্যমে অ্যারের মানগুলো পুনরুদ্ধার, পরিবর্তন বা যোগ করা যায়। +অ্যারের মানগুলোকে একটি অনন্য মান, **ইন্ডেক্স** নামে পরিচিত, দিয়ে বরাদ্দ করা হয়। এটি একটি পূর্ণসংখ্যা যা অ্যারের শুরু থেকে তার দূরত্বের উপর ভিত্তি করে বরাদ্দ করা হয়। উপরের উদাহরণে, "Chocolate" স্ট্রিংটির ইন্ডেক্স হলো 0, এবং "Rocky Road"-এর ইন্ডেক্স হলো 4। ইন্ডেক্স ব্যবহার করে স্কয়ার ব্র্যাকেটের মাধ্যমে অ্যারের মানগুলো পুনরুদ্ধার, পরিবর্তন বা যোগ করা যায়। ✅ আপনাকে কি অবাক করে যে অ্যারে শূন্য ইন্ডেক্স থেকে শুরু হয়? কিছু প্রোগ্রামিং ভাষায় ইন্ডেক্স 1 থেকে শুরু হয়। এর একটি আকর্ষণীয় ইতিহাস রয়েছে, যা আপনি [উইকিপিডিয়ায় পড়তে পারেন](https://en.wikipedia.org/wiki/Zero-based_numbering)। @@ -77,14 +77,14 @@ iceCreamFlavors.length; //5 ## লুপ -লুপ আমাদের পুনরাবৃত্তিমূলক বা **ইটারেটিভ** কাজ সম্পাদন করতে দেয় এবং এটি অনেক সময় এবং কোড সাশ্রয় করতে পারে। প্রতিটি ইটারেশন ভেরিয়েবল, মান এবং শর্তে পরিবর্তিত হতে পারে। জাভাস্ক্রিপ্টে বিভিন্ন ধরনের লুপ রয়েছে, এবং তাদের মধ্যে ছোট পার্থক্য রয়েছে, তবে মূলত তারা একই কাজ করে: ডেটার উপর লুপ করা। +লুপ আমাদের পুনরাবৃত্তিমূলক বা **ইটারেটিভ** কাজ সম্পাদন করতে দেয় এবং এটি অনেক সময় এবং কোড বাঁচাতে পারে। প্রতিটি ইটারেশন তাদের ভেরিয়েবল, মান এবং শর্তে ভিন্ন হতে পারে। জাভাস্ক্রিপ্টে বিভিন্ন ধরনের লুপ রয়েছে, এবং তাদের মধ্যে ছোট পার্থক্য রয়েছে, তবে মূলত তারা একই কাজ করে: ডেটার উপর লুপ করা। ### ফর লুপ `for` লুপে ইটারেট করার জন্য ৩টি অংশ প্রয়োজন: - `counter` একটি ভেরিয়েবল যা সাধারণত একটি সংখ্যা দিয়ে শুরু হয় এবং ইটারেশনের সংখ্যা গণনা করে - `condition` একটি এক্সপ্রেশন যা তুলনা অপারেটর ব্যবহার করে লুপকে `false` হলে থামায় -- `iteration-expression` প্রতিটি ইটারেশনের শেষে চালানো হয়, সাধারণত কাউন্টার মান পরিবর্তন করতে ব্যবহৃত হয় +- `iteration-expression` প্রতিটি ইটারেশনের শেষে চালানো হয়, সাধারণত কাউন্টার মান পরিবর্তনের জন্য ব্যবহৃত হয় ```javascript // Counting up to 10 @@ -97,7 +97,7 @@ for (let i = 0; i < 10; i++) { ### হোয়াইল লুপ -`for` লুপের সিনট্যাক্সের বিপরীতে, `while` লুপে শুধুমাত্র একটি শর্ত প্রয়োজন যা শর্ত `false` হলে লুপ থামাবে। লুপের শর্তগুলো সাধারণত অন্যান্য মানের উপর নির্ভর করে, যেমন কাউন্টার, এবং লুপ চলাকালীন এগুলো পরিচালনা করতে হয়। কাউন্টারের প্রাথমিক মানগুলো লুপের বাইরে তৈরি করতে হয়, এবং শর্ত পূরণের জন্য যেকোনো এক্সপ্রেশন, যার মধ্যে কাউন্টার পরিবর্তনও অন্তর্ভুক্ত, লুপের ভিতরে বজায় রাখতে হয়। +`for` লুপের সিনট্যাক্সের বিপরীতে, `while` লুপে শুধুমাত্র একটি শর্ত প্রয়োজন যা শর্ত `false` হলে লুপ থামাবে। লুপের শর্তগুলো সাধারণত অন্যান্য মানের উপর নির্ভর করে, যেমন কাউন্টার, এবং লুপ চলাকালীন এগুলো পরিচালনা করতে হয়। কাউন্টারের জন্য প্রাথমিক মান লুপের বাইরে তৈরি করতে হয়, এবং শর্ত পূরণের জন্য যেকোনো এক্সপ্রেশন, যার মধ্যে কাউন্টার পরিবর্তনও অন্তর্ভুক্ত, লুপের ভিতরে বজায় রাখতে হয়। ```javascript //Counting up to 10 @@ -112,7 +112,7 @@ while (i < 10) { ## লুপ এবং অ্যারে -অ্যারে প্রায়ই লুপের সাথে ব্যবহার করা হয় কারণ বেশিরভাগ শর্ত অ্যারের দৈর্ঘ্য ব্যবহার করে লুপ থামানোর প্রয়োজন হয়, এবং ইন্ডেক্সটি কাউন্টার মানও হতে পারে। +অ্যারে প্রায়ই লুপের সাথে ব্যবহার করা হয় কারণ বেশিরভাগ শর্ত অ্যারের দৈর্ঘ্য প্রয়োজন লুপ থামানোর জন্য, এবং ইন্ডেক্সটি কাউন্টার মানও হতে পারে। ```javascript let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; @@ -122,7 +122,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { } //Ends when all flavors are printed ``` -✅ আপনার ব্রাউজারের কনসোলে একটি অ্যারে তৈরি করে সেটির উপর লুপ করার চেষ্টা করুন। +✅ আপনার নিজের তৈরি একটি অ্যারের উপর লুপিং করার চেষ্টা করুন আপনার ব্রাউজারের কনসোলে। --- @@ -135,11 +135,13 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { ## পর্যালোচনা এবং স্ব-অধ্যয়ন -জাভাস্ক্রিপ্টে অ্যারেগুলোর সাথে অনেক মেথড সংযুক্ত থাকে, যা ডেটা পরিচালনার জন্য অত্যন্ত কার্যকর। [এই মেথডগুলো সম্পর্কে পড়ুন](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) এবং আপনার তৈরি করা একটি অ্যারেতে এগুলো (যেমন push, pop, slice এবং splice) ব্যবহার করে দেখুন। +জাভাস্ক্রিপ্টে অ্যারেগুলোর সাথে অনেক মেথড সংযুক্ত থাকে, যা ডেটা পরিচালনার জন্য অত্যন্ত কার্যকর। [এই মেথডগুলো সম্পর্কে পড়ুন](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) এবং আপনার তৈরি একটি অ্যারের উপর কিছু মেথড (যেমন push, pop, slice এবং splice) ব্যবহার করে দেখুন। ## অ্যাসাইনমেন্ট [অ্যারের উপর লুপ করুন](assignment.md) +--- + **অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে দয়া করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। নথিটির মূল ভাষায় থাকা সংস্করণটিকেই প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে সৃষ্ট কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই। \ No newline at end of file +এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file diff --git a/translations/bn/3-terrarium/1-intro-to-html/README.md b/translations/bn/3-terrarium/1-intro-to-html/README.md index 247f1866..6ed4c832 100644 --- a/translations/bn/3-terrarium/1-intro-to-html/README.md +++ b/translations/bn/3-terrarium/1-intro-to-html/README.md @@ -1,8 +1,8 @@ -# টেরারিয়াম প্রকল্প পার্ট ২: CSS-এ পরিচিতি +# টেরারিয়াম প্রকল্প পার্ট ২: CSS পরিচিতি -![CSS-এ পরিচিতি](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.bn.png) +![CSS পরিচিতি](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.bn.png) > স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac) ## প্রাক-লেকচার কুইজ @@ -18,11 +18,11 @@ CO_OP_TRANSLATOR_METADATA: ### পরিচিতি -CSS, বা Cascading Style Sheets, ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ সমস্যা সমাধান করে: কীভাবে আপনার ওয়েবসাইটকে সুন্দর দেখানো যায়। আপনার অ্যাপগুলিকে স্টাইলিং করলে সেগুলি আরও ব্যবহারযোগ্য এবং আকর্ষণীয় দেখায়; CSS ব্যবহার করে আপনি Responsive Web Design (RWD) তৈরি করতে পারেন - যা আপনার অ্যাপগুলিকে যেকোনো স্ক্রিন সাইজে ভালো দেখাতে সক্ষম করে। CSS কেবল আপনার অ্যাপকে সুন্দর দেখানোর জন্য নয়; এর স্পেসিফিকেশনে অ্যানিমেশন এবং ট্রান্সফর্ম অন্তর্ভুক্ত রয়েছে যা আপনার অ্যাপগুলির জন্য উন্নত ইন্টারঅ্যাকশন সক্ষম করতে পারে। CSS Working Group বর্তমান CSS স্পেসিফিকেশন বজায় রাখতে সাহায্য করে; তাদের কাজ আপনি [World Wide Web Consortium-এর সাইটে](https://www.w3.org/Style/CSS/members) অনুসরণ করতে পারেন। +CSS, বা Cascading Style Sheets, ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ সমস্যা সমাধান করে: কীভাবে আপনার ওয়েবসাইটকে সুন্দর দেখানো যায়। আপনার অ্যাপগুলিকে স্টাইলিং করলে সেগুলি আরও ব্যবহারযোগ্য এবং আকর্ষণীয় দেখায়; CSS ব্যবহার করে আপনি Responsive Web Design (RWD) তৈরি করতে পারেন - যা আপনার অ্যাপগুলিকে যেকোনো স্ক্রিন সাইজে ভালো দেখাতে সক্ষম করে। CSS শুধুমাত্র আপনার অ্যাপকে সুন্দর দেখানোর জন্য নয়; এর স্পেসিফিকেশন অ্যানিমেশন এবং ট্রান্সফর্ম অন্তর্ভুক্ত করে যা আপনার অ্যাপগুলির জন্য উন্নত ইন্টারঅ্যাকশন সক্ষম করতে পারে। CSS Working Group বর্তমান CSS স্পেসিফিকেশন বজায় রাখতে সাহায্য করে; তাদের কাজ আপনি [World Wide Web Consortium-এর সাইটে](https://www.w3.org/Style/CSS/members) অনুসরণ করতে পারেন। -> মনে রাখবেন, CSS একটি ভাষা যা ওয়েবের মতোই ক্রমাগত বিকশিত হয়, এবং সব ব্রাউজার নতুন স্পেসিফিকেশনের অংশগুলো সমর্থন করে না। সবসময় [CanIUse.com](https://caniuse.com) দেখে আপনার ইমপ্লিমেন্টেশন যাচাই করুন। +> মনে রাখবেন, CSS একটি ভাষা যা ওয়েবের মতোই বিকশিত হয়, এবং সব ব্রাউজার নতুন স্পেসিফিকেশনের অংশগুলো সমর্থন করে না। আপনার ইমপ্লিমেন্টেশন যাচাই করতে [CanIUse.com](https://caniuse.com) ব্যবহার করুন। -এই পাঠে, আমরা আমাদের অনলাইন টেরারিয়ামে স্টাইল যোগ করব এবং CSS-এর কয়েকটি ধারণা সম্পর্কে আরও জানব: ক্যাসকেড, ইনহেরিটেন্স, এবং সিলেক্টর, পজিশনিং, এবং CSS ব্যবহার করে লেআউট তৈরি করা। এই প্রক্রিয়ায় আমরা টেরারিয়াম লেআউট করব এবং টেরারিয়াম নিজেই তৈরি করব। +এই পাঠে, আমরা আমাদের অনলাইন টেরারিয়ামে স্টাইল যোগ করব এবং CSS-এর কয়েকটি ধারণা সম্পর্কে আরও জানব: ক্যাসকেড, ইনহেরিটেন্স, এবং সিলেক্টর, পজিশনিং, এবং CSS ব্যবহার করে লেআউট তৈরি করার পদ্ধতি। এই প্রক্রিয়ায় আমরা টেরারিয়াম লেআউট করব এবং প্রকৃত টেরারিয়াম তৈরি করব। ### পূর্বশর্ত @@ -45,7 +45,7 @@ CSS, বা Cascading Style Sheets, ওয়েব ডেভেলপমেন ## ক্যাসকেড -Cascading Style Sheets ধারণাটি অন্তর্ভুক্ত করে যে স্টাইলগুলো 'ক্যাসকেড' করে, যাতে একটি স্টাইল প্রয়োগের অগ্রাধিকার দ্বারা নির্দেশিত হয়। ওয়েবসাইট লেখকের দ্বারা সেট করা স্টাইল ব্রাউজারের সেট করা স্টাইলের উপর অগ্রাধিকার পায়। 'ইনলাইন' স্টাইলগুলো এক্সটার্নাল স্টাইল শিটে সেট করা স্টাইলের উপর অগ্রাধিকার পায়। +Cascading Style Sheets ধারণাটি অন্তর্ভুক্ত করে যে স্টাইলগুলি 'ক্যাসকেড' করে, যার ফলে স্টাইল প্রয়োগের অগ্রাধিকার দ্বারা নির্দেশিত হয়। ওয়েবসাইট লেখকের দ্বারা সেট করা স্টাইল ব্রাউজারের সেট করা স্টাইলের উপর অগ্রাধিকার পায়। 'ইনলাইন' স্টাইলগুলি এক্সটার্নাল স্টাইল শিটে সেট করা স্টাইলের উপর অগ্রাধিকার পায়। ### কাজ @@ -63,17 +63,17 @@ h1 { } ``` -✅ আপনার ওয়েব অ্যাপে কোন রঙ প্রদর্শিত হয়? কেন? আপনি কি স্টাইলগুলো ওভাররাইড করার উপায় খুঁজে পেয়েছেন? কখন আপনি এটি করতে চাইবেন, বা কেন নয়? +✅ আপনার ওয়েব অ্যাপে কোন রঙ প্রদর্শিত হয়? কেন? আপনি কি স্টাইল ওভাররাইড করার উপায় খুঁজে পেতে পারেন? কখন আপনি এটি করতে চাইবেন, বা কেন নয়? --- ## ইনহেরিটেন্স -স্টাইলগুলো পূর্বপুরুষের স্টাইল থেকে বংশধরদের মধ্যে উত্তরাধিকারসূত্রে প্রাপ্ত হয়, যাতে নেস্টেড এলিমেন্টগুলো তাদের প্যারেন্টের স্টাইল উত্তরাধিকারসূত্রে পায়। +স্টাইলগুলি পূর্বপুরুষের স্টাইল থেকে বংশধরদের মধ্যে উত্তরাধিকারসূত্রে প্রাপ্ত হয়, যার ফলে নেস্টেড এলিমেন্টগুলি তাদের প্যারেন্টের স্টাইল গ্রহণ করে। ### কাজ -বডির ফন্ট একটি নির্দিষ্ট ফন্টে সেট করুন এবং নেস্টেড এলিমেন্টের ফন্ট পরীক্ষা করুন: +বডির ফন্ট একটি নির্দিষ্ট ফন্টে সেট করুন এবং একটি নেস্টেড এলিমেন্টের ফন্ট পরীক্ষা করুন: ```CSS body { @@ -81,7 +81,7 @@ body { } ``` -আপনার ব্রাউজারের কনসোলের 'Elements' ট্যাবে যান এবং H1-এর ফন্ট পর্যবেক্ষণ করুন। এটি বডি থেকে তার ফন্ট উত্তরাধিকারসূত্রে পায়, যা ব্রাউজারে উল্লেখ করা হয়েছে: +আপনার ব্রাউজারের কনসোলের 'Elements' ট্যাবে যান এবং H1-এর ফন্ট পর্যবেক্ষণ করুন। এটি বডি থেকে তার ফন্ট উত্তরাধিকারসূত্রে পায়, যা ব্রাউজারের মধ্যে উল্লেখ করা হয়েছে: ![উত্তরাধিকারসূত্রে প্রাপ্ত ফন্ট](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.bn.png) @@ -93,7 +93,7 @@ body { ### ট্যাগ -এখন পর্যন্ত, আপনার `style.css` ফাইলে কেবল কয়েকটি ট্যাগ স্টাইল করা হয়েছে, এবং অ্যাপটি বেশ অদ্ভুত দেখাচ্ছে: +এখন পর্যন্ত, আপনার `style.css` ফাইলে শুধুমাত্র কয়েকটি ট্যাগ স্টাইল করা হয়েছে, এবং অ্যাপটি বেশ অদ্ভুত দেখাচ্ছে: ```CSS body { @@ -106,11 +106,11 @@ h1 { } ``` -এই পদ্ধতিতে একটি ট্যাগ স্টাইলিং আপনাকে অনন্য এলিমেন্টগুলোর উপর নিয়ন্ত্রণ দেয়, তবে আপনাকে টেরারিয়ামের অনেক গাছপালার স্টাইল নিয়ন্ত্রণ করতে হবে। এটি করতে, আপনাকে CSS সিলেক্টর ব্যবহার করতে হবে। +এই পদ্ধতিতে একটি ট্যাগ স্টাইলিং আপনাকে অনন্য এলিমেন্টগুলির উপর নিয়ন্ত্রণ দেয়, তবে আপনাকে আপনার টেরারিয়ামের অনেক গাছের স্টাইল নিয়ন্ত্রণ করতে হবে। এটি করতে, আপনাকে CSS সিলেক্টর ব্যবহার করতে হবে। ### আইডি -বাম এবং ডান কন্টেইনারগুলোর লেআউট স্টাইল করতে কিছু স্টাইল যোগ করুন। যেহেতু মার্কআপে কেবল একটি বাম কন্টেইনার এবং একটি ডান কন্টেইনার রয়েছে, সেগুলোকে আইডি দেওয়া হয়েছে। সেগুলো স্টাইল করতে, `#` ব্যবহার করুন: +বাম এবং ডান কন্টেইনারগুলির লেআউট স্টাইল যোগ করুন। যেহেতু শুধুমাত্র একটি বাম কন্টেইনার এবং একটি ডান কন্টেইনার রয়েছে, সেগুলি মার্কআপে আইডি দেওয়া হয়েছে। সেগুলি স্টাইল করতে, `#` ব্যবহার করুন: ```CSS #left-container { @@ -134,9 +134,9 @@ h1 { } ``` -এখানে, আপনি এই কন্টেইনারগুলোকে স্ক্রিনের একেবারে বাম এবং ডান দিকে অ্যাবসোলিউট পজিশনিং দিয়ে রেখেছেন এবং তাদের প্রস্থের জন্য শতাংশ ব্যবহার করেছেন যাতে সেগুলো ছোট মোবাইল স্ক্রিনের জন্য স্কেল করতে পারে। +এখানে, আপনি এই কন্টেইনারগুলিকে স্ক্রিনের একেবারে বাম এবং ডান দিকে অ্যাবসোলিউট পজিশনিং দিয়ে রেখেছেন এবং তাদের প্রস্থের জন্য শতাংশ ব্যবহার করেছেন যাতে তারা ছোট মোবাইল স্ক্রিনের জন্য স্কেল করতে পারে। -✅ এই কোডটি বেশ পুনরাবৃত্তিমূলক, যা "DRY" (Don't Repeat Yourself) নয়; আপনি কি এই আইডিগুলো স্টাইল করার আরও ভালো উপায় খুঁজে পেতে পারেন, হয়তো একটি আইডি এবং একটি ক্লাস ব্যবহার করে? আপনাকে মার্কআপ পরিবর্তন করতে হবে এবং CSS পুনর্গঠন করতে হবে: +✅ এই কোডটি বেশ পুনরাবৃত্ত, যা "DRY" (Don't Repeat Yourself) নয়; আপনি কি এই আইডিগুলিকে স্টাইল করার একটি ভালো উপায় খুঁজে পেতে পারেন, সম্ভবত একটি আইডি এবং একটি ক্লাস দিয়ে? আপনাকে মার্কআপ পরিবর্তন করতে হবে এবং CSS পুনর্গঠন করতে হবে: ```html
@@ -144,9 +144,9 @@ h1 { ### ক্লাস -উপরের উদাহরণে, আপনি স্ক্রিনে দুটি অনন্য এলিমেন্ট স্টাইল করেছেন। যদি আপনি চান যে স্ক্রিনের অনেক এলিমেন্টে স্টাইল প্রয়োগ করা হোক, তবে আপনি CSS ক্লাস ব্যবহার করতে পারেন। বাম এবং ডান কন্টেইনারে গাছপালাগুলোর লেআউট করতে এটি করুন। +উপরের উদাহরণে, আপনি স্ক্রিনে দুটি অনন্য এলিমেন্ট স্টাইল করেছেন। যদি আপনি স্ক্রিনে অনেক এলিমেন্টের উপর স্টাইল প্রয়োগ করতে চান, আপনি CSS ক্লাস ব্যবহার করতে পারেন। বাম এবং ডান কন্টেইনারগুলিতে গাছগুলির লেআউট করতে এটি করুন। -লক্ষ্য করুন যে HTML মার্কআপে প্রতিটি গাছপালার একটি আইডি এবং ক্লাসের সংমিশ্রণ রয়েছে। এখানে আইডিগুলো পরবর্তীতে জাভাস্ক্রিপ্ট দ্বারা টেরারিয়ামের গাছপালার অবস্থান নিয়ন্ত্রণ করতে ব্যবহৃত হবে। তবে ক্লাসগুলো সব গাছপালাকে একটি নির্দিষ্ট স্টাইল দেয়। +মনে রাখবেন যে HTML মার্কআপে প্রতিটি গাছের একটি আইডি এবং ক্লাসের সংমিশ্রণ রয়েছে। এখানে আইডিগুলি পরে যোগ করা জাভাস্ক্রিপ্ট দ্বারা টেরারিয়াম গাছের অবস্থান ম্যানিপুলেট করতে ব্যবহৃত হয়। তবে ক্লাসগুলি সমস্ত গাছকে একটি নির্দিষ্ট স্টাইল দেয়। ```html
@@ -154,7 +154,7 @@ h1 {
``` -আপনার `style.css` ফাইলে নিম্নলিখিত কোড যোগ করুন: +আপনার `style.css` ফাইলে নিম্নলিখিত যোগ করুন: ```CSS .plant-holder { @@ -171,37 +171,37 @@ h1 { } ``` -এই অংশে উল্লেখযোগ্য হলো রিলেটিভ এবং অ্যাবসোলিউট পজিশনিংয়ের মিশ্রণ, যা আমরা পরবর্তী অংশে আলোচনা করব। উচ্চতাগুলো শতাংশে কীভাবে পরিচালিত হয়েছে তা লক্ষ্য করুন: +এই স্নিপেটে উল্লেখযোগ্য হল আপেক্ষিক এবং অ্যাবসোলিউট পজিশনিংয়ের মিশ্রণ, যা আমরা পরবর্তী বিভাগে আলোচনা করব। উচ্চতা শতাংশের মাধ্যমে পরিচালনার পদ্ধতি লক্ষ্য করুন: -আপনি প্ল্যান্ট হোল্ডারের উচ্চতা ১৩% সেট করেছেন, যা একটি ভালো সংখ্যা যাতে প্রতিটি উল্লম্ব কন্টেইনারে সব গাছপালা স্ক্রল ছাড়াই প্রদর্শিত হয়। +আপনি গাছের হোল্ডারের উচ্চতা ১৩% সেট করেছেন, একটি ভালো সংখ্যা যা নিশ্চিত করে যে সমস্ত গাছ প্রতিটি উল্লম্ব কন্টেইনারে প্রদর্শিত হয় স্ক্রোলিংয়ের প্রয়োজন ছাড়াই। -প্ল্যান্ট হোল্ডারকে বাম দিকে সরানো হয়েছে যাতে গাছপালাগুলো তাদের কন্টেইনারের মধ্যে আরও কেন্দ্রীভূত হয়। ইমেজগুলোতে একটি বড় পরিমাণ স্বচ্ছ ব্যাকগ্রাউন্ড রয়েছে যাতে সেগুলো আরও সহজে ড্র্যাগ করা যায়, তাই স্ক্রিনে আরও ভালোভাবে ফিট করার জন্য সেগুলো বাম দিকে ঠেলে দেওয়া হয়েছে। +আপনি গাছের হোল্ডারকে বাম দিকে সরিয়ে দিয়েছেন যাতে গাছগুলি তাদের কন্টেইনারের মধ্যে আরও কেন্দ্রীভূত হয়। ছবিগুলির একটি বড় পরিমাণে স্বচ্ছ ব্যাকগ্রাউন্ড রয়েছে যাতে সেগুলি আরও সহজে ড্র্যাগ করা যায়, তাই স্ক্রিনে আরও ভালোভাবে ফিট করার জন্য সেগুলিকে বাম দিকে ঠেলে দেওয়া প্রয়োজন। -তারপর, গাছপালাকে ১৫০% এর একটি সর্বোচ্চ প্রস্থ দেওয়া হয়েছে। এটি ব্রাউজার স্কেল করার সাথে সাথে এটি স্কেল ডাউন করতে দেয়। আপনার ব্রাউজারটি রিসাইজ করার চেষ্টা করুন; গাছপালাগুলো তাদের কন্টেইনারে থাকে কিন্তু ফিট করার জন্য স্কেল ডাউন করে। +তারপর, গাছটিকে ১৫০% এর একটি ম্যাক্স-উইডথ দেওয়া হয়েছে। এটি ব্রাউজার স্কেল ডাউন হওয়ার সাথে সাথে স্কেল ডাউন করতে দেয়। আপনার ব্রাউজারটি রিসাইজ করার চেষ্টা করুন; গাছগুলি তাদের কন্টেইনারে থাকে কিন্তু স্কেল ডাউন করে ফিট করার জন্য। -এছাড়াও উল্লেখযোগ্য হলো z-index-এর ব্যবহার, যা একটি এলিমেন্টের আপেক্ষিক উচ্চতা নিয়ন্ত্রণ করে (যাতে গাছপালাগুলো কন্টেইনারের উপরে থাকে এবং টেরারিয়ামের ভিতরে বসে থাকে বলে মনে হয়)। +এছাড়াও উল্লেখযোগ্য হল z-index-এর ব্যবহার, যা একটি এলিমেন্টের আপেক্ষিক উচ্চতা নিয়ন্ত্রণ করে (যাতে গাছগুলি কন্টেইনারের উপরে বসে এবং টেরারিয়ামের ভিতরে বসে থাকে বলে মনে হয়)। -✅ কেন আপনার প্ল্যান্ট হোল্ডার এবং প্ল্যান্ট CSS সিলেক্টর উভয়েরই প্রয়োজন? +✅ কেন আপনার একটি গাছের হোল্ডার এবং একটি গাছ CSS সিলেক্টর উভয়েরই প্রয়োজন? ## CSS পজিশনিং -পজিশন প্রপার্টিগুলোর (স্ট্যাটিক, রিলেটিভ, ফিক্সড, অ্যাবসোলিউট, এবং স্টিকি পজিশন) মিশ্রণ কিছুটা জটিল হতে পারে, তবে সঠিকভাবে করলে এটি আপনার পৃষ্ঠাগুলোর এলিমেন্টগুলোর উপর ভালো নিয়ন্ত্রণ দেয়। +পজিশন প্রপার্টি (স্ট্যাটিক, রিলেটিভ, ফিক্সড, অ্যাবসোলিউট, এবং স্টিকি পজিশন) মিশ্রিত করা একটু জটিল হতে পারে, তবে সঠিকভাবে করা হলে এটি আপনার পৃষ্ঠার এলিমেন্টগুলির উপর ভালো নিয়ন্ত্রণ দেয়। -অ্যাবসোলিউট পজিশনড এলিমেন্টগুলো তাদের নিকটতম পজিশনড পূর্বপুরুষদের তুলনায় পজিশনড হয়, এবং যদি কোনো পূর্বপুরুষ না থাকে, তবে এটি ডকুমেন্ট বডি অনুযায়ী পজিশনড হয়। +অ্যাবসোলিউট পজিশন করা এলিমেন্টগুলি তাদের নিকটতম পজিশন করা পূর্বপুরুষদের তুলনায় পজিশন করা হয়, এবং যদি কোনো পূর্বপুরুষ না থাকে, এটি ডকুমেন্ট বডি অনুযায়ী পজিশন করা হয়। -রিলেটিভ পজিশনড এলিমেন্টগুলো তাদের প্রাথমিক অবস্থান থেকে CSS-এর নির্দেশনা অনুযায়ী তাদের অবস্থান সামঞ্জস্য করে। +রিলেটিভ পজিশন করা এলিমেন্টগুলি তাদের প্রাথমিক অবস্থান থেকে দূরে সরিয়ে CSS-এর নির্দেশনা অনুযায়ী পজিশন করা হয়। -আমাদের উদাহরণে, `plant-holder` একটি রিলেটিভ পজিশনড এলিমেন্ট যা একটি অ্যাবসোলিউট পজিশনড কন্টেইনারের মধ্যে পজিশনড। এর ফলে সাইডবার কন্টেইনারগুলো বাম এবং ডান দিকে পিন করা হয়, এবং প্ল্যান্ট-হোল্ডার নেস্টেড হয়, সাইডবারগুলোর মধ্যে নিজেকে সামঞ্জস্য করে, গাছপালাগুলোকে একটি উল্লম্ব সারিতে রাখার জন্য জায়গা দেয়। +আমাদের উদাহরণে, `plant-holder` একটি রিলেটিভ-পজিশন করা এলিমেন্ট যা একটি অ্যাবসোলিউট-পজিশন করা কন্টেইনারের মধ্যে পজিশন করা হয়েছে। এর ফলাফল হল যে সাইডবার কন্টেইনারগুলি বাম এবং ডান দিকে পিন করা হয়েছে, এবং plant-holder নেস্টেড, সাইডবারগুলির মধ্যে নিজেকে সামঞ্জস্য করে, গাছগুলিকে একটি উল্লম্ব সারিতে রাখার জন্য জায়গা দেয়। -> `plant` নিজেই একটি অ্যাবসোলিউট পজিশনিং পেয়েছে, যা এটি ড্র্যাগযোগ্য করতে প্রয়োজনীয়, যেমন আপনি পরবর্তী পাঠে আবিষ্কার করবেন। +> `plant` নিজেও অ্যাবসোলিউট পজিশনিং পেয়েছে, যা এটি ড্র্যাগযোগ্য করতে প্রয়োজনীয়, যেমন আপনি পরবর্তী পাঠে আবিষ্কার করবেন। -✅ সাইড কন্টেইনার এবং প্ল্যান্ট-হোল্ডারের পজিশনিং টাইপগুলো পরিবর্তন করার চেষ্টা করুন। কী ঘটে? +✅ সাইড কন্টেইনার এবং plant-holder-এর পজিশনিং টাইপ পরিবর্তন করার চেষ্টা করুন। কী ঘটে? ## CSS লেআউট এখন আপনি যা শিখেছেন তা ব্যবহার করে CSS দিয়ে টেরারিয়াম নিজেই তৈরি করবেন! -প্রথমে, `.terrarium` ডিভের চাইল্ডগুলোকে CSS ব্যবহার করে একটি গোলাকার আয়তাকারে স্টাইল করুন: +প্রথমে, `.terrarium` div-এর শিশুদের CSS ব্যবহার করে একটি গোলাকার আয়তক্ষেত্র হিসাবে স্টাইল করুন: ```CSS .jar-walls { @@ -250,17 +250,17 @@ h1 { } ``` -এখানে শতাংশের ব্যবহার লক্ষ্য করুন। যদি আপনি আপনার ব্রাউজার স্কেল ডাউন করেন, আপনি দেখতে পাবেন কীভাবে জারটি স্কেল করে। এছাড়াও জার এলিমেন্টগুলোর প্রস্থ এবং উচ্চতার শতাংশ এবং প্রতিটি এলিমেন্ট কীভাবে ভিউপোর্টের নিচে কেন্দ্রে পিন করা হয়েছে তা লক্ষ্য করুন। +এখানে শতাংশের ব্যবহার লক্ষ্য করুন। যদি আপনি আপনার ব্রাউজার স্কেল ডাউন করেন, আপনি দেখতে পারেন কীভাবে জারটি স্কেল করে। এছাড়াও জার এলিমেন্টগুলির প্রস্থ এবং উচ্চতার শতাংশ এবং প্রতিটি এলিমেন্ট কীভাবে কেন্দ্রে অ্যাবসোলিউট পজিশন করা হয়েছে এবং ভিউপোর্টের নিচে পিন করা হয়েছে তা লক্ষ্য করুন। -আমরা `rem` ব্যবহার করছি বর্ডার-রেডিয়াসের জন্য, যা একটি ফন্ট-রিলেটিভ দৈর্ঘ্য। এই ধরনের রিলেটিভ মাপ সম্পর্কে আরও পড়ুন [CSS স্পেসিফিকেশনে](https://www.w3.org/TR/css-values-3/#font-relative-lengths)। +আমরা `rem` ব্যবহার করছি বর্ডার-রেডিয়াসের জন্য, একটি ফন্ট-রিলেটিভ দৈর্ঘ্য। এই ধরনের আপেক্ষিক পরিমাপ সম্পর্কে আরও পড়ুন [CSS স্পেসিফিকেশনে](https://www.w3.org/TR/css-values-3/#font-relative-lengths)। -✅ জারের রঙ এবং অপাসিটি পরিবর্তন করার চেষ্টা করুন বনাম মাটির। কী ঘটে? কেন? +✅ জার এবং মাটির রঙ এবং অপাসিটি পরিবর্তন করার চেষ্টা করুন। কী ঘটে? কেন? --- ## 🚀চ্যালেঞ্জ -জারের বাম নিচের এলাকায় একটি 'বাবল' শাইন যোগ করুন যাতে এটি আরও কাঁচের মতো দেখায়। আপনি `.jar-glossy-long` এবং `.jar-glossy-short` স্টাইল করবেন যাতে এটি প্রতিফলিত শাইনের মতো দেখায়। এটি দেখতে এমন হবে: +জারের বাম নিচের এলাকায় একটি 'বাবল' শাইন যোগ করুন যাতে এটি আরও কাচের মতো দেখায়। আপনি `.jar-glossy-long` এবং `.jar-glossy-short` স্টাইল করবেন যাতে এটি প্রতিফলিত শাইনের মতো দেখায়। এটি দেখতে এমন হবে: ![শেষ টেরারিয়াম](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.bn.png) @@ -272,11 +272,13 @@ h1 { ## পর্যালোচনা ও স্ব-অধ্যয়ন -CSS দেখতে সহজ মনে হতে পারে, তবে সব ব্রাউজার এবং সব স্ক্রিন সাইজের জন্য একটি অ্যাপ নিখুঁতভাবে স্টাইল করার সময় অনেক চ্যালেঞ্জ থাকে। CSS-Grid এবং Flexbox হলো এমন কিছু টুল যা কাজটিকে আরও কাঠামোগত এবং নির্ভরযোগ্য করে তুলতে তৈরি করা হয়েছে। এই টুলগুলো সম্পর্কে জানুন [Flexbox Froggy](https://flexboxfroggy.com/) এবং [Grid Garden](https://codepip.com/games/grid-garden/) খেলে। +CSS সহজ মনে হতে পারে, তবে সমস্ত ব্রাউজার এবং স্ক্রিন সাইজের জন্য একটি অ্যাপ নিখুঁতভাবে স্টাইল করার সময় অনেক চ্যালেঞ্জ থাকে। CSS-Grid এবং Flexbox এমন টুল যা কাজটিকে একটু বেশি কাঠামোগত এবং নির্ভরযোগ্য করে তুলতে তৈরি করা হয়েছে। এই টুলগুলি সম্পর্কে জানুন [Flexbox Froggy](https://flexboxfroggy.com/) এবং [Grid Garden](https://codepip.com/games/grid-garden/) খেলতে। ## অ্যাসাইনমেন্ট [CSS পুনর্গঠন](assignment.md) +--- + **অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। এর মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file +এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file diff --git a/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md index 05980f4a..b92f536c 100644 --- a/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -1,57 +1,57 @@ -# টেরারিয়াম প্রকল্প পার্ট ৩: DOM ম্যানিপুলেশন এবং একটি ক্লোজার +# টেরারিয়াম প্রকল্প পার্ট ৩: DOM ম্যানিপুলেশন এবং ক্লোজার -![DOM এবং একটি ক্লোজার](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.bn.png) +![DOM এবং ক্লোজার](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.bn.png) > স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac) -## প্রাক-লেকচার কুইজ +## প্রি-লেকচার কুইজ -[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/19) +[প্রি-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/19) ### ভূমিকা -DOM বা "ডকুমেন্ট অবজেক্ট মডেল" ম্যানিপুলেশন ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ দিক। [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) অনুসারে, "ডকুমেন্ট অবজেক্ট মডেল (DOM) হলো ওয়েবের একটি ডকুমেন্টের কাঠামো এবং বিষয়বস্তুর প্রতিনিধিত্বকারী ডেটা।" ওয়েবে DOM ম্যানিপুলেশন সংক্রান্ত চ্যালেঞ্জগুলো প্রায়ই জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহারের কারণ হয়ে দাঁড়ায়, তবে আমরা এখানে ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করেই এটি পরিচালনা করব! +DOM বা "ডকুমেন্ট অবজেক্ট মডেল" ম্যানিপুলেট করা ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ দিক। [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) অনুসারে, "ডকুমেন্ট অবজেক্ট মডেল (DOM) হলো ওয়েবের একটি ডকুমেন্টের কাঠামো এবং বিষয়বস্তুর প্রতিনিধিত্বকারী ডেটা।" DOM ম্যানিপুলেশন নিয়ে চ্যালেঞ্জগুলোই প্রায়শই জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করার কারণ হয়ে দাঁড়ায়, তবে আমরা এখানে ভ্যানিলা জাভাস্ক্রিপ্ট দিয়ে কাজ করব! -এছাড়াও, এই পাঠে [জাভাস্ক্রিপ্ট ক্লোজার](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ধারণাটি পরিচিত করানো হবে। এটি এমন একটি ফাংশন যা আরেকটি ফাংশনের মধ্যে আবদ্ধ থাকে, ফলে অভ্যন্তরীণ ফাংশনটি বাইরের ফাংশনের স্কোপে অ্যাক্সেস পায়। +এছাড়াও, এই পাঠে [জাভাস্ক্রিপ্ট ক্লোজার](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ধারণাটি পরিচয় করানো হবে। ক্লোজার হলো একটি ফাংশন যা অন্য একটি ফাংশনের মধ্যে আবদ্ধ থাকে, যাতে অভ্যন্তরীণ ফাংশন বাইরের ফাংশনের স্কোপে অ্যাক্সেস পায়। -> জাভাস্ক্রিপ্ট ক্লোজার একটি বিস্তৃত এবং জটিল বিষয়। এই পাঠে আমরা এর মৌলিক ধারণা নিয়ে আলোচনা করব। টেরারিয়ামের কোডে আপনি একটি ক্লোজার দেখতে পাবেন: একটি অভ্যন্তরীণ ফাংশন এবং একটি বাইরের ফাংশন এমনভাবে তৈরি করা হয়েছে যাতে অভ্যন্তরীণ ফাংশনটি বাইরের ফাংশনের স্কোপে অ্যাক্সেস পায়। এই বিষয়ে আরও বিস্তারিত জানতে [বিস্তৃত ডকুমেন্টেশন](https://developer.mozilla.org/docs/Web/JavaScript/Closures) দেখুন। +> জাভাস্ক্রিপ্ট ক্লোজার একটি বিশাল এবং জটিল বিষয়। এই পাঠে আমরা এর মৌলিক ধারণা নিয়ে আলোচনা করব। টেরারিয়ামের কোডে আপনি একটি ক্লোজার দেখতে পাবেন: একটি অভ্যন্তরীণ ফাংশন এবং একটি বাইরের ফাংশন এমনভাবে তৈরি করা হয়েছে যাতে অভ্যন্তরীণ ফাংশন বাইরের ফাংশনের স্কোপে অ্যাক্সেস পায়। এই বিষয়ে আরও বিস্তারিত জানতে [বিস্তৃত ডকুমেন্টেশন](https://developer.mozilla.org/docs/Web/JavaScript/Closures) দেখুন। -আমরা DOM ম্যানিপুলেশনের জন্য একটি ক্লোজার ব্যবহার করব। +আমরা DOM ম্যানিপুলেট করতে একটি ক্লোজার ব্যবহার করব। -DOM-কে একটি গাছের মতো ভাবুন, যা একটি ওয়েব পেজ ডকুমেন্টকে ম্যানিপুলেট করার সমস্ত উপায় উপস্থাপন করে। বিভিন্ন API (অ্যাপ্লিকেশন প্রোগ্রাম ইন্টারফেস) তৈরি করা হয়েছে যাতে প্রোগ্রামাররা তাদের পছন্দের প্রোগ্রামিং ভাষা ব্যবহার করে DOM-এ অ্যাক্সেস করতে এবং এটি সম্পাদনা, পরিবর্তন, পুনর্বিন্যাস এবং পরিচালনা করতে পারে। +DOM-কে একটি গাছের মতো ভাবুন, যা একটি ওয়েব পেজ ডকুমেন্টকে ম্যানিপুলেট করার বিভিন্ন উপায় উপস্থাপন করে। বিভিন্ন API (অ্যাপ্লিকেশন প্রোগ্রাম ইন্টারফেস) তৈরি করা হয়েছে যাতে প্রোগ্রামাররা তাদের পছন্দের প্রোগ্রামিং ভাষা ব্যবহার করে DOM-এ অ্যাক্সেস করতে পারে এবং এটি সম্পাদনা, পরিবর্তন, পুনর্বিন্যাস এবং পরিচালনা করতে পারে। ![DOM গাছের উপস্থাপনা](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.bn.png) -> DOM এবং এর সাথে সম্পর্কিত HTML মার্কআপের একটি উপস্থাপনা। [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) থেকে নেওয়া। +> DOM এবং HTML মার্কআপের একটি উপস্থাপনা যা এটি রেফারেন্স করে। [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) থেকে। -এই পাঠে, আমরা আমাদের ইন্টারেক্টিভ টেরারিয়াম প্রকল্পটি সম্পন্ন করব, যেখানে ব্যবহারকারী পৃষ্ঠার গাছপালাগুলো ম্যানিপুলেট করতে পারবে। +এই পাঠে, আমরা আমাদের ইন্টারেক্টিভ টেরারিয়াম প্রকল্প সম্পন্ন করব, যেখানে ব্যবহারকারী পেজে থাকা গাছপালা ম্যানিপুলেট করতে পারবে। -### প্রয়োজনীয়তা +### পূর্বশর্ত -আপনার টেরারিয়ামের HTML এবং CSS তৈরি করা থাকা উচিত। এই পাঠের শেষে আপনি গাছপালাগুলো টেরারিয়ামে টেনে নিয়ে যেতে এবং সেখান থেকে সরাতে সক্ষম হবেন। +আপনার টেরারিয়ামের HTML এবং CSS তৈরি করা উচিত। এই পাঠের শেষে আপনি গাছপালাগুলো টেরারিয়ামে ঢোকানো এবং বের করার জন্য ড্র্যাগ করতে সক্ষম হবেন। ### কাজ -আপনার টেরারিয়াম ফোল্ডারে একটি নতুন ফাইল তৈরি করুন যার নাম `script.js`। এই ফাইলটি `` সেকশনে ইমপোর্ট করুন: +আপনার টেরারিয়াম ফোল্ডারে একটি নতুন ফাইল তৈরি করুন `script.js` নামে। এই ফাইলটি `` সেকশনে ইমপোর্ট করুন: ```html ``` -> নোট: একটি এক্সটার্নাল জাভাস্ক্রিপ্ট ফাইল HTML ফাইলে ইমপোর্ট করার সময় `defer` ব্যবহার করুন যাতে জাভাস্ক্রিপ্টটি HTML ফাইলটি পুরোপুরি লোড হওয়ার পরেই কার্যকর হয়। আপনি `async` অ্যাট্রিবিউটও ব্যবহার করতে পারেন, যা স্ক্রিপ্টটিকে HTML ফাইলটি পার্স করার সময় কার্যকর হতে দেয়, তবে আমাদের ক্ষেত্রে, ড্র্যাগ স্ক্রিপ্ট কার্যকর হওয়ার আগে HTML উপাদানগুলো সম্পূর্ণ উপলব্ধ থাকা গুরুত্বপূর্ণ। +> নোট: HTML ফাইল সম্পূর্ণ লোড হওয়ার পর জাভাস্ক্রিপ্ট চালানোর জন্য `defer` ব্যবহার করুন। আপনি `async` অ্যাট্রিবিউটও ব্যবহার করতে পারেন, যা HTML ফাইল পার্স করার সময় স্ক্রিপ্ট চালানোর অনুমতি দেয়। তবে আমাদের ক্ষেত্রে, ড্র্যাগ স্ক্রিপ্ট চালানোর আগে HTML এলিমেন্টগুলো সম্পূর্ণ উপলব্ধ থাকা গুরুত্বপূর্ণ। --- -## DOM উপাদানগুলো +## DOM এলিমেন্টগুলো -প্রথমে আপনাকে DOM-এ ম্যানিপুলেট করতে চান এমন উপাদানগুলোর রেফারেন্স তৈরি করতে হবে। আমাদের ক্ষেত্রে, এগুলো হলো সাইডবারে থাকা ১৪টি গাছপালা। +প্রথমে আপনাকে DOM-এ ম্যানিপুলেট করতে চান এমন এলিমেন্টগুলোর রেফারেন্স তৈরি করতে হবে। আমাদের ক্ষেত্রে, এগুলো হলো সাইডবারে অপেক্ষমাণ ১৪টি গাছপালা। ### কাজ @@ -72,15 +72,15 @@ dragElement(document.getElementById('plant13')); dragElement(document.getElementById('plant14')); ``` -এখানে কী হচ্ছে? আপনি ডকুমেন্টটি রেফারেন্স করছেন এবং এর DOM-এর মধ্যে একটি নির্দিষ্ট Id সহ একটি উপাদান খুঁজছেন। মনে আছে প্রথম HTML পাঠে আপনি প্রতিটি গাছপালার ছবিতে আলাদা Id দিয়েছিলেন (`id="plant1"`)। এখন আপনি সেই প্রচেষ্টার ফলাফল ব্যবহার করবেন। প্রতিটি উপাদান চিহ্নিত করার পর, আপনি সেই আইটেমটি একটি `dragElement` নামক ফাংশনে পাঠাচ্ছেন, যা আপনি কিছুক্ষণের মধ্যে তৈরি করবেন। এর ফলে HTML-এর উপাদানটি এখন ড্র্যাগ-সক্ষম হয়ে যাবে, বা শীঘ্রই হবে। +এখানে কী হচ্ছে? আপনি ডকুমেন্ট রেফারেন্স করছেন এবং এর DOM-এ একটি নির্দিষ্ট Id সহ এলিমেন্ট খুঁজছেন। মনে করুন, HTML-এর প্রথম পাঠে আপনি প্রতিটি গাছপালার ইমেজে আলাদা Id দিয়েছিলেন (`id="plant1"`)। এখন আপনি সেই প্রচেষ্টার ব্যবহার করবেন। প্রতিটি এলিমেন্ট শনাক্ত করার পর, আপনি সেই আইটেমকে একটি ফাংশনে (`dragElement`) পাঠাচ্ছেন, যা আপনি কিছুক্ষণের মধ্যে তৈরি করবেন। এইভাবে HTML-এর এলিমেন্টটি এখন ড্র্যাগ-সক্ষম হয়ে উঠবে। -✅ আমরা কেন Id দিয়ে উপাদানগুলো রেফারেন্স করি? CSS ক্লাস দিয়ে কেন নয়? এই প্রশ্নের উত্তর পেতে আপনি CSS-এর পূর্ববর্তী পাঠটি দেখতে পারেন। +✅ কেন আমরা এলিমেন্টগুলোকে Id দিয়ে রেফারেন্স করি? CSS ক্লাস দিয়ে কেন নয়? CSS-এর পূর্ববর্তী পাঠটি দেখুন এই প্রশ্নের উত্তর খুঁজতে। --- ## ক্লোজার -এখন আপনি `dragElement` ক্লোজার তৈরি করতে প্রস্তুত, যা একটি বাইরের ফাংশন যা একটি বা একাধিক অভ্যন্তরীণ ফাংশনকে আবদ্ধ করে (আমাদের ক্ষেত্রে, তিনটি থাকবে)। +এখন আপনি `dragElement` ক্লোজার তৈরি করতে প্রস্তুত, যা একটি বাইরের ফাংশন যা একটি বা একাধিক অভ্যন্তরীণ ফাংশনকে আবদ্ধ করে। ক্লোজার তখনই কার্যকর হয় যখন এক বা একাধিক ফাংশনকে বাইরের ফাংশনের স্কোপে অ্যাক্সেস করতে হয়। একটি উদাহরণ দেখুন: @@ -96,13 +96,13 @@ displayCandy(); console.log(candy) ``` -এই উদাহরণে, `displayCandy` ফাংশনটি এমন একটি ফাংশনকে ঘিরে রাখে যা একটি নতুন ক্যান্ডি টাইপকে একটি অ্যারের মধ্যে ঠেলে দেয় যা ইতিমধ্যে ফাংশনে বিদ্যমান। আপনি যদি এই কোডটি চালান, তবে `candy` অ্যারে অপরিবর্তিত থাকবে, কারণ এটি একটি লোকাল ভেরিয়েবল (ক্লোজারের জন্য লোকাল)। +এই উদাহরণে, `displayCandy` ফাংশন একটি ফাংশনকে ঘিরে রাখে, যা একটি অ্যারে-তে নতুন ক্যান্ডি টাইপ যোগ করে। যদি আপনি এই কোড চালান, তাহলে `candy` অ্যারে অপ্রকাশিত থাকবে, কারণ এটি একটি লোকাল ভ্যারিয়েবল (ক্লোজারের লোকাল স্কোপে সীমাবদ্ধ)। -✅ কীভাবে আপনি `candy` অ্যারেটিকে অ্যাক্সেসযোগ্য করতে পারেন? এটি ক্লোজারের বাইরে সরিয়ে দেখুন। এভাবে, অ্যারেটি গ্লোবাল হয়ে যাবে, এবং ক্লোজারের লোকাল স্কোপে সীমাবদ্ধ থাকবে না। +✅ কীভাবে আপনি `candy` অ্যারে-কে অ্যাক্সেসযোগ্য করবেন? এটি ক্লোজারের বাইরে সরিয়ে দেখুন। এইভাবে, অ্যারে গ্লোবাল হয়ে যাবে, এবং ক্লোজারের লোকাল স্কোপে সীমাবদ্ধ থাকবে না। ### কাজ -`script.js`-এ উপাদান ঘোষণাগুলোর নিচে একটি ফাংশন তৈরি করুন: +`script.js`-এ এলিমেন্ট ডিক্লারেশনের নিচে একটি ফাংশন তৈরি করুন: ```javascript function dragElement(terrariumElement) { @@ -115,17 +115,17 @@ function dragElement(terrariumElement) { } ``` -`dragElement` তার `terrariumElement` অবজেক্টটি স্ক্রিপ্টের শীর্ষে থাকা ঘোষণাগুলো থেকে পায়। এরপর, আপনি কিছু লোকাল পজিশনকে `0` এ সেট করেন সেই অবজেক্টের জন্য যা ফাংশনে পাস করা হয়েছে। এগুলো হলো লোকাল ভেরিয়েবল, যা প্রতিটি উপাদানের জন্য ম্যানিপুলেট করা হবে যখন আপনি ক্লোজারের মধ্যে ড্র্যাগ এবং ড্রপ কার্যকারিতা যোগ করবেন। টেরারিয়ামটি এই ড্র্যাগ করা উপাদানগুলো দ্বারা পূর্ণ হবে, তাই অ্যাপ্লিকেশনটি তাদের অবস্থান ট্র্যাক করতে হবে। +`dragElement` তার `terrariumElement` অবজেক্টটি স্ক্রিপ্টের শীর্ষে থাকা ডিক্লারেশন থেকে পায়। এরপর, আপনি কিছু লোকাল পজিশন `0` সেট করেন ফাংশনে পাস করা অবজেক্টের জন্য। এগুলো হলো লোকাল ভ্যারিয়েবল, যা প্রতিটি এলিমেন্টের জন্য ম্যানিপুলেট করা হবে যখন আপনি ক্লোজারের মধ্যে ড্র্যাগ এবং ড্রপ ফাংশনালিটি যোগ করবেন। টেরারিয়ামটি এই ড্র্যাগ করা এলিমেন্টগুলো দ্বারা পূর্ণ হবে, তাই অ্যাপ্লিকেশনটি তাদের অবস্থান ট্র্যাক করতে হবে। -এছাড়াও, `terrariumElement` যা এই ফাংশনে পাস করা হয়েছে, সেটি একটি `pointerdown` ইভেন্টে অ্যাসাইন করা হয়েছে, যা [ওয়েব API](https://developer.mozilla.org/docs/Web/API)-এর অংশ যা DOM ম্যানেজমেন্টে সহায়ক। `onpointerdown` তখনই ফায়ার হয় যখন একটি বোতাম চাপা হয়, বা আমাদের ক্ষেত্রে, একটি ড্র্যাগযোগ্য উপাদান স্পর্শ করা হয়। এই ইভেন্ট হ্যান্ডলার [ওয়েব এবং মোবাইল ব্রাউজার](https://caniuse.com/?search=onpointerdown)-এ কাজ করে, কিছু ব্যতিক্রম ছাড়া। +এছাড়াও, `terrariumElement`-কে এই ফাংশনে পাস করা হয় এবং এটি একটি `pointerdown` ইভেন্টে অ্যাসাইন করা হয়, যা [ওয়েব API](https://developer.mozilla.org/docs/Web/API)-এর অংশ। `onpointerdown` তখনই ফায়ার হয় যখন একটি বাটন চাপা হয়, বা আমাদের ক্ষেত্রে, একটি ড্র্যাগযোগ্য এলিমেন্ট স্পর্শ করা হয়। এই ইভেন্ট হ্যান্ডলার [ওয়েব এবং মোবাইল ব্রাউজার](https://caniuse.com/?search=onpointerdown)-এ কাজ করে, কিছু ব্যতিক্রম ছাড়া। -✅ [ইভেন্ট হ্যান্ডলার `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) অনেক বেশি ব্রাউজার সমর্থন পায়; এখানে কেন এটি ব্যবহার করবেন না? আপনি এখানে তৈরি করতে চাওয়া সুনির্দিষ্ট স্ক্রিন ইন্টারঅ্যাকশনের কথা ভাবুন। +✅ [ইভেন্ট হ্যান্ডলার `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) অনেক বেশি ক্রস-ব্রাউজার সাপোর্ট পায়; এখানে কেন এটি ব্যবহার করবেন না? ভাবুন আপনি ঠিক কী ধরনের স্ক্রিন ইন্টারঅ্যাকশন তৈরি করতে চান। --- -## পয়েন্টারড্র্যাগ ফাংশন +## Pointerdrag ফাংশন -`terrariumElement` এখন ড্র্যাগ করার জন্য প্রস্তুত; যখন `onpointerdown` ইভেন্টটি ফায়ার হয়, তখন `pointerDrag` ফাংশনটি আহ্বান করা হয়। এই লাইনটির ঠিক নিচে ফাংশনটি যোগ করুন: `terrariumElement.onpointerdown = pointerDrag;`: +`terrariumElement` এখন ড্র্যাগ করার জন্য প্রস্তুত; যখন `onpointerdown` ইভেন্ট ফায়ার হয়, তখন `pointerDrag` ফাংশনটি চালু হয়। এই লাইনটির ঠিক নিচে ফাংশনটি যোগ করুন: `terrariumElement.onpointerdown = pointerDrag;`: ### কাজ @@ -138,32 +138,31 @@ function pointerDrag(e) { } ``` -এখানে অনেক কিছু ঘটে। প্রথমে, আপনি `e.preventDefault();` ব্যবহার করে `pointerdown`-এ সাধারণত ঘটে এমন ডিফল্ট ইভেন্টগুলোকে প্রতিরোধ করেন। এভাবে আপনি ইন্টারফেসের আচরণের উপর আরও নিয়ন্ত্রণ পান। +এখানে কয়েকটি বিষয় ঘটে। প্রথমে, আপনি `e.preventDefault();` ব্যবহার করে pointerdown-এ সাধারণত ঘটে এমন ডিফল্ট ইভেন্টগুলো বন্ধ করেন। এইভাবে আপনি ইন্টারফেসের আচরণের উপর আরও নিয়ন্ত্রণ পান। -> পুরো স্ক্রিপ্ট ফাইলটি তৈরি করার পর এই লাইনটি বাদ দিয়ে দেখুন কী হয়? +> স্ক্রিপ্ট ফাইলটি সম্পূর্ণ তৈরি করার পর এই লাইনটি সরিয়ে দেখুন কী ঘটে? -দ্বিতীয়ত, `index.html` একটি ব্রাউজার উইন্ডোতে খুলুন এবং ইন্টারফেসটি পরিদর্শন করুন। যখন আপনি একটি গাছপালা ক্লিক করেন, তখন আপনি দেখতে পাবেন কীভাবে 'e' ইভেন্টটি ক্যাপচার করা হয়। ইভেন্টটি বিশ্লেষণ করে দেখুন কত তথ্য একটি `pointerdown` ইভেন্ট দ্বারা সংগ্রহ করা হয়! +দ্বিতীয়ত, `index.html` একটি ব্রাউজার উইন্ডোতে খুলুন এবং ইন্টারফেসটি ইন্সপেক্ট করুন। যখন আপনি একটি গাছপালা ক্লিক করেন, তখন আপনি দেখতে পাবেন কীভাবে 'e' ইভেন্টটি ক্যাপচার করা হয়। ইভেন্টটি বিশ্লেষণ করুন এবং দেখুন pointerdown ইভেন্টে কত তথ্য সংগ্রহ করা হয়! -পরবর্তী ধাপে, লক্ষ্য করুন কীভাবে লোকাল ভেরিয়েবল `pos3` এবং `pos4`-কে `e.clientX`-এ সেট করা হয়েছে। আপনি ইন্সপেকশন প্যানেলে `e` মানগুলো খুঁজে পেতে পারেন। এই মানগুলো গাছপালার x এবং y কোঅর্ডিনেটগুলো ক্যাপচার করে যখন আপনি এটি ক্লিক বা স্পর্শ করেন। আপনি গাছপালাগুলোর আচরণের উপর সূক্ষ্ম নিয়ন্ত্রণ রাখতে চান, তাই তাদের কোঅর্ডিনেটগুলো ট্র্যাক করেন। +এরপর, লক্ষ্য করুন কীভাবে লোকাল ভ্যারিয়েবল `pos3` এবং `pos4`-কে `e.clientX`-এ সেট করা হয়। ইন্সপেকশন প্যানেলে আপনি `e` মানগুলো খুঁজে পেতে পারেন। এই মানগুলো গাছপালার x এবং y কোঅর্ডিনেটগুলো ক্যাপচার করে যখন আপনি এটি ক্লিক বা স্পর্শ করেন। গাছপালার আচরণ সূক্ষ্মভাবে নিয়ন্ত্রণ করতে হলে আপনাকে তাদের কোঅর্ডিনেটগুলো ট্র্যাক করতে হবে। -✅ এটি কি আরও পরিষ্কার হচ্ছে কেন পুরো অ্যাপটি একটি বড় ক্লোজার দিয়ে তৈরি করা হয়েছে? যদি তা না হতো, তাহলে কীভাবে আপনি ১৪টি ড্র্যাগযোগ্য গাছপালার প্রতিটির স্কোপ বজায় রাখতেন? +✅ এটি কি আরও পরিষ্কার হচ্ছে কেন পুরো অ্যাপটি একটি বড় ক্লোজার দিয়ে তৈরি করা হয়েছে? যদি না হয়, তাহলে কীভাবে আপনি ১৪টি ড্র্যাগযোগ্য গাছপালার স্কোপ বজায় রাখবেন? -`pos4 = e.clientY`-এর নিচে আরও দুটি পয়েন্টার ইভেন্ট ম্যানিপুলেশন যোগ করে প্রাথমিক ফাংশনটি সম্পূর্ণ করুন: +প্রাথমিক ফাংশনটি সম্পূর্ণ করতে আরও দুটি pointer ইভেন্ট ম্যানিপুলেশন যোগ করুন `pos4 = e.clientY`-এর নিচে: ```html document.onpointermove = elementDrag; document.onpointerup = stopElementDrag; ``` +এখন আপনি নির্দেশ করছেন যে গাছপালাটি pointer-এর সাথে ড্র্যাগ করা হবে এবং pointer ছেড়ে দিলে ড্র্যাগিং বন্ধ হবে। `onpointermove` এবং `onpointerup` একই API-এর অংশ যা `onpointerdown`। ইন্টারফেস এখন এরর ছুঁড়বে কারণ আপনি এখনও `elementDrag` এবং `stopElementDrag` ফাংশনগুলো সংজ্ঞায়িত করেননি, তাই এগুলো তৈরি করুন। -এখন আপনি নির্দেশ করছেন যে আপনি গাছপালাটিকে পয়েন্টারের সাথে টেনে নিয়ে যেতে চান এবং গাছপালাটি ছেড়ে দিলে ড্র্যাগিং অঙ্গভঙ্গি থেমে যাবে। `onpointermove` এবং `onpointerup` একই API-এর অংশ যা `onpointerdown`। ইন্টারফেস এখন ত্রুটি নিক্ষেপ করবে কারণ আপনি এখনও `elementDrag` এবং `stopElementDrag` ফাংশনগুলো সংজ্ঞায়িত করেননি, তাই এগুলো পরবর্তী ধাপে তৈরি করুন। +## elementDrag এবং stopElementDrag ফাংশনগুলো -## `elementDrag` এবং `stopElementDrag` ফাংশন - -আপনি দুটি অভ্যন্তরীণ ফাংশন যোগ করে আপনার ক্লোজার সম্পূর্ণ করবেন যা গাছপালা ড্র্যাগ করার সময় এবং ড্র্যাগ বন্ধ করার সময় কী হবে তা পরিচালনা করবে। আপনি এমন একটি আচরণ চান যেখানে আপনি যেকোনো সময় যেকোনো গাছপালা টেনে নিয়ে যেতে পারেন এবং এটি স্ক্রিনের যেকোনো জায়গায় রাখতে পারেন। এই ইন্টারফেসটি বেশ নমনীয় (উদাহরণস্বরূপ, এখানে কোনো ড্রপ জোন নেই) যাতে আপনি আপনার টেরারিয়ামটি নিজের মতো করে ডিজাইন করতে পারেন। +আপনার ক্লোজার সম্পূর্ণ করতে দুটি অভ্যন্তরীণ ফাংশন যোগ করবেন, যা গাছপালা ড্র্যাগ করার সময় এবং ড্র্যাগ বন্ধ করার সময় কী হবে তা পরিচালনা করবে। আপনি চান যে ব্যবহারকারী যেকোনো সময় যেকোনো গাছপালা ড্র্যাগ করতে এবং স্ক্রিনে যেকোনো জায়গায় রাখতে পারবে। এই ইন্টারফেসটি বেশ অ-নির্দেশনামূলক (যেমন কোনো ড্রপ জোন নেই) যাতে আপনি আপনার টেরারিয়ামটি নিজের মতো করে ডিজাইন করতে পারেন। ### কাজ -`pointerDrag`-এর বন্ধনী বন্ধ হওয়ার ঠিক পরে `elementDrag` ফাংশনটি যোগ করুন: +`pointerDrag`-এর বন্ধনী শেষে `elementDrag` ফাংশনটি যোগ করুন: ```javascript function elementDrag(e) { @@ -176,18 +175,17 @@ function elementDrag(e) { terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px'; } ``` +এই ফাংশনে, আপনি প্রাথমিক পজিশন ১-৪-এ অনেক পরিবর্তন করেন, যা বাইরের ফাংশনে লোকাল ভ্যারিয়েবল হিসেবে সেট করা হয়েছিল। এখানে কী হচ্ছে? -এই ফাংশনে, আপনি প্রাথমিক অবস্থান ১-৪-কে অনেক সম্পাদনা করেন যা আপনি বাইরের ফাংশনে লোকাল ভেরিয়েবল হিসেবে সেট করেছিলেন। এখানে কী হচ্ছে? - -যখন আপনি ড্র্যাগ করেন, তখন আপনি `pos1`-কে পুনরায় অ্যাসাইন করেন, এটি `pos3` (যা আপনি আগে `e.clientX` হিসেবে সেট করেছিলেন) এবং বর্তমান `e.clientX` মানের মধ্যে পার্থক্যের সমান করে। আপনি `pos2`-এর জন্য একই অপারেশন করেন। এরপর, আপনি `pos3` এবং `pos4`-কে উপাদানের নতুন X এবং Y কোঅর্ডিনেটে রিসেট করেন। আপনি ড্র্যাগ করার সময় কনসোলে এই পরিবর্তনগুলো দেখতে পারেন। এরপর, আপনি গাছপালার CSS স্টাইল ম্যানিপুলেট করেন যাতে এর নতুন অবস্থান সেট করা যায়, যা `pos1` এবং `pos2`-এর নতুন অবস্থানের উপর ভিত্তি করে গণনা করা হয়, এর অফসেটের সাথে তুলনা করে। +ড্র্যাগ করার সময়, আপনি `pos1`-কে পুনরায় অ্যাসাইন করেন, যা `pos3` (যা আগে `e.clientX` হিসেবে সেট করা হয়েছিল) থেকে বর্তমান `e.clientX` মান বিয়োগ করে। একই অপারেশন `pos2`-এর জন্য করা হয়। এরপর, আপনি `pos3` এবং `pos4`-কে এলিমেন্টের নতুন X এবং Y কোঅর্ডিনেট হিসেবে রিসেট করেন। আপনি ড্র্যাগ করার সময় কনসোলে এই পরিবর্তনগুলো দেখতে পারেন। এরপর, আপনি গাছপালার CSS স্টাইল ম্যানিপুলেট করেন, যাতে তার নতুন অবস্থান `pos1` এবং `pos2`-এর নতুন অবস্থানের উপর ভিত্তি করে সেট করা হয়। -> `offsetTop` এবং `offsetLeft` হলো CSS প্রোপার্টি যা একটি উপাদানের অবস্থান সেট করে তার প্যারেন্টের উপর ভিত্তি করে; এর প্যারেন্ট যেকোনো উপাদান হতে পারে যা `static` হিসেবে পজিশন করা হয়নি। +> `offsetTop` এবং `offsetLeft` হলো CSS প্রপার্টি, যা একটি এলিমেন্টের অবস্থান তার প্যারেন্টের উপর ভিত্তি করে সেট করে; এর প্যারেন্ট যেকোনো এলিমেন্ট হতে পারে যা `static` হিসেবে পজিশন করা হয়নি। -এই অবস্থান পুনর্গণনা টেরারিয়াম এবং এর গাছপালাগুলোর আচরণ সূক্ষ্মভাবে টিউন করতে দেয়। +এই অবস্থান পুনঃগণনা টেরারিয়াম এবং এর গাছপালার আচরণ সূক্ষ্মভাবে নিয়ন্ত্রণ করতে সাহায্য করে। ### কাজ -ইন্টারফেসটি সম্পূর্ণ করতে চূড়ান্ত কাজ হলো `stopElementDrag` ফাংশনটি `elementDrag`-এর বন্ধনী বন্ধ হওয়ার পরে যোগ করা: +ইন্টারফেস সম্পূর্ণ করতে `stopElementDrag` ফাংশনটি `elementDrag`-এর বন্ধনী শেষে যোগ করুন: ```javascript function stopElementDrag() { @@ -196,27 +194,27 @@ function stopElementDrag() { } ``` -এই ছোট ফাংশনটি `onpointerup` এবং `onpointermove` ইভেন্টগুলো রিসেট করে যাতে আপনি আবার গাছপালার অগ্রগতি পুনরায় শুরু করতে পারেন বা একটি নতুন গাছপালা ড্র্যাগ করতে পারেন। +এই ছোট ফাংশনটি `onpointerup` এবং `onpointermove` ইভেন্টগুলো রিসেট করে, যাতে আপনি আবার গাছপালার প্রগ্রেস শুরু করতে পারেন বা নতুন গাছপালা ড্র্যাগ করতে পারেন। -✅ যদি আপনি এই ইভেন্টগুলো null-এ সেট না করেন তবে কী হয়? +✅ যদি আপনি এই ইভেন্টগুলো null-এ সেট না করেন, তাহলে কী ঘটে? -এখন আপনি আপনার প্রকল্পটি সম্পন্ন করেছেন! +এখন আপনি আপনার প্রকল্প সম্পন্ন করেছেন! -🥇অভিনন্দন! আপনি আপনার সুন্দর টেরারিয়ামটি শেষ করেছেন। ![শেষ টেরারিয়াম](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.bn.png) +🥇অভিনন্দন! আপনি আপনার সুন্দর টেরারিয়াম তৈরি করেছেন। ![সম্পন্ন টেরারিয়াম](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.bn.png) --- ## 🚀চ্যালেঞ্জ -আপনার ক্লোজারে একটি নতুন ইভেন্ট হ্যান্ডলার যোগ করুন যা গাছপালাগুলোর জন্য আরও কিছু করে; উদাহরণস্বরূপ, একটি গাছপালাকে সামনে আনতে ডাবল-ক্লিক করুন। সৃজনশীল হন! +আপনার ক্লোজারে নতুন ইভেন্ট হ্যান্ডলার যোগ করুন, যাতে গাছপালাগুলোর উপর আরও কিছু করা যায়; উদাহরণস্বরূপ, একটি গাছপালাকে ডাবল-ক্লিক করলে এটি সামনে চলে আসবে। সৃজনশীল হন! ## পোস্ট-লেকচার কুইজ [পোস্ট-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/20) -## পর্যালোচনা ও স্ব-অধ্যয়ন +## পর্যালোচনা এবং স্ব-অধ্যয়ন -স্ক্রিনে উপাদানগুলো ড্র্যাগ করা তুচ্ছ মনে হতে পারে, তবে এটি করার অনেক উপায় এবং অনেক ফাঁদ রয়েছে, যা আপনি যে প্রভাবটি চান তার উপর নির্ভর করে। প্রকৃতপক্ষে, একটি সম্পূর্ণ [ড্র্যাগ এবং ড্রপ API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) রয়েছে যা আপনি চেষ্টা করতে পারেন। আমরা এই মডিউলে এটি ব্যবহার করিনি কারণ আমরা একটি ভিন্ন প্রভাব চেয়েছিলাম, তবে এই API আপনার নিজস্ব প্রকল্পে চেষ্টা করুন এবং দেখুন আপনি কী অর্জন করতে পারেন। +স্ক্রিনে এলিমেন্ট ড্র্যাগ করা তুচ্ছ মনে হতে পারে, তবে এটি করার অনেক উপায় রয়েছে এবং আপনি যে প্রভাব চান তার উপর নির্ভর করে অনেক সমস্যাও রয়েছে। আসলে, একটি সম্পূর্ণ [ড্র্যাগ এবং ড্রপ API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) রয়েছে যা আপনি চেষ্টা করতে পারেন। আমরা এই মডিউলে এটি ব্যবহার করিনি কারণ আমরা একটু ভিন্ন প্রভাব চেয়েছিলাম, তবে এই API আপনার নিজস্ব প্রকল্পে চেষ্টা করুন এবং দেখুন আপনি কী অর্জন করতে পারেন। পয়েন্টার ইভেন্ট সম্পর্কে আরও তথ্য খুঁজুন [W3C ডকস](https://www.w3.org/TR/pointerevents1/) এবং [MDN ওয়েব ডকস](https://developer.mozilla.org/docs/Web/API/Pointer_events)-এ। @@ -226,5 +224,7 @@ function stopElementDrag() { [DOM নিয়ে আরও কাজ করুন](assignment.md) +--- + **অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না। \ No newline at end of file +এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file diff --git a/translations/bn/4-typing-game/typing-game/README.md b/translations/bn/4-typing-game/typing-game/README.md index f56fe0d6..9718b441 100644 --- a/translations/bn/4-typing-game/typing-game/README.md +++ b/translations/bn/4-typing-game/typing-game/README.md @@ -1,8 +1,8 @@ # স্পেস গেম তৈরি করুন পার্ট ১: পরিচিতি -![ভিডিও](../../../../6-space-game/images/pewpew.gif) +![video](../../../../6-space-game/images/pewpew.gif) ## প্রাক-লেকচার কুইজ @@ -17,18 +17,18 @@ CO_OP_TRANSLATOR_METADATA: ### গেম ডেভেলপমেন্টে ইনহেরিটেন্স এবং কম্পোজিশন -আগের পাঠগুলোতে, আপনি যে অ্যাপ তৈরি করেছেন তার ডিজাইন আর্কিটেকচারের বিষয়ে খুব বেশি চিন্তা করার প্রয়োজন ছিল না, কারণ প্রকল্পগুলো খুব ছোট পরিসরে ছিল। তবে, যখন আপনার অ্যাপ্লিকেশন আকার এবং পরিসরে বৃদ্ধি পায়, তখন আর্কিটেকচারাল সিদ্ধান্তগুলো বড় বিষয় হয়ে দাঁড়ায়। জাভাস্ক্রিপ্টে বড় অ্যাপ্লিকেশন তৈরি করার দুটি প্রধান পদ্ধতি রয়েছে: *কম্পোজিশন* বা *ইনহেরিটেন্স*। উভয়েরই সুবিধা এবং অসুবিধা রয়েছে, তবে আসুন এগুলো একটি গেমের প্রসঙ্গ থেকে ব্যাখ্যা করি। +আগের পাঠগুলোতে, আপনি যে অ্যাপ তৈরি করেছেন তার ডিজাইন আর্কিটেকচার নিয়ে খুব বেশি চিন্তা করার দরকার পড়েনি, কারণ প্রকল্পগুলো খুব ছোট পরিসরের ছিল। তবে, যখন আপনার অ্যাপ্লিকেশন আকার এবং পরিসরে বৃদ্ধি পায়, তখন আর্কিটেকচারাল সিদ্ধান্তগুলো বড় বিষয় হয়ে দাঁড়ায়। জাভাস্ক্রিপ্টে বড় অ্যাপ্লিকেশন তৈরি করার দুটি প্রধান পদ্ধতি রয়েছে: *কম্পোজিশন* বা *ইনহেরিটেন্স*। উভয়েরই সুবিধা এবং অসুবিধা রয়েছে, তবে আসুন এগুলো একটি গেমের প্রেক্ষাপটে ব্যাখ্যা করি। -✅ প্রোগ্রামিংয়ের সবচেয়ে বিখ্যাত বইগুলোর একটি [ডিজাইন প্যাটার্নস](https://en.wikipedia.org/wiki/Design_Patterns) নিয়ে। +✅ প্রোগ্রামিং সম্পর্কিত সবচেয়ে বিখ্যাত বইগুলোর একটি [ডিজাইন প্যাটার্নস](https://en.wikipedia.org/wiki/Design_Patterns) নিয়ে। -একটি গেমে আপনার কাছে `গেম অবজেক্ট` থাকে, যা স্ক্রিনে উপস্থিত থাকে। এর মানে হলো এগুলো একটি কার্টেসিয়ান কোঅর্ডিনেট সিস্টেমে অবস্থান করে, যেখানে `x` এবং `y` কোঅর্ডিনেট থাকে। যখন আপনি একটি গেম তৈরি করবেন, আপনি লক্ষ্য করবেন যে আপনার সমস্ত গেম অবজেক্টের একটি সাধারণ বৈশিষ্ট্য থাকে, যা প্রতিটি গেমের জন্য সাধারণ, যেমন: +একটি গেমে আপনার কাছে `গেম অবজেক্ট` থাকে, যা স্ক্রিনে উপস্থিত থাকে। এর মানে হলো এগুলোর একটি অবস্থান থাকে কার্টেসিয়ান কোঅর্ডিনেট সিস্টেমে, যা `x` এবং `y` কোঅর্ডিনেট দ্বারা চিহ্নিত হয়। যখন আপনি একটি গেম তৈরি করবেন, আপনি লক্ষ্য করবেন যে আপনার সমস্ত গেম অবজেক্টের একটি সাধারণ বৈশিষ্ট্য থাকে, যা প্রতিটি গেমের জন্য সাধারণ, যেমন: - **অবস্থান-ভিত্তিক** বেশিরভাগ, যদি না সব, গেম উপাদান অবস্থান-ভিত্তিক হয়। এর মানে হলো এগুলোর একটি অবস্থান থাকে, একটি `x` এবং `y`। -- **চলনযোগ্য** এগুলো এমন অবজেক্ট যা নতুন অবস্থানে যেতে পারে। সাধারণত এটি একটি হিরো, একটি মনস্টার বা একটি NPC (নন-প্লেয়ার ক্যারেক্টার), তবে উদাহরণস্বরূপ, একটি স্থির অবজেক্ট যেমন একটি গাছ নয়। -- **স্ব-ধ্বংসকারী** এই অবজেক্টগুলো একটি নির্দিষ্ট সময়ের জন্যই বিদ্যমান থাকে, তারপর তারা মুছে ফেলার জন্য প্রস্তুত হয়। সাধারণত এটি একটি `dead` বা `destroyed` বুলিয়ান দ্বারা উপস্থাপিত হয় যা গেম ইঞ্জিনকে সংকেত দেয় যে এই অবজেক্টটি আর রেন্ডার করা উচিত নয়। -- **কুল-ডাউন** 'কুল-ডাউন' একটি সাধারণ বৈশিষ্ট্য যা স্বল্পস্থায়ী অবজেক্টগুলোর মধ্যে দেখা যায়। একটি সাধারণ উদাহরণ হলো একটি টেক্সট বা গ্রাফিকাল ইফেক্ট যেমন একটি বিস্ফোরণ যা কয়েক মিলিসেকেন্ডের জন্যই দেখা উচিত। +- **চলনযোগ্য** এগুলো এমন অবজেক্ট যা নতুন অবস্থানে যেতে পারে। সাধারণত এটি একটি হিরো, একটি মনস্টার বা একটি NPC (নন প্লেয়ার ক্যারেক্টার), তবে উদাহরণস্বরূপ, একটি স্থির অবজেক্ট যেমন একটি গাছ নয়। +- **স্ব-ধ্বংসকারী** এই অবজেক্টগুলো শুধুমাত্র একটি নির্দিষ্ট সময়ের জন্য বিদ্যমান থাকে, তারপর তারা মুছে ফেলার জন্য প্রস্তুত হয়। সাধারণত এটি একটি `dead` বা `destroyed` বুলিয়ান দ্বারা উপস্থাপিত হয় যা গেম ইঞ্জিনকে সংকেত দেয় যে এই অবজেক্টটি আর রেন্ডার করা উচিত নয়। +- **কুল-ডাউন** 'কুল-ডাউন' একটি সাধারণ বৈশিষ্ট্য যা স্বল্পস্থায়ী অবজেক্টগুলোর মধ্যে দেখা যায়। একটি সাধারণ উদাহরণ হলো একটি টেক্সট বা গ্রাফিকাল ইফেক্ট যেমন একটি বিস্ফোরণ যা শুধুমাত্র কয়েক মিলিসেকেন্ডের জন্য দেখা উচিত। -✅ একটি গেম যেমন প্যাক-ম্যানের কথা ভাবুন। আপনি কি এই গেমে উপরে তালিকাভুক্ত চারটি অবজেক্ট টাইপ চিহ্নিত করতে পারেন? +✅ একটি গেম যেমন Pac-Man নিয়ে চিন্তা করুন। আপনি কি এই গেমে উপরের চারটি অবজেক্ট টাইপ চিহ্নিত করতে পারেন? ### আচরণ প্রকাশ করা @@ -40,7 +40,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ ইনহেরিটেন্স একটি গুরুত্বপূর্ণ ধারণা। [MDN-এর ইনহেরিটেন্স সম্পর্কিত নিবন্ধ](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) থেকে আরও জানুন। -কোডের মাধ্যমে প্রকাশ করলে, একটি গেম অবজেক্ট সাধারণত এভাবে দেখতে পারে: +কোডের মাধ্যমে প্রকাশ করলে, একটি গেম অবজেক্ট সাধারণত এরকম দেখতে পারে: ```javascript @@ -88,11 +88,11 @@ hero.moveTo(5,5); const tree = new Tree(); ``` -✅ কয়েক মিনিট সময় নিয়ে একটি প্যাক-ম্যান হিরো (উদাহরণস্বরূপ ইনকি, পিঙ্কি বা ব্লিঙ্কি) কল্পনা করুন এবং এটি কীভাবে জাভাস্ক্রিপ্টে লেখা হবে তা ভাবুন। +✅ কয়েক মিনিট সময় নিয়ে Pac-Man এর একটি হিরো (উদাহরণস্বরূপ, Inky, Pinky বা Blinky) কল্পনা করুন এবং এটি কীভাবে জাভাস্ক্রিপ্টে লেখা হবে তা ভাবুন। **কম্পোজিশন** -অবজেক্ট ইনহেরিটেন্স পরিচালনার একটি ভিন্ন পদ্ধতি হলো *কম্পোজিশন* ব্যবহার করা। তখন অবজেক্টগুলো তাদের আচরণ এভাবে প্রকাশ করে: +অবজেক্ট ইনহেরিটেন্স পরিচালনার একটি ভিন্ন উপায় হলো *কম্পোজিশন* ব্যবহার করা। তখন অবজেক্টগুলো তাদের আচরণ এভাবে প্রকাশ করে: ```javascript //create a constant gameObject @@ -137,9 +137,9 @@ hero.moveTo(5,5); const tree = createStatic(0,0, 'Tree'); ``` -**আমি কোন প্যাটার্ন ব্যবহার করব?** +**কোন প্যাটার্নটি ব্যবহার করব?** -আপনার পছন্দের উপর নির্ভর করে আপনি কোন প্যাটার্নটি বেছে নেবেন। জাভাস্ক্রিপ্ট উভয় পদ্ধতিকে সমর্থন করে। +আপনার উপর নির্ভর করে আপনি কোন প্যাটার্নটি বেছে নেবেন। জাভাস্ক্রিপ্ট উভয় পদ্ধতিই সমর্থন করে। -- @@ -147,13 +147,13 @@ const tree = createStatic(0,0, 'Tree'); ## পাব/সাব প্যাটার্ন -✅ Pub/Sub এর অর্থ 'পাবলিশ-সাবস্ক্রাইব' +✅ Pub/Sub এর অর্থ 'publish-subscribe' -এই প্যাটার্নটি ধারণা দেয় যে আপনার অ্যাপ্লিকেশনের বিভিন্ন অংশ একে অপরের সম্পর্কে জানবে না। কেন? এটি সাধারণভাবে কী ঘটছে তা দেখতে অনেক সহজ করে তোলে যদি বিভিন্ন অংশ আলাদা থাকে। এটি আচরণ হঠাৎ পরিবর্তন করাও সহজ করে তোলে যদি প্রয়োজন হয়। আমরা এটি কীভাবে অর্জন করি? আমরা কিছু ধারণা প্রতিষ্ঠা করে এটি করি: +এই প্যাটার্নটি ধারণা দেয় যে আপনার অ্যাপ্লিকেশনের বিভিন্ন অংশ একে অপরের সম্পর্কে জানবে না। কেন? এটি সাধারণভাবে কী ঘটছে তা বোঝা অনেক সহজ করে তোলে যদি বিভিন্ন অংশ আলাদা থাকে। এটি আচরণ হঠাৎ পরিবর্তন করাও সহজ করে তোলে যদি প্রয়োজন হয়। আমরা এটি কীভাবে অর্জন করি? আমরা কিছু ধারণা প্রতিষ্ঠা করে এটি করি: - **মেসেজ**: একটি মেসেজ সাধারণত একটি টেক্সট স্ট্রিং হয় যা একটি ঐচ্ছিক পে-লোড (একটি ডেটা যা মেসেজটি সম্পর্কে স্পষ্ট করে) সহ থাকে। একটি গেমে একটি সাধারণ মেসেজ হতে পারে `KEY_PRESSED_ENTER`। - **পাবলিশার**: এই উপাদানটি একটি মেসেজ *পাবলিশ* করে এবং এটি সমস্ত সাবস্ক্রাইবারদের কাছে পাঠায়। -- **সাবস্ক্রাইবার**: এই উপাদানটি নির্দিষ্ট মেসেজগুলো *শোনে* এবং এই মেসেজটি পাওয়ার ফলস্বরূপ কিছু কাজ সম্পাদন করে, যেমন একটি লেজার ফায়ার করা। +- **সাবস্ক্রাইবার**: এই উপাদানটি নির্দিষ্ট মেসেজগুলো *শোনে* এবং এই মেসেজটি পাওয়ার ফলস্বরূপ কিছু কাজ সম্পন্ন করে, যেমন একটি লেজার চালানো। এর বাস্তবায়ন আকারে খুব ছোট হলেও এটি একটি অত্যন্ত শক্তিশালী প্যাটার্ন। এটি কীভাবে বাস্তবায়িত হতে পারে তা এখানে দেখুন: @@ -180,7 +180,7 @@ class EventEmitter { ``` -উপরে থাকা কোডটি ব্যবহার করতে আমরা একটি খুব ছোট বাস্তবায়ন তৈরি করতে পারি: +উপরে উল্লেখিত কোড ব্যবহার করে আমরা একটি খুব ছোট বাস্তবায়ন তৈরি করতে পারি: ```javascript //set up a message structure @@ -204,7 +204,7 @@ window.addEventListener('keyup', (evt) => { }); ``` -উপরে আমরা একটি কিবোর্ড ইভেন্ট, `ArrowLeft` সংযুক্ত করেছি এবং `HERO_MOVE_LEFT` মেসেজ পাঠিয়েছি। আমরা সেই মেসেজটি শুনি এবং ফলস্বরূপ `hero`-কে সরাই। এই প্যাটার্নের শক্তি হলো ইভেন্ট লিসনার এবং হিরো একে অপরের সম্পর্কে জানে না। আপনি `ArrowLeft`-কে `A` কীতে পুনরায় ম্যাপ করতে পারেন। এছাড়াও, এটি সম্ভব হবে `ArrowLeft`-এ সম্পূর্ণ ভিন্ন কিছু করার জন্য ইভেন্টEmitter-এর `on` ফাংশনে কয়েকটি সম্পাদনা করে: +উপরে আমরা একটি কিবোর্ড ইভেন্ট, `ArrowLeft` সংযুক্ত করেছি এবং `HERO_MOVE_LEFT` মেসেজ পাঠিয়েছি। আমরা সেই মেসেজটি শুনি এবং ফলস্বরূপ `hero` কে সরাই। এই প্যাটার্নের শক্তি হলো ইভেন্ট লিসনার এবং হিরো একে অপরের সম্পর্কে জানে না। আপনি `ArrowLeft` কে `A` কীতে পুনরায় ম্যাপ করতে পারেন। এছাড়াও, এটি সম্ভব হবে `ArrowLeft` এ সম্পূর্ণ ভিন্ন কিছু করার জন্য ইভেন্টEmitter এর `on` ফাংশনে কয়েকটি সম্পাদনা করে: ```javascript eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { @@ -212,13 +212,13 @@ eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { }); ``` -যখন আপনার গেম বড় হয় তখন জিনিসগুলো আরও জটিল হয়ে ওঠে, এই প্যাটার্নটি জটিলতায় একই থাকে এবং আপনার কোড পরিষ্কার থাকে। এই প্যাটার্নটি গ্রহণ করার জন্য এটি সত্যিই সুপারিশ করা হয়। +যখন আপনার গেম বড় হয় এবং জটিল হয়ে ওঠে, এই প্যাটার্নটি জটিলতায় একই থাকে এবং আপনার কোড পরিষ্কার থাকে। এই প্যাটার্নটি গ্রহণ করার জন্য এটি সত্যিই সুপারিশ করা হয়। --- ## 🚀 চ্যালেঞ্জ -ভাবুন কীভাবে পাব-সাব প্যাটার্ন একটি গেমকে উন্নত করতে পারে। কোন অংশগুলো ইভেন্ট প্রকাশ করবে এবং গেমটি কীভাবে সেগুলোর প্রতিক্রিয়া জানাবে? এখন আপনার সৃজনশীল হওয়ার সময়, একটি নতুন গেমের কথা ভাবুন এবং এর অংশগুলো কীভাবে আচরণ করতে পারে তা কল্পনা করুন। +ভাবুন কীভাবে পাব-সাব প্যাটার্ন একটি গেমকে উন্নত করতে পারে। কোন অংশগুলো ইভেন্ট পাঠাবে, এবং গেমটি কীভাবে সেগুলোর প্রতিক্রিয়া জানাবে? এখন আপনার সৃজনশীল হওয়ার সুযোগ, একটি নতুন গেম নিয়ে চিন্তা করুন এবং এর অংশগুলো কীভাবে আচরণ করতে পারে তা ভাবুন। ## পোস্ট-লেকচার কুইজ @@ -232,5 +232,7 @@ eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { [একটি গেমের মক আপ তৈরি করুন](assignment.md) -**অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file +--- + +**দাবিত্যাগ**: +এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না। \ No newline at end of file diff --git a/translations/bn/6-space-game/2-drawing-to-canvas/README.md b/translations/bn/6-space-game/2-drawing-to-canvas/README.md index cb897689..bd33571d 100644 --- a/translations/bn/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/bn/6-space-game/2-drawing-to-canvas/README.md @@ -1,25 +1,25 @@ -# মহাকাশ গেম তৈরি করুন পার্ট ২: হিরো এবং মনস্টার ক্যানভাসে আঁকা +# স্পেস গেম তৈরি করুন পার্ট ২: হিরো এবং মনস্টারকে ক্যানভাসে আঁকুন -## প্রাক-লেকচার কুইজ +## প্রি-লেকচার কুইজ -[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/31) +[প্রি-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/31) ## ক্যানভাস -ক্যানভাস একটি HTML উপাদান যা ডিফল্টভাবে কোনো কন্টেন্ট রাখে না; এটি একটি ফাঁকা পৃষ্ঠা। এটি ব্যবহার করে আঁকতে হবে। +ক্যানভাস একটি HTML এলিমেন্ট যা ডিফল্টভাবে কোনো কন্টেন্ট থাকে না; এটি একটি ফাঁকা পাতা। আপনাকে এটি ব্যবহার করে আঁকতে হবে। -✅ [ক্যানভাস API](https://developer.mozilla.org/docs/Web/API/Canvas_API) সম্পর্কে আরও জানুন MDN-এ। +✅ [ক্যানভাস API সম্পর্কে আরও পড়ুন](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN-এ। -এটি সাধারণত পৃষ্ঠার বডির অংশ হিসেবে এভাবে ঘোষণা করা হয়: +এটি সাধারণত পেজের বডির অংশ হিসেবে এভাবে ডিক্লেয়ার করা হয়: ```html @@ -27,24 +27,24 @@ CO_OP_TRANSLATOR_METADATA: উপরের কোডে আমরা `id`, `width` এবং `height` সেট করছি। -- `id`: এটি সেট করুন যাতে আপনি এটি রেফারেন্স করতে পারেন যখন এটি নিয়ে কাজ করতে হবে। -- `width`: এটি উপাদানের প্রস্থ। -- `height`: এটি উপাদানের উচ্চতা। +- `id`: এটি সেট করুন যাতে আপনি এটি রেফারেন্স করতে পারেন যখন এর সাথে ইন্টারঅ্যাক্ট করতে হবে। +- `width`: এটি এলিমেন্টের প্রস্থ। +- `height`: এটি এলিমেন্টের উচ্চতা। -## সহজ জ্যামিতিক চিত্র আঁকা +## সাধারণ জ্যামিতিক আকৃতি আঁকা -ক্যানভাস জিনিস আঁকার জন্য একটি কার্টেসিয়ান কোঅর্ডিনেট সিস্টেম ব্যবহার করে। এটি x-অক্ষ এবং y-অক্ষ ব্যবহার করে কোনো কিছুর অবস্থান প্রকাশ করে। অবস্থান `0,0` হল উপরের বাম কোণ এবং নিচের ডান কোণ হল ক্যানভাসের প্রস্থ এবং উচ্চতা। +ক্যানভাস জিনিস আঁকার জন্য একটি কার্টেসিয়ান কোঅর্ডিনেট সিস্টেম ব্যবহার করে। এটি x-অক্ষ এবং y-অক্ষ ব্যবহার করে কোনো কিছুর অবস্থান প্রকাশ করে। অবস্থান `0,0` হলো উপরের বাম কোণ এবং নিচের ডান কোণ হলো ক্যানভাসের WIDTH এবং HEIGHT। -![ক্যানভাসের গ্রিড](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.bn.png) +![ক্যানভাসের গ্রিড](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.bn.png) > ছবি [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) থেকে -ক্যানভাস উপাদানে আঁকার জন্য আপনাকে নিম্নলিখিত ধাপগুলো অনুসরণ করতে হবে: +ক্যানভাস এলিমেন্টে আঁকার জন্য আপনাকে নিম্নলিখিত ধাপগুলো অনুসরণ করতে হবে: -1. **রেফারেন্স নিন** ক্যানভাস উপাদানের। -2. **রেফারেন্স নিন** ক্যানভাস উপাদানের উপর থাকা কনটেক্সট উপাদানের। -3. **ড্রয়িং অপারেশন করুন** কনটেক্সট উপাদান ব্যবহার করে। +1. **রেফারেন্স নিন** ক্যানভাস এলিমেন্টের। +1. **রেফারেন্স নিন** কন্টেক্সট এলিমেন্টের যা ক্যানভাস এলিমেন্টে থাকে। +1. **ড্রিং অপারেশন করুন** কন্টেক্সট এলিমেন্ট ব্যবহার করে। -উপরের ধাপগুলোর জন্য কোড সাধারণত এভাবে দেখায়: +উপরের ধাপগুলোর কোড সাধারণত এভাবে দেখায়: ```javascript // draws a red rectangle @@ -61,19 +61,19 @@ ctx.fillStyle = 'red'; ctx.fillRect(0,0, 200, 200) // x,y,width, height ``` -✅ ক্যানভাস API মূলত 2D চিত্রের উপর ফোকাস করে, তবে আপনি ওয়েবসাইটে 3D উপাদানও আঁকতে পারেন; এর জন্য আপনি [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ব্যবহার করতে পারেন। +✅ ক্যানভাস API মূলত 2D আকৃতির উপর ফোকাস করে, তবে আপনি ওয়েবসাইটে 3D এলিমেন্টও আঁকতে পারেন; এর জন্য আপনি [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ব্যবহার করতে পারেন। -ক্যানভাস API দিয়ে আপনি বিভিন্ন জিনিস আঁকতে পারেন, যেমন: +ক্যানভাস API দিয়ে আপনি বিভিন্ন ধরনের জিনিস আঁকতে পারেন যেমন: -- **জ্যামিতিক চিত্র**, আমরা ইতিমধ্যে দেখিয়েছি কীভাবে একটি আয়তক্ষেত্র আঁকা যায়, তবে আরও অনেক কিছু আঁকা সম্ভব। +- **জ্যামিতিক আকৃতি**, আমরা ইতিমধ্যে দেখিয়েছি কীভাবে একটি রেকটেঙ্গেল আঁকা যায়, তবে আরও অনেক কিছু আঁকা সম্ভব। - **টেক্সট**, আপনি যেকোনো ফন্ট এবং রঙে টেক্সট আঁকতে পারেন। -- **ছবি**, আপনি একটি .jpg বা .png এর মতো ইমেজ অ্যাসেট থেকে ছবি আঁকতে পারেন। +- **ইমেজ**, আপনি একটি ইমেজ অ্যাসেট যেমন .jpg বা .png থেকে ইমেজ আঁকতে পারেন। -✅ চেষ্টা করুন! আপনি জানেন কীভাবে একটি আয়তক্ষেত্র আঁকতে হয়, এবার একটি বৃত্ত আঁকার চেষ্টা করুন। CodePen-এ কিছু আকর্ষণীয় ক্যানভাস ড্রয়িং দেখুন। এখানে একটি [বিশেষভাবে চমকপ্রদ উদাহরণ](https://codepen.io/dissimulate/pen/KrAwx) রয়েছে। +✅ চেষ্টা করুন! আপনি জানেন কীভাবে একটি রেকটেঙ্গেল আঁকা যায়, এবার একটি বৃত্ত আঁকার চেষ্টা করুন। CodePen-এ কিছু আকর্ষণীয় ক্যানভাস আঁকার উদাহরণ দেখুন। এখানে একটি [বিশেষভাবে চমকপ্রদ উদাহরণ](https://codepen.io/dissimulate/pen/KrAwx) রয়েছে। -## একটি ইমেজ অ্যাসেট লোড এবং আঁকা +## ইমেজ অ্যাসেট লোড এবং আঁকা -আপনি একটি ইমেজ অ্যাসেট লোড করেন একটি `Image` অবজেক্ট তৈরি করে এবং এর `src` প্রপার্টি সেট করে। এরপর আপনি `load` ইভেন্টটি শোনেন এটি ব্যবহারের জন্য প্রস্তুত কিনা তা জানার জন্য। কোডটি এভাবে দেখায়: +আপনি একটি ইমেজ অ্যাসেট লোড করেন একটি `Image` অবজেক্ট তৈরি করে এবং এর `src` প্রপার্টি সেট করে। এরপর আপনি `load` ইভেন্টে শুনবেন এটি ব্যবহারের জন্য প্রস্তুত কিনা। কোডটি এভাবে দেখায়: ### অ্যাসেট লোড @@ -87,7 +87,7 @@ img.onload = () => { ### অ্যাসেট লোড প্যাটার্ন -উপরের কোডটি একটি কাঠামোর মধ্যে মোড়ানো সুপারিশ করা হয়, যাতে এটি ব্যবহার করা সহজ হয় এবং আপনি এটি সম্পূর্ণ লোড হওয়ার পরেই এটি ম্যানিপুলেট করার চেষ্টা করেন: +উপরের কোডটি এভাবে একটি কনস্ট্রাক্টে মোড়ানো সুপারিশ করা হয়, যাতে এটি ব্যবহার করা সহজ হয় এবং আপনি শুধুমাত্র এটি সম্পূর্ণ লোড হওয়ার পরই এটি ম্যানিপুলেট করার চেষ্টা করেন: ```javascript function loadAsset(path) { @@ -110,7 +110,7 @@ async function run() { ``` -গেম অ্যাসেট স্ক্রিনে আঁকার জন্য আপনার কোডটি এভাবে দেখাবে: +গেম অ্যাসেট স্ক্রিনে আঁকার জন্য আপনার কোড এভাবে দেখাবে: ```javascript async function run() { @@ -124,11 +124,11 @@ async function run() { } ``` -## এখন আপনার গেম তৈরি শুরু করার সময় +## এখন আপনার গেম তৈরি শুরু করার সময় ### কী তৈরি করবেন -আপনি একটি ওয়েব পৃষ্ঠা তৈরি করবেন যেখানে একটি ক্যানভাস উপাদান থাকবে। এটি একটি কালো স্ক্রিন `1024*768` রেন্ডার করবে। আমরা আপনাকে দুটি ছবি দিয়েছি: +আপনি একটি ওয়েব পেজ তৈরি করবেন যেখানে একটি ক্যানভাস এলিমেন্ট থাকবে। এটি একটি কালো স্ক্রিন `1024*768` রেন্ডার করবে। আমরা আপনাকে দুটি ইমেজ সরবরাহ করেছি: - হিরো শিপ @@ -138,9 +138,9 @@ async function run() { ![মনস্টার শিপ](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.bn.png) -### ডেভেলপমেন্ট শুরু করার জন্য প্রস্তাবিত ধাপ +### ডেভেলপমেন্ট শুরু করার জন্য সুপারিশকৃত ধাপ -`your-work` সাব ফোল্ডারে তৈরি করা ফাইলগুলো খুঁজুন। এতে নিম্নলিখিত ফাইলগুলো থাকা উচিত: +`your-work` সাব ফোল্ডারে তৈরি করা ফাইলগুলো খুঁজে বের করুন। এটি নিম্নলিখিত ফাইলগুলো থাকা উচিত: ```bash -| assets @@ -151,31 +151,31 @@ async function run() { -| package.json ``` -Visual Studio Code-এ এই ফোল্ডারের একটি কপি খুলুন। আপনার একটি স্থানীয় ডেভেলপমেন্ট পরিবেশ সেটআপ করা প্রয়োজন, বিশেষত Visual Studio Code সহ NPM এবং Node ইনস্টল করা। যদি আপনার কম্পিউটারে `npm` সেটআপ না থাকে, [এখানে কীভাবে সেটআপ করবেন](https://www.npmjs.com/get-npm)। +এই ফোল্ডারের একটি কপি Visual Studio Code-এ খুলুন। আপনার একটি লোকাল ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ করা প্রয়োজন, বিশেষত Visual Studio Code সহ NPM এবং Node ইনস্টল করা। যদি আপনার কম্পিউটারে `npm` সেটআপ না থাকে, [এখানে কীভাবে সেটআপ করবেন](https://www.npmjs.com/get-npm)। -আপনার প্রকল্প শুরু করুন `your_work` ফোল্ডারে নেভিগেট করে: +আপনার প্রজেক্ট শুরু করুন `your_work` ফোল্ডারে নেভিগেট করে: ```bash cd your-work npm start ``` -উপরের কমান্ডটি `http://localhost:5000` ঠিকানায় একটি HTTP সার্ভার শুরু করবে। একটি ব্রাউজার খুলুন এবং এই ঠিকানাটি ইনপুট করুন। এটি এখন একটি ফাঁকা পৃষ্ঠা, তবে এটি পরিবর্তিত হবে। +উপরের কমান্ডটি একটি HTTP সার্ভার চালু করবে ঠিকানা `http://localhost:5000`-এ। একটি ব্রাউজার খুলুন এবং সেই ঠিকানা ইনপুট করুন। এটি এখন একটি ফাঁকা পেজ, তবে এটি পরিবর্তিত হবে। -> নোট: আপনার স্ক্রিনে পরিবর্তন দেখতে ব্রাউজারটি রিফ্রেশ করুন। +> নোট: স্ক্রিনে পরিবর্তন দেখতে আপনার ব্রাউজার রিফ্রেশ করুন। ### কোড যোগ করুন -`your-work/app.js`-এ প্রয়োজনীয় কোড যোগ করুন নিচের সমস্যাগুলো সমাধান করতে: +`your-work/app.js`-এ প্রয়োজনীয় কোড যোগ করুন নিচের সমস্যাগুলো সমাধানের জন্য: -1. **ক্যানভাস আঁকুন** কালো ব্যাকগ্রাউন্ড সহ - > টিপ: `/app.js`-এ সঠিক TODO-র নিচে দুটি লাইন যোগ করুন, যেখানে `ctx` উপাদানটি কালো সেট করুন এবং উপরের/বাম কোঅর্ডিনেট 0,0 এবং উচ্চতা ও প্রস্থ ক্যানভাসের সমান করুন। -2. **টেক্সচার লোড করুন** - > টিপ: `await loadTexture` ব্যবহার করে প্লেয়ার এবং শত্রু ইমেজ যোগ করুন এবং ইমেজ পাথ পাস করুন। আপনি এখনো স্ক্রিনে এগুলো দেখতে পাবেন না! -3. **হিরো আঁকুন** স্ক্রিনের কেন্দ্রে নিচের অর্ধে - > টিপ: `drawImage` API ব্যবহার করে `heroImg` স্ক্রিনে আঁকুন, যেখানে `canvas.width / 2 - 45` এবং `canvas.height - canvas.height / 4` সেট করুন। -4. **5*5 মনস্টার আঁকুন** - > টিপ: এখন স্ক্রিনে শত্রুদের আঁকার কোড আনকমেন্ট করুন। এরপর `createEnemies` ফাংশনে যান এবং এটি তৈরি করুন। +1. **ড্র করুন** একটি কালো ব্যাকগ্রাউন্ড সহ ক্যানভাস + > টিপ: `/app.js`-এ উপযুক্ত TODO-এর নিচে দুটি লাইন যোগ করুন, `ctx` এলিমেন্টকে কালো সেট করুন এবং টপ/লেফট কোঅর্ডিনেট 0,0 এবং উচ্চতা ও প্রস্থ ক্যানভাসের সমান সেট করুন। +2. **লোড করুন** টেক্সচার + > টিপ: প্লেয়ার এবং শত্রু ইমেজ যোগ করুন `await loadTexture` ব্যবহার করে এবং ইমেজ পাথ পাস করে। আপনি এখনো স্ক্রিনে এগুলো দেখতে পাবেন না! +3. **ড্র করুন** হিরোকে স্ক্রিনের কেন্দ্রে নিচের অর্ধে + > টিপ: `drawImage` API ব্যবহার করে স্ক্রিনে heroImg আঁকুন, `canvas.width / 2 - 45` এবং `canvas.height - canvas.height / 4)` সেট করে। +4. **ড্র করুন** 5*5 মনস্টার + > টিপ: এখন আপনি স্ক্রিনে শত্রুদের আঁকার কোড আনকমেন্ট করতে পারেন। এরপর `createEnemies` ফাংশনে যান এবং এটি তৈরি করুন। প্রথমে কিছু কনস্ট্যান্ট সেট করুন: @@ -186,7 +186,7 @@ npm start const STOP_X = START_X + MONSTER_WIDTH; ``` - এরপর, একটি লুপ তৈরি করুন মনস্টারদের অ্যারে স্ক্রিনে আঁকার জন্য: + এরপর একটি লুপ তৈরি করুন যা মনস্টারদের অ্যারে স্ক্রিনে আঁকবে: ```javascript for (let x = START_X; x < STOP_X; x += 98) { @@ -198,7 +198,7 @@ npm start ## ফলাফল -শেষ ফলাফলটি এমন দেখাবে: +শেষ ফলাফলটি এভাবে দেখাবে: ![কালো স্ক্রিনে একটি হিরো এবং 5*5 মনস্টার](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.bn.png) @@ -210,19 +210,21 @@ npm start ## 🚀 চ্যালেঞ্জ -আপনি 2D-কেন্দ্রিক ক্যানভাস API সম্পর্কে শিখেছেন; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) সম্পর্কে জানুন এবং একটি 3D অবজেক্ট আঁকার চেষ্টা করুন। +আপনি 2D-কেন্দ্রিক ক্যানভাস API সম্পর্কে শিখেছেন; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) দেখুন এবং একটি 3D অবজেক্ট আঁকার চেষ্টা করুন। ## পোস্ট-লেকচার কুইজ [পোস্ট-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/32) -## পুনরালোচনা ও স্ব-অধ্যয়ন +## রিভিউ এবং সেলফ স্টাডি -ক্যানভাস API সম্পর্কে আরও জানুন [এটি পড়ে](https://developer.mozilla.org/docs/Web/API/Canvas_API)। +ক্যানভাস API সম্পর্কে আরও জানুন [এটি পড়ার মাধ্যমে](https://developer.mozilla.org/docs/Web/API/Canvas_API)। ## অ্যাসাইনমেন্ট -[ক্যানভাস API নিয়ে কাজ করুন](assignment.md) +[ক্যানভাস API নিয়ে খেলুন](assignment.md) + +--- **অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। এর মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file +এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file diff --git a/translations/bn/6-space-game/3-moving-elements-around/README.md b/translations/bn/6-space-game/3-moving-elements-around/README.md index 89382065..61d130ce 100644 --- a/translations/bn/6-space-game/3-moving-elements-around/README.md +++ b/translations/bn/6-space-game/3-moving-elements-around/README.md @@ -1,30 +1,30 @@ -# মহাকাশ গেম তৈরি করুন পার্ট ৩: গতি যোগ করা +# মহাকাশ গেম তৈরি পর্ব ৩: গতি যোগ করা ## প্রাক-লেকচার কুইজ [প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/33) -গেম তখনই মজার হয় যখন পর্দায় এলিয়েনরা ঘুরে বেড়ায়! এই গেমে আমরা দুটি ধরণের গতি ব্যবহার করব: +গেম তখনই মজার হয় যখন পর্দায় এলিয়েনরা দৌড়াদৌড়ি করে! এই গেমে আমরা দুটি ধরণের গতির ব্যবহার করব: -- **কিবোর্ড/মাউস গতি**: যখন ব্যবহারকারী কিবোর্ড বা মাউস ব্যবহার করে পর্দায় একটি বস্তু সরায়। -- **গেম দ্বারা সৃষ্ট গতি**: যখন গেম একটি নির্দিষ্ট সময় ব্যবধানে একটি বস্তু সরায়। +- **কীবোর্ড/মাউস গতি**: যখন ব্যবহারকারী কীবোর্ড বা মাউস ব্যবহার করে পর্দায় একটি বস্তু সরায়। +- **গেম দ্বারা সৃষ্ট গতি**: যখন গেম একটি নির্দিষ্ট সময়ের ব্যবধানে একটি বস্তু সরায়। -তাহলে আমরা কীভাবে পর্দায় জিনিস সরাই? এটি সবই কার্টেসিয়ান কোঅর্ডিনেটস নিয়ে: আমরা বস্তুর অবস্থান (x, y) পরিবর্তন করি এবং তারপর পর্দা পুনরায় আঁকি। +তাহলে আমরা কীভাবে পর্দায় জিনিসপত্র সরাই? এটি সবই কার্টেসিয়ান কোঅর্ডিনেট নিয়ে: আমরা বস্তুর অবস্থান (x, y) পরিবর্তন করি এবং তারপর পর্দা পুনরায় আঁকি। -সাধারণত পর্দায় *গতি* অর্জনের জন্য আপনাকে নিম্নলিখিত ধাপগুলি অনুসরণ করতে হয়: +সাধারণত পর্দায় *গতি* অর্জনের জন্য আপনাকে নিম্নলিখিত ধাপগুলি প্রয়োজন: -1. **নতুন অবস্থান নির্ধারণ করুন** একটি বস্তুর জন্য; এটি প্রয়োজন যাতে বস্তুটি সরানো হয়েছে বলে মনে হয়। -2. **পর্দা পরিষ্কার করুন**, পর্দা পুনরায় আঁকার মধ্যে পরিষ্কার করতে হবে। আমরা এটি একটি ব্যাকগ্রাউন্ড রঙ দিয়ে একটি আয়তক্ষেত্র আঁকার মাধ্যমে পরিষ্কার করতে পারি। -3. **নতুন অবস্থানে বস্তু পুনরায় আঁকুন**। এটি করে আমরা অবশেষে একটি অবস্থান থেকে অন্য অবস্থানে বস্তুটি সরানোর কাজ সম্পন্ন করি। +1. **নতুন অবস্থান নির্ধারণ করুন** একটি বস্তুর জন্য; এটি প্রয়োজন যাতে বস্তুটি সরেছে বলে মনে হয়। +2. **পর্দা পরিষ্কার করুন**, প্রতিবার আঁকার মধ্যে পর্দা পরিষ্কার করতে হবে। আমরা এটি একটি ব্যাকগ্রাউন্ড রঙ দিয়ে একটি আয়তক্ষেত্র আঁকার মাধ্যমে পরিষ্কার করতে পারি। +3. **নতুন অবস্থানে বস্তু পুনরায় আঁকুন**। এটি করার মাধ্যমে আমরা অবশেষে একটি অবস্থান থেকে অন্য অবস্থানে বস্তু সরানোর কাজটি সম্পন্ন করি। কোডে এটি দেখতে এমন হতে পারে: @@ -39,13 +39,13 @@ ctx.fillStyle = "black"; ctx.drawImage(heroImg, hero.x, hero.y); ``` -✅ আপনি কি ভাবতে পারেন কেন আপনার হিরোকে প্রতি সেকেন্ডে অনেক ফ্রেমে পুনরায় আঁকা পারফরম্যান্স খরচ বাড়াতে পারে? [এই প্যাটার্নের বিকল্পগুলি](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) সম্পর্কে পড়ুন। +✅ আপনি কি ভাবতে পারেন কেন প্রতি সেকেন্ডে আপনার হিরোকে অনেকবার পুনরায় আঁকা পারফরম্যান্সের খরচ বাড়াতে পারে? [এই প্যাটার্নের বিকল্পগুলি](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) সম্পর্কে পড়ুন। -## কিবোর্ড ইভেন্ট পরিচালনা করুন +## কীবোর্ড ইভেন্ট পরিচালনা -আপনি ইভেন্ট পরিচালনা করেন নির্দিষ্ট ইভেন্টগুলিকে কোডের সাথে সংযুক্ত করে। কিবোর্ড ইভেন্টগুলি পুরো উইন্ডোতে ট্রিগার হয়, যেখানে মাউস ইভেন্ট যেমন `click` একটি নির্দিষ্ট উপাদান ক্লিক করার সাথে সংযুক্ত হতে পারে। আমরা এই প্রকল্পে কিবোর্ড ইভেন্ট ব্যবহার করব। +আপনি ইভেন্ট পরিচালনা করেন নির্দিষ্ট ইভেন্টগুলিকে কোডের সাথে সংযুক্ত করে। কীবোর্ড ইভেন্টগুলি পুরো উইন্ডোতে ট্রিগার হয়, যেখানে মাউস ইভেন্ট যেমন `click` একটি নির্দিষ্ট উপাদানে ক্লিক করার সাথে সংযুক্ত হতে পারে। আমরা এই প্রকল্পে কীবোর্ড ইভেন্ট ব্যবহার করব। -একটি ইভেন্ট পরিচালনা করতে আপনাকে উইন্ডোর `addEventListener()` পদ্ধতি ব্যবহার করতে হবে এবং এটিকে দুটি ইনপুট প্যারামিটার দিতে হবে। প্রথম প্যারামিটারটি ইভেন্টের নাম, যেমন `keyup`। দ্বিতীয় প্যারামিটারটি সেই ফাংশন যা ইভেন্ট ঘটার ফলে আহ্বান করা উচিত। +ইভেন্ট পরিচালনা করতে আপনাকে উইন্ডোর `addEventListener()` পদ্ধতি ব্যবহার করতে হবে এবং এটিকে দুটি ইনপুট প্যারামিটার দিতে হবে। প্রথম প্যারামিটারটি ইভেন্টের নাম, যেমন `keyup`। দ্বিতীয় প্যারামিটারটি সেই ফাংশন যা ইভেন্টটি ঘটার ফলে আহ্বান করা উচিত। এখানে একটি উদাহরণ: @@ -60,14 +60,14 @@ window.addEventListener('keyup', (evt) => { কী ইভেন্টের জন্য ইভেন্টে দুটি প্রপার্টি রয়েছে যা আপনি দেখতে পারেন কোন কী চাপা হয়েছে: -- `key`, এটি চাপা কী-এর একটি স্ট্রিং উপস্থাপনা, যেমন `ArrowUp` -- `keyCode`, এটি একটি সংখ্যার উপস্থাপনা, যেমন `37`, যা `ArrowLeft` এর সাথে মিলে যায়। +- `key`, এটি চাপা কীটির একটি স্ট্রিং রূপ, যেমন `ArrowUp` +- `keyCode`, এটি একটি সংখ্যার রূপ, যেমন `37`, যা `ArrowLeft` এর সাথে মিলে যায়। -✅ কী ইভেন্ট ম্যানিপুলেশন গেম ডেভেলপমেন্টের বাইরেও কার্যকর। এই কৌশলটির জন্য আপনি আর কী কী ব্যবহার ভাবতে পারেন? +✅ কী ইভেন্ট ম্যানিপুলেশন গেম ডেভেলপমেন্টের বাইরেও উপকারী। এই কৌশলটির জন্য আপনি আর কী কী ব্যবহার ভাবতে পারেন? ### বিশেষ কী: একটি সতর্কতা -কিছু *বিশেষ* কী রয়েছে যা উইন্ডোকে প্রভাবিত করে। এর মানে হল যে আপনি যদি একটি `keyup` ইভেন্ট শুনছেন এবং এই বিশেষ কী ব্যবহার করে আপনার হিরোকে সরান, এটি অনুভূমিক স্ক্রলিংও করবে। এই কারণে আপনি যখন আপনার গেম তৈরি করবেন তখন এই বিল্ট-ইন ব্রাউজার আচরণটি *বন্ধ* করতে চাইতে পারেন। এর জন্য আপনাকে এমন কোড প্রয়োজন: +কিছু *বিশেষ* কী রয়েছে যা উইন্ডোকে প্রভাবিত করে। এর মানে হল যে আপনি যদি একটি `keyup` ইভেন্ট শুনছেন এবং এই বিশেষ কী ব্যবহার করে আপনার হিরোকে সরান তবে এটি অনুভূমিক স্ক্রলিংও করবে। এই কারণে আপনি যখন আপনার গেম তৈরি করবেন তখন এই বিল্ট-ইন ব্রাউজার আচরণটি *বন্ধ* করতে চাইতে পারেন। এর জন্য আপনাকে এমন কোড প্রয়োজন: ```javascript let onKeyDown = function (e) { @@ -88,11 +88,11 @@ let onKeyDown = function (e) { window.addEventListener('keydown', onKeyDown); ``` -উপরের কোডটি নিশ্চিত করবে যে অ্যারো-কী এবং স্পেস কী-এর *ডিফল্ট* আচরণ বন্ধ হয়ে গেছে। *বন্ধ* করার প্রক্রিয়া ঘটে যখন আমরা `e.preventDefault()` কল করি। +উপরের কোডটি নিশ্চিত করবে যে অ্যারো-কী এবং স্পেস কী তাদের *ডিফল্ট* আচরণ বন্ধ করে দিয়েছে। *বন্ধ করার* প্রক্রিয়াটি ঘটে যখন আমরা `e.preventDefault()` কল করি। ## গেম দ্বারা সৃষ্ট গতি -আমরা `setTimeout()` বা `setInterval()` ফাংশন ব্যবহার করে টাইমার দিয়ে জিনিসগুলিকে নিজে থেকেই সরাতে পারি, যা প্রতিটি টিক বা সময় ব্যবধানে বস্তুর অবস্থান আপডেট করে। এটি দেখতে এমন হতে পারে: +আমরা `setTimeout()` বা `setInterval()` ফাংশনের মতো টাইমার ব্যবহার করে জিনিসপত্রকে নিজে থেকেই সরাতে পারি, যা প্রতিটি টিক বা সময়ের ব্যবধানে বস্তুর অবস্থান আপডেট করে। এটি কোডে এমন হতে পারে: ```javascript let id = setInterval(() => { @@ -103,7 +103,7 @@ let id = setInterval(() => { ## গেম লুপ -গেম লুপ একটি ধারণা যা মূলত একটি ফাংশন যা নিয়মিত ব্যবধানে আহ্বান করা হয়। এটি গেম লুপ বলা হয় কারণ ব্যবহারকারীর কাছে দৃশ্যমান হওয়া উচিত এমন সবকিছু লুপে আঁকা হয়। গেম লুপ গেমের অংশ হওয়া সমস্ত গেম অবজেক্ট ব্যবহার করে, তাদের সবাইকে আঁকে যদি না কোনো কারণে তারা আর গেমের অংশ না থাকে। উদাহরণস্বরূপ, যদি একটি অবজেক্ট একটি শত্রু হয় যা লেজার দ্বারা আঘাতপ্রাপ্ত হয় এবং বিস্ফোরিত হয়, এটি আর বর্তমান গেম লুপের অংশ নয় (আপনি পরবর্তী পাঠে এটি সম্পর্কে আরও শিখবেন)। +গেম লুপ একটি ধারণা যা মূলত একটি ফাংশন যা নিয়মিত ব্যবধানে আহ্বান করা হয়। এটিকে গেম লুপ বলা হয় কারণ ব্যবহারকারীর কাছে দৃশ্যমান হওয়া উচিত এমন সবকিছু লুপে আঁকা হয়। গেম লুপটি গেমের অংশ হওয়া সমস্ত গেম অবজেক্ট ব্যবহার করে, তাদের সবাইকে আঁকে যদি না কোনো কারণে তারা আর গেমের অংশ না থাকে। উদাহরণস্বরূপ, যদি একটি অবজেক্ট একটি শত্রু হয় যা লেজার দ্বারা আঘাতপ্রাপ্ত হয় এবং বিস্ফোরিত হয়, এটি আর বর্তমান গেম লুপের অংশ নয় (আপনি পরবর্তী পাঠে এটি সম্পর্কে আরও শিখবেন)। গেম লুপ সাধারণত কোডে এমন দেখতে পারে: @@ -119,18 +119,18 @@ let gameLoopId = setInterval(() => }, 200); ``` -উপরের লুপটি প্রতি `200` মিলিসেকেন্ডে ক্যানভাস পুনরায় আঁকতে আহ্বান করা হয়। আপনার গেমের জন্য সবচেয়ে ভালো সময় ব্যবধান বেছে নেওয়ার ক্ষমতা আপনার রয়েছে। +উপরের লুপটি প্রতি `200` মিলিসেকেন্ডে ক্যানভাস পুনরায় আঁকতে আহ্বান করা হয়। আপনার গেমের জন্য সবচেয়ে উপযুক্ত ইন্টারভালটি বেছে নেওয়ার ক্ষমতা আপনার রয়েছে। ## মহাকাশ গেম চালিয়ে যাওয়া -আপনি বিদ্যমান কোডটি নিয়ে এটি প্রসারিত করবেন। হয় আপনি পার্ট I-এ সম্পন্ন করা কোড দিয়ে শুরু করুন অথবা [পার্ট II-স্টার্টার](../../../../6-space-game/3-moving-elements-around/your-work) এর কোড ব্যবহার করুন। +আপনি বিদ্যমান কোডটি নিয়ে এটি বাড়াবেন। হয় আপনি প্রথম পর্বে সম্পন্ন করা কোড দিয়ে শুরু করুন অথবা [দ্বিতীয় পর্বের স্টার্টার](../../../../6-space-game/3-moving-elements-around/your-work) কোডটি ব্যবহার করুন। -- **হিরোকে সরানো**: আপনি কোড যোগ করবেন যাতে আপনি অ্যারো কী ব্যবহার করে হিরোকে সরাতে পারেন। -- **শত্রুদের সরানো**: আপনাকে কোড যোগ করতে হবে যাতে শত্রুরা একটি নির্দিষ্ট হারে উপরে থেকে নিচে সরতে পারে। +- **হিরো সরানো**: আপনি কোড যোগ করবেন যাতে আপনি অ্যারো কী ব্যবহার করে হিরোকে সরাতে পারেন। +- **শত্রুদের সরানো**: আপনাকে কোড যোগ করতে হবে যাতে শত্রুরা একটি নির্দিষ্ট গতিতে উপরে থেকে নিচে চলে। -## সুপারিশকৃত ধাপ +## প্রস্তাবিত ধাপসমূহ -`your-work` সাব ফোল্ডারে তৈরি করা ফাইলগুলি খুঁজুন। এটি নিম্নলিখিতটি ধারণ করা উচিত: +`your-work` সাব ফোল্ডারে তৈরি করা ফাইলগুলি খুঁজুন। এটি নিম্নলিখিতটি থাকা উচিত: ```bash -| assets @@ -141,22 +141,22 @@ let gameLoopId = setInterval(() => -| package.json ``` -আপনার প্রকল্পটি `your_work` ফোল্ডারে শুরু করুন টাইপ করে: +আপনার প্রকল্পটি `your_work` ফোল্ডারে শুরু করুন এই কমান্ডটি টাইপ করে: ```bash cd your-work npm start ``` -উপরেরটি ঠিকানা `http://localhost:5000` এ একটি HTTP সার্ভার শুরু করবে। একটি ব্রাউজার খুলুন এবং সেই ঠিকানা ইনপুট করুন, এখন এটি হিরো এবং সমস্ত শত্রুদের রেন্ডার করা উচিত; কিছুই এখনও সরছে না! +উপরেরটি `http://localhost:5000` ঠিকানায় একটি HTTP সার্ভার শুরু করবে। একটি ব্রাউজার খুলুন এবং সেই ঠিকানাটি ইনপুট করুন, এখন এটি হিরো এবং সমস্ত শত্রুদের রেন্ডার করা উচিত; কিছুই এখনও সরছে না! ### কোড যোগ করুন -1. **নির্দিষ্ট অবজেক্ট যোগ করুন** `hero`, `enemy` এবং `game object` এর জন্য, তাদের `x` এবং `y` প্রপার্টি থাকা উচিত। ([Inheritance or composition](../README.md) অংশটি মনে রাখুন)। +1. **`hero`, `enemy` এবং `game object` এর জন্য পৃথক অবজেক্ট যোগ করুন**, তাদের `x` এবং `y` প্রপার্টি থাকা উচিত। (মনে রাখুন [Inheritance বা composition](../README.md) অংশটি)। *ইঙ্গিত* `game object` হওয়া উচিত যার `x` এবং `y` এবং নিজেকে ক্যানভাসে আঁকার ক্ষমতা রয়েছে। - >টিপ: একটি নতুন GameObject ক্লাস যোগ করে শুরু করুন যার কনস্ট্রাক্টর নিচের মতো নির্ধারিত, এবং তারপর এটি ক্যানভাসে আঁকুন: + >টিপ: নিচের মতো কনস্ট্রাক্টর সহ একটি নতুন GameObject ক্লাস যোগ করা শুরু করুন এবং তারপর এটি ক্যানভাসে আঁকুন: ```javascript @@ -205,9 +205,9 @@ npm start } ``` -2. **কী-ইভেন্ট হ্যান্ডলার যোগ করুন** কী নেভিগেশনের জন্য (হিরোকে উপরে/নিচে, বামে/ডানে সরান) +2. **কী-ইভেন্ট হ্যান্ডলার যোগ করুন** হিরোকে উপরে/নিচে বামে/ডানে সরানোর জন্য। - *মনে রাখুন* এটি একটি কার্টেসিয়ান সিস্টেম, উপরের-বাম কোণটি `0,0`। এছাড়াও *ডিফল্ট আচরণ* বন্ধ করার কোড যোগ করতে ভুলবেন না। + *মনে রাখবেন* এটি একটি কার্টেসিয়ান সিস্টেম, উপরের-বাম কোণটি `0,0`। এছাড়াও ডিফল্ট আচরণ বন্ধ করার জন্য কোড যোগ করতে ভুলবেন না। >টিপ: আপনার onKeyDown ফাংশন তৈরি করুন এবং এটি উইন্ডোর সাথে সংযুক্ত করুন: @@ -221,13 +221,13 @@ npm start window.addEventListener("keydown", onKeyDown); ``` - এই পর্যায়ে আপনার ব্রাউজার কনসোল পরীক্ষা করুন এবং কীস্ট্রোকগুলি লগ হচ্ছে দেখুন। + এই পর্যায়ে আপনার ব্রাউজারের কনসোলে পরীক্ষা করুন এবং কীস্ট্রোকগুলি লগ হচ্ছে কিনা দেখুন। -3. **প্রয়োগ করুন** [Pub sub pattern](../README.md), এটি আপনার কোড পরিষ্কার রাখবে যখন আপনি বাকি অংশগুলি অনুসরণ করবেন। +3. **[Pub sub pattern](../README.md) প্রয়োগ করুন**, এটি আপনার কোড পরিষ্কার রাখবে যখন আপনি বাকি অংশগুলি অনুসরণ করবেন। - এটি করার জন্য, আপনি: + এটি করতে, আপনি: - 1. **একটি ইভেন্ট লিসেনার যোগ করুন** উইন্ডোতে: + 1. **উইন্ডোতে একটি ইভেন্ট লিসেনার যোগ করুন**: ```javascript window.addEventListener("keyup", (evt) => { @@ -243,7 +243,7 @@ npm start }); ``` - 1. **একটি EventEmitter ক্লাস তৈরি করুন** বার্তা প্রকাশ এবং সাবস্ক্রাইব করতে: + 1. **একটি EventEmitter ক্লাস তৈরি করুন** বার্তা প্রকাশ এবং সাবস্ক্রাইব করার জন্য: ```javascript class EventEmitter { @@ -313,7 +313,7 @@ npm start 1. **গেম লুপ সেট আপ করুন** - window.onload ফাংশনটি রিফ্যাক্টর করুন গেমটি ইনিশিয়ালাইজ করতে এবং একটি ভালো ব্যবধানে একটি গেম লুপ সেট আপ করতে। আপনি একটি লেজার বিমও যোগ করবেন: + উইন্ডোর onload ফাংশনটি রিফ্যাক্টর করুন গেমটি ইনিশিয়ালাইজ করতে এবং একটি ভালো ইন্টারভালে একটি গেম লুপ সেট আপ করতে। আপনি একটি লেজার বিমও যোগ করবেন: ```javascript window.onload = async () => { @@ -334,9 +334,9 @@ npm start }; ``` -5. **কোড যোগ করুন** শত্রুদের একটি নির্দিষ্ট ব্যবধানে সরানোর জন্য +5. **শত্রুদের একটি নির্দিষ্ট ইন্টারভালে সরানোর জন্য কোড যোগ করুন** - `createEnemies()` ফাংশনটি রিফ্যাক্টর করুন শত্রু তৈরি করতে এবং সেগুলিকে নতুন gameObjects ক্লাসে ঠেলে দিতে: + `createEnemies()` ফাংশনটি রিফ্যাক্টর করুন শত্রু তৈরি করতে এবং তাদের নতুন gameObjects ক্লাসে পুশ করতে: ```javascript function createEnemies() { @@ -355,7 +355,7 @@ npm start } ``` - এবং একটি `createHero()` ফাংশন যোগ করুন হিরোর জন্য একই প্রক্রিয়া করতে। + এবং হিরোর জন্য একটি `createHero()` ফাংশন যোগ করুন একই প্রক্রিয়া সম্পন্ন করতে। ```javascript function createHero() { @@ -368,7 +368,7 @@ npm start } ``` - এবং অবশেষে, একটি `drawGameObjects()` ফাংশন যোগ করুন আঁকা শুরু করতে: + এবং অবশেষে, একটি `drawGameObjects()` ফাংশন যোগ করুন ড্রয়িং শুরু করতে: ```javascript function drawGameObjects(ctx) { @@ -382,7 +382,7 @@ npm start ## 🚀 চ্যালেঞ্জ -যেমনটি আপনি দেখতে পাচ্ছেন, আপনার কোড 'স্প্যাগেটি কোড'-এ পরিণত হতে পারে যখন আপনি ফাংশন, ভেরিয়েবল এবং ক্লাস যোগ করতে শুরু করেন। কীভাবে আপনি আপনার কোড আরও পড়ার যোগ্য করতে আরও ভালোভাবে সংগঠিত করতে পারেন? এমন একটি সিস্টেম স্কেচ করুন যা আপনার কোড সংগঠিত করে, এমনকি যদি এটি এখনও একটি ফাইলেই থাকে। +যেমনটি আপনি দেখতে পাচ্ছেন, আপনার কোড 'স্প্যাগেটি কোড'-এ পরিণত হতে পারে যখন আপনি ফাংশন, ভেরিয়েবল এবং ক্লাস যোগ করতে থাকেন। কীভাবে আপনি আপনার কোড আরও পাঠযোগ্য করার জন্য আরও ভালোভাবে সংগঠিত করতে পারেন? এমন একটি সিস্টেম স্কেচ করুন যা আপনার কোড সংগঠিত করবে, এমনকি এটি এখনও একটি ফাইলে থাকে। ## পোস্ট-লেকচার কুইজ @@ -390,11 +390,13 @@ npm start ## পর্যালোচনা ও স্ব-অধ্যয়ন -যদিও আমরা ফ্রেমওয়ার্ক ব্যবহার না করে আমাদের গেম লিখছি, গেম ডেভেলপমেন্টের জন্য অনেক জাভাস্ক্রিপ্ট-ভিত্তিক ক্যানভাস ফ্রেমওয়ার্ক রয়েছে। [এই সম্পর্কে পড়ার](https://github.com/collections/javascript-game-engines) জন্য কিছু সময় নিন। +যদিও আমরা কোনো ফ্রেমওয়ার্ক ব্যবহার না করে আমাদের গেম লিখছি, গেম ডেভেলপমেন্টের জন্য অনেক জাভাস্ক্রিপ্ট-ভিত্তিক ক্যানভাস ফ্রেমওয়ার্ক রয়েছে। এই বিষয়ে কিছু সময় নিয়ে [পড়াশোনা করুন](https://github.com/collections/javascript-game-engines)। ## অ্যাসাইনমেন্ট [আপনার কোডে মন্তব্য যোগ করুন](assignment.md) +--- + **অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না। \ No newline at end of file +এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file diff --git a/translations/bn/6-space-game/4-collision-detection/README.md b/translations/bn/6-space-game/4-collision-detection/README.md index 67ca2436..fd78c3da 100644 --- a/translations/bn/6-space-game/4-collision-detection/README.md +++ b/translations/bn/6-space-game/4-collision-detection/README.md @@ -1,40 +1,40 @@ -# মহাকাশ গেম তৈরি পর্ব ৪: লেজার যোগ করা এবং সংঘর্ষ শনাক্তকরণ +# স্পেস গেম তৈরি করুন পার্ট ৪: লেজার যোগ করা এবং সংঘর্ষ সনাক্তকরণ -## প্রাক-লেকচার কুইজ +## প্রি-লেকচার কুইজ -[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/35) +[প্রি-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/35) -এই পাঠে আপনি শিখবেন কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে লেজার ছোড়া যায়! আমরা আমাদের গেমে দুটি জিনিস যোগ করব: +এই পাঠে আপনি শিখবেন কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে লেজার ছোঁড়া যায়! আমরা আমাদের গেমে দুটি জিনিস যোগ করব: -- **একটি লেজার**: এই লেজারটি আপনার হিরোর জাহাজ থেকে ঊর্ধ্বমুখী ছোড়া হবে -- **সংঘর্ষ শনাক্তকরণ**, শুটিং ক্ষমতা বাস্তবায়নের অংশ হিসেবে আমরা কিছু চমৎকার গেমের নিয়ম যোগ করব: - - **লেজার শত্রুকে আঘাত করে**: শত্রু লেজারের আঘাতে ধ্বংস হবে - - **লেজার স্ক্রিনের উপরের অংশে আঘাত করে**: লেজার স্ক্রিনের উপরের অংশে আঘাত করলে তা ধ্বংস হবে - - **শত্রু এবং হিরোর সংঘর্ষ**: শত্রু এবং হিরো একে অপরকে আঘাত করলে উভয়ই ধ্বংস হবে - - **শত্রু স্ক্রিনের নিচে পৌঁছায়**: শত্রু স্ক্রিনের নিচে পৌঁছালে শত্রু এবং হিরো উভয়ই ধ্বংস হবে +- **একটি লেজার**: এই লেজারটি আপনার হিরোর জাহাজ থেকে ঊর্ধ্বমুখী ছোঁড়া হবে। +- **সংঘর্ষ সনাক্তকরণ**, *লেজার ছোঁড়ার* ক্ষমতা বাস্তবায়নের অংশ হিসেবে আমরা কিছু সুন্দর গেমের নিয়ম যোগ করব: + - **লেজার শত্রুকে আঘাত করে**: শত্রু লেজারের আঘাতে মারা যায়। + - **লেজার স্ক্রিনের শীর্ষে আঘাত করে**: স্ক্রিনের শীর্ষে আঘাত করলে লেজার ধ্বংস হয়ে যায়। + - **শত্রু এবং হিরোর সংঘর্ষ**: শত্রু এবং হিরো একে অপরকে আঘাত করলে উভয়ই ধ্বংস হয়ে যায়। + - **শত্রু স্ক্রিনের নিচে আঘাত করে**: শত্রু স্ক্রিনের নিচে পৌঁছালে শত্রু এবং হিরো উভয়ই ধ্বংস হয়ে যায়। -সংক্ষেপে, আপনি -- *হিরো* -- স্ক্রিনের নিচে পৌঁছানোর আগেই লেজার দিয়ে সব শত্রুকে ধ্বংস করতে হবে। +সংক্ষেপে, আপনি -- *হিরো* -- স্ক্রিনের নিচে পৌঁছানোর আগে লেজার দিয়ে সব শত্রুকে আঘাত করতে হবে। ✅ প্রথম কম্পিউটার গেমটি সম্পর্কে একটু গবেষণা করুন। এর কার্যকারিতা কী ছিল? চলুন একসাথে বীরত্ব দেখাই! -## সংঘর্ষ শনাক্তকরণ +## সংঘর্ষ সনাক্তকরণ -সংঘর্ষ শনাক্তকরণ কীভাবে করব? আমাদের গেম অবজেক্টগুলোকে চলমান আয়তক্ষেত্র হিসেবে ভাবতে হবে। কেন? কারণ গেম অবজেক্ট আঁকার জন্য ব্যবহৃত ইমেজটি একটি আয়তক্ষেত্র: এর `x`, `y`, `width` এবং `height` থাকে। +সংঘর্ষ সনাক্তকরণ কীভাবে করা যায়? আমাদের গেমের অবজেক্টগুলোকে চলমান আয়তক্ষেত্র হিসেবে ভাবতে হবে। কেন? কারণ গেম অবজেক্ট আঁকার জন্য ব্যবহৃত ইমেজটি একটি আয়তক্ষেত্র: এর `x`, `y`, `width` এবং `height` থাকে। -যদি দুটি আয়তক্ষেত্র, যেমন হিরো এবং শত্রু *অন্তর্ভুক্ত* হয়, তাহলে সংঘর্ষ ঘটে। এরপর কী হবে তা গেমের নিয়মের উপর নির্ভর করে। সংঘর্ষ শনাক্তকরণ বাস্তবায়নের জন্য আপনাকে নিম্নলিখিত জিনিসগুলো প্রয়োজন: +যদি দুটি আয়তক্ষেত্র, যেমন হিরো এবং শত্রু *অবস্থানগতভাবে একে অপরকে ছেদ করে*, তাহলে সংঘর্ষ ঘটে। এরপর কী ঘটবে তা গেমের নিয়মের উপর নির্ভর করে। সংঘর্ষ সনাক্তকরণ বাস্তবায়নের জন্য আপনাকে নিম্নলিখিত জিনিসগুলো করতে হবে: -1. গেম অবজেক্টের একটি আয়তক্ষেত্র উপস্থাপনা পাওয়ার উপায়, যেমন: +1. গেম অবজেক্টের একটি আয়তক্ষেত্রের প্রতিনিধিত্ব পাওয়ার উপায়, যেমন: ```javascript rectFromGameObject() { @@ -47,7 +47,7 @@ CO_OP_TRANSLATOR_METADATA: } ``` -2. একটি তুলনা ফাংশন, এটি এমন দেখতে হতে পারে: +2. একটি তুলনা ফাংশন, যা দেখতে এমন হতে পারে: ```javascript function intersectRect(r1, r2) { @@ -58,9 +58,9 @@ CO_OP_TRANSLATOR_METADATA: } ``` -## কীভাবে জিনিস ধ্বংস করব +## জিনিস ধ্বংস করার উপায় -গেমে কিছু ধ্বংস করতে হলে গেমকে জানাতে হবে যে এটি আর গেম লুপে আঁকা হবে না, যা নির্দিষ্ট সময় অন্তর ট্রিগার হয়। এর একটি উপায় হলো, কোনো ঘটনা ঘটলে গেম অবজেক্টকে *মৃত* হিসেবে চিহ্নিত করা: +গেমে জিনিস ধ্বংস করতে হলে গেমকে জানাতে হবে যে এটি আর গেম লুপে আঁকা উচিত নয়, যা একটি নির্দিষ্ট ইন্টারভালে ট্রিগার হয়। এর একটি উপায় হলো, কোনো ঘটনা ঘটলে গেম অবজেক্টকে *মৃত* হিসেবে চিহ্নিত করা: ```javascript // collision happened @@ -73,17 +73,17 @@ enemy.dead = true gameObjects = gameObject.filter(go => !go.dead); ``` -## কীভাবে লেজার ছোড়া যায় +## কীভাবে লেজার ছোঁড়া যায় -লেজার ছোড়া মানে হলো একটি কী-ইভেন্টে সাড়া দেওয়া এবং এমন একটি অবজেক্ট তৈরি করা যা নির্দিষ্ট দিকে চলে। এজন্য আমাদের নিম্নলিখিত ধাপগুলো সম্পন্ন করতে হবে: +লেজার ছোঁড়া মানে হলো একটি কী-ইভেন্টে সাড়া দেওয়া এবং একটি অবজেক্ট তৈরি করা যা একটি নির্দিষ্ট দিকে চলে। এজন্য আমাদের নিম্নলিখিত ধাপগুলো সম্পন্ন করতে হবে: -1. **একটি লেজার অবজেক্ট তৈরি করুন**: হিরোর জাহাজের উপরের অংশ থেকে, যা তৈরি হওয়ার সাথে সাথে স্ক্রিনের উপরের দিকে চলতে শুরু করবে। -2. **কী ইভেন্টের সাথে কোড সংযুক্ত করুন**: কীবোর্ডের এমন একটি কী নির্বাচন করতে হবে যা খেলোয়াড়ের লেজার ছোড়াকে উপস্থাপন করে। -3. **লেজারের মতো দেখতে একটি গেম অবজেক্ট তৈরি করুন** যখন কী চাপা হয়। +1. **একটি লেজার অবজেক্ট তৈরি করুন**: হিরোর জাহাজের শীর্ষ থেকে, যা তৈরি হওয়ার সাথে সাথে স্ক্রিনের শীর্ষের দিকে ঊর্ধ্বমুখী চলতে শুরু করে। +2. **কী-ইভেন্টে কোড সংযুক্ত করুন**: কীবোর্ডে একটি কী নির্বাচন করতে হবে যা প্লেয়ার লেজার ছোঁড়ার প্রতিনিধিত্ব করে। +3. **একটি গেম অবজেক্ট তৈরি করুন যা দেখতে লেজারের মতো** যখন কী চাপা হয়। ## লেজারের কুলডাউন -লেজারটি প্রতিবার কী চাপলে ছোড়া উচিত, যেমন *স্পেস* কী। গেমটি খুব অল্প সময়ে অনেক বেশি লেজার তৈরি করা থেকে বিরত রাখতে আমাদের এটি ঠিক করতে হবে। এটি ঠিক করার উপায় হলো একটি *কুলডাউন* বা টাইমার বাস্তবায়ন করা, যা নিশ্চিত করবে যে একটি লেজার নির্দিষ্ট সময় পরপরই ছোড়া যাবে। এটি নিম্নলিখিতভাবে বাস্তবায়ন করা যায়: +লেজারটি প্রতিবার কী চাপলে ছোঁড়া উচিত, যেমন *স্পেস* কী। গেমটি খুব অল্প সময়ে অনেক বেশি লেজার তৈরি করা থেকে রোধ করতে আমাদের এটি ঠিক করতে হবে। এই সমস্যার সমাধান হলো একটি *কুলডাউন*, একটি টাইমার, বাস্তবায়ন করা যা নিশ্চিত করে যে একটি লেজার নির্দিষ্ট সময়ের মধ্যে শুধুমাত্র একবার ছোঁড়া যাবে। এটি নিম্নলিখিতভাবে বাস্তবায়ন করা যায়: ```javascript class Cooldown { @@ -109,23 +109,23 @@ class Weapon { } ``` -✅ মহাকাশ গেম সিরিজের প্রথম পাঠে ফিরে যান এবং *কুলডাউন* সম্পর্কে মনে করিয়ে নিন। +✅ স্পেস গেম সিরিজের প্রথম পাঠে ফিরে যান এবং *কুলডাউন* সম্পর্কে মনে করিয়ে নিন। ## কী তৈরি করতে হবে -আপনাকে আগের পাঠ থেকে বিদ্যমান কোড (যা আপনি পরিষ্কার এবং পুনর্গঠন করেছেন) নিতে হবে এবং এটি সম্প্রসারিত করতে হবে। পর্ব II-এর কোড থেকে শুরু করুন অথবা [পর্ব III- স্টার্টার](../../../../../../../../../your-work) থেকে কোড ব্যবহার করুন। +আপনার আগের পাঠ থেকে বিদ্যমান কোড (যা আপনি পরিষ্কার এবং পুনর্গঠন করেছেন) নিয়ে এটি সম্প্রসারিত করবেন। পার্ট II থেকে কোড শুরু করুন অথবা [পার্ট III- স্টার্টার](../../../../../../../../../your-work) থেকে কোড ব্যবহার করুন। -> টিপ: আপনি যে লেজার নিয়ে কাজ করবেন তা ইতোমধ্যেই আপনার অ্যাসেট ফোল্ডারে রয়েছে এবং কোডে রেফারেন্স করা আছে। +> টিপ: আপনি যে লেজার নিয়ে কাজ করবেন তা ইতোমধ্যেই আপনার অ্যাসেট ফোল্ডারে রয়েছে এবং আপনার কোডে রেফারেন্স করা হয়েছে। -- **সংঘর্ষ শনাক্তকরণ যোগ করুন**, যখন একটি লেজার কোনো কিছুর সাথে সংঘর্ষ করে তখন নিম্নলিখিত নিয়মগুলো প্রযোজ্য হবে: - 1. **লেজার শত্রুকে আঘাত করে**: শত্রু লেজারের আঘাতে ধ্বংস হবে - 2. **লেজার স্ক্রিনের উপরের অংশে আঘাত করে**: লেজার স্ক্রিনের উপরের অংশে আঘাত করলে তা ধ্বংস হবে - 3. **শত্রু এবং হিরোর সংঘর্ষ**: শত্রু এবং হিরো একে অপরকে আঘাত করলে উভয়ই ধ্বংস হবে - 4. **শত্রু স্ক্রিনের নিচে পৌঁছায়**: শত্রু স্ক্রিনের নিচে পৌঁছালে শত্রু এবং হিরো উভয়ই ধ্বংস হবে +- **সংঘর্ষ সনাক্তকরণ যোগ করুন**, যখন একটি লেজার কোনো কিছুর সাথে সংঘর্ষ করে তখন নিম্নলিখিত নিয়মগুলো প্রযোজ্য হবে: + 1. **লেজার শত্রুকে আঘাত করে**: শত্রু লেজারের আঘাতে মারা যায়। + 2. **লেজার স্ক্রিনের শীর্ষে আঘাত করে**: স্ক্রিনের শীর্ষে আঘাত করলে লেজার ধ্বংস হয়ে যায়। + 3. **শত্রু এবং হিরোর সংঘর্ষ**: শত্রু এবং হিরো একে অপরকে আঘাত করলে উভয়ই ধ্বংস হয়ে যায়। + 4. **শত্রু স্ক্রিনের নিচে আঘাত করে**: শত্রু স্ক্রিনের নিচে পৌঁছালে শত্রু এবং হিরো উভয়ই ধ্বংস হয়ে যায়। -## প্রস্তাবিত ধাপসমূহ +## সুপারিশকৃত ধাপ -`your-work` সাব ফোল্ডারে আপনার জন্য তৈরি করা ফাইলগুলো খুঁজুন। এটি নিম্নলিখিত ফাইলগুলো থাকা উচিত: +`your-work` সাব ফোল্ডারে তৈরি করা ফাইলগুলো খুঁজে বের করুন। এটি নিম্নলিখিত বিষয়গুলো ধারণ করবে: ```bash -| assets @@ -137,18 +137,18 @@ class Weapon { -| package.json ``` -আপনার প্রকল্পটি `your_work` ফোল্ডার থেকে শুরু করুন এই কমান্ডটি টাইপ করে: +আপনার প্রজেক্ট শুরু করুন `your_work` ফোল্ডার থেকে টাইপ করে: ```bash cd your-work npm start ``` -উপরের কমান্ডটি `http://localhost:5000` ঠিকানায় একটি HTTP সার্ভার চালু করবে। একটি ব্রাউজার খুলুন এবং এই ঠিকানাটি প্রবেশ করান, এখন এটি হিরো এবং সব শত্রু দেখাবে, যদিও কিছুই এখনও চলবে না :). +উপরেরটি একটি HTTP সার্ভার চালু করবে ঠিকানায় `http://localhost:5000`। একটি ব্রাউজার খুলুন এবং সেই ঠিকানাটি ইনপুট করুন, এখন এটি হিরো এবং সব শত্রু দেখাবে, কিছুই এখনও চলমান নয় :). ### কোড যোগ করুন -1. **আপনার গেম অবজেক্টের একটি আয়তক্ষেত্র উপস্থাপনা সেটআপ করুন, সংঘর্ষ পরিচালনার জন্য** নিচের কোডটি আপনাকে একটি `GameObject`-এর আয়তক্ষেত্র উপস্থাপনা পেতে সাহায্য করবে। আপনার GameObject ক্লাসটি সম্পাদনা করুন এবং এটি সম্প্রসারিত করুন: +1. **আপনার গেম অবজেক্টের একটি আয়তক্ষেত্রের প্রতিনিধিত্ব সেটআপ করুন, সংঘর্ষ পরিচালনা করতে** নিচের কোডটি আপনাকে একটি `GameObject` এর আয়তক্ষেত্রের প্রতিনিধিত্ব পেতে সাহায্য করবে। আপনার GameObject ক্লাসটি সম্পাদনা করুন: ```javascript rectFromGameObject() { @@ -161,7 +161,7 @@ npm start } ``` -2. **সংঘর্ষ পরীক্ষা করার কোড যোগ করুন** এটি একটি নতুন ফাংশন হবে যা দুটি আয়তক্ষেত্রের অন্তর্ভুক্তি পরীক্ষা করবে: +2. **সংঘর্ষ পরীক্ষা করার কোড যোগ করুন** এটি একটি নতুন ফাংশন হবে যা পরীক্ষা করবে দুটি আয়তক্ষেত্র একে অপরকে ছেদ করছে কিনা: ```javascript function intersectRect(r1, r2) { @@ -174,7 +174,7 @@ npm start } ``` -3. **লেজার ছোড়ার ক্ষমতা যোগ করুন** +3. **লেজার ছোঁড়ার ক্ষমতা যোগ করুন** 1. **কী-ইভেন্ট বার্তা যোগ করুন**। *স্পেস* কীটি হিরো জাহাজের ঠিক উপরে একটি লেজার তৈরি করবে। Messages অবজেক্টে তিনটি কনস্ট্যান্ট যোগ করুন: ```javascript @@ -183,7 +183,7 @@ npm start COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO", ``` - 1. **স্পেস কী পরিচালনা করুন**। `window.addEventListener`-এর keyup ফাংশনটি সম্পাদনা করুন যাতে এটি স্পেস কী পরিচালনা করে: + 1. **স্পেস কী পরিচালনা করুন**। `window.addEventListener` এর keyup ফাংশনটি সম্পাদনা করুন স্পেস পরিচালনা করতে: ```javascript } else if(evt.keyCode === 32) { @@ -191,7 +191,7 @@ npm start } ``` - 1. **লিসেনার যোগ করুন**। `initGame()` ফাংশনটি সম্পাদনা করুন যাতে স্পেস বার চাপলে হিরো লেজার ছুড়তে পারে: + 1. **লিসেনার যোগ করুন**। `initGame()` ফাংশনটি সম্পাদনা করুন নিশ্চিত করতে যে স্পেস বার চাপলে হিরো লেজার ছোঁড়তে পারে: ```javascript eventEmitter.on(Messages.KEY_EVENT_SPACE, () => { @@ -200,7 +200,7 @@ npm start } ``` - এবং একটি নতুন `eventEmitter.on()` ফাংশন যোগ করুন যাতে শত্রু লেজারের সাথে সংঘর্ষ করলে নির্দিষ্ট আচরণ ঘটে: + এবং একটি নতুন `eventEmitter.on()` ফাংশন যোগ করুন নিশ্চিত করতে যে শত্রু লেজারের সাথে সংঘর্ষ করলে কী ঘটবে: ```javascript eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { @@ -209,7 +209,7 @@ npm start }) ``` - 1. **অবজেক্ট সরান**, নিশ্চিত করুন যে লেজার ধীরে ধীরে স্ক্রিনের উপরের দিকে চলে। আপনি একটি নতুন Laser ক্লাস তৈরি করবেন যা `GameObject` সম্প্রসারিত করবে, যেমন আপনি আগে করেছেন: + 1. **অবজেক্ট সরানো**, নিশ্চিত করুন যে লেজার ধীরে ধীরে স্ক্রিনের শীর্ষে চলে যায়। আপনি একটি নতুন Laser ক্লাস তৈরি করবেন যা `GameObject` কে প্রসারিত করবে, যেমন আপনি আগে করেছেন: ```javascript class Laser extends GameObject { @@ -230,7 +230,7 @@ npm start } ``` - 1. **সংঘর্ষ পরিচালনা করুন**, লেজারের জন্য সংঘর্ষের নিয়ম বাস্তবায়ন করুন। একটি `updateGameObjects()` ফাংশন যোগ করুন যা সংঘর্ষকারী অবজেক্টগুলো পরীক্ষা করবে: + 1. **সংঘর্ষ পরিচালনা করুন**, লেজারের জন্য সংঘর্ষের নিয়ম বাস্তবায়ন করুন। একটি `updateGameObjects()` ফাংশন যোগ করুন যা সংঘর্ষের জন্য অবজেক্টগুলো পরীক্ষা করে: ```javascript function updateGameObjects() { @@ -252,11 +252,11 @@ npm start } ``` - নিশ্চিত করুন যে `updateGameObjects()`-কে আপনার গেম লুপে `window.onload`-এ যোগ করা হয়েছে। + নিশ্চিত করুন যে `updateGameObjects()` আপনার গেম লুপে `window.onload` এ যোগ করা হয়েছে। - 4. **লেজারের কুলডাউন বাস্তবায়ন করুন**, যাতে এটি নির্দিষ্ট সময় পরপরই ছোড়া যায়। + 4. **লেজারের কুলডাউন বাস্তবায়ন করুন**, যাতে এটি নির্দিষ্ট সময়ের মধ্যে শুধুমাত্র একবার ছোঁড়া যায়। - শেষ পর্যন্ত, Hero ক্লাসটি সম্পাদনা করুন যাতে এটি কুলডাউন করতে পারে: + অবশেষে, Hero ক্লাসটি সম্পাদনা করুন যাতে এটি কুলডাউন করতে পারে: ```javascript class Hero extends GameObject { @@ -285,13 +285,13 @@ npm start } ``` -এখন আপনার গেমে কিছু কার্যকারিতা রয়েছে! আপনি আপনার অ্যারো কী দিয়ে নেভিগেট করতে পারবেন, স্পেস বার দিয়ে লেজার ছুড়তে পারবেন, এবং শত্রুরা লেজারের আঘাতে অদৃশ্য হয়ে যাবে। দারুণ কাজ! +এই পর্যায়ে, আপনার গেমে কিছু কার্যকারিতা রয়েছে! আপনি আপনার অ্যারো কী দিয়ে নেভিগেট করতে পারেন, স্পেস বার দিয়ে লেজার ছোঁড়তে পারেন, এবং শত্রুরা লেজারের আঘাতে অদৃশ্য হয়ে যায়। খুব ভালো কাজ করেছেন! --- ## 🚀 চ্যালেঞ্জ -একটি বিস্ফোরণ যোগ করুন! [Space Art রিপোজিটরি](../../../../6-space-game/solution/spaceArt/readme.txt)-তে গেম অ্যাসেটগুলো দেখুন এবং লেজার কোনো এলিয়েনকে আঘাত করলে একটি বিস্ফোরণ যোগ করার চেষ্টা করুন। +একটি বিস্ফোরণ যোগ করুন! [স্পেস আর্ট রিপো](../../../../6-space-game/solution/spaceArt/readme.txt) এর গেম অ্যাসেটগুলো দেখুন এবং চেষ্টা করুন লেজার এলিয়েনকে আঘাত করলে একটি বিস্ফোরণ যোগ করতে। ## পোস্ট-লেকচার কুইজ @@ -299,11 +299,13 @@ npm start ## পর্যালোচনা ও স্ব-অধ্যয়ন -আপনার গেমে এখন পর্যন্ত ব্যবহৃত ইন্টারভ্যাল নিয়ে পরীক্ষা করুন। ইন্টারভ্যাল পরিবর্তন করলে কী ঘটে? [জাভাস্ক্রিপ্ট টাইমিং ইভেন্ট](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) সম্পর্কে আরও পড়ুন। +আপনার গেমে এখন পর্যন্ত ব্যবহৃত ইন্টারভালগুলো নিয়ে পরীক্ষা করুন। আপনি এগুলো পরিবর্তন করলে কী ঘটে? [জাভাস্ক্রিপ্ট টাইমিং ইভেন্ট](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) সম্পর্কে আরও পড়ুন। ## অ্যাসাইনমেন্ট [সংঘর্ষ অন্বেষণ করুন](assignment.md) +--- + **অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। এর মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file +এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file diff --git a/translations/bn/6-space-game/5-keeping-score/README.md b/translations/bn/6-space-game/5-keeping-score/README.md index 4e90587f..3220f4ba 100644 --- a/translations/bn/6-space-game/5-keeping-score/README.md +++ b/translations/bn/6-space-game/5-keeping-score/README.md @@ -1,23 +1,23 @@ -# স্পেস গেম তৈরি করুন পার্ট ৫: স্কোরিং এবং লাইফ +# মহাকাশ গেম তৈরি করুন পর্ব ৫: স্কোরিং এবং জীবন -## প্রি-লেকচার কুইজ +## প্রাক-লেকচার কুইজ -[প্রি-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/37) +[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/37) -এই পাঠে, আপনি শিখবেন কীভাবে একটি গেমে স্কোর যোগ করতে হয় এবং লাইফ গণনা করতে হয়। +এই পাঠে, আপনি শিখবেন কীভাবে একটি গেমে স্কোর যোগ করতে হয় এবং জীবন গণনা করতে হয়। -## স্ক্রিনে টেক্সট আঁকা +## পর্দায় টেক্সট আঁকা -গেম স্কোর স্ক্রিনে প্রদর্শন করতে হলে, আপনাকে জানতে হবে কীভাবে স্ক্রিনে টেক্সট স্থাপন করতে হয়। এর উত্তর হলো `fillText()` মেথড ব্যবহার করা ক্যানভাস অবজেক্টে। আপনি অন্যান্য বিষয়ও নিয়ন্ত্রণ করতে পারেন যেমন কোন ফন্ট ব্যবহার করবেন, টেক্সটের রঙ এবং এমনকি এর অ্যালাইনমেন্ট (বাম, ডান, কেন্দ্র)। নিচে কিছু কোড দেওয়া হয়েছে যা স্ক্রিনে টেক্সট আঁকছে। +গেমের স্কোর পর্দায় প্রদর্শন করতে হলে, আপনাকে জানতে হবে কীভাবে পর্দায় টেক্সট স্থাপন করতে হয়। এর উত্তর হলো ক্যানভাস অবজেক্টের `fillText()` মেথড ব্যবহার করা। আপনি টেক্সটের ফন্ট, রঙ এবং এমনকি এর অ্যালাইনমেন্ট (বাম, ডান, কেন্দ্র) নিয়ন্ত্রণ করতে পারেন। নিচে কিছু কোড দেওয়া হয়েছে যা পর্দায় টেক্সট আঁকছে। ```javascript ctx.font = "30px Arial"; @@ -26,22 +26,22 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ [ক্যানভাসে টেক্সট যোগ করার পদ্ধতি](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) সম্পর্কে আরও পড়ুন এবং আপনারটি আরও আকর্ষণীয় দেখানোর চেষ্টা করুন! +✅ [ক্যানভাসে টেক্সট যোগ করার পদ্ধতি](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) সম্পর্কে আরও পড়ুন এবং আপনারটি আরও আকর্ষণীয় করে তুলুন! -## গেম কনসেপ্ট হিসেবে লাইফ +## জীবন, একটি গেম ধারণা হিসেবে -গেমে লাইফের ধারণা শুধুমাত্র একটি সংখ্যা। একটি স্পেস গেমের ক্ষেত্রে সাধারণত একটি নির্দিষ্ট সংখ্যক লাইফ দেওয়া হয় যা আপনার শিপ ক্ষতিগ্রস্ত হলে এক এক করে কমে যায়। এটি যদি একটি গ্রাফিক্যাল উপস্থাপনা হিসেবে দেখানো যায় যেমন ছোট শিপ বা হার্ট, তাহলে এটি সংখ্যার পরিবর্তে আরও আকর্ষণীয় হয়। +গেমে জীবনের ধারণা কেবল একটি সংখ্যা। মহাকাশ গেমের প্রেক্ষাপটে, সাধারণত একটি নির্দিষ্ট সংখ্যক জীবন দেওয়া হয় যা আপনার জাহাজ ক্ষতিগ্রস্ত হলে একে একে কমে যায়। এটি আরও ভালো হয় যদি আপনি এটি একটি গ্রাফিক্যাল উপস্থাপনার মাধ্যমে দেখাতে পারেন, যেমন ছোট জাহাজ বা হৃদয় চিহ্নের মাধ্যমে, শুধুমাত্র একটি সংখ্যার পরিবর্তে। ## কী তৈরি করবেন আপনার গেমে নিম্নলিখিতগুলি যোগ করুন: -- **গেম স্কোর**: প্রতিটি শত্রু শিপ ধ্বংস করার জন্য, হিরোকে কিছু পয়েন্ট দেওয়া উচিত। আমরা প্রতি শিপের জন্য ১০০ পয়েন্ট প্রস্তাব করছি। গেম স্কোরটি নিচের বাম দিকে দেখানো উচিত। -- **লাইফ**: আপনার শিপের তিনটি লাইফ থাকবে। প্রতিবার শত্রু শিপ আপনার সাথে সংঘর্ষ করলে আপনি একটি লাইফ হারাবেন। লাইফ স্কোরটি নিচের ডান দিকে প্রদর্শিত হবে এবং এটি নিম্নলিখিত গ্রাফিক দিয়ে তৈরি হবে ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.bn.png)। +- **গেম স্কোর**: প্রতিটি শত্রু জাহাজ ধ্বংস করার জন্য, নায়ককে কিছু পয়েন্ট দেওয়া উচিত। আমরা প্রতি জাহাজের জন্য ১০০ পয়েন্ট প্রস্তাব করছি। গেম স্কোরটি নিচের বাম কোণে দেখানো উচিত। +- **জীবন**: আপনার জাহাজের তিনটি জীবন থাকবে। প্রতিবার একটি শত্রু জাহাজ আপনার সাথে সংঘর্ষ করলে একটি জীবন হারাবেন। একটি জীবন স্কোর নিচের ডান কোণে প্রদর্শিত হওয়া উচিত এবং এটি নিম্নলিখিত গ্রাফিক দিয়ে তৈরি হবে ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.bn.png)। ## প্রস্তাবিত ধাপসমূহ -`your-work` সাব ফোল্ডারে আপনার জন্য তৈরি করা ফাইলগুলি খুঁজুন। এটি নিম্নলিখিতটি ধারণ করবে: +`your-work` সাব ফোল্ডারে আপনার জন্য তৈরি করা ফাইলগুলি খুঁজুন। এতে নিম্নলিখিতগুলি থাকা উচিত: ```bash -| assets @@ -53,24 +53,24 @@ ctx.fillText("show this on the screen", 0, 0); -| package.json ``` -আপনার প্রকল্পটি `your_work` ফোল্ডারে শুরু করুন নিচের কমান্ড টাইপ করে: +আপনার প্রকল্পটি `your_work` ফোল্ডার থেকে শুরু করুন এই কমান্ডটি টাইপ করে: ```bash cd your-work npm start ``` -উপরের কমান্ডটি HTTP সার্ভার চালু করবে ঠিকানা `http://localhost:5000` এ। একটি ব্রাউজার খুলুন এবং সেই ঠিকানাটি ইনপুট করুন। এখন এটি হিরো এবং সমস্ত শত্রুদের রেন্ডার করবে, এবং যখন আপনি আপনার বাম এবং ডান তীর চাপবেন, তখন হিরো চলবে এবং শত্রুদের গুলি করে ধ্বংস করতে পারবে। +উপরের কমান্ডটি `http://localhost:5000` ঠিকানায় একটি HTTP সার্ভার চালু করবে। একটি ব্রাউজার খুলুন এবং এই ঠিকানাটি প্রবেশ করান। এখন এটি নায়ক এবং সমস্ত শত্রুদের রেন্ডার করবে এবং আপনি যখন বাম এবং ডান তীর চিহ্ন চাপবেন, নায়ক চলবে এবং শত্রুদের গুলি করতে পারবে। ### কোড যোগ করুন -1. **প্রয়োজনীয় অ্যাসেটগুলি কপি করুন** `solution/assets/` ফোল্ডার থেকে `your-work` ফোল্ডারে; আপনি একটি `life.png` অ্যাসেট যোগ করবেন। `window.onload` ফাংশনে lifeImg যোগ করুন: +1. **প্রয়োজনীয় অ্যাসেট কপি করুন**। `solution/assets/` ফোল্ডার থেকে `your-work` ফোল্ডারে `life.png` অ্যাসেটটি কপি করুন। `window.onload` ফাংশনে lifeImg যোগ করুন: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` -1. `lifeImg` কে অ্যাসেটের তালিকায় যোগ করুন: +1. `lifeImg` অ্যাসেটের তালিকায় যোগ করুন: ```javascript let heroImg, @@ -80,7 +80,7 @@ npm start eventEmitter = new EventEmitter(); ``` -2. **ভ্যারিয়েবল যোগ করুন**। আপনার মোট স্কোর (০) এবং অবশিষ্ট লাইফ (৩) উপস্থাপনকারী কোড যোগ করুন, এই স্কোরগুলি স্ক্রিনে প্রদর্শন করুন। +2. **ভেরিয়েবল যোগ করুন**। আপনার মোট স্কোর (০) এবং অবশিষ্ট জীবন (৩) উপস্থাপনকারী কোড যোগ করুন এবং এই স্কোরগুলি পর্দায় প্রদর্শন করুন। 3. **`updateGameObjects()` ফাংশন প্রসারিত করুন**। শত্রুদের সাথে সংঘর্ষ পরিচালনা করার জন্য `updateGameObjects()` ফাংশন প্রসারিত করুন: @@ -93,15 +93,15 @@ npm start }) ``` -4. **লাইফ এবং পয়েন্ট যোগ করুন**। - 1. **ভ্যারিয়েবল ইনিশিয়ালাইজ করুন**। `Hero` ক্লাসে `this.cooldown = 0` এর নিচে লাইফ এবং পয়েন্ট সেট করুন: +4. **`life` এবং `points` যোগ করুন**। + 1. **ভেরিয়েবল ইনিশিয়ালাইজ করুন**। `Hero` ক্লাসে `this.cooldown = 0` এর নিচে life এবং points সেট করুন: ```javascript this.life = 3; this.points = 0; ``` - 1. **স্ক্রিনে ভ্যারিয়েবল আঁকুন**। এই মানগুলি স্ক্রিনে আঁকুন: + 1. **পর্দায় ভেরিয়েবল আঁকুন**। এই মানগুলি পর্দায় আঁকুন: ```javascript function drawLife() { @@ -128,18 +128,18 @@ npm start ``` - 1. **গেম লুপে মেথড যোগ করুন**। নিশ্চিত করুন যে আপনি এই ফাংশনগুলি `window.onload` ফাংশনে `updateGameObjects()` এর নিচে যোগ করেছেন: + 1. **গেম লুপে মেথড যোগ করুন**। নিশ্চিত করুন যে আপনি এই ফাংশনগুলি `updateGameObjects()` এর নিচে `window.onload` ফাংশনে যোগ করেছেন: ```javascript drawPoints(); drawLife(); ``` -1. **গেম নিয়ম বাস্তবায়ন করুন**। নিম্নলিখিত গেম নিয়ম বাস্তবায়ন করুন: +1. **গেমের নিয়ম বাস্তবায়ন করুন**। নিম্নলিখিত গেমের নিয়ম বাস্তবায়ন করুন: - 1. **প্রতিটি হিরো এবং শত্রুর সংঘর্ষের জন্য**, একটি লাইফ কমান। + 1. **প্রতিটি নায়ক এবং শত্রুর সংঘর্ষের জন্য**, একটি জীবন কমান। - `Hero` ক্লাস প্রসারিত করুন এই কমানোর জন্য: + `Hero` ক্লাস প্রসারিত করুন এই কাটা করার জন্য: ```javascript decrementLife() { @@ -150,9 +150,9 @@ npm start } ``` - 2. **প্রতিটি লেজার যা শত্রুকে আঘাত করে**, গেম স্কোর ১০০ পয়েন্ট বৃদ্ধি করুন। + 2. **প্রতিটি লেজার যা শত্রুকে আঘাত করে**, গেম স্কোর ১০০ পয়েন্ট বাড়ান। - `Hero` ক্লাস প্রসারিত করুন এই বৃদ্ধির জন্য: + `Hero` ক্লাস প্রসারিত করুন এই বৃদ্ধি করার জন্য: ```javascript incrementPoints() { @@ -175,15 +175,15 @@ npm start }); ``` -✅ কিছু গবেষণা করুন এবং আবিষ্কার করুন অন্যান্য গেম যা JavaScript/Canvas ব্যবহার করে তৈরি করা হয়েছে। তাদের সাধারণ বৈশিষ্ট্য কী? +✅ গবেষণা করুন এবং আবিষ্কার করুন অন্যান্য গেম যা JavaScript/Canvas ব্যবহার করে তৈরি করা হয়েছে। তাদের সাধারণ বৈশিষ্ট্য কী? -এই কাজের শেষে, আপনি ছোট 'লাইফ' শিপগুলি নিচের ডান দিকে, পয়েন্টগুলি নিচের বাম দিকে দেখতে পাবেন, এবং আপনি দেখতে পাবেন আপনার লাইফ সংখ্যা কমছে যখন আপনি শত্রুদের সাথে সংঘর্ষ করছেন এবং আপনার পয়েন্ট বাড়ছে যখন আপনি শত্রুদের গুলি করছেন। খুব ভালো! আপনার গেম প্রায় সম্পূর্ণ। +এই কাজের শেষে, আপনি নিচের ডান কোণে ছোট 'জীবন' জাহাজ, নিচের বাম কোণে পয়েন্ট এবং শত্রুদের সাথে সংঘর্ষ করলে আপনার জীবন সংখ্যা কমতে এবং শত্রুদের গুলি করলে আপনার পয়েন্ট বাড়তে দেখবেন। দারুণ কাজ! আপনার গেম প্রায় সম্পূর্ণ। --- ## 🚀 চ্যালেঞ্জ -আপনার কোড প্রায় সম্পূর্ণ। আপনি কি আপনার পরবর্তী পদক্ষেপগুলি কল্পনা করতে পারেন? +আপনার কোড প্রায় সম্পূর্ণ। আপনি কি আপনার পরবর্তী ধাপগুলি কল্পনা করতে পারেন? ## পোস্ট-লেকচার কুইজ @@ -191,11 +191,13 @@ npm start ## পর্যালোচনা এবং স্ব-অধ্যয়ন -গেম স্কোর এবং লাইফ বৃদ্ধি এবং হ্রাস করার কিছু উপায় গবেষণা করুন। [PlayFab](https://playfab.com) এর মতো কিছু আকর্ষণীয় গেম ইঞ্জিন রয়েছে। এগুলি ব্যবহার করলে কীভাবে আপনার গেম উন্নত হতে পারে? +গেম স্কোর এবং জীবন বাড়ানো এবং কমানোর কিছু উপায় গবেষণা করুন। [PlayFab](https://playfab.com) এর মতো কিছু আকর্ষণীয় গেম ইঞ্জিন রয়েছে। এগুলোর একটি ব্যবহার করলে কীভাবে আপনার গেম উন্নত হবে? ## অ্যাসাইনমেন্ট [স্কোরিং গেম তৈরি করুন](assignment.md) +--- + **অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়বদ্ধ থাকব না। \ No newline at end of file +এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file diff --git a/translations/bn/6-space-game/6-end-condition/README.md b/translations/bn/6-space-game/6-end-condition/README.md index d536cd34..e5adc7d4 100644 --- a/translations/bn/6-space-game/6-end-condition/README.md +++ b/translations/bn/6-space-game/6-end-condition/README.md @@ -1,8 +1,8 @@ -# ব্যাংকিং অ্যাপ তৈরি করুন পার্ট ১: ওয়েব অ্যাপে HTML টেমপ্লেট এবং রুটস +# ব্যাংকিং অ্যাপ তৈরি করুন পার্ট ১: HTML টেমপ্লেট এবং ওয়েব অ্যাপে রাউটস -## প্রাক-লেকচার কুইজ +## প্রি-লেকচার কুইজ -[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/41) +[প্রি-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/41) ### ভূমিকা -ব্রাউজারে জাভাস্ক্রিপ্ট আসার পর থেকে, ওয়েবসাইটগুলো আগের চেয়ে অনেক বেশি ইন্টারঅ্যাকটিভ এবং জটিল হয়ে উঠেছে। এখন ওয়েব প্রযুক্তি ব্যবহার করে এমন অ্যাপ্লিকেশন তৈরি করা হয় যা সরাসরি ব্রাউজারে চলে, যাকে আমরা [ওয়েব অ্যাপ্লিকেশন](https://en.wikipedia.org/wiki/Web_application) বলি। যেহেতু ওয়েব অ্যাপগুলো অত্যন্ত ইন্টারঅ্যাকটিভ, ব্যবহারকারীরা প্রতিবার কোনো অ্যাকশন সম্পন্ন করার জন্য পুরো পেজ রিলোডের জন্য অপেক্ষা করতে চায় না। এজন্য জাভাস্ক্রিপ্ট ব্যবহার করে DOM এর মাধ্যমে সরাসরি HTML আপডেট করা হয়, যা ব্যবহারকারীদের জন্য আরও মসৃণ অভিজ্ঞতা প্রদান করে। +ব্রাউজারে জাভাস্ক্রিপ্ট আসার পর থেকে ওয়েবসাইটগুলো আগের চেয়ে অনেক বেশি ইন্টারঅ্যাকটিভ এবং জটিল হয়ে উঠেছে। এখন ওয়েব প্রযুক্তি ব্যবহার করে সম্পূর্ণ কার্যকরী অ্যাপ্লিকেশন তৈরি করা হয় যা সরাসরি ব্রাউজারে চলে, যাকে আমরা [ওয়েব অ্যাপ্লিকেশন](https://en.wikipedia.org/wiki/Web_application) বলি। যেহেতু ওয়েব অ্যাপগুলো খুবই ইন্টারঅ্যাকটিভ, ব্যবহারকারীরা প্রতিবার কোনো অ্যাকশন সম্পন্ন করার সময় পুরো পেজ রিলোডের জন্য অপেক্ষা করতে চান না। এজন্য জাভাস্ক্রিপ্ট ব্যবহার করে HTML সরাসরি DOM এর মাধ্যমে আপডেট করা হয়, যা ব্যবহারকারীদের জন্য আরও মসৃণ অভিজ্ঞতা প্রদান করে। -এই পাঠে, আমরা একটি ব্যাংক ওয়েব অ্যাপ তৈরির ভিত্তি স্থাপন করব, যেখানে HTML টেমপ্লেট ব্যবহার করে একাধিক স্ক্রিন তৈরি করা হবে যা পুরো HTML পেজ রিলোড না করেই প্রদর্শিত এবং আপডেট করা যাবে। +এই পাঠে, আমরা একটি ব্যাংক ওয়েব অ্যাপ তৈরি করার ভিত্তি স্থাপন করব, যেখানে HTML টেমপ্লেট ব্যবহার করে একাধিক স্ক্রিন তৈরি করা হবে যা পুরো HTML পেজ রিলোড না করেই প্রদর্শিত এবং আপডেট করা যাবে। ### পূর্বশর্ত -এই পাঠে আমরা যে ওয়েব অ্যাপ তৈরি করব তা পরীক্ষা করার জন্য আপনার একটি লোকাল ওয়েব সার্ভার প্রয়োজন। যদি আপনার কাছে না থাকে, তাহলে আপনি [Node.js](https://nodejs.org) ইনস্টল করতে পারেন এবং আপনার প্রজেক্ট ফোল্ডার থেকে `npx lite-server` কমান্ডটি ব্যবহার করতে পারেন। এটি একটি লোকাল ওয়েব সার্ভার তৈরি করবে এবং আপনার অ্যাপটি ব্রাউজারে খুলবে। +এই পাঠে আমরা যে ওয়েব অ্যাপ তৈরি করব তা পরীক্ষা করার জন্য আপনার একটি লোকাল ওয়েব সার্ভার প্রয়োজন। যদি আপনার কাছে না থাকে, তাহলে [Node.js](https://nodejs.org) ইনস্টল করুন এবং আপনার প্রজেক্ট ফোল্ডার থেকে `npx lite-server` কমান্ড ব্যবহার করুন। এটি একটি লোকাল ওয়েব সার্ভার তৈরি করবে এবং আপনার অ্যাপটি ব্রাউজারে খুলবে। ### প্রস্তুতি @@ -45,16 +45,16 @@ CO_OP_TRANSLATOR_METADATA: ## HTML টেমপ্লেট -যদি আপনি একটি ওয়েব পেজের জন্য একাধিক স্ক্রিন তৈরি করতে চান, তাহলে একটি সমাধান হতে পারে প্রতিটি স্ক্রিনের জন্য একটি HTML ফাইল তৈরি করা। তবে, এই সমাধান কিছু অসুবিধা নিয়ে আসে: +যদি আপনি একটি ওয়েব পেজের জন্য একাধিক স্ক্রিন তৈরি করতে চান, তাহলে একটি সমাধান হতে পারে প্রতিটি স্ক্রিনের জন্য আলাদা HTML ফাইল তৈরি করা। তবে, এই সমাধান কিছু অসুবিধা নিয়ে আসে: - স্ক্রিন পরিবর্তনের সময় পুরো HTML রিলোড করতে হয়, যা ধীর হতে পারে। - বিভিন্ন স্ক্রিনের মধ্যে ডেটা শেয়ার করা কঠিন। -আরেকটি পদ্ধতি হলো একটি মাত্র HTML ফাইল রাখা এবং `