` ಒಳಗಿನ `
`ಯ ಬಣ್ಣ ಯಾವುದು ಇರಬಹುದು?
+```css
+div { color: blue; }
+.special { color: green; }
+h1 { color: red; }
+```
+*ಉತ್ತರ: ಕೆಂಪು (ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆದಾರ ನೇರವಾಗಿ h1 ನ್ನು ಗುರಿಯಾಗಿಸಿದೆ)*
+
+## CSS ಆಯ್ಕೆದಾರರ ಪ್ರಭುತ್ವ
+
+CSS ಆಯ್ಕೆದಾರರು ನಿಮಗೆ ನಿಮ್ಮ ಶೈಲಿಗಳಿಗೆ ಗುರಿಯಾದ ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್ಗಳನ್ನು ನಿಶ್ಚಯಿಸುವಂತಹುದು. ಅವು ಖಚಿತವಾದ ನಿರ್ದೇಶನಗಳನ್ನು ನೀಡುವಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ - "ಮನೆ" ಎಂದು ಹೇಳುವುದರ ಬದಲು "ಮೇಪಲ್ ಸ್ಟ್ರೀಟ್上的 ಕೆಂಪಿನ ದ್ವಾರಿನೊಂದಿಗೆ ನೀಲಿ ಮನೆ" ಎಂದು ಹೇಳುವುದು.
+
+CSS ವಿಭಿನ್ನ ರೀತಿಯ ಆಯ್ಕೆದಾರರನ್ನು ಒದಗಿಸುತ್ತದೆ, ಮತ್ತು ಸೂಕ್ತ ಆಯ್ಕೆದಾರವನ್ನು ಆರಿಸುವುದು ಕಾರ್ಯಕ್ಕಾಗಿ ಸೂಕ್ತ ಉಪಕರಣವನ್ನು ಆರಿಸುವಂತಿದೆ. ಒಮ್ಮೆ ನೀವು ಹುತ್ತಿನಲ್ಲಿ ಎಲ್ಲಾ ಬಾಗಿಲಿನ ಶೈಲಿಗಳನ್ನು ನೀಡಬಹುದು, ಮತ್ತೊಮ್ಮೆ ಒಂದು ವಿಶೇಷ ಬಾಗಿಲಿಗೆ ಮಾತ್ರ.
+
+### ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆದಾರರು (ಟ್ಯಾಗ್ ಗಳು)
+
+ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆದಾರರು HTML ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಅವರ ಟ್ಯಾಗ್ ಹೆಸರಿನಿಂದ ಗುರಿಯಾಗಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಬಹುಮಟ್ಟಿನಲ್ಲಿ ಪುಟ ವ್ಯಾಪಕವಾಗಿ ಅನ್ವಯಿಸುವ ಮೂಲ ಶೈಲಿಗಳನ್ನು ನಿಶ್ಚಯಿಸಲು ಇವು ತಕ್ಕಂತೆಗಳ.
+
+```css
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+h1 {
+ color: #3a241d;
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+```
+
+**ಈ ಶೈಲಿಗಳ ಅರ್ಥ:**
+- `body` ಆಯ್ಕೆದಾರ ಬಳಸಿ ಸಂಪೂರ್ಣ ಪುಟದಲ್ಲಿ ಅಖಂಡವಾದ ಟೈಪೋಗ್ರಫಿಯನ್ನು ನಿಶ್ಚಯಿಸುತ್ತದೆ
+- ಉತ್ತಮ ನಿಯಂತ್ರಣಕ್ಕೆ ಬ್ರೌಸರ್ ನ ಡಿಫಾಲ್ಟ್ ಮಾರ್ಜಿನ್ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ತೆಗೆದುಹಾಕುತ್ತದೆ
+- ಬಣ್ಣ, ಸರಿಹೊಂದುವಿಕೆ ಮತ್ತು ಅಂತರಗಳೊಂದಿಗೆ ಎಲ್ಲಾ ಶೀರ್ಷಿಕೆ ಎಲಿಮೆಂಟ್ಗಳ ಶೈಲಿ ಮಾಡುತ್ತದೆ
+- ಲಭ್ಯವಿರುವ ಸೌಲಭ್ಯಕ್ಕಾಗಿ `rem` ಯೂನಿಟ್ ಗಳನ್ನು ಬಳಸುತ್ತದೆ
+
+ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆದಾರರು ಸಾಮಾನ್ಯ ಶೈಲಿಗಾಗಿ ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ, ಆದರೆ ಟೆರೇರಿಯಂನಲ್ಲಿ ಸಸ್ಯಗಳು ಮುಂತಾದ ವ್ಯಕ್ತಿಗತ ಭಾಗಗಳನ್ನು ಶೈಲಿಗೊಳಿಸಲು ನೀವು ಹೆಚ್ಚು ವಿಶೇಷ ಆಯ್ಕೆದಾರರ ಅಗತ್ಯವಿರುತ್ತದೆ.
+
+### ವೈಯಕ್ತಿಕ ಎಲಿಮೆಂಟ್ಗಳಿಗೆ ID ಆಯ್ಕೆದಾರರು
+
+ID ಆಯ್ಕೆದಾರರು `#` ಚಿಹ್ನೆಯನ್ನು ಬಳಸಿ ನಿರ್ದಿಷ್ಟ `id` ಗುಣಲಕ್ಷಣ ಹೊಂದಿರುವ ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಗುರಿಯಾಗಿಸುತ್ತವೆ. ಪುಟದಲ್ಲಿ ID ಗಳು ಅನನ್ಯವಾಗಿರಬೇಕು, ಆದ್ದರಿಂದ ನಮ್ಮ ಎಡ ಮತ್ತು ಬಲ ಸಸ್ಯ ಕಂಟೈನರ್ ಗಳಿಗೆ ಇದು ಸೂಕ್ತ.
+
+ನಮ್ಮ ಟೆರೇರಿಯಂ ಬದಿಯ ಕಂಟೈನರ್ಗಳ ಶೈಲಿಯನ್ನು ಸೃಷ್ಟಿಸೋಣ, ಸಸ್ಯಗಳು ಅಲ್ಲಿ ಸುತ್ತಾಡುತ್ತವೆ:
+
+```css
+#left-container {
+ background-color: #f5f5f5;
+ width: 15%;
+ left: 0;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+
+#right-container {
+ background-color: #f5f5f5;
+ width: 15%;
+ right: 0;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+```
+
+**ಈ ಕೋಡ್ ಸಾಧಿಸುವುದು:**
+- `absolute` ಸ್ಥಾನದೊಂದಿಗೆ ಕಂಟೈನರ್ಗಳನ್ನು ಎಡ ಮತ್ತು ಬಲ ಅಗಲ ಕಡೆಯಲ್ಲಿನ್ದು ಸ್ಥಾಪಿಸುತ್ತದೆ
+- `vh` (ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರ) ಯುನಿಟ್ಗಳನ್ನು ಬಳಸಿ ಪರದೆಯ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಕೊಂಡ ಉದ್ದವನ್ನು ನಿಶ್ಚಯಿಸುತ್ತದೆ
+- ಒಟ್ಟಾರೆ ಅಗಲದಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಸೇರಿಸುವುದಕ್ಕಾಗಿ `box-sizing: border-box` ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ
+- ಶುದ್ಧವಾಗಿ ಹೆಚ್ಚುವರಿ `px` ಯುನಿಟ್ ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ
+- ಕಣ್ಣಿಗೆ ಅಲಿಯೋ ಆಗುವಂತೆ ಸುಮ್ಮನಾದ ಹಿನ್ನೆಲೆಯ ಬಣ್ಣವನ್ನು ನಿಶ್ಚಯಿಸುತ್ತದೆ
+
+✅ **ಕೋಡ್ ಗುಣಮಟ್ಟದ ಸವಾಲು**: ಈ CSS DRY (ನಿಮ್ಮನ್ನು ಪುನರಾವರ್ತಿಸಬೇಡಿ) ಸಿದ್ಧಾಂತವನ್ನು ಉಲ್ಲಂಘಿಸುತ್ತದೆ. ನೀವು ಇದನ್ನು ID ಮತ್ತು ಕ್ಲಾಸ್ ಎರಡನ್ನೂ ಬಳಸಿ ಪುನರ್ ರಚಿಸಬಲ್ಲಿರಾ?
+
+**ಸುಧಾರಿತ ವಿಧಾನ:**
+```html
+
+
+```
+
+```css
+.container {
+ background-color: #f5f5f5;
+ width: 15%;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+
+#left-container {
+ left: 0;
+}
+
+#right-container {
+ right: 0;
+}
+```
+
+### ಪುನರಾವರ್ತಿಸಬಹುದಾದ ಶೈಲಿಯುಳ್ಳ ಕ್ಲಾಸ್ ಆಯ್ಕೆದಾರರು
+
+ಕ್ಲಾಸ್ ಆಯ್ಕೆದಾರರು `.` ಚಿಹ್ನೆಯನ್ನು ಬಳಸಿ ಅನೇಕ ಎಲಿಮೆಂಟ್ಗಳಿಗೆ ಒಂದೇ ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸಲು ಸೂಕ್ತ. ID ಗಿಂತ ಭಿನ್ನವಾಗಿ, ಕ್ಲಾಸ್ಗಳು ನಿಮ್ಮ HTML ನಲ್ಲಿ ಯಾವುದೇ ಸಂಖ್ಯೆಯಲ್ಲಿ ಪುನಃಬಳಸಬಹುದು, ಅದರಿಂದ ಶೈಲಿಗೊಳಿಸುವ ಸಾಮಾನ್ಯ ಮಾದರಿಗಳಿಗಾಗಿ ಅದ್ಭುತವಾಗಿದೆ.
+
+ನಮ್ಮ ಟೆರೇರಿಯಂನಲ್ಲಿ, ಪ್ರತಿ ಸಸ್ಯಕ್ಕೆ ಸಮಾನ ಶೈಲಿಯು ಬೇಕಾದರೂ ವೈಯಕ್ತಿಕ ಸ್ಥಾನಪರಿಚಯವೂ ಬೇಕಿದೆ. ನಾವು ಹಂಚಿಕೊಳ್ಳುವ ಶೈಲಿಗಾಗಿ ಕ್ಲಾಸ್ ಮತ್ತು ವೈಯಕ್ತಿಕ ಸ್ಥಾನಪರಿಚಯಕ್ಕಾಗಿ ID ನ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸು ತೀರ್ಮಾನ ಮಾಡುತ್ತೇವೆ.
+
+**ಪ್ರತಿ ಸಸ್ಯದ HTML ರಚನೆ:**
+```html
+
+
+
` ಜೊತೆಗೆ `id="quote"` |
+| ಸಂದೇಶ ಪ್ರದೇಶ | ಸ್ಥಿತಿ ಮತ್ತು ಯಶಸ್ಸಿನ ಸಂದೇಶಗಳ ಪ್ರದರ್ಶನ | `
` ಜೊತೆಗೆ `id="message"` |
+| ಟೆಕ್ಸ್ಟ್ ಇನ್ಪುಟ್ | ಆಟಗಾರರು ಉಲ್ಲೇಖವನ್ನು ಟೈಪ್ ಮಾಡುತ್ತಾರೆ | `` ಜೊತೆಗೆ `id="start"` |
+
+**UI ರಚನೆಯ ಅರಿವು:**
+- **ವ್ಯವಸ್ಥಿತಗೊಳಿಸುತ್ತದೆ** ವಿಷಯವನ್ನು ಮೇಲಿನಿಂದ ಕೆಳಗೆ ಯುಕ್ತಿಕವಾಗಿ
+- **ನಿಡುತ್ತದೆ** ಅನನ್ಯ ID ಗಳನ್ನು JavaScript ಗಾಗಿ ಗುರಿತಿಸಿಕೊಂಡು
+- **ನಿರ್ದೇಶಿಸುತ್ತದೆ** ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಕ್ರಮವನ್ನು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ
+- **ಒಳಗೊಂಡಿದೆ** ಪಂಚಾಯತಿ HTML ಅಂಶಗಳನ್ನು ಪ್ರವೇಶಣೀಯತೆಗೆ
+
+ಎಲ್ಲಾ ID ಗಳನ್ನು ನಮಗಿಳಿದು ನಾವು ಅವುಗಳನ್ನು JavaScript ನಲ್ಲಿ ಬಳಸಿಕೊಳ್ಳಬಹುದು. ಜೊತೆಗೆ ನಾವು ರಚಿಸುವ CSS ಮತ್ತು JavaScript ಕಡತಗಳಿಗೂ ಪ್ರತ್ಯಯ ನೀಡುತ್ತೇವೆ.
+
+`index.html` ಎಂಬ ಹೊಸ ಕಡತ ಸೃಷ್ಟಿಸಿ. ಕೆಳಗಿನ HTML ಸೇರಿಸಿ:
+
+```html
+
+
+
+ Typing game
+ Typing game!
+ Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!
+
+
+
+ Start
+
+
+
+
+```
+
+**ಈ HTML ರಚನೆಯ ಪ್ರಮುಖ ಅಂಶಗಳು:**
+- ಶೈಲಿಗಾಗಿ `` ನಲ್ಲಿ CSS ಶೈಲಿಪುಸ್ತಕವನ್ನು ಲಿಂಕ್ ಮಾಡಲಾಗಿದೆ
+- ಬಳಸುವವರಿಗಾಗಿ ಸ್ಪಷ್ಟ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಸೂಚನೆಗಳನ್ನು ರಚಿಸಲಾಗಿದೆ
+- ಪಲ್ಸ್ಹೋಲ್ಡರ್ ``ಗಳು ವಿಶೇಷ ID ಗಳೊಂದಿಗೆ ಗಣಕಯಂತ್ರದಿಂದ ನಿಯಂತ್ರಣ ಮಾಡಲು ಸಿದ್ಧವಾಗಿದೆ
+- ಪ್ರವೇಶಣೀಯತೆ ವಿಷ್ಯಗಳ ಅಂಶಗಳೊಂದಿಗೆ ಇನ್ಪುಟ್ ಫೀಲ್ಡ್ ಹೊಂದಿದೆ
+- ಆಟ ಪ್ರಾರಂಭಿಸಲು ಬಟನ್ ನೀಡಲಾಗಿದೆ
+- ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯಿಗಾಗಿಯೂ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಡತವು ಅಂತ್ಯದಲ್ಲಿ ಲೋಡ್ ಮಾಡಲಾಗಿದೆ
+
+### ಅಪ್ಲಿಕೇಶನ್ ಪ್ರಾರಂಭಿಸುವುದು
+
+ನೀವು ಆಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿಯಮುಕ ভাবে ಪರೀಕ್ಷಿಸುವುದರಿಂದ ಸಮಸ್ಯೆಯನ್ನು ಶೀಘ್ರವಾಗಿ ಹಿಡಿಯಬಹುದು ಮತ್ತು ನೈಜ ಸಮಯದಲ್ಲಿ ಪ್ರಗತಿಯನ್ನು ಕಾಣಬಹುದು. ಲೈವ್ ಸರ್ವರ್ ಒಂದು ಅಮೂಲ್ಯ ಉಪಕರಣವಾಗಿದೆ ಇದು ನೀವು ಉಳಿಸುವಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬ್ರೌಸರ್ ಅನ್ನು ರಿಲೋಡ್ ಮಾಡುತ್ತದೆ, ವಿನ್ಯಾಸ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಿಂದ ಮಾಡುತ್ತದೆ.
+
+ತವಕವಾಗಿ ಸ್ಥಿರಗೊಂಡು ಅಭಿವೃದ್ಧಿ ಮಾಡುವುದು ಉತ್ತಮ. ನಾವು ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಚಾಲನೆ ಮಾಡೋಣ. Visual Studio Code ಗೆ ಐಷಾರಾಮಿ ವಿಸ್ತರಣೆ ಇದ್ದಾರೆ ಅದನ್ನು [ಲೈವ್ ಸರ್ವರ್](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ, ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಹೋಸ್ಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ನೀವು ಕಡತ ಉಳಿಸುವಾಗ ಬ್ರೌಸರ್ ಅನ್ನು ರಿಫ್ರೇಶ್ ಮಾಡುತ್ತದೆ.
+
+**[ಲೈವ್ ಸರ್ವರ್](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) ಸ್ಥಾಪಿಸಲು ಲಿಂಕ್ ಅನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಇನ್ಸ್ಟಾಲ್ ಕ್ಲಿಕ್ ಮಾಡಿ:**
+
+**ಈ ಸ್ಥಾಪನೆಯ ವೇಳೆ ಏನು ನಡೆಯುತ್ತದೆ:**
+- ನಿಮ್ಮ ಬ್ರೌಸರ್ ನಿಮ್ಮ Visual Studio Code ತೆರೆಯಲು ಪ್ರಾಂಪ್ಟ್ ಮಾಡುತ್ತದೆ
+- ನೀವು ವಿಸ್ತರಣೆಯ ಸ್ಥಾಪನಾ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಮಾರ್ಗದರ್ಶನ ಪಡೆಯುತ್ತೀರಿ
+- ಸ್ಥಾಪನೆ ಪೂರ್ಣಗೊಳ್ಳಲು Visual Studio Code ಮರುಪ್ರಾರಂಭಿಸುವ ಅಗತ್ಯವಿರಬಹುದು
+
+**ಸ್ಥಾಪನೆಯ ನಂತರ, Visual Studio Code ನಲ್ಲಿ Ctrl-Shift-P (ಅಥವಾ Cmd-Shift-P) ಒತ್ತಿ ಕಮಾಂಡ್ ಪಾಲೆಟ್ ತೆರೆಯಿರಿ:**
+
+**ಕಮಾಂಡ್ ಪಾಲೆಟ್ ಅರ್ಥ:**
+- Visual Studio Code ನ ಎಲ್ಲಾ ಕಮಾಂಡ್ಗಳಿಗೆ ತ್ವರಿತ ಪ್ರವೇಶ ಕೊಡುತ್ತದೆ
+- ಟೈಪ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಕಮಾಂಡ್ಗಳನ್ನು ಹುಡುಕುತ್ತದೆ
+- ವೇಗದ ಅಭಿವೃದ್ಧಿಗೆ ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್ಕಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ
+
+**"Live Server: Open with Live Server" ಎಂದು ಟೈಪ್ ಮಾಡಿ:**
+
+**ಲೈವ್ ಸರ್ವರ್ ಮಾಡುವುದು:**
+- ನಿಮ್ಮ ಯೋಜನೆಗಾಗಿ ಸ್ಥಳೀಯ ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಪ್ರಾರಂಭ ಮಾಡುತ್ತದೆ
+- ನೀವು ಕಡತ ಉಳಿಸುವಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬ್ರೌಸರ್ ರಿಫ್ರೇಶ್ ಆಗುತ್ತದೆ
+- ನಿಮ್ಮ ಕಡತಗಳನ್ನು ಸ್ಥಳೀಯ URL (ಸಾಮಾನ್ಯವಾಗಿ `localhost:5500`) ನಲ್ಲಿ ಸರ್ವ್ ಮಾಡುತ್ತದೆ
+
+**ಬ್ರೌಸರ್ ತೆರೆಯಿರಿ ಮತ್ತು `https://localhost:5500` ಗೆ ಹೋಗಿ:**
+
+ನೀವು ಈಗ ನೀವು ನಿರ್ಮಿಸಿರುವ ಪುಟವನ್ನು ನೋಡಬಹುದು! ಬನ್ನಿ ಸ್ವಲ್ಪ ಕಾರ್ಯಗತಗೊಳಿಸೋಣ.
+
+## CSS ಸೇರಿಸೋಣ
+
+ಈಗ ನಾವು ವಿಷಯವನ್ನು ಸುಂದರವಾಗಿಸುವುದಕ್ಕೆ ಶೈಲಿ ನೀಡ ಬೇಕು! ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ಉಪಯೋಗ ಅನುಭವಗಳಿಗೆ ಗಣನೀಯವಾದ ಗುಣಲಕ್ಷಣ. 1980ರ ದಶಕದಲ್ಲಿ ಸಂಶೋಧಕರು ಕಂಡುಹಿಡಿದಿದ್ದು ಮೊದಲನೆ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯು ಬಳಕೆದಾರನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಬಹುಮಾನವಾಗಿ ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ದೋಷಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಅದೇ ನಾವೀಗ ನಿರ್ಮಿಸುವುದು.
+
+ನಮ್ಮ ಆಟ ಸ್ಪಷ್ಟವಾಗಿರಬೇಕು ಏನಾಗುತ್ತಿದೆ ಎಂಬ ವಿಷಯದಲ್ಲಿ. ಆಟಗಾರರೊಡನೆ ಪ್ರಸ್ತುತ ಪದವನ್ನು ತಕ್ಷಣ ತಿಳಿಯಬೇಕು ಮತ್ತು ದೋಷವಾದರೆ ಕೂಡ, ಅವರು ಕೂಡಲೇ ನೋಡಬಹುದು. ಸುಲಭ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಶೈಲಿ ರಚಿಸೋಣ:
+
+`style.css` ಎಂಬ ಹೊಸ ಕಡತ ಸೃಷ್ಟಿಸಿ ಮತ್ತು ಕೆಳಗಿನ ಶೈಲಿಯನ್ನು ಸೇರಿಸಿ:
+
+```css
+/* inside style.css */
+.highlight {
+ background-color: yellow;
+}
+
+.error {
+ background-color: lightcoral;
+ border: red;
+}
+```
+
+**ಈ CSS ವರ್ಗಗಳ ಅರ್ಥ:**
+- ಪ್ರಸ್ತುತ ಪದವನ್ನು ಹಳದಿ ಹಿನ್ನೆಲೆಯಿಂದ واضحವಾಗಿ ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ
+- ಟೈಪಿಂಗ್ ದೋಷಗಳನ್ನು ದೋಣಿ ಕೊರಲ್ ಹಳದಿ ಹಿನ್ನೆಲೆಯಿಂದ ಸೂಚಿಸುತ್ತದೆ
+- ಬಳಕೆದಾರರ ಟೈಪಿಂಗ್ ಸಂಖ್ಯೆ ಮೇಲೆ ಅವಘಡವಿಲ್ಲದೆ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುತ್ತದೆ
+- ಪ್ರವೇಶಣೀಯತೆಗಾಗಿ ಮತ್ತು ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಸಂವಹನಕ್ಕಾಗಿ ವಿಭಿನ್ನ ಬಣ್ಣಗಳನ್ನು ಬಳಸುತ್ತದೆ
+
+✅ CSS ಬಗ್ಗೆ ನಿಮ್ಮ ಮೆಚ್ಚಿನಂತೆ ನಿಮ್ಮ ಪುಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು. ಸ್ವಲ್ಪ ಸಮಯ ತೆಗೆದು ಪುಟವನ್ನು ನಯವಾಗಿ ಕಾಣುವಂತೆ ಮಾಡಿ:
+
+- വ്യത്യസ്ത ഫോಂಟ್ തിരഞ്ഞെടുക്കുക
+- തലക്കെട്ടുകളുടെ ಬಣ್ಣ ಬದಲಾಯಿಸಿ
+- ವಸ್ತುಗಳ ಗಾತ್ರ ಬದಲಾಯಿಸಿ
+
+## ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
+
+ಇಲ್ಲಿ ವಿಷಯ ರೋಚಕವಾಗುತ್ತದೆ! 🎉 ನಮ್ಮ ಬಳಿ HTML ರಚನೆ ಮತ್ತು CSS ಶೈಲಿ ಇದೆ, ಆದರೆ ನಮ್ಮ ಆಟ ಈಗ ಇನ್ನೂ ಎಂಜಿನ್ ಇಲ್ಲದ ಸುಂದರ ಕಾರಿನಂತಿದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆ ಎಂಜಿನ್ ಆಗಿದ್ದು - ಅದು ಎಲ್ಲವನ್ನೂ ಕಾರ್ಯನಿರ್ವಹಿಸುವಂತೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಆಟಗಾರರ ಕ್ರಿಯೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ.
+
+ಇಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಸೃಷ್ಟಿಯನ್ನು ಜೀವಂತವಾಗಿ ನೋಡುತ್ತೀರಿ. ನಾವು ಹಂತ ಹಂತವಾಗಿ ಕೆಲಸ ಮಾಡೋಣ ಹಾಗೆ ಏನೂ ಭಾರವಾಗದಂತೆ ತೋರಿಸಲು:
+
+| ಹಂತ | ಉದ್ದೇಶ | ನೀವು ಕಲಿಯುವುದು |
+|-----|---------|----------------|
+| [ನಿರಂತರಗಳನ್ನು ಸೇರಿಸೋಣ](../../../../4-typing-game/typing-game) | ಉಲ್ಲೇಖಗಳು ಮತ್ತು DOM ರೆಫರೆನ್ಸ್ಗಳನ್ನು ಸಿದ್ಧಪಡಿಸೋಣ | ವ್ಯತ್ಯಯ ನಿರ್ವಹಣೆ ಮತ್ತು DOM ಆಯ್ಕೆ |
+| [ಆಟ ಪ್ರಾರಂಭಿಸಲು ಈವೆಂಟ್ ಶ್ರೋತ](../../../../4-typing-game/typing-game) | ಆಟ ಆರಂಭದ ನಿರ್ವಹಣೆ | ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು UI ನವೀಕಾರಣೆ |
+| [ಟೈಪಿಂಗ್ಗೆ ಈವೆಂಟ್ ಶ್ರೋತ](../../../../4-typing-game/typing-game) | ನೈಜ ಸಮಯದಲ್ಲಿ ಬಳಕೆದಾರ ಇನ್ಪುಟ್ ಪ್ರಕ್ರಿಯೆ | ಇನ್ಪುಟ್ ಮಾನ್ಯತೆ ಮತ್ತು ಸುಧಾರಿತ ಪ್ರತಿಕ್ರಿಯೆ |
+
+**ಈ ರಚನಾತ್ಮಕ ವಿಧಾನ ನಿಮ್ಮಿಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ:**
+- ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಯುಕ್ತಿಕ ಮತ್ತು ನಿರ್ವಹಣಾಸಾಧ್ಯ ವಿಭಾಗಗಳಲ್ಲಿ ಸಂಘಟಿಸಲು
+- ಸುಲಭ ದೋಷಹರಿವಿನಿಂದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹಂತ ಹಂತವಾಗಿ ನಿರ್ಮಿಸಲು
+- ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನ ವಿಭಿನ್ನ ಭಾಗಗಳು ಹೇಗೆ ಒಟ್ಟಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು
+- ಭವಿಷ್ಯ ಯೋಜನೆಗಳಿಗೆ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮಾದರಿಗಳನ್ನು ರಚಿಸಲು
+
+ಆದರೆ ಮೊದಲು, `script.js` ಎಂಬ ಹೊಸ ಕಡತ ರಚಿಸಿ.
+
+### ನಿರಂತರಗಳನ್ನು ಸೇರಿಸೋಣ
+
+ನಾವು ಕಾರ್ಯಾರಂಭಿಸಲು ಮುನ್ನ, ನಮ್ಮ ಎಲ್ಲಾ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸಂಗ್ರಹಿಸೋಣ! ಹೇಗೆ NASA ಮಿಷನ್ನಿನ ನಿಯಂತ್ರಣ ಎಲ್ಲಾ ಮಾನಿಟರಿಂಗ್ ವ್ಯವಸ್ಥೆಗಳನ್ನು ವಿಮಾನಾರಂಭಕ್ಕೂ ಮುನ್ನ ಸಿದ್ಧಪಡಿಸುತ್ತದೆ ಅಷ್ಟೇ, ಎಲ್ಲವನ್ನೂ ಪೂರ್ವಸಿದ್ಧತಾ ಮಾಡುವುದರಿಂದ ಮುಂದೆ ಸರಿಯಾದ ಕೆಲಸ ಸುಲಭವಾಗುತ್ತದೆ. ಇದು ಕೊನೆಗೆ ಬಳಕೆ ಮಿತಿಗಳನ್ನು ಹುಡುಕಬೇಕಾಗದಂತೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಟೈಪೋ ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಸಹಾಯಕ.
+
+ಮೊದಲು ನಾವು ಸಿದ್ಧಪಡಿಸಬೇಕಾದ ವಸ್ತುಗಳು:
+
+| ಡೇಟಾ ಪ್ರಕಾರ | ಉದ್ದೇಶ | ಉದಾಹರಣೆ |
+|--------------|---------|----------|
+| ನಾಲ್ಳುಗಳ ಏರೆ | ಆಟದ ಎಲ್ಲಾ ಸಾಧ್ಯ ನುಡಿ ಸಾಲುಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ | `['Quote 1', 'Quote 2', ...]` |
+| ಪ್ರಚ್ಛದ ನಗರದ | ಪ್ರಸ್ತುತ ನುಡಿ ಸಾಲನ್ನು ವೈಯಕ್ತಿಕ ಶಬ್ದಗಳಲ್ಲಿ ವಿಭಾಗಿಸಿ | `['When', 'you', 'have', ...]` |
+| ಶಬ್ದ ಸೂಚ್ಯಂಕ | ಆಟಗಾರನು ಟೈಪ್ ಮಾಡುತ್ತಿರುವ ಶಬ್ದವನ್ನು ಹಿಡಿದುಕೋಳು | `0, 1, 2, 3...` |
+| ಪ್ರಾರಂಭ ಸಮಯ | ಸ್ಕೋರ್ಗಾಗಿ ಕಳೆದ ಸಮಯವನ್ನು ಲೆಕ್ಕಿಸು | `Date.now()` |
+
+**ನಮ್ಮ UI ಎಲಿಮೆಂಟ್ಗಳ ಉಲ್ಲೇಖ ಕೂಡ ಬೇಕಾಗುತ್ತದೆ:**
+| ಅಂಶ | ID | ಉದ್ದೇಶ |
+|---------|----|---------|
+| ಪಠ್ಯ ಇನ್ಪುಟ್ | `typed-value` | ಆಟಗಾರರು ಟೈಪ್ ಮಾಡುವ ಸ್ಥಳ |
+| ನುಡಿ ಪ್ರದರ್ಶನ | `quote` | ಟೈಪ್ ಮಾಡಲು ನುಡಿಯ ಪ್ರದರ್ಶನ |
+| ಸಂದೇಶ ಪ್ರದೇಶ | `message` | ಸ್ಥಿತಿ ಅಪ್ಡೇಟ್ಗಳನ್ನು ತೋರಿಸುತ್ತದೆ |
+
+```javascript
+// script.js ಒಳಗೆ
+// ನಮ್ಮ ಎಲ್ಲಾ ಉಕ್ತಿಗಳು
+const quotes = [
+ 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+ 'There is nothing more deceptive than an obvious fact.',
+ 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+ 'I never make exceptions. An exception disproves the rule.',
+ 'What one man can invent another can discover.',
+ 'Nothing clears up a case so much as stating it to another person.',
+ 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+// ಪದಗಳ ಪಟ್ಟಿಯನ್ನು ಮತ್ತು ಆಟಗಾರನು ಪ್ರಸ್ತುತ ಟೈಪಿಂಗ್ ಮಾಡುತ್ತಿರುವ ಪದದ ಸೂಚ್ಯಂಕವನ್ನು ಸಂಗ್ರಹಿಸಿ
+let words = [];
+let wordIndex = 0;
+// ಪ್ರಾರಂಭಿಸುವ ಸಮಯ
+let startTime = Date.now();
+// ಪುಟದ ಅಂಶಗಳು
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+```
+
+**ಈ ಸಜ್ಜುಗಾರಿಕೆಯ ಕೋಡ್ ಏನು ಸಾಧಿಸುತ್ತದೆ ಎನ್ನುವುದನ್ನು ವಿವರಿಸುವುದು:**
+- **ನಿರುಪಿತ** ಆಗಿದ್ದು ಶೆರ್ಲಾಕ್ ಹೋಲ್ಮ್ಸ್ ನುಡಿ ಸಾಲುಗಳ ಏರೆಯನ್ನು `const` ಬಳಸಿಕೊಂಡು ಸಂಗ್ರಹಿಸಲಾಗಿದೆ ಏಕೆಂದರೆ ನುಡಿ ಸಾಲುಗಳು ಬದಲಾಯಿಸುವುದಿಲ್ಲ
+- **ಆರಂಭ** ಮಾಹಿತಿಯ ದಾಖಲೆಗಳನ್ನು `let` ಮೂಲಕ ಆರಂಭಿಸುತ್ತದೆ ಏಕೆಂದರೆ ಈ ಮೌಲ್ಯಗಳು ಆಟದ ಸಮಯದಲ್ಲಿ ನವೀಕರಿಸಲಾಗುತ್ತದೆ
+- **DOM ಅಂಶಗಳ ಸೂಚನೆಗಳನ್ನು** `document.getElementById()` ಬಳಸಿ ಹಿಡಿದುಕೊಳ್ಳುತ್ತದೆ ಪರಿಣಾಮಕಾರಿ ಪ್ರವೇಶಕ್ಕಾಗಿ
+- **ಆಟದ ಎಲ್ಲಾ ಕಾರ್ಯಕ್ಷಮತೆಗಳ ನೆಲವನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ** ಸ್ಪಷ್ಟ ಹಾಗೂ ವಿವರಣಾತ್ಮಕ ಮಾರಕಾಮೌಲ ಸಂಖ್ಯೆಗಳಿಂದ
+- **ಸಂಬಂಧಿತ ಮಾಹಿತಿಗಳನ್ನು ಹಾಗೂ ಅಂಶಗಳನ್ನು ಲಾಜಿಕಲ್ ಆಗಿ ಸಂಘಟಿಸುತ್ತದೆ** ಸುಲಭ ಕೋಡ್ ನಿರ್ವಹಣೆಗೆ
+
+✅ ಮುಂದುವರಿದ ನುಡಿ ಸಾಲುಗಳನ್ನು ನಿಮ್ಮ ಆಟಕ್ಕೆ ಸೇರಿಸಿ
+
+> 💡 **ವೃತ್ತಿಪರ ಸಲಹೆ**: ನಾವು ಕೋಡ್ನಲ್ಲಿ ಬೇಕಾದಾಗ ಯಾವುದೇ ಸಮಯದಲ್ಲೂ `document.getElementById()` ಬಳಸಿ ಅಂಶಗಳನ್ನು ಪಡೆಯಬಹುದು. ಏಕೆಂದರೆ ನಾವು ಈ ಅಂಶಗಳನ್ನು ನಿಯತಕಾಲಿಕವಾಗಿ ಸೂಚಿಸಲಿದ್ದೇವೆ, ಸರಿಯಾದ ಸ್ಟ್ರಿಂಗ್ ಲಿಟ್ಟರಲ್ಸ್ ಬಳಸಿ ಟೈಪೋ ತಪ್ಪಿಸಲು ನಾವು ಕಾನ್ಸ್ಟ್ಯಾನ್ಟ್ಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. [Vue.js](https://vuejs.org/) ಅಥವಾ [React](https://reactjs.org/) ಮುಂತಾದ ಫ್ರೇಮ್ವರ್ಕ್ಗಳು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಕೇಂದ್ರಿತವಾಗಿ ಉತ್ತಮವಾಗಿ ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ.
+>
+**ಈ ವಿಧಾನವು ಏಕೆ ಉತ್ತಮವಾಗಿದೆ ಎಂಬುದಕ್ಕೆ ಕಾರಣಗಳು:**
+- **ಬರವಣಿಗೆಯ ತಪ್ಪುಗಳನ್ನು** ನಿರೋಧಿಸುತ್ತದೆ, ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಹಲವಾರು ಬಾರಿ ಸೂಚಿಸುವಾಗ
+- **ವಿವರಣಾತ್ಮಕ ಕಾಂಸ್ಟ್ ಹೆಸರಿನಿಂದ** ಕೋಡ್ ಓದುಗರತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ
+- **IDE ಬೆಂಬಲದಲ್ಲಿ** ಸ್ವಯಂ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆಯನ್ನು ಮತ್ತು ದೋಷ ಪರಿಶೀಲನೆಯನ್ನು ಸಾಧ್ಯಮಾಡುತ್ತದೆ
+- **ಪುನರ್ ಸ್ಥಾಪನೆಯನ್ನು** ಸುಲಭಗೊಳಿಸುತ್ತದೆ, ನಂತರ ಎಲಿಮೆಂಟ್ ID ಬದಲಾದರೆ
+
+`const`, `let` ಮತ್ತು `var` ಬಳಸುವ ಬಗ್ಗೆ ವಿಡಿಯೋ ನೋಡಲು ಒಂದು ನಿಮಿಷ ಕೊಡಿ
+
+[](https://youtube.com/watch?v=JNIXfGiDWM8 "ವೇರಿಯಬಲಿನ ಪ್ರಕಾರಗಳು")
+
+> 🎥 ವೇರಿಯಬಲ್ಗಳ ಬಗ್ಗೆ ವಿಡಿಯೋ ನೋಡಲು ಮೇಲಿನ ಚಿತ್ರ ಕ್ಲಿಕ್ ಮಾಡಿ.
+
+### ಪ್ರಾರಂಭ ತರ್ಕ ಸೇರಿಸಿ
+
+ಇಲ್ಲಿ ಎಲ್ಲವೂ ಜೋಡಣೆಯಾಗುತ್ತದೆ! 🚀 ನೀವು ನಿಮ್ಮ ಮೊದಲ ನಿಜವಾದ ಘಟನಾ ಶ್ರೋತೆಯನ್ನು ಬರೆಯುತ್ತಿದ್ದೀರಿ, ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ಬಟನ್ ಕ್ಲಿಕ್ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದನ್ನು ಕಂಡಾಗ ಸಂತೋಷವಾಗುತ್ತದೆ.
+
+ಒಂದು ಬಾರಿ ಯೋಚಿಸಿ: ಯಾರಾದರೂ ಆ "Start" ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಲಿದ್ದಾರೆ, ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ಅವರಿಗೆ ಸಿದ್ಧವಾಗಿರಬೇಕು. ಅವರು ಯಾವಾಗ ಕ್ಲಿಕ್ ಮಾಡಬೇಕೋ ನಮಗೆ ತಿಳಿದಿಲ್ಲ- ತಕ್ಷಣ ಅಥವಾ ಕಾಫಿ ಕುಡಿಯಬಹುದು- ಆದರೆ ಅವರು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ನಿಮ್ಮ ಆಟ ಬದುಕು ಹಿಡಿದೀತು.
+
+ಬಳಕೆದಾರರು `start` ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ನಾವು ಒಂದು ನುಡಿ ಸಾಲನ್ನು ಆರಿಸಿ, ಬಳಕೆದಾರ ಮುಖಮುಖಿಯಿಂದ ತಯಾರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರಸ್ತುತ ಶಬ್ದ ಮತ್ತು ಸಮಯದ ಟ್ರ್ಯಾಕಿಂಗ್ ಅಳವಡಿಸುತ್ತೇವೆ. ಕೆಳಗಿನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನೀವು ಸೇರಿಸಬೇಕಾಗಿರುವುದು; ನಾವು ಇದರ ಬಗ್ಗೆ ಅದು ಪಾಠದ ನಂತರ ಚರ್ಚಿಸೋಣ.
+
+```javascript
+// script.js ನ ಅಂತ್ಯದಲ್ಲಿ
+document.getElementById('start').addEventListener('click', () => {
+ // ಒಂದು ಉಕ್ತಿಯನ್ನು ಪಡೆಯಿರಿ
+ const quoteIndex = Math.floor(Math.random() * quotes.length);
+ const quote = quotes[quoteIndex];
+ // ಉಕ್ತಿಯನ್ನು ಪದಗಳ ಸರಣಿಯಲ್ಲಿ ಇಡಿ
+ words = quote.split(' ');
+ // ಟ್ರ್ಯಾಕಿಂಗ್ಗಾಗಿ ಪದ ಸೂಚ್ಯಂಕವನ್ನು ಮರುಹೊಂದಿಸಿ
+ wordIndex = 0;
+
+ // UI ನವೀಕರಣಗಳು
+ // ಕ್ಲಾಸ್ ಸೆಟ್ ಮಾಡಲು span ಲೆಮೆಂಟ್ಗಳ ಸರಣಿಯನ್ನು ರಚಿಸಿ
+ const spanWords = words.map(function(word) { return `${word} `});
+ // ಸ್ಟ್ರಿಂಗ್ ಆಗಿ ಪರಿವರ್ತಿಸಿ ಮತ್ತು ಉಪಮಾನದ ಪ್ರದರ್ಶನದಲ್ಲಿ innerHTML ಆಗಿ ಸೆಟ್ ಮಾಡಿ
+ quoteElement.innerHTML = spanWords.join('');
+ // ಮೊದಲ ಪದವನ್ನು ಹೈಲೈಟ್ ಮಾಡಿ
+ quoteElement.childNodes[0].className = 'highlight';
+ // ಯಾವುದೇ ಹಿಂದಿನ ಸಂದೇಶಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ
+ messageElement.innerText = '';
+
+ // ಟೆಕ್ಸ್ಟ್ಬಾಕ್ಸ್ ಅನ್ನು ಸಜ್ಜುಗೊಳಿಸಿ
+ // ಟೆಕ್ಸ್ಟ್ಬಾಕ್ಸ್ ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ
+ typedValueElement.value = '';
+ // ಕೇಂದ್ರೀಕೃತ ಮಾಡುವ ಮೂಲಕ ಫೋಕಸ್ ಸೆಟ್ ಮಾಡಿ
+ typedValueElement.focus();
+ // ಈವೆಂಟ್ ಹ್ಯಾಂಡಲರ್ ಅನ್ನು ಸೆಟ್ ಮಾಡಿ
+
+ // ಟೈಮರ್ ಪ್ರಾರಂಭಿಸಿ
+ startTime = new Date().getTime();
+});
+```
+
+**ಕೋಡನ್ನು ಉಪಕ್ಷಿಪ್ತ ವಿಭಾಗಗಳಲ್ಲಿ ಹಂಚೋಣ:**
+
+**📊 ಶಬ್ದ ಟ್ರ್ಯಾಕಿಂಗ್ ಸಜ್ಜುಗಾರಿಕೆ:**
+- ಬದಲಾವಣೆಗಾಗಿ `Math.floor()` ಮತ್ತು `Math.random()` ಬಳಸಿ ಯಾದೃಚ್ಛಿಕ ನುಡಿ ಸಾಲು ಆರಿಸುತ್ತದೆ
+- `' '` ಮೂಲಕ `split` ಮಾಡಿ ನುಡಿಯನ್ನು ವೈಯಕ್ತಿಕ ಶಬ್ದಗಳ ಏರೆಯಲ್ಲಿ ಪರಿವರ್ತಿಸುತ್ತದೆ
+- ಆಟಗಾರರು ಮೊದಲ ಶಬ್ದದಿಂದ ಪ್ರಾರಂಭಿಸುವುದರಿಂದ `wordIndex` ಅನ್ನು 0ಕ್ಕೆ ಮರುಹೊಂದಿಸುತ್ತದೆ
+- ಹೊಸ ಸುತ್ತ oscillateಗೆ ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಸಜ್ಜುಗೊಳಿಸುತ್ತದೆ
+
+**🎨 UI ಸಜ್ಜುಗಾರಿಕೆ ಮತ್ತು ಪ್ರದರ್ಶನ:**
+- ಪ್ರತಿ ಶಬ್ದವನ್ನು ವೈಯಕ್ತಿಕ ಅಂಶಕ್ಕಾಗಿ `` ಎಲಿಮೆಂಟ್ಗಳಲ್ಲಿ ಪರಿವರ್ತಿಸುತ್ತದೆ
+- DOM ನವೀಕರಣಕ್ಕಾಗಿ span ಅಂಶಗಳನ್ನು ಒಟ್ಟು ಸ್ಟ್ರಿಂಗ್ ಆಗಿ ಜೋಡಿಸುತ್ತದೆ
+- ಮೊದಲ ಶಬ್ದದ ಮೇಲೆ `highlight` ಶೈಲಿ ವರ್ಗವನ್ನು ಜೋಡಿಸಿ ವಿಶೇಷವಾಗಿ ತೋರಿಸುತ್ತದೆ
+- ಯಾವುದೇ ಹಳೆಯ ಆಟದ ಸಂದೇಶಗಳನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ ಸ್ವಚ್ಛವಾಗಿರಲು
+
+**⌨️ ಪಠ್ಯಪೆಟ್ಟು ಸಿದ್ಧತೆ:**
+- ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರದಲ್ಲಿನ ಯಾವುದೇ ಪಠ್ಯ ತೆರವುಗೊಳಿಸುತ್ತದೆ
+- ಆಟಗಾರರು ತಕ್ಷಣ ಟೈಪ್ ಮಾಡುವುದು ಆರಂಭಿಸುವಂತೆ ಫೋಕಸ್ ನ್ನು ಕೊಡುತ್ತದೆ
+- ಹೊಸ ಆಟದ ಅಧಿವೇಶನಕ್ಕಾಗಿ ಇನ್ಪುಟ್ ಪ್ರದೇಶವನ್ನು ಸಜ್ಜುಗೊಳಿಸುತ್ತದೆ
+
+**⏱️ ಟೈಮರ್ ಪ್ರಾರಂಭ:**
+- `new Date().getTime()` ಬಳಸಿ ಪ್ರಸ್ತುತ ಟೈಮ್ಸ್ಟಾಂಪ್ ಸೇರಿಸಲಾಗುತ್ತದೆ
+- ಟೈಪಿಂಗ್ ವೇಗ ಮತ್ತು ಸಮಯ ನಿಖರವಾಗಿ ಲೆಕ್ಕಿಸಲು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ
+- ಆಟದ ಕಾರ್ಯಾಚರಣೆಯ ಅನುಸರಣೆಗೆ ಪ್ರಾರಂಭ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ
+
+### ಟೈಪಿಂಗ್ ಲಾಜಿಕ್ ಸೇರಿಸಿ
+
+ಇಲ್ಲಿ ನಮ್ಮ ಆಟದ ಹೃದಯಕ್ಕೆ ತಲುಪುತ್ತೇವೆ! ಆರಂಭದಲ್ಲಿ ಬಹಳ ಎಷ್ಟೋ ಇದ್ದಂತೆ ಕಾಣಬಹುದು ಬೇಸರಿಸಬೇಡಿ- ನಾವು ಪ್ರತಿ ತುಂಡನ್ನು ವಿವರಿಸುವೆವು, ಮತ್ತು ಕೊನೆಯಲ್ಲಿ ನೀವು ಈ ಲಾಜಿಕ್ ಎಷ್ಟು ಸರಳ ಅಂತ ತಿಳಿದುಕೊಳ್ಳುತ್ತೀರಿ.
+
+ನಾವು ಇಲ್ಲಿ ಕಟ್ಟುತ್ತಿದ್ದುದೇ ಬೇರೆಯವರಿಗಿಂತ ಉನ್ನತ ಮಟ್ಟದ ಸಾಧ್ಯತೆ: ಪ್ರತಿ ಅಕ್ಷರವನ್ನು ಟೈಪ್ ಮಾಡುವಾಗ, ನಮ್ಮ ಕೋಡ್ ಅದನ್ನು ಪರಿಶೀಲಿಸಿ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುತ್ತಿದ್ದು, ಮುಂದೇನು ಮಾಡಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. 1970 ರಲ್ಲಿ WordStar જેવી ಪ್ರಾಥಮಿಕ ಶಬ್ದ ಪ್ರಾಸೆಸರ್ಗಳು ಟೈಪಿಸ್ಟ್ಗಳಿಗೆ ಸಮಕಾಲೀನ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುವುದರಂತೆ ಇದು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
+
+```javascript
+// script.js ನ ಅಂತ್ಯದಲ್ಲಿ
+typedValueElement.addEventListener('input', () => {
+ // ಪ್ರಸ್ತುತ ಪದವನ್ನು ಪಡೆಯಿರಿ
+ const currentWord = words[wordIndex];
+ // ಪ್ರಸ್ತುತ ಮೌಲ್ಯವನ್ನು ಪಡೆಯಿರಿ
+ const typedValue = typedValueElement.value;
+
+ if (typedValue === currentWord && wordIndex === words.length - 1) {
+ // ವಾಕ್ಯದ ಅಂತ್ಯ
+ // ಯಶಸ್ಸನ್ನು ತೋರಿಸಿ
+ const elapsedTime = new Date().getTime() - startTime;
+ const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
+ messageElement.innerText = message;
+ } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+ // ಪದದ ಅಂತ್ಯ
+ // ಹೊಸ ಪದಕ್ಕಾಗಿ typedValueElement ಅನ್ನು ಕ್ಲಿಯರ್ ಮಾಡಿ
+ typedValueElement.value = '';
+ // ಮುಂದಿನ ಪದಕ್ಕೆ ಸರಿಸಿ
+ wordIndex++;
+ // ಉಲ್ಲೇಖದಲ್ಲಿನ ಎಲ್ಲಾ ಅಂಶಗಳ ಕ್ಲಾಸ್ ಹೆಸರನ್ನು ರೀಸೆಟ್ ಮಾಡಿ
+ for (const wordElement of quoteElement.childNodes) {
+ wordElement.className = '';
+ }
+ // ಹೊಸ ಪದವನ್ನು ಹೈಲೈಟ್ ಮಾಡಿ
+ quoteElement.childNodes[wordIndex].className = 'highlight';
+ } else if (currentWord.startsWith(typedValue)) {
+ // ಪ್ರಸ್ತುತ ಸರಿಯಾಗಿದೆ
+ // ಮುಂದಿನ ಪದವನ್ನು ಹೈಲೈಟ್ ಮಾಡಿ
+ typedValueElement.className = '';
+ } else {
+ // ದೋಷ ಸ್ಥಿತಿ
+ typedValueElement.className = 'error';
+ }
+});
+```
+
+**ಟೈಪಿಂಗ್ ಲಾಜಿಕ್ ಹಾದಿಯ ಅರ್ಥ:**
+
+ಈ ಫಂಕ್ಷನ್ ನೀರಿನ ನದಿಯ ತರಹವಾಗಿ, ಅತಿ ಸ್ಪಷ್ಟದಿಂದ ಅತಿ ಸಾಮಾನ್ಯ ಸ್ಥಿತಿಗಳಿಗೆ ಪರಿಶೀಲನೆ ಮಾಡುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಸಂದರ್ಭವೂ ಹೀಗಿದೆ:
+
+```mermaid
+flowchart TD
+ A[ಪ್ಲೇಯರ್ ಅಕ್ಷರವನ್ನು ಟೈಪ್ ಮಾಡುತ್ತಾನೆ] --> B[ಪ್ರಚಲಿತ ಪದ ಮತ್ತು ಟೈಪ್ ಮಾಡಿದ ಮೌಲ್ಯವನ್ನು ಪಡೆಯಿರಿ]
+ B --> C{ಉಲ್ಲೇಖ ಪೂರ್ಣವಾಗಿದೆನಾ?}
+ C -->|ಹೌದು| D[ಸಮಯದೊಂದಿಗೆ ಪೂರ್ಣಗೊಳ್ಳುವ ಸಂದೇಶವನ್ನು ತೋರಿ]
+ C -->|ಇಲ್ಲ| E{ಪದವು ಜಾಗದೊಂದಿಗೆ ಪೂರ್ಣವಾಗಿದೆನಾ?}
+ E -->|ಹೌದು| F[ಇನ್ಪುಟ್ ತೆರವುಮಾಡಿ, ಮುಂದಿನ ಪದಕ್ಕೆ ಸರಿಸಿ, ಹೈಲೈಟ್ ನವೀಕರಿಸಿ]
+ E -->|ಇಲ್ಲ| G{ಈವರೆಗೆ ಸರಿಯಾಗಿ ಟೈಪ್ ಮಾಡಲಾಗುತ್ತಿದೆ ಇದೆಯಾ?}
+ G -->|ಹೌದು| H[ದೋಷ ಶೈಲಿಯನ್ನು ತೆಗೆಯಿರಿ]
+ G -->|ಇಲ್ಲ| I[ದೋಷ ಶೈಲಿಯನ್ನು ತೋರಿಸಿ]
+```
+**🏁 ನುಡಿ ಪೂರ್ಣ (ಸ್ಥಿತಿ 1):**
+- ಟೈಪ್ ಮಾಡಿದ ಮೌಲ್ಯವು ಪ್ರಸ್ತುತ ಶಬ್ದಕ್ಕೆ ಸರಿ ಮತ್ತು ನಾವು ಕೊನೆಯ ಶಬ್ದದಲ್ಲಿ ಇದ್ದೇವೆ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ಪ್ರಾರಂಭ ಸಮಯದಿಂದ ಪ್ರಸ್ತುತ ಸಮಯ ವರೆಗಿನ ಕಳೆದ ಸಮಯ ಲೆಕ್ಕಿಸುತ್ತದೆ
+- ಸೆಕೆಂಡುಗಳಿಗೆ ಪರಿವರ್ತಿಸಲು 1,000 ರಿಂದ ಭಾಗಿಸುತ್ತದೆ
+- ಪೂರ್ಣಗೊಳಿಸುವ ಸಮಯದೊಂದಿಗೆ ಅಭಿನಂದನೆ ಸಂದೇಶವನ್ನು ತೋರಿಸುತ್ತದೆ
+
+**✅ ಶಬ್ದ ಪೂರ್ಣ (ಸ್ಥಿತಿ 2):**
+- ಇನ್ಪುಟ್ ಕೊನೆಯಲ್ಲಿ ತೆರವು ಇರುವಾಗ ಶಬ್ದ ಪೂರ್ಣವಾಗಿದೆ ಎಂದು ಪತ್ತೆ ಹಚ್ಚುತ್ತದೆ
+- ಕಡಿತವಾದ ಇನ್ಪುಟ್ ಪ್ರಸ್ತುತ ಶಬ್ದಕ್ಕೊಮ್ಮೆ ಸರಿಹೊತ್ತುದು ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ಮುಂದಿನ ಶಬ್ದಕ್ಕೆ ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರವನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ
+- `wordIndex` ಅನ್ನು ಹೆಚ್ಚಿಸಿ ಮುಂದಿನ ಶಬ್ದಕ್ಕೆ ಸಾಗುತ್ತದೆ
+- ಹೈಲೈಟ್ ಮಾಡಿದ ಶಬ್ದವನ್ನು ನವೀಕರಿಸಲು ಎಲ್ಲಾ ವರ್ಗಗಳನ್ನು ತೆರವುಗೊಳಿಸಿ ಹೊಸ ಶಬ್ದವನ್ನು ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ
+
+**📝 ಟೈಪಿಂಗ್ ಪ್ರಗತಿಯಲ್ಲಿದೆ (ಸ್ಥಿತಿ 3):**
+- ಪ್ರಸ್ತುತ ಶಬ್ದವು ಈಗಾಗಲೇ ಟೈಪ್ ಮಾಡಲಾದವುಗಳಿಂದ ಪ್ರಾರಂಭವಾಗಿದೆ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ಯಾವುದೇ ದೋಷ ಶೈಲಿಯನ್ನು ತೆರವುಗೊಳಿಸಿ ಇನ್ಪುಟ್ ಸರಿಯಾದದ್ದು ಎಂದು ತೋರಿಸುತ್ತದೆ
+- ತಡೆರಹಿತವಾಗಿ ನವೀಕರಿಸುವಿಕೆ ಅನುಮತಿಸುತ್ತದೆ
+
+**❌ ದೋಷ ಸ್ಥಿತಿ (ಸ್ಥಿತಿ 4):**
+- ಟೈಪ್ ಮಾಡಿದ ಪಠ್ಯ ನಿರೀಕ್ಷಿತ ಶಬ್ದ ಪ್ರಾರಂಭದೊಂದಿಗೆ ಹೊಂದಿಕೆಯಿಲ್ಲದಾಗ ಪ್ರಚೋದಿಸುತ್ತಿದೆ
+- ತಕ್ಷಣದ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಗೆ ದೋಷ CSS ವರ್ಗವನ್ನು ಜೋಡಿಸುತ್ತದೆ
+- ಆಟಗಾರರಿಗೆ ದೋಷಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಗುರುತಿಸಲು ಮತ್ತು ಸರಿಪಡಿಸಲು ಸಹಾಯಮಾಡುತ್ತದೆ
+
+## ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಪರೀಕ್ಷಿಸಿ
+
+ನೀವು ಏನು ಸಾಧಿಸಿದ್ದೀರೋ ನೋಡಿರಿ! 🎉 ನೀವು ಇವೆಂಟ್ ಚಾಲಿತ ಕಾರ್ಯಕ್ರಮವನ್ನು ಬಳಸಿ ನಿಜವಾದ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಟೈಪಿಂಗ್ ಆಟವನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಾ. ಅದನ್ನು ಮೆಚ್ಚಿಕೊಳ್ಳಲು ಒಂದು ಕ್ಷಣ ತೆಗೆದುಕೊಳ್ಳಿ- ಇದು ಸಣ್ಣ ಸಾಧನೆಯಲ್ಲ!
+
+ಈಗ ಪರೀಕ್ಷಿಸುವ ಹಂತ ಬಂದಿದೆ! ಇದು ನಿರೀಕ್ಷಿಸಿದಂತೆ ಕೆಲಸ ಮಾಡುವುದೇ? ನಾವು ಏನಾದರೂ ತಪ್ಪಿಸಿಕೊಂಡಿರಾ? ಹಾಗಾದರೆ ನಿಮ್ಮಿಗೆ ತಿಳಿಯಲಿ: ತಕ್ಷಣವೇ ಎಲ್ಲವೂ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡದಿದ್ದರೂ, ಅದು ಸಾಮಾನ್ಯ. ಅನುಭವಿಗಳಾದ ಡೆವಲಪರ್ಗಳು ಸಹ ತಮ್ಮ ಕೋಡ್ನಲ್ಲಿ ಹೆಚ್ಚಿನ ವೇಳೆ ದೋಷಗಳನ್ನು ನೋಡುತ್ತಾರೆ. ಇದು ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯ ಭಾಗ.
+
+`start` ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಟೈಪ್ ಮಾಡಬಿಡಿ! ಇದು ಹಿಂದೆ ನಾವು ನೋಡಿದ ಆನಿಮೇಷನ್ನಂತೆ ಕಾಣಬೇಕು.
+
+
+
+**ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಬೇಕಾದವು:**
+- ಸ್ಟಾರ್ಟ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಯಾದೃಚ್ಛಿಕ ನುಡಿ ಸಾಲು ಪ್ರದರ್ಶಿತವಾಗುತ್ತದೆ ಎಂದು ಪರಿಶೀಲಿಸು
+- ಟೈಪಿಂಗ್ ಪ್ರಸ್ತುತ ಶಬ್ದವನ್ನು ಅಚ್ಚವಾಗಿ ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
+- ತಪ್ಪು ಟೈಪಿಂಗ್ಗೆ ದೋಷ ಶೈಲಿ ತೋರಿಕೆಯಾಗುತ್ತದೆ ಎಂದು ಪರಿಶೀಲಿಸಿ
+- ಶಬ್ದಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸುವಾಗ ಹೈಲೈಟ್ ಸರಿಯಾಗಿ ಮುಂದುವರಿಯುತ್ತದೆ ಎಂಬುದನ್ನು ಪರೀಕ್ಷಿಸಿ
+- ನುಡಿ ಸಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಸಮಯದೊಂದಿಗೆ ಸಂಪೂರ್ಣ ನಿಮ್ಮ ಸಂದೇಶ ತೋರಿಸುತ್ತದೆ
+
+**ಸಾಮಾನ್ಯ ದೋಷ ಪರಿಶೀಲಿಸುವ ಸಲಹೆಗಳು:**
+- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳಿಗಾಗಿ ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್ (F12) ಪರಿಶೀಲಿಸಿ
+- ಎಲ್ಲ ಫೈಲ್ ಹೆಸರು ಸೂಕ್ಷ್ಮ ಭೇದಗಳೊಂದಿಗೆ ಸರಿಹೊಂದಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
+- ಲೈವ್ ಸರ್ವರ್ ಸರಿಯಾಗಿ ಚಾಲಿತವಾಗಿ ರಿಫ್ರೆಶ್ ಆಗುತ್ತಿದೆಯೇ ಎಂದು ತಪಾಸಣೆ ಮಾಡಿ
+- ವಿಭಿನ್ನ ನುಡಿ ಸಾಲುಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ ಯಾದೃಚ್ಛಿಕ ಆಯ್ಕೆ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🎮
+
+ನಿಮ್ಮಿಕೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ಆಟಗಾರರ ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಧಾರದ ಮೇಲೆ ಆಟವನ್ನು ಹೊಂದಿಸುವ ಕಠಿಣತೆ ವ್ಯವಸ್ಥೆಯನ್ನು ಜಾರಿಗೆ ತಂದು ಟೈಪಿಂಗ್ ಆಟವನ್ನು ವಿಸ್ತರಿಸಿ. ಈ ಸವಾಲು ಉನ್ನತ ಮಟ್ಟದ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್, ಡೇಟಾ ವಿಶ್ಲೇಷಣೆ ಮತ್ತು ಡೈನಾಮಿಕ್ UI ನವೀಕರಣಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಟೈಪಿಂಗ್ ಆಟಕ್ಕೆ ಕಠಿಣತೆ ಹೊಂದಿಸುವ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿ ಅದು:
+1. ಆಟಗಾರರ ಟೈಪಿಂಗ್ ವೇಗ (ನಿಮಿಷಕ್ಕೆ ಶಬ್ದಗಳು) ಮತ್ತು ಸರಿಯಾದತ್ತೆಯ ಪ್ರಮಾಣವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ
+2. ತ್ರಿಯಾದ ಕಠಿಣತೆ ಮಟ್ಟಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ: ಸುಲಭ (ಸರಳ ನುಡಿಗಳು), ಮಧ್ಯಮ (ಪ್ರಸ್ತುತ ನುಡಿಗಳು), ಕಠಿಣ (ವಿರಾಮಚಿಹ್ನೆಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ ನುಡಿಗಳು)
+3. ಪ್ರಸ್ತುತ ಕಠಿಣತೆ ಮತ್ತು ಆಟಗಾರರ ಅಂಕಿಅಂಶಗಳನ್ನು UI ಯಲ್ಲಿಸಿ ತೋರಿಸುತ್ತದೆ
+4. 3 ಸರಳ ಪ್ರದರ್ಶನಗಳ ನಂತರ ಕಠಿಣಿಕತೆಯನ್ನು ಹೆಚ್ಚಿಸುವ ಸ್ಟ್ರೀಕ್ ಕೌಂಟರ್ ಅನ್ನು ಜಾರಿಗೆ ತರಬೇಕು
+5. ಕಠಿಣತೆ ಬದಲಬೇಕಾದಾಗ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ (ಬಣ್ಣಗಳು, ಚಲನಚಿತ್ರಗಳು) ಒದಗಿಸುತ್ತದೆ
+
+ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಜಾರಿಗೊಳಿಸಲು ಅಗತ್ಯವಿರುವ HTML ಅಂಶಗಳು, CSS ಶೈಲಿಗಳು ಮತ್ತು JavaScript ಫಂಕ್ಷನ್ಗಳನ್ನು ಸೇರಿಸಿ. ತರ್ಕಪೂರ್ವಕ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಸರಿಯಾದ ARIA ಲೇಬಲ್ಗಳೊಂದಿಗೆ ಆಟವು ಪ್ರವೇಶಾರ್ಹವಾಗಿರಬೇಕಾಗಿದೆ.
+
+[ಏಜೆಂಟ್ ಮೋಡ್](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಹೆಚ್ಚು ತಿಳಿದುಕೊಳ್ಳಿ.
+
+## 🚀 ಸವಾಲು
+
+ನಿಮ್ಮ ಟೈಪಿಂಗ್ ಆಟದ ಮುಂದಿನ ಹಂತಕ್ಕೆ ಹೋಗಲು ಸಿದ್ಧರಾ? ಈ ಉನ್ನತ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಜಾರಿಗೊಳಿಸುವ ಮೂಲಕ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು DOM ಮ್ಯ nuoಗಳನ್ನು ನಿಮ್ಮ ಅರಿವು ಹೆಚ್ಚಿಸಿ:
+
+**ಹೆಚ್ಚಿನ ಕಾರ್ಯಕ್ಷಮತೆ ಸೇರಿಸಿ:**
+
+| ವೈಶಿಷ್ಟ್ಯ | ವಿವರಣೆ | ನೀವು ಅಭ್ಯಾಸ ಮಾಡುವ ಕೌಶಲಗಳು |
+|---------|-------------|------------------------|
+| **ಇನ್ಪುಟ್ ನಿಯಂತ್ರಣ** | ಪೂರ್ಣಗೊಂಡ ನಂತರ `input` ಇವೆಂಟ್ ಶ್ರೋತೆಯನ್ನು ನಿಷೇಧಿಸಿ, ಮತ್ತು ಬಟನ್ ಕ್ಲಿಕ್ ಆಗುವಾಗ ಮತ್ತೆ ಸಕ್ರಿಯಗೊಳಿಸಿ | ಇವೆಂಟ್ ನಿರ್ವಹಣೆ ಮತ್ತು ಸ್ಥಿತಿ ನಿಯಂತ್ರಣ |
+| **UI ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ** | ಆಟಗಾರ ನುಡಿ ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಪಠ್ಯ ಪೆಟ್ಟಿಗೆಯನ್ನು ನಿಷೇಧಿಸಿ | DOM ಗುಣಲಕ್ಷಣದ ಮಾನಿಪ್ಯುಲೇಶನ್ |
+| **ಮೋಡಲ್ ಡೈಲಾಗ್** | ಯಶಸ್ವೀ ಸಂದೇಶವನ್ನು ಹೊಂದಿರುವ ಮೋಡಲ್ ಡೈಲಾಗ್ ಬಾಕ್ಸ್ ತೋರಿಸಿ | ಉನ್ನತ UI ಮಾದರಿಗಳು ಮತ್ತು ಪ್ರವೇಶಾರ್ಹತೆ |
+| **ಹೈ ಸ್ಕೋರ್ ವ್ಯವಸ್ಥೆ** | `localStorage` ಬಳಸಿ ಹೈ ಸ್ಕೋರ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ | ಬ್ರೌಸರ್ ಸಂಗ್ರಹಣಾ APIಗಳು ಮತ್ತು ಡೇಟಾ ಸ್ಥಿರತೆ |
+
+**ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆ ಸಲಹೆಗಳು:**
+- ಸತತ ಸಂಗ್ರಹಣೆಗೆ `localStorage.setItem()` ಮತ್ತು `localStorage.getItem()` ಬಗ್ಗೆ ಸಂಶೋಧನೆ ಮಾಡಿ
+- ಇವೆಂಟ್ ಶ್ರೋತೆಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಸೇರಿಸುವ ಮತ್ತು ತೆಗೆದುಹಾಕುವ ಅಭ್ಯಾಸ ಮಾಡಿ
+- HTML ಡೈಲಾಗ್ ಅಂಶಗಳ ಅಥವಾ CSS ಮೋಡಲ್ ಮಾದರಿಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
+- ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ನಿಷೇಧ ಮತ್ತು ಸಕ್ರಿಯಗೊಳಿಸುವಾಗ ಪ್ರವೇಶಾರ್ಹತೆಯನ್ನು ಪರಿಗಣಿಸಿ
+
+## ಉಪನ್ಯಾಸೋತ್ತರ ಕ್ವಿಜ್
+
+[ಉಪನ್ಯಾಸೋತ್ತರ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/22)
+
+---
+
+## 🚀 ನಿಮ್ಮ ಟೈಪಿಂಗ್ ಆಟದ ಮಾಸ್ಟರಿ ವೇಳಾಪಟ್ಟಿ
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದುದು**
+- [ ] ನಿಮ್ಮ ಟೈಪಿಂಗ್ ಆಟವು ವಿವಿಧ ನುಡಿ ಸಾಲುಗಳೊಂದಿಗೆ ಸುಗಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಪರೀಕ್ಷಿಸಿ
+- [ ] CSS ಶೈಲಿಯನ್ನು ಪ್ರಯೋಗಿಸಿ- ಹೈಲೈಟ್ ಮತ್ತು ದೋಷ ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸಲು ಯತ್ನಿಸಿ
+- [ ] ನಿಮ್ಮ ಬ್ರೌಸರ್ ಡೆವ್ಟೂಲ್ಸ್ (F12) ತೆರೆದು ಆಟವಾಡುವಾಗ ಕನ್ಸೋಲನ್ನು ನೋಡು
+- [ ] ಸಾಧ್ಯವಾದಷ್ಟು ವೇಗವಾಗಿ ಒಂದು ನುಡಿ ಸಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ನಿಮ್ಮನ್ನು ಚಾಲೇಂಜ್ ಮಾಡಿ
+
+### ⏰ **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದುದು**
+- [ ] ಏರೆಯಲ್ಲಿ ಇನ್ನಷ್ಟು ನುಡಿ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಿ (ನಿಮ್ಮ ಪಾಸಂದಿನ ಪುಸ್ತಕಗಳು ಅಥವಾ ಚಿತ್ರದ ನುಡಿಗಳಿಂದ)
+- [ ] ಸವಾಲಿನ ವಿಭಾಗದಿಂದ `localStorage` ಹೈ ಸ್ಕೋರ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಜಾರಿಗೊಳಿಸಿ
+- [ ] ಪ್ರತಿ ಆಟದ ನಂತರ ಪ್ರದರ್ಶನ ಮಾಡುವ ನಿಮಿಷಕ್ಕೆ ಶಬ್ದಗಳ ಗಣಕ ರಚಿಸಿ
+- [ ] ಸರಿಯಾದ ಟೈಪಿಂಗ್, ತಪ್ಪುಗಳು ಮತ್ತು ಪೂರ್ಣಗೊಳಿಸುವಿಕೆಗಾಗಿ ಧ್ವನಿ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರ-ನಿರಂತರ ಸಾಹಸ**
+- [ ] ಸ್ನೇಹಿತರು ಪಕ್ಕದಲ್ಲಿ ಸ್ಪರ್ಧಿಸಲು ಮಲ್ಟಿಪ್ಲೇಯರ್ ಆವೃತ್ತಿ ರಚಿಸಿ
+- [ ] ವಿಭಿನ್ನ ಕಠಿಣತಾ ಮಟ್ಟಗಳೊಂದಿಗೆ ವಿಭಿನ್ನ ನುಡಿ ಸಾಲುಗಳನ್ನೊಳಗೊಂಡ ಆಟ ರಚಿಸಿ
+- [ ] ನುಡಿ ಸಾಲು ಎಷ್ಟು ಪೂರ್ಣಮಾಡಲಾಗಿದೆ ಎಂಬುದನ್ನು ತೋರಿಸುವ ಪ್ರಗತಿ ಬಾರನ್ನು ಸೇರಿಸಿ
+- [ ] ವೈಯಕ್ತಿಕ ಅಂಕಿಅಂಶಗಳ ಟ್ರ್ಯಾಕಿಂಗ್ ಗಾಗಿ ಬಳಕೆದಾರ ಖಾತೆಗಳನ್ನು ಜಾರಿಗೆ ತರಿರಿ
+- [ ] ಕಸ್ಟಮ್ ಥೀಮ್ಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡಿ ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ತಮ್ಮ ಇಷ್ಟದ ಶೈಲಿಯನ್ನು ಆರಿಸುವ ಅವಕಾಶ ನೀಡಿ
+
+### 🗓️ **ನಿಮ್ಮ ತಿಂಗಳ ನವೀಕರಣ**
+- [ ] ಸರಿಯಾದ ಬೊಜ್ಜೆ ಆವರಣವನ್ನು ಕ್ರಮಕ್ರಮವಾಗಿ ಕಲಿಸುವ ಪಾಠಗಳೊಂದಿಗೆ ಟೈಪಿಂಗ್ ಕೋರ್ಸ್ ರಚಿಸಿ
+- [ ] ಯಾವೆಲ್ಲ ಅಕ್ಷರಗಳು ಅಥವಾ ಶಬ್ದಗಳು ಹೆಚ್ಚು ದೋಷಕಾರಿಯಾಗಿರುವುದನ್ನು ತೋರಿಸುವ ವಿಶ್ಲೇಷಣೆ ರಚಿಸಿ
+- [ ] ವಿಭಿನ್ನ ಭಾಷೆಗಳು ಮತ್ತು ಕೀಬೋರ್ಡ್ ಬಣ್ಣರೂಪಗಳಿಗೆ ಬೆಂಬಲ ಸೇರಿಸಿ
+- [ ] ಶಿಕ್ಷಣ APIs ಗಳೊಂದಿಗೆ ಲಿಂಕ್ ಮಾಡಿ ಸಾಹಿತ್ಯ ಡೇಟಾಬೇಸಿನಿಂದ ನುಡಿ ಸಾಲುಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ
+- [ ] ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿಗೊಳ್ಳಿಸಿದ ಟೈಪಿಂಗ್ ಆಟವನ್ನು ಇತರರು ಬಳಸಲು ಮತ್ತು ಅನುಭವಿಸಲು ಪ್ರಕಟಿಸಿರಿ
+
+### 🎯 **ಅಂತಿಮ ಪರಿಗಣನೆ**
+
+**ಮುಂದೆ ಸಾಗುವ ಮೊದಲು, ಒಂದು ಕ್ಷಣ ತೆಗೆದು ಹಬ್ಬಿಸಿಕೊಳ್ಳಿ:**
+- ಈ ಆಟ ನಿರ್ಮಿಸುವಾಗ ನೀವು ಯಾರಿಗೆ ಅನಿಸಿತು ಅತಿ ಸಂತೋಷದ ಕ್ಷಣ ಯಾವುದು?
+- ನೀವು ಪ್ರಾರಂಭಿಸಿದ ಸಮಯಕ್ಕೆ ಹೋಲಿಸಿದರೆ ಈಗಾಗಲೇ ಇವೆಂಟ್ ಚಾಲಿತ ಕಾರ್ಯಕ್ರಮದ ಬಗ್ಗೆ ನೀವು ಹೇಗಿದ್ದೀರಾ?
+- ಈ ಆಟಕ್ಕೆ ನೀವು ಹೊಂದಿಸಲು ಉತ್ಸುಕವಾಗಿರುವ ಒಂದು ವೈಶಿಷ್ಟ್ಯ ಯಾವುದು?
+- ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ನೀವು ಬೇರೆ ಯೋಜನೆಗಳಿಗೆ ಹೇಗೆ ಅನ್ವಯಿಸಬಹುದು?
+
+```mermaid
+journey
+ title ನಿಮ್ಮ ಈವೆಂಟ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ವಿಶ್ವಾಸ ಸಹಸ್ರ
+ section ಇವತ್ತು
+ ಈವೆಂಟ್ಗಳನ್ನು ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳುವುದು: 3: You
+ UI ನಿರ್ಮಾಣ ಮಾಡುವುದು: 4: You
+ ಈವೆಂಟ್ ಶ್ರೋತೆಗಳನ್ನು ಬರೆಯುವುದು: 5: You
+ section ಈ ವಾರ
+ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸುವುದು: 4: You
+ ದೋಷಗಳ ಪರಿಶೀಲನೆ: 5: You
+ ಬಳಕೆದಾರ ಅನುಭವ ಸುಧಾರಣೆ: 4: You
+ section ಮುಂದಿನ ತಿಂಗಳು
+ ಜಟಿಲ ಅಪ್ಲಿಕೇಶನ್ಗಳ ನಿರ್ಮಾಣ: 5: You
+ ಇತರರಿಗೆ ಕಲಿಸುವುದು: 5: You
+ ಫ್ರೇಮ್ವರ್ಕ್ ಗಳು ರಚಿಸುವುದು: 5: You
+```
+> 🌟 **ಜ್ಞಾಪನೆ**: ನೀವು ಇದೀಗ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವೆಬ್ಸೈಟ್ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ಗಳಿಗೆ ಅಡಿಪಾಯವಾಗಿರುವ ಹೃದಯಭಾಗವನ್ನು ಬಲ್ಲಿರಿ. ಇವೆಂಟ್ ಚಾಲಿತ ಕಾರ್ಯಕ್ರಮವೇ ವೆಬ್ ಅನ್ನು ಜೀವಂತವಾಗಿ ಹಾಗೂ ಪ್ರತಿಕ್ರಿಯಾಶೀಲವಾಗಿಸುವುದಕ್ಕೆ ಕಾರಣ. ಪ್ರತಿಗೂಡುಮೆನ್ನುಗಳನ್ನು ನೋಡಿದಾಗ, ನೀವು ಟೈಪ್ ಮಾಡುತ್ತಿದ್ದಂತೆ ಪರಿಶೀಲನೆಯಿಂದ ಕೂಡಿದ ಫಾರ್ಮ್, ಅಥವಾ ಕ್ಲಿಕ್ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಆಟ, ಎಲ್ಲವೂ ಈಗ ನಿಮ್ಮಿಗೆ ಗೊತ್ತಾದ ಮಾಯಾಜಾಲ. ನೀವು ಕೇವಲ ಕೋಡ್ ಕಲಿಯೋದು ಮಾತ್ರವಲ್ಲದೆ, ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತಿದ್ದೀರಿ! 🎉
+
+---
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+[ಬ್ರೌಸರ್ ಮೂಲಕ ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಇವೆಂಟ್ಗಳ ಪಟ್ಟಿ](https://developer.mozilla.org/docs/Web/Events) ಓದಿ ಮತ್ತು ನೀವು ಯಾವ ಸಂದರ್ಭಗಳಲ್ಲಿ ಯಾವ ಇವೆಂಟ್ ಅನ್ನು ಉಪಯೋಗಿಸುವಿರೋ ಪರಿಗಣಿಸಿ.
+
+## ಕಾರ್ಯ
+
+[ಹೊಸ ಕೀಬೋರ್ಡ್ ಆಟವನ್ನು ರಚಿಸಿ](assignment.md)
+
+---
+
+
+**ತಪ್ಪು ನಿರಾಕರಣೆ**:
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗಾಗಿ ಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಗ್ರಹಿಕೆಗಳ ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಕ್ರಿಯೆಗಳ ಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/4-typing-game/typing-game/assignment.md b/translations/kn/4-typing-game/typing-game/assignment.md
new file mode 100644
index 000000000..a4cfc8df0
--- /dev/null
+++ b/translations/kn/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,57 @@
+
+# ಹೊಸ ಕೀಬೋರ್ಡ್ ಆಟವನ್ನು ರಚಿಸಿ
+
+## ಸೂಚನೆಗಳು
+
+ನೀವು ಟೈಪಿಂಗ್ ಆಟದೊಂದಿಗೆ ಇವೆಂಟ್ ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಮೂಲಭೂತಾಂಶಗಳನ್ನು ಸಂಪೂರ್ಣ maîtrise ಮಾಡಿರುವುದರಿಂದ, ಈಗ ನಿಮ್ಮ ಸೃಜನಶೀಲತೆಯನ್ನು ಬಿಡುಗಡೆಯಾಗಿಸುವ ಸಮಯವಾಗಿದೆ! ನೀವು ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್, DOM ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ಮತ್ತು ಬಳಕೆದಾರ ಸಂವಹನ ಮಾದರಿಗಳ ಅರ್ಥವನ್ನು ತೋರಿಸುವ ನಿಮ್ಮ ಸ್ವಂತ ಕೀಬೋರ್ಡ್ ಆಧಾರಿತ ಆಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ ಮತ್ತು ನಿರ್ಮಿಸುತ್ತೀರಿ.
+
+ವಿಶಿಷ್ಟ ಕಾರ್ಯಗಳನ್ನು ನೆರವೇರಿಸಲು ಕೀಬೋರ್ಡ್ ಇವೆಂಟ್ಗಳನ್ನು ಬಳಸುವ ಸಣ್ಣ ಆಟವನ್ನು ರಚಿಸಿ. ಇದು ಬೇರೆ ರೀತಿಯ ಟೈಪಿಂಗ್ ಆಟವಾಗಿರಬಹುದು, ಕೀ ನಿಯಂತ್ರಣಗಳಲ್ಲಿ ಪರಿಕಲ್ಪನೆಗೆ ತಕ್ಕಂತೆ ಪರದೆಗೆ ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ಚಿತ್ರಿಸುವ ಕಲಾತ್ಮಕ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿರಬಹುದು, ಏರೋ ಕೀಗಳೊಂದಿಗೆ ನಿಯಂತ್ರಿಸುವ ಸರಳ ಆರ್ಕೇಡ್-ಶೈಲಿ ಆಟವಾಗಿರಬಹುದು, ಅಥವಾ ನೀವು ಕಲ್ಪಿಸಿಕೊಳಬಹುದು ಎಂಬ ಯಾವುದೇ ಸೃಜನಾತ್ಮಕ ಕಲ್ಪನೆ ಇರಬಹುದು. ಸೃಜನಾತ್ಮಕವಾಗಿರಿ ಮತ್ತು ವಿಭಿನ್ನ ಕೀಗಳು ವಿಭಿನ್ನ ವರ್ತನೆಗಳನ್ನು ಹೇಗೆ ಹುಟ್ಟುಹಾಕಬಹುದು ಎಂದು ಯೋಚಿಸಿ!
+
+**ನಿಮ್ಮ ಆಟವು ಒಳಗೊಂಡಿರಬೇಕು:**
+
+| ಅವಶ್ಯಕತೆ | ವಿವರಣೆ | ಉದ್ದೇಶ |
+|-------------|-------------|---------|
+| **ಇವೆಂಟ್ ಲಿಸ್ಟನರ್ಗಳು** | ಕನಿಷ್ಠ 3 ವಿಭಿನ್ನ ಕೀಬೋರ್ಡ್ ಇವೆಂಟ್ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದು | ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಸಂಶೋಧನೆಯ ಪ್ರದರ್ಶನ |
+| **ದೃಶ್ಯ ಫೀಡ್ಬ್ಯಾಕ್** | ಬಳಕೆದಾರ ಇನ್ಪುಟ್ಗೆ ತಕ್ಷಣದ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುವುದು | DOM ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ನಿಯಂತ್ರಣದ ಮೇಧಾವಿತ್ವವನ್ನು ತೋರಿಸುವುದು |
+| **ಆಟ ಲಾಜಿಕ್** | ಅಂಕೆಗೆ, ಹಂತಗಳಿಗೆ ಅಥವಾ ಪ್ರಗತಿಗಾನಿ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಒಳಗೊಂಡಿರಲಿ | ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಿತಿಯನ್ನು ಅನುಷ್ಟಾನದಲ್ಲಿ ಅಭ್ಯಾಸ ಮಾಡುವುದು |
+| **ಬಳಕೆದಾರ ಸಂವಾದ** | ಸ್ಪಷ್ಟ ನಿರ್ದೇಶನಗಳು ಮತ್ತು ಆಳವಾದ ನಿಯಂತ್ರಣಗಳು | ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ ಕೌಶಲ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವುದು |
+
+**ವಿಚಾರಿಸಲು ಸೃಜನಶೀಲ ಯೋಜನೆ ಕಲ್ಪನೆಗಳು:**
+- **ರಿದಮ್ ಆಟ**: ಆಟಗಾರರು ಸಂಗೀತ ಅಥವಾ ದೃಶ್ಯ ಸೂಚನೆಗಳೊಂದಿಗೆ ಕೀಲಿಗಳನ್ನು ಸಮಯಕ್ಕೆ ಸರಿಯಾಗಿ ಒತ್ತುತ್ತಾರೆ
+- **ಪಿಕ್ಸೆಲ್ ಆರ್ಟ್ ಸೃಷ್ಟಿಕರ್ತ**: ವಿಭಿನ್ನ ಕೀಲಿಗಳು ವಿಭಿನ್ನ ಬಣ್ಣಗಳು ಅಥವಾ ಮಾದರಿಗಳನ್ನು ಚಿತ್ರಿಸುತ್ತವೆ
+- **ಶಬ್ದ ನಿರ್ಮಾಪಕ**: ಆಟಗಾರರು ವಿಶೇಷ ಕ್ರಮದಲ್ಲಿ ಅಕ್ಷರಗಳನ್ನು ಟೈಪ್ ಮಾಡಿ ಪದಗಳನ್ನು ರಚಿಸುತ್ತಾರೆ
+- **ಸ್ನೇಕ್ ಆಟ**: ಬಾಣ ಕೀಲಿಗಳೊಂದಿಗೆ ಹಾವು ನಿಯಂತ್ರಿಸಿ ಐಟಂಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ
+- **ಮ್ಯೂಸಿಕ್ ಸಿಂಥಸೈಝರ್**: ವಿಭಿನ್ನ ಕೀಲಿಗಳು ವಿಭಿನ್ನ ಸಂಗೀತ ಟೋನುಗಳು ಅಥವಾ ಧ್ವನಿಗಳನ್ನು ಪ್ಲೇ ಮಾಡುತ್ತವೆ
+- **ಸ್ಪೀಡ್ ಟೈಪಿಂಗ್ ವೈವಿಧ್ಯಗಳು**: ವರ್ಗ-ವಿಶೇಷ ಟೈಪಿಂಗ್ (ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಪದಗಳು, ಪರಿಭಾಷಿತ ಭಾಷೆಗಳು)
+- **ಕೀಬೋರ್ಡ್ ಡ್ರಂಬರ್**: ಬೃಹತ್ ಬೀಗಗಳಿಗೆ ವಿಭಿನ್ನ ಡ್ರಮ್ ಧ್ವನಿಗಳನ್ನು ನಿಯೋಜಿಸುವ ಮೂಲಕ ಬೀಟ್ ರಚಿಸಿ
+
+**ಕಾರ್ಯಯೋಜನೆಯ ಮಾರ್ಗಸೂಚಿಗಳು:**
+- **ಸರಳ ಕಲ್ಪನೆಯಿಂದ ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ಜಟಿಲತೆ ಹಂತವಾಗಿ ನಿರ್ಮಿಸಿ**
+- **ಸಹಜವಾದ, ಸ್ಪಂದನಾತ್ಮಕ ನಿಯಂತ್ರಣಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿ**
+- **ಆಟದ ಸ್ಥಿತಿ ಮತ್ತು ಆಟಗಾರರ ಪ್ರಗತಿಗೆ ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಸೂಚಕಗಳನ್ನು ಒಳಗೊಂಡಿರಲಿ**
+- **ಬೇರೆ ಬಳಕೆದಾರರೊಂದಿಗೆ ನಿಮ್ಮ ಆಟವನ್ನು ಪರೀಕ್ಷಿಸಿ ಗಮನಾರ್ಹ ಆಟ ನಿರ್ವಹಣೆಯನ್ನು ಖಚಿತಪಡಿಸಿ**
+- **ತಪ್ಪದೆ ನಿಮ್ಮ ಕೋಡ್ನಲ್ಲಿ ಟಿಪ್ಪಣಿಗಳನ್ನು ಸೇರಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ತಂತ್ರವನ್ನು ವಿವರಿಸಿ**
+
+## ಶ್ರೇಣಿಪಟ್ಟಿ
+
+| ಮಾನದಂಡಗಳು | ಉತ್ಕೃಷ್ಠ | ತೃಪ್ತಿದಾಯಕ | ಸುಧಾರಣೆ ಅಗತ್ಯವಿದೆ |
+| -------- | --------- | -------- | ----------------- |
+| **ಫಂಕ್ಷನಾಲಿಟಿ** | ಬಹುತೇಕ ಲಕ್ಷಣಗಳೊಂದಿಗೆ ಪೂರ್ಣ,.polished ಆಟ ಮತ್ತು ಸೂಕ್ಷ್ಮ ಆಟ ನಿರ್ವಹಣೆ | ಕೀಬೋರ್ಡ್ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ತೋರಿಸುವ ಮೂಲ ಭಾಗಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಆಟ | ಅತೀ ನ್ಯೂನ, ನಿರ್ವಹಣಾರ್ಹತೆ ಕಡಿಮೆ ಇಲ್ಲದ(gameplay) ಅಥವಾ ಪ್ರಮುಖ ದೋಷಗಳೊಂದಿಗೆ ಅನುಷ್ಟಾನ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಚೆನ್ನಾಗಿ ಸಂಘಟಿತ, ಟಿಪ್ಪಣಿಗಳು ವಹಿಸಿ ಉತ್ತಮ ಆಚರಣೆಗಳ ಅನುಸರಣೆ ಮತ್ತು ಪರಿಣಾಮಕಾರಿಯಾದ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ | ಸ್ವಚ್ಛ, ಓದಲು ಸುಲಭವಾದ ಕೋಡ್ ಮತ್ತು ಸೂಕ್ತವಾಗಿ ಇವೆಂಟ್ ಲಿಸ್ಟನರ್ಗಳು ಮತ್ತು DOM ನಿಯಂತ್ರಣ ಬಳಸಿದ್ದು | ಮೂಲ್ವಾಗಿ ಕೋಡ್ ರಚನೆ, ಕೆಲ ಸಂಘಟನಾ ಸಮಸ್ಯೆಗಳ ಅಥವಾ ಅಸಂಕ್ಷಿಪ್ತ ಅನುಷ್ಠಾನಗಳೊಂದಿಗೆ |
+| **ಬಳಕೆದಾರ ಅನುಭವ** | ಅನುಕೂಲಕರ ನಿಯಂತ್ರಣ, ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆ ಮತ್ತು ವೃತ್ತಿಪರ ಅನುಭವದ ಆಟ ಆಡಿಕೆ | ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಅಂತರ್ಜಾಲಗಳೊಂದಿಗೆ ಅಗತ್ಯ ಕ್ಷೇತ್ರಗಳು ನೈಜ ಮತ್ತು ಸ್ಪಂದನಾತ್ಮಕ ನಿಯಂತ್ರಣಗಳು | ಮೂಲ ಸಂವಾದ, ಸ್ಪಷ್ಟವಿಲ್ಲದ ಸೂಚನೆಗಳು ಅಥವಾ ಕಡಿಮೆ ಸ್ಪಂದನಶೀಲ ನಿಯಂತ್ರಣಗಳು |
+| **ಸೃಜನಶೀಲತೆ** | ಕೀಬೋರ್ಡ್ ಇವೆಂಟ್ಗಳ ವಿಶಿಷ್ಟ ಉಪಯೋಗ ಮತ್ತು ಸೃಜನಾತ್ಮಕ ಸಮಸ್ಯೆ ಪರಿಹಾರದಿಂದ ಮೂಲ ಕಲ್ಪನೆ | ಸಾಮಾನ್ಯ ಆಟ ಮಾದರಿಗಳ ಮೇಲೆ ರುಚಿಕರ ಬದಲಾಗುವಿಕೆ ಮತ್ತು ಉತ್ತಮ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಬಳಕೆ | ಮೂಲ ಕಲ್ಪನೆಯ ಸಾಮಾನ್ಯ ಅನುಷ್ಠಾನ ಮತ್ತು ಕನಿಷ್ಠ ಸೃಜನಾತ್ಮಕ ಅಂಶಗಳು |
+
+---
+
+
+**ತಿರಸ್ಕರಣೆ**:
+ಈ ದಾಖಲೆಯನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ದತೆಯತ್ತ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೆ ಕೂಡ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸ ಪಷ್ಟತೆಗಳು ಇರಬಹುದು ಎಂಬುದು ತಿಳಿದುಕೊಳ್ಳಿ. ಮೂಲ ದಾಖಲೆ ತನ್ನ ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಆತಂಕಕರ ಮಾಹಿತಿಗೆ, ವ್ಯಾಪಾರದ ಮಾನ್ಯತೆಯ ಪಾತ್ರಧಾರಿಯ ವ್ಯವಸಾಯೀ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥ ತಪ್ಪುಗಳ ಅಥವಾ ತಪ್ಪುಭವನೆಗಳಿಗಾಗಿ ನಾವು ಜವಾಬ್ದಾರರಾಗುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/5-browser-extension/1-about-browsers/README.md b/translations/kn/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 000000000..288223963
--- /dev/null
+++ b/translations/kn/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,555 @@
+
+# ಬ್ರೌಸರ ವಿಸ್ತಾರ ಪ್ರಾಜೆಕ್ಟ್ ಭಾಗ 1: ಬ್ರೌಸರಗಳ ಬಗ್ಗೆ ಎಲ್ಲವನ್ನೂ
+
+```mermaid
+journey
+ title ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಅಭಿವೃದ್ಧಿ ಪ್ರಯಾಣ
+ section ಸ್ಥಾಪನೆ
+ ಬ್ರೌಸರ್ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 3: Student
+ ವಿಸ್ತರಣೆ ಪ್ರಕಾರಗಳನ್ನು ಕಲಿಯಿರಿ: 4: Student
+ ಅಭಿವೃದ್ಧಿ ಸೆಟ್ ಅಪ್ ಮಾಡಿ: 4: Student
+ section ಅಭಿವೃದ್ಧಿ
+ ಅಂತರ್ಫೇಸ್ ನಿರ್ಮಿಸಿ: 4: Student
+ ಕಾರ್ಯಕ್ಷಮತೆ ಸೇರಿಸಿ: 5: Student
+ ಡೇಟಾ ನಿರ್ವಹಿಸಿ: 5: Student
+ section ಏಕತೆ
+ ಬ್ರೌಸರ್ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ: 5: Student
+ ದೋಷಗಳನ್ನು ಸರಿಪಡಿಸಿ: 4: Student
+ ಅನುಭವವನ್ನು ನಿಖರಗೊಳಿಸಿ: 5: Student
+```
+
+> ಸ್ಕೆಟ್ನೋಟ್ [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ಅವರಿಂದ
+
+## ಓಪನಾಗಿ ಪಾಠದ ಪೂರ್ವ ಪ್ರಶ್ನೆಗಳ ಸರಣಿ
+
+[ಪೂರ್ವ ಪಾಠ ಪ್ರಶ್ನೆಗಳು](https://ff-quizzes.netlify.app/web/quiz/23)
+
+### ಪರಿಚಯ
+
+ಬ್ರೌಸರ ವಿಸ್ತಾರಗಳು ನಿಮ್ಮ ವೆಬ್ ಬ್ರೌಸಿಂಗ್ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುವ ಸಣ್ಣ ಅಪ್ಲಿಕೇಶನ್ಗಳು. ಟಿಮ್ ಬರ್ನರ್ಸ್-ಲೀ ಅವರ ಪ್ರಾಥಮಿಕ ಪರಿಕಲ್ಪನೆಯಂತೆ ಸಂವಾದಾತ್ಮಕ ವೆಬ್ಗಾಗಿ, ವಿಸ್ತಾರಗಳು ಸರಳ ಡಾಕ್ಯುಮೆಂಟ್ ವೀಕ್ಷಣೆಗೆ ಮೀರಿ ಬ್ರೌಸರದ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ವಿಸ್ತರಿಸುತ್ತವೆ. ನಿಮ್ಮ ಖಾತೆಗಳನ್ನು ಸುರಕ್ಷಿತವಾಗಿಡುವ ಪಾಸ್ವರ್ಡ್ ಮ್ಯಾನೇಜರ್ಡಿಂದ ಆರಂಭಿಸಿ, ಡಿಸೈನರ್ಗಳಿಗೆ ಸರಿಯಾದ ನೋಟವನ್ನು ಪಡೆದುಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುವ ಬಣ್ಣ ಆರಿಸುವ ಉಪಕರಣಗಳವರೆಗೆ, ವಿಸ್ತಾರಗಳು ದೈನಂದಿನ ಬ್ರೌಸಿಂಗ್ ಸವಾಲುಗಳನ್ನು ಪರಿಹರಿಸುತ್ತವೆ.
+
+ನೀವು ಮೊದಲು ವಿಸ್ತಾರವನ್ನು ನಿರ್ಮಿಸುವ ಮೊದಲು, ಬ್ರೌಸರಗಳು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ойлೈಸೋಣ. ಆಲೆಕ್ಸಾಂಡರ್ ಗ್ರಾಮ್ ಬೆಲ್ ಟೀليفೋನ್ ಕಂಡುಹಿಡಿಯುವ ಮೊದಲು ಶಬ್ದ ಪ್ರಸರಣವನ್ನು ತಿಳಿಯಬೇಕಾಗಿದ್ದು, ಬ್ರೌಸರ ಮೂಲಭೂತಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದರಿಂದ ನೀವು ಇರುವ ಬ್ರೌಸರ ವ್ಯವಸ್ಥೆಗಳ ಜೊತೆ ಚೆನ್ನಾಗಿ ಸಂಯೋಜಿಸಬಹುದಾದ ವಿಸ್ತಾರಗಳನ್ನು ರಚಿಸಲು ಸಹಾಯವಾಗುತ್ತದೆ.
+
+ಈ ಪಾಠದ ಅಂತ್ಯಕ್ಕೆ, ನೀವು ಬ್ರೌಸರ ಆರ್ಕಿಟೆಕ್ಚರ್ ಅನ್ನು ಅರಿತುಕೊಳ್ಳುತ್ತೀರಿ ಮತ್ತು ನಿಮ್ಮ ಮೊದಲ ವಿಸ್ತಾರವನ್ನು ನಿರ್ಮಿಸಲು ಆರಂಭಿಸಿರುತ್ತೀರಿ.
+
+```mermaid
+mindmap
+ root((ಬ್ರೌಸರ್ ವಾಸ್ತುಶಿಲ್ಪ))
+ Core Components
+ Rendering Engine
+ JavaScript Engine
+ Network Stack
+ Storage APIs
+ User Interface
+ ವಿಳಾಸ ಬಾರ್
+ ಟ್ಯಾಬ್ ನಿರ್ವಹಣೆ
+ ಬುಕ್ಮಾರ್ಕ್ಗಳು
+ ವಿಸ್ತರಣಾ ಐಕಾನ್ಗಳು
+ Extension System
+ Manifest Files
+ Content Scripts
+ Background Pages
+ Popup Windows
+ Security Model
+ Same-Origin Policy
+ Permissions API
+ Content Security
+ Isolated Worlds
+ Development Tools
+ DevTools Integration
+ Debug Console
+ Performance Monitor
+ Extension Inspector
+```
+## ವೆಬ್ ಬ್ರೌಸರಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು
+
+ವೆಬ್ ಬ್ರೌಸರ ಮೂಲತಃ ಜಟಿಲ ಡಾಕ್ಯುಮೆಂಟ್ ವ್ಯಾಖ್ಯೇತಕ. ನೀವು ವಿಳಾಸ ಬಾರಿನಲ್ಲಿ "google.com" ಟೈಪ್ ಮಾಡಿದಾಗ, ಬ್ರೌಸರ ಜಾಗತಿಕ ಸರ್ವರ್ಗಳಿಂದ ವಿಷಯದ ವಿನಂತಿಯನ್ನು ಮಾಡುತ್ತದೆ, ನಂತರ ಆ ಕೋಡ್ ಅನ್ನು ಪುನರ್ವಿಚಾರಿಸಿ, ನೀವು ನೋಡುತ್ತಿರುವ ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಪುಟಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.
+
+ಈ ಪ್ರಕ್ರಿಯೆ 1990 ರಲ್ಲಿ ಟಿಮ್ ಬರ್ನರ್ಸ್-ಲೀ ರಚಿಸಿದ ಮೊದಲ ವೆಬ್ ಬ್ರೌಸರ, WorldWideWeb, ಹೇಗೆ ವಿನ್ಯಾಸಗೊಳಿಸಲ್ಪಟ್ಟಿತ್ತು ಎಂಬುದನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ, ಇದು ಎಲ್ಲರಿಗೂ ಹೈಪರ್ಲಿಂಕ್ ಡಾಕ್ಯುಮೆಂಟ್ಗಳನ್ನು ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡಿತು.
+
+✅ **ಚಿಕ್ಕ ಇತಿಹಾಸ**: ಮೊದಲ ಬ್ರೌಸರ ಹೆಸರೇ 'WorldWideWeb' ಆಗಿತ್ತು ಮತ್ತು ಅದನ್ನು ಸರ್ ಟಿಮೋಥಿ ಬರ್ನರ್ಸ್-ಲೀ 1990 ರಲ್ಲಿ ರಚಿಸಿದ್ದರು.
+
+
+> ಕೆಲವೊಂದು ಪ್ರಾಚೀನ ಬ್ರೌಸರಗಳು, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ಅವರ ಮೂಲಕ
+
+### ಬ್ರೌಸರ್ಗಳು ವೆಬ್ ವಿಷಯವನ್ನು 어떻게 ಪ್ರಕ್ರಿಯೆ ಪಡಿಸುತ್ತವೆ
+
+URL ನವೊಲೆ ಮಾಡಿಕೊಂಡು ವೆಬ್ ಪುಟವನ್ನು ನೋಡುವವರೆಗೆ ಹಲವಾರು ಸಂಯೋಜಿತ ಹಂತಗಳು ಸೆಕೆಂಡ್ಗಳಲ್ಲಿ ನಡೆಯುತ್ತವೆ:
+
+```mermaid
+sequenceDiagram
+ participant User
+ participant Browser
+ participant Extension
+ participant DNS
+ participant Server
+
+ User->>Browser: URL ಟೈಪ್ ಮಾಡಿ ಎಂಟರ್ ಒತ್ತುತ್ತದೆ
+ Browser->>Extension: beforeRequest ಈವೆಂಟ್ ಪ್ರಾರಂಭಿಸಿ
+ Extension->>Extension: URL ಯನ್ನು ಬದಲಾಯಿಸುವ ಅಗತ್ಯ ಹೊಂದಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
+ Browser->>DNS: ಸರ್ವರ್ IP ವಿಳಾಸ ನೋಡಿ
+ DNS->>Browser: IP ವಿಳಾಸ ತಲುಪಿಸಿ
+ Browser->>Server: ವೆಬ್ ಪುಟದ ವಿಷಯವನ್ನು ವಿನಂತಿಸಿ
+ Server->>Browser: HTML, CSS, ಮತ್ತು JavaScript ಕಳುಹಿಸಿ
+ Browser->>Extension: beforeResponse ಈವೆಂಟ್ ಪ್ರಾರಂಭಿಸಿ
+ Extension->>Extension: ಅಗತ್ಯವಿದ್ದರೆ ವಿಷಯವನ್ನು ಬದಲಾಯಿಸಿ
+ Browser->>User: ಸಂಪೂರ್ಣ ವೆಬ್ ಪುಟವನ್ನು ಪ್ರದರ್ಶಿಸಿ
+ Extension->>User: ಎಕ್ಸ್ಟೆಂಶನ್ UI ನವೀಕರಣಗಳನ್ನು ತೋರಿಸಿ
+```
+**ಈ ಪ್ರಕ್ರಿಯೆ ಸಾಧಿಸುವದು:**
+- **ಮಾನವ ಓದುಗ URL ಅನ್ನು ಡಿಎನ್ಎಸ್ ಲುಕ್ ಅಪ್ ಮೂಲಕ ಸರ್ವರ್ ಐಪಿ ವಿಳಾಸಕ್ಕೆ** ಅನುವಾದಿಸುತ್ತದೆ
+- **HTTP ಅಥವಾ HTTPS ಪ್ರೋಟೋಕಾಲುಗಳನ್ನು ಬಳಸಿ ವೆಬ್ ಸರ್ವರ್ ಜೊತೆ ಸುರಕ್ಷಿತ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ**
+- **ಸರ್ವರ್ ನಿಂದ ನಿರ್ದಿಷ್ಟ ವೆಬ್ ಪುಟ ವಿಷಯವನ್ನು ವಿನಂತಿಸುತ್ತದೆ**
+- **ಸರ್ವರ್ನಿಂದ HTML ಮಾರ್ಕ್ ಅಪ್, CSS ಶೈಲಿಗಳನ್ನು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ**
+- **ಎಲ್ಲಾ ವಿಷಯವನ್ನು ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಪುಟವಾಗಿ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ**
+
+### ಬ್ರೌಸರ್ ಕೋರ್ ವೈಶಿಷ್ಟ್ಯಗಳು
+
+ಆಧುನಿಕ ಬ್ರೌಸರಗಳು ವಿಸ್ತಾರ ಡೆವಲಪರ್ಗಳು ಬಳಸಬಹುದಾದ ಹಲವಾರು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ:
+
+| ವೈಶಿಷ್ಟ್ಯ | ಉದ್ದೇಶ | ವಿಸ್ತಾರ ಅವಕಾಶಗಳು |
+|---------|---------|------------------------|
+| **ರೆಂಡರಿಂಗ್ ಎಂಜಿನ್** | HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರದರ್ಶನ | ವಿಷಯ ಹೊರತಾಗಿಸಲು, ಶೈಲಿ ಸೇರ್ಪಡೆಗೆ |
+| **ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಂಜಿನ್** | ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು | ಅನುಕೂಲವೊಂದಿಗೆ ಸ್ಕ್ರಿಪ್ಟ್ಗಳು, API ಸಂವಹನಗಳು |
+| **ಲೋಕಲ್ ಸ್ಟೋರೆಜ್** | ಸ್ಥಳೀಯವಾಗಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ | ಬಳಕೆದಾರ ಆದ್ಯತೆಗಳು, ಕ್ಯಾಶೆಡ್ ಡೇಟಾ |
+| **ನೆಟ್ವರ್ಕ್ ಸ್ಟಾಕ್** | ವೆಬ್ ವಿನಂತಿಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ | ವಿನಂತಿ ನಿಗೂಳಿಸುವಿಕೆ, ಡೇಟಾ ವಿಶ್ಲೇಷಣೆ |
+| **ಸುರಕ್ಷತೆ ಮಾದರಿ** | ಬಳಕೆದಾರರನ್ನು ಹಾನಿಕರ ವಿಷಯಗಳಿಂದ ರಕ್ಷಿಸುತ್ತದೆ | ವಿಷಯ ಫಿಲ್ಟರಿಂಗ್, ಸುರಕ್ಷತೆ ಸುಧಾರಣೆಗಳು |
+
+**ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದರಿಂದ ನಿಮಗೆ:**
+- **ನಿಮ್ಮ ವಿಸ್ತಾರ ಹೆಚ್ಚಿನ ಮೌಲ್ಯವನ್ನು ಸೇರಿಸಬಹುದಾದ ಸ್ಥಳಗಳನ್ನು ಗುರುತಿಸಲು**
+- **ನಿಮ್ಮ ವಿಸ್ತಾರದ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಸರಿಯಾದ ಬ್ರೌಸರ API ಗಳನ್ನು ಆಯ್ಕೆಮಾಡಲು**
+- **ಬ್ರೌಸರ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ಸಾಮರ್ಥ್ಯಯುತವಾಗಿ ಕೆಲಸ ಮಾಡುವ ವಿಸ್ತಾರಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು**
+- **ನಿಮ್ಮ ವಿಸ್ತಾರ ಬ್ರೌಸರದ ಸುರಕ್ಷತಾ ಉತ್ತಮ ಅನುಸರಣೆಗಳನ್ನು ಪಾಲಿಸಬೇಕೆಂದು ಖಾತ್ರಿ ಮಾಡಿಕೊಳ್ಳಲು**
+
+### ಕ್ರಾಸ್-ಬ್ರೌಸರ ಡೆವಲಪ್ಮೆಂಟ್ ಪರಿಗಣನೆಗಳು
+
+ಬೇರೆಬೇರೆ ಬ್ರೌಸರಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸ್ವಲ್ಪ ತಾರತಮ್ಯಗಳೊಂದಿಗೆ ನಿಯಮಾವಳಿಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುತ್ತವೆ, ಬಹುಶಃ ಬೇರೆ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳು ಒಂದೇ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ವಿಭಿನ್ನವಾಗಿ ಹ್ಯಾಂಡಲ್ ಮಾಡುವ ಹಾಗೆ. ಕ್ರೋಮ್, ಫೈರ್ಫಾಕ್ಸ್ ಮತ್ತು ಸಫಾರಿ ಪ್ರತಿಯೊಂದು ವಿಭಿನ್ನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿವೆ, ಮತ್ತು ವಿಸ್ತಾರ ಡೆವಲಪರ್ ಗಳು ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕು.
+
+> 💡 **ಪ್ರೊ ಟಿಪ್**: ವಿವಿಧ ಬ್ರೌಸರಗಳಲ್ಲಿಉಪಯೋಗಿಸುವ ವೆಬ್ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಪರಿಶೀಲಿಸಲು [caniuse.com](https://www.caniuse.com) ಬಳಸಿ. ಇದು ನಿಮ್ಮ ವಿಸ್ತಾರದ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಯೋಜಿಸುವಾಗ ಅತ್ಯಂತ ಮೌಲ್ಯಯುತವಾಗಿದೆ!
+
+**ವಿಸ್ತಾರ ಡೆವಲಪ್ಮೆಂಟ್ ಕೀ ಪರಿಗಣನೆಗಳು:**
+- **ನಿಮ್ಮ ವಿಸ್ತಾರವನ್ನು ಕ್ರೋಮ್, ಫೈರ್ಫಾಕ್ಸ್ ಮತ್ತು ಎಡ್ಜ್ ಬ್ರೌಸರಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ**
+- **ಬೇರೆಬೇರೆ ಬ್ರೌಸರ ವಿಸ್ತಾರ API ಮತ್ತು ಮ್ಯಾನಿಫೆಸ್ಟ್ ಫಾರ್ಮ್ಯಾಟ್ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳಿ**
+- **ಭಿನ್ನ ಪ್ರదర్శನಾ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಮಿತಿಗಳನ್ನು ನಿಭಾಯಿಸಿ**
+- **ಬ್ರೌಸರ-ನಿರ್ಧರಿತ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆFallback ಗಳು ಒದಗಿಸಿ, ಅವು ಲಭ್ಯವಿಲ್ಲದಿದ್ದರೆ**
+
+✅ ** ವಿಶ್ಲೇಷಣಾತ್ಮಕ ತತ್ವಾಂಶ**: ನಿಮ್ಮ ಬಳಕೆದಾರರು ಯಾವ ಬ್ರೌಸರನ್ನು ಹೆಚ್ಚು ಬಳಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ನಿಮ್ಮ ವೆಬ್ ಡೆವಲಪ್ಮೆಂಟ್ ಯೋಜನೆಗಳಲ್ಲಿ ವಿಶ್ಲೇಷಣೆ ಪ್ಯಾಕೇಜನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿ ಕಂಡುಹಿಡಿಯಬಹುದು. ಈ ಡೇಟಾ ನಿಮಗೆ ಮೊದಲಿಗೆ ಯಾವ ಬ್ರೌಸರಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕು ಎಂದು ಆದಾನ ನೀಡುತ್ತದೆ.
+
+## ಬ್ರೌಸರ ವಿಸ್ತಾರಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು
+
+ಬ್ರೌಸರ ವಿಸ್ತಾರಗಳು ಸಾಮಾನ್ಯ ವೆಬ್ ಬ್ರೌಸಿಂಗ್ ಸವಾಲುಗಳನ್ನು ನಿರಾಕರಿಸುವ ಮೂಲಕ ಬ್ರೌಸರ ಮುಖಮಟ್ಟದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೇರವಾಗಿ ಸೇರಿಸುತ್ತವೆ. ಬೇರೆಯ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಅಥವಾ ಸಂಕೀರ್ಣ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳ ಅವಶ್ಯಕತೆ ಇಲ್ಲದೆ, ವಿಸ್ತಾರಗಳು ತಕ್ಷಣ ಉಪಕರಣಗಳು ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.
+
+ಈ ಪರಿಕಲ್ಪನೆ ಮೊದಲ ಕಂಪ್ಯೂಟರ್ ಪಯೊನಿಯರ್ಸ್ ಡಗ್ಲಸ್ ಎಂಜಲ್ಬಾರ್ಟ್ ಮಾನವ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ತಂತ್ರಜ್ಞಾನದಿಂದ ವೃದ್ಧಿಸುವಂತೆ ಕಲ್ಪಿಸಿದ್ದರು - ವಿಸ್ತಾರಗಳು ನಿಮ್ಮ ಬ್ರೌಸರ ಮೂಲ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆ.
+
+```mermaid
+quadrantChart
+ title ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ವರ್ಗಗಳು
+ x-axis ಸರಳ --> ಸಂಕೀರ್ಣ
+ y-axis ವೈಯಕ್ತಿಕ ಬಳಕೆ --> ವೃತ್ತಿಪರ ಸಾಧನಗಳು
+ quadrant-1 ಡೆವಲಪರ್ ಸಾಧನಗಳು
+ quadrant-2 ಎಂಟರ್ಪ್ರೈಸ್ ಪರಿಹಾರಗಳು
+ quadrant-3 ವೈಯಕ್ತಿಕ ಉಪಯುಕ್ತತೆಗಳು
+ quadrant-4 ಉತ್ಪಾದಕತೆ ಅಪ್ಲಿಕೇಶನ್ಗಳು
+
+ Ad Blockers: [0.3, 0.2]
+ Password Managers: [0.7, 0.3]
+ Color Pickers: [0.4, 0.8]
+ Code Formatters: [0.8, 0.9]
+ Note Taking: [0.6, 0.5]
+ Video Downloaders: [0.5, 0.2]
+ Time Trackers: [0.7, 0.6]
+ Screenshot Tools: [0.4, 0.4]
+```
+**ಜನಪ್ರಿಯ ವಿಸ್ತಾರ ವರ್ಗಗಳು ಮತ್ತು ಅವುಗಳ ಲಾಭಗಳು:**
+- **ಉತ್ಪಾದಕತೆ ಉಪಕರಣಗಳು**: ಕಾರ್ಯ ನಿರ್ವಾಹಕರು, ಟಿಪ್ಪಣಿ ತೆಗೆದುಕೊಳ್ಳುವ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಮತ್ತು ಸಮಯ ಟ್ರ್ಯಾಕರ್ಗಳು ನೀವು ಸಂಘಟಿತವಾಗಿರಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ
+- **ಸುರಕ್ಷತೆ ಸುಧಾರಣಗಳು**: ಪಾಸ್ವರ್ಡ್ ಮ್ಯಾನೇಜರ್ಗಳು, ಜಾಹೀರಾತು ತಡೆಗಡೆ ಮಾಡುವವರು ಮತ್ತು ಗೌಪ್ಯತಾ ಉಪಕರಣಗಳು ನಿಮ್ಮ ಡೇಟಾವನ್ನು ರಕ್ಷಿಸುತ್ತವೆ
+- **ಡೆವಲಪರ್ ಉಪಕರಣಗಳು**: ಕೋಡ್ ಫಾರ್ಮ್ಯಾಟರ್ಗಳು, ಬಣ್ಣ ಆರಿಸುವ ಉಪಕರಣಗಳು ಮತ್ತು ಡಿಬಗ್ ಉಪಕರಣಗಳು ಅಭಿವೃದ್ಧಿಯನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತವೆ
+- **ವಿಷಯ ಸುಧಾರಣೆಗಳು**: ಓದು ಮೋಡ್ಗಳು, ವೀಡಿಯೋ ಡೌನ್ಲೋಡರ್ಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ಶಾಟ್ ಉಪಕರಣಗಳು ನಿಮ್ಮ ವೆಬ್ ಅನುಭವವನ್ನು ಉತ್ತಮಗೊಳಿಸುತ್ತವೆ
+
+✅ **ಪರಾವರ್ತನೆ ಪ್ರಶ್ನೆ**: ನಿಮ್ಮ ಪ್ರಿಯ ಬ್ರೌಸರ ವಿಸ್ತಾರಗಳೇನು? ಅವು ವಿಶೇಷವಾಗಿ ಯಾವ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ ಮತ್ತು ನಿಮ್ಮ ಬ್ರೌಸಿಂಗ್ ಅನುಭವವನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುತ್ತವೆ?
+
+### 🔄 **ಶಿಕ್ಷಣ ಸಂಬಂಧಿ ಪರಿಶೀಲನೆ**
+**ಬ್ರೌಸರ ಆರ್ಕಿಟೆಕ್ಚರ್ ತಿಳಿವಳಿಕೆ**: ವಿಸ್ತಾರ ಅಭಿವೃದ್ಧಿಗೆ ಮುಂಚೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+- ✅ ಬ್ರೌಸರಗಳು ವೆಬ್ ವಿನಂತಿಗಳನ್ನು ಹೇಗೆ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತವೆ ಮತ್ತು ವಿಷಯವನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ವಿವರಿಸಬಹುದೇ?
+- ✅ ಬ್ರೌಸರ ಆರ್ಕಿಟೆಕ್ಚರ್ ಮುಖ್ಯ ಘಟಕಗಳನ್ನು ಗುರುತಿಸಬಹುದೇ?
+- ✅ ವಿಸ್ತಾರಗಳು ಬ್ರೌಸರ ಕಾರ್ಯಕ್ಷಮತೆಯೊಂದಿಗೆ ಹೇಗೆ ಸಂಯೋಜಿತವಾಗುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಹುದೇ?
+- ✅ ಬಳಕೆದಾರರನ್ನು ರಕ್ಷಿಸುವ ಸುರಕ್ಷತಾ ಮಾದರಿಯನ್ನು ಪರಿಚಯಿಸಬಹುದೇ?
+
+**ತ್ವರಿತ ಸ್ವ-ಪರೀಕ್ಷೆ**: URL ಟೈಪ್ ಮಾಡಿ ವೆಬ್ ಪುಟವನ್ನು ನೋಡುವವರೆಗೆ ಹಾದಿಯನ್ನು ಪತ್ತೆಮಾಡಬಹುದೇ?
+1. **DNS ಲುಕ್-ಅಪ್** URL ಅನ್ನು ಐಪಿ ವಿಳಾಸಕ್ಕೆ ಪರಿವರ್ತಿಸುತ್ತದೆ
+2. **HTTP ವಿನಂತಿ** ಸರ್ವರ್ನಿಂದ ವಿಷಯ আহರಿಸುತ್ತದೆ
+3. **ಪಾರ್ಸಿಂಗ್** HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ
+4. **ರೆಂಡರಿಂಗ್** ಅಂತಿಮ ವೆಬ್ ಪುಟವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ
+5. **ವಿಸ್ತಾರಗಳು** ಹಲವಾರು ಹಂತಗಳಲ್ಲಿ ವಿಷಯವನ್ನು ಬದಲಾಯಿಸಬಹುದು
+
+## ವಿಸ್ತಾರಗಳನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡುವುದು ಮತ್ತು ನಿರ್ವಹಣೆ
+
+ವಿಸ್ತಾರಗಳನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಜನರು ನಿಮ್ಮ ವಿಸ್ತಾರವನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡುವಾಗ ಬಳಕೆದಾರ ಅನುಭವದ ನಿರೀಕ್ಷೆಯನ್ನು ಮಾಡಬಹುದು. ಇನ್ಸ್ಟಾಲೇಶನ್ ಪ್ರಕ್ರಿಯೆ ಆಧುನಿಕ ಬ್ರೌಸರಗಳಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿದೆ, ಕೆಲವು ಸಣ್ಣ ವ್ಯತ್ಯಾಸಗಳು ಮಾತ್ರ ಇಂಟರ್ಫೇಸ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಇರುತ್ತವೆ.
+
+
+
+> **ಮುಖ್ಯವಾದುದು**: ನಿಮ್ಮ ಸ್ವಂತ ವಿಸ್ತಾರಗಳನ್ನು ಪರೀಕ್ಷಿಸುವಾಗ ಡೆವಲಪರ್ ಮೋಡ್ ಅನ್ನು ಟೋಗಲ್ ಆನ್ ಮಾಡಿ ಮತ್ತು ಬೇರೆ ಸ್ಟೋರ್ಗಳಿಂದ ವಿಸ್ತಾರಗಳನ್ನು ಅನುಮತಿಸಿ.
+
+### ಡೆವಲಪ್ಮೆಂಟ್ ವಿಸ್ತಾರ ಇನ್ಸ್ಟಾಲೇಶನ್ ಪ್ರಕ್ರಿಯೆ
+
+ನೀವು ನಿಮ್ಮ ಸ್ವತ: ವಿಸ್ತಾರಗಳನ್ನು ಡೆವಲಪ್ ಮತ್ತು ಪರೀಕ್ಷಿಸುವಾಗ, ಈ ಕಾರ್ಯವಿಧಾನವನ್ನು ಅನುಸರಿಸಿ:
+
+```mermaid
+flowchart TD
+ A[ಕೋಡ್ ಬರೆಹಿ] --> B[ವಿಸ್ತರಣೆ ನಿರ್ಮಿಸಿ]
+ B --> C{ಮೊದಲು ಸ್ಥಾಪನೆ?}
+ C -->|ಹೌದು| D[ಅನಪ್ಯಾಕ್ ಲೋಡ್ ಮಾಡಿ]
+ C -->|ಇಲ್ಲ| E[ವಿಸ್ತರಣೆಯನ್ನು ಪುನಃ ಲೋಡ್ ಮಾಡಿ]
+ D --> F[ಕಾರ್ಯಗತತೆ ಪರೀಕ್ಷೆ]
+ E --> F
+ F --> G{ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿದೆಯೇ?}
+ G -->|ಇಲ್ಲ| H[ದೋಷಗಳನ್ನು ತಿದ್ದಿ]
+ G -->|ಹೌದು| I[ಬಳಕೆದಾರರಿಗೆ ತಯಾರಾಗಿದೆ]
+ H --> A
+ I --> J[ಸ್ಟೋರ್ಗೆ ಪ್ರಕಟಿಸಿ]
+
+ style A fill:#e1f5fe
+ style F fill:#e8f5e8
+ style I fill:#f3e5f5
+ style J fill:#fff3e0
+```
+```bash
+# ಹಂತ 1: ನಿಮ್ಮ ವಿಸ್ತರಣೆಯನ್ನು ನಿರ್ಮಿಸಿ
+npm run build
+```
+
+**ಈ ಆಜ್ಞೆಯು ಸಾಧಿಸುವುದು:**
+- **ನಿಮ್ಮ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಬ್ರೌಸರ್ ಸಿದ್ಧ ಫೈಲ್ಗಳಾಗಿ ಸಂকলಿಸುತ್ತದೆ**
+- **ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮాడ್ಯೂಲ್ಗಳನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ ಪ್ಯಾಕೇಜ್ಗಳಲ್ಲಿ ಒಗ್ಗೂಡಿಸುತ್ತದೆ**
+- **ಕ್ಲೈಂಟ್ `/dist` ಫೋಲ್ಡರ್ನಲ್ಲಿ ಅಂತಿಮ ವಿಸ್ತಾರ ಫೈಲ್ಗಳನ್ನು ತಯಾರಿಸುತ್ತದೆ**
+- **ವಿಸ್ತಾರವನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮತ್ತು ಪರೀಕ್ಷಿಸುವಂತೆ ಸಿದ್ಧಪಡಿಸುತ್ತದೆ**
+
+**ಹಂತ 2: ಬ್ರೌಸರ್ ವಿಸ್ತಾರ ಪುಟಕ್ಕೆ ಹೋಗಿ**
+1. **ನಿಮ್ಮ ಬ್ರೌಸರ ವಿಸ್ತಾರ ನಿರ್ವಹಣಾ ಪುಟವನ್ನು ತೆರೆಯಿರಿ**
+2. **ಬಲಮೇಲೆ ಮೇಲಿನ “ಸೆಟ್ಟಿಂಗ್ಸ್ ಮತ್ತು ಹೆಚ್ಚಿನವು” (`...` ಐಕಾನ್) ಕ್ಲಿಕ್ ಮಾಡಿ**
+3. **ಡ್ರಾಪ್ಡೌನ್ ಮೆನವಲ್ಲಿಂದ "ವಿಸ್ತಾರಗಳು" ಆಯ್ಕೆಮಾಡಿ**
+
+**ಹಂತ 3: ನಿಮ್ಮ ವಿಸ್ತಾರ ಲೋಡ್ ಮಾಡಿ**
+- **ಹೊಸ ಸ್ಥಾಪನೆಗಳಿಗೆ**: `load unpacked` ಆಯ್ಕೆ ಮಾಡಿ ನಿಮ್ಮ `/dist` ಫೋಲ್ಡರ್ ಅನ್ನು ಆರಿಸಿ
+- **ಅಪ್ಡೇಟ್ಗಳಿಗೆ**: ಈಗಾಗಲೇ ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿರುವ ವಿಸ್ತಾರದ ಎದುರಿಗೆ ಇರುವ `reload` ಗುರುತು ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ
+- **ಪರೀಕ್ಷಿಸಲು**: ಹೆಚ್ಚುವರಿ ಡಬ್ಬಗಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಪ್ರವೇಶ ಮಾಡುವಂತೆ "ಡೆವಲಪರ್ ಮೋಡ್" ಸಕ್ರಿಯಗೊಳಿಸಿ
+
+### ಉತ್ಪಾದನಾ ವಿಸ್ತಾರ ಇನ್ಸ್ಟಾಲೇಶನ್
+
+> ✅ **ಗಮನಿಸಿ**: ಈ ಡೆವೆಲಪ್ಮೆಂಟ್ ಸೂಚನೆಗಳು ನೀವು ನಿರ್ಮಿಸುವ ವಿಸ್ತಾರಗಳಿಗೆ ಮಾತ್ರ. ಪ್ರಕಟಿಸಿದ ವಿಸ್ತಾರಗಳನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಲು ಅಧಿಕೃತ ಬ್ರೌಸರ ವಿಸ್ತಾರ ಅಂಗಡಿಗಳನ್ನು, ಉದಾಹರಣೆಗೆ [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home)ಗೆ ಭೇಟಿ ನೀಡಿ.
+
+**ತ್ಯಾದಿಸುವ ಅಗತ್ಯ:**
+- **ಡೆವಲಪ್ಮೆಂಟ್ ಇನ್ಸ್ಟಾಲೇಶನ್ಗಳು** ಡೆವಲಪ್ಮೆಂಟ್ ಸಮಯದಲ್ಲಿ ಪ್ರಕಟಿಸದ ವಿಸ್ತಾರಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಅನುಕೂಲ
+- **ಸ್ಟೋರ್ ಇನ್ಸ್ಟಾಲೇಶನ್ಗಳು** ಪರಿಶೀಲಿತ, ಪ್ರಕಟಿತ ವಿಸ್ತಾರಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತ ನವೀಕರಣದೊಂದಿಗೆ ಒದಗಿಸುತ್ತವೆ
+- **ಸೈಡ್ಲೋಡಿಂಗ್** ಅಧಿಕೃತ ಅಂಗಡಿಗಳ ಹೊರಗಿನ ವಿಸ್ತಾರಗಳನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಲು ಅವಕಾಶ (ಡೆವಲಪರ್ ಮೋಡ್ ಅಗತ್ಯ)
+
+## ನಿಮ್ಮ ಕಾರ್ಬನ್ ಫೂಟ್ಪ್ರಿಂಟ್ ವಿಸ್ತಾರವನ್ನು ನಿರ್ಮಿಸುವುದು
+
+ನಾವು ಒಂದು ಬ್ರೌಸರ ವಿಸ್ತಾರವನ್ನು ರಚಿಸುವೆವು ಅದು ನಿಮ್ಮ ಪ್ರಾಂತ್ಯದ ವಿದ್ಯುತ್ ಬಳಕೆಯ ಕಾರ್ಬನ್ ಫೂಟ್ಪ್ರಿಂಟ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಈ ಪ್ರಾಜೆಕ್ಟ್ ಪ್ರಮುಖ ವಿಸ್ತಾರ ಡೆವಲಪ್ಮೆಂಟ್ ತತ್ವಗಳನ್ನು ತೋರಿಸುವುದರೊಂದಿಗೆ ಪರಿಸರ ಜಾಗೃತಿಗಾಗಿ ಪ್ರಾಯೋಗಿಕ ಉಪಕರಣವನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ.
+
+ಈ ವಿಧಾನ "ಮಾಡಿ ಕಲಿಯುವುದು" ಎಂಬ ತತ್ವವನ್ನು ಅನುಸರಿಸುತ್ತದೆ, ಇದು ಜಾನ್ ಡ್ಯೂವಿಯ ಶೈಕ್ಷಣಿಕ ತತ್ವಗಳ ಮೂಲಕ ಪರಿಣಾಮಕಾರಿಯಾಗಿದ್ದು - ತಾಂತ್ರಿಕ ಕೌಶಲ್ಯಗಳನ್ನು ಅರ್ಥಪೂರ್ಣ ನೈಜ ಜಗತ್ತಿನ ಅನ್ವಯಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುತ್ತದೆ.
+
+### ಯೋಜನೆ ಅಗತ್ಯಗಳು
+
+ಡೆವಲಪ್ಮೆಂಟ್ ಆರಂಭಿಸುವ ಮೊದಲು, ಅಗತ್ಯವಿರುವ ಸಂಪನ್ಮೂಲಗಳು ಮತ್ತು ಅವಲಂಬನೆಗಳನ್ನು ಸಂಗ್ರಹಿಸೋಣ:
+
+**ಅಗತ್ಯ API ಪ್ರವೇಶ:**
+- **[CO2 Signal API ಕೀ](https://www.co2signal.com/)**: ನಿಮ್ಮ ಉಚಿತ API ಕೀ ಪಡೆಯಲು ನಿಮ್ಮ ಇಮೇಲ್ ವಿಳಾಸವನ್ನು ನಮೂದಿಸಿ
+- **[ಪ್ರಾಂತ್ಯ ಕೋಡ್](http://api.electricitymap.org/v3/zones)**: [Electricity Map](https://www.electricitymap.org/map) ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಪ್ರಾಂತ್ಯ ಕೋಡ್ ಅನ್ನು ಹುಡುಕಿ (ಉದಾಹರಣೆಗೆ, ಬೋಸ್ಟನ್ 'US-NEISO' ಅನ್ನು ಬಳಸುತ್ತದೆ)
+
+**ಡೆವಲಪ್ಮೆಂಟ್ ಉಪಕರಣಗಳು:**
+- **[Node.js ಮತ್ತು NPM](https://www.npmjs.com)**: ಪ್ರಾಜೆಕ್ಟ್ ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸಲು ಪ್ಯಾಕೇಜ್ ನಿರ್ವಹಣಾ ಉಪಕರಣ
+- **[ಆರಂಭಿಕ ಕೋಡ್](../../../../5-browser-extension/start)**: `start` ಫೋಲ್ಡರ್ ಅನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡಿ ಡೆವಲಪ್ಮೆಂಟ್ ಪ್ರಾರಂಭಿಸಿ
+
+✅ **ಮತ್ತಷ್ಟು ಕಲಿಯಿರಿ**: ಈ [ವಿಸ್ಮೃತಲ Learn ಮಾಯಾಜಾಲ](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) ಮೂಲಕ ನಿಮ್ಮ ಪ್ಯಾಕೇಜ್ ನಿರ್ವಹಣಾ ಕೌಶಲ್ಯಗಳನ್ನು ಸುಧಾರಿಸಿ
+
+### ಯೋಜನೆ ರಚನೆ ತಿಳಿದುಕೊಳ್ಳುವುದು
+
+ಯೋಜನೆ ರಚನೆಯನ್ನು ಮನಗಂಡರೆ ಅಭಿವೃದ್ಧಿ ಕಾರ್ಯವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಸಂಘಟಿಸಲು ಸಹಾಯವಾಗುತ್ತದೆ. ಅಲೆಕ್ಸಾಂಡ್ರಿಯಾ ಗ್ರಂಥಾಲಯ ಹೇಗೆ ಜ್ಞಾನವನ್ನು ಸುಲಭವಾಗಿ ಹುಡುಕಲು ವ್ಯವಸ್ಥಿತವಾಗಿತ್ತು ಹೀಗೇ, ಒಳ್ಳೆಯ ರಚನೆಯ ಕೋಡ್ಬೇಸ್ ಅಭಿವೃದ್ಧಿಯನ್ನು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಗೊಳಿಸುತ್ತದೆ:
+
+```
+project-root/
+├── dist/ # Built extension files
+│ ├── manifest.json # Extension configuration
+│ ├── index.html # User interface markup
+│ ├── background.js # Background script functionality
+│ └── main.js # Compiled JavaScript bundle
+├── src/ # Source development files
+│ └── index.js # Your main JavaScript code
+├── package.json # Project dependencies and scripts
+└── webpack.config.js # Build configuration
+```
+
+**ಪ್ರತಿ ಫೈಲ್ ಏನು ಸಾಧಿಸುತ್ತದೆ:**
+- **`manifest.json`**: ವಿಸ್ತಾರದ ಮೆಟಾಡೇಟಾ, ಅನುಮತಿಗಳನ್ನು ಮತ್ತು ಪ್ರವೇಶ ಬಿಂದುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ
+- **`index.html`**: ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಇದು ಬಳಕೆದಾರರು ವಿಸ್ತಾರವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಕಾಣುತ್ತದೆ
+- **`background.js`**: ಹಿನ್ನೆಲೆ ಕಾರ್ಯ ಮತ್ತು ಬ್ರೌಸರ ಇವೆಂಟ್ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ
+- **`main.js`**: ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ನಂತರ ಅಂತಿಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್ ಅನ್ನು ಹೊಂದಿದೆ
+- **`src/index.js`**: ನಿಮ್ಮ ಪ್ರಮುಖ ಡೆವಲಪ್ಮೆಂಟ್ ಕೋಡ್ ಇದರಲ್ಲಿ ಇರುತ್ತದೆ, ಇದು `main.js` ಗೆ ಸಂಯೋಜಿಸಲಾಗುತ್ತದೆ
+
+> 💡 **ಸಂಘಟನೆಯ ಮೆಲುಕು**: ನಿಮ್ಮ API ಕೀ ಮತ್ತು ಪ್ರಾಂತ್ಯ ಕೋಡ್ ಅನ್ನು ಡೆವಲಪ್ಮೆಂಟ್ ವೇಳೆ ಸುಲಭವಾಗಿ ಉಲ್ಲೇಖಿಸಲು ಭದ್ರವಾಗಿ ಟಿಪ್ಪಣಿಯಲ್ಲಿ ಇಟ್ಟುಕೊಳ್ಳಿ.
+
+✅ **ಸುರಕ್ಷತಾ ಟಿಪ್ಪಣಿ**: API ಕೀಗಳನ್ನು ಅಥವಾ ಸಂವೇದನಾಶೀಲ ಗುಪ್ತಪದಗಳನ್ನು ನಿಮ್ಮ ಕೋಡ್ ರೆಪೊಸಿಟರಿಯಲ್ಲಿ ಎಂದೂ ಕಮಿಟ್ ಮಾಡಬೇಡಿ. ಮುಂದಿನ ಹಂತಗಳಲ್ಲಿ ಇದನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ನಿಭಾಯಿಸುವ ವಿಧಾನಗಳನ್ನು ತೋರಿಸಲಾಗುತ್ತದೆ.
+
+## ವಿಸ್ತಾರ ಇಂಟರ್ಫೇಸ್ ನಿರ್ಮಿಸುವುದು
+
+ಈಗ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಘಟಕಗಳನ್ನು ನಿರ್ಮಿಸುವೆವು. ವಿಸ್ತಾರವು ಎರಡು ಪರದೆಯ ದೃಷ್ಟಿಕೋನವನ್ನು ಉಪಯೋಗಿಸುತ್ತದೆ: ಮೊದಲ ಬಾರಿಗೆ ಸೆಟ್ಟಿಂಗ್ಗಾಗಿ ವಿನ್ಯಾಸ ಪರದೆ ಮತ್ತು ಡೇಟಾ ಪ್ರದರ್ಶನಕ್ಕಾಗಿ ಫಲಿತಾಂಶ ಪರದೆ.
+
+ಈ ವಿಧಾನ ಪ್ರಗತಿಯ ಸೂಚನೆ ತತ್ವವನ್ನು ಅನುಸರಿಸುತ್ತದೆ, ಇದು ಮಾಹಿತಿ ಮತ್ತು ಆಯ್ಕೆಗಳನ್ನು ಸಂಬಂಧಿತ ಕ್ರಮದಲ್ಲಿ ಬಹಿರಂಗಪಡಿಸಿ ಬಳಕೆದಾರರನ್ನು ಅತಿಭಾರದೊಳಗಾಗದಂತೆ ಮಾಡುತ್ತದೆ.
+
+### ವಿಸ್ತಾರ ವೀಕ್ಷಣೆಗಳ ಸಮೀಕ್ಷೆ
+
+**ಸೆಟಪ್ ವೀಕ್ಷಣೆ** - ಮೊದಲು ಬಳಕೆದಾರ ಸಂರಚನೆ:
+
+
+**ಫಲಿತಾಂಶ ವೀಕ್ಷಣೆ** - ಕಾರ್ಬನ್ ಫೂಟ್ಪ್ರಿಂಟ್ ಡೇಟಾ ಪ್ರದರ್ಶನ:
+
+
+### ಸಂರಚನಾ ಫಾರ್ಮ್ ನಿರ್ಮಿಸುವುದು
+
+ಸೆಟಪ್ ಫಾರ್ಮ್ ಪ್ರಾಥಮಿಕ ಬಳಕೆಗಾಗಿಯು ಬಳಕೆದಾರ ಸಂರಚನಾ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ. ಒಮ್ಮೆ ಸಂರಚಿಸಿದ ಮೇಲೆ, ಈ ಮಾಹಿತಿಯು ಮುಂದಿನ ಸೆಷನ್ಗಳಿಗೆ ಬ್ರೌಸರ ಸ್ಟೋರೇಜ್ನಲ್ಲಿ ಉಳಿದುಕೊಳ್ಳುತ್ತದೆ.
+
+`/dist/index.html` ಫೈಲ್ನಲ್ಲಿ ಈ ಫಾರ್ಮ್ ರಚನೆಯನ್ನು ಸೇರಿಸಿ:
+
+```html
+
+```
+
+**ಈ ಫಾರ್ಮ್ ಸಾಧಿಸುವುದು:**
+- **ಸರಿಯಾದ ಲೇಬಲ್ಗಳು ಮತ್ತು ಇನ್ಪುಟ್ಗಳನ್ನು ಜೋಡಿಸಿಕೊಂಡು ಸಿಮೆಂಟಿಕ್ ಫಾರ್ಮ್ ರಚನೆ ಮಾಡುತ್ತದೆ**
+- **ಮೆಲುಕುವಿಕೆಗಾಗಿಯೇ ಬ್ರೌಸರದ ಆಟೋ ಕಂಪ್ಲೀಟ್ ಕಾರ್ಯಚಟುವಟಿಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ**
+- **`required` ಗುಣಲಕ್ಷಣ ಬಳಸಿ ಎರಡೂ ಕ್ಷೇತ್ರಗಳು ಭರ್ತಿಯಾಗಿರಬೇಕೆಂದು ಹಾಜರಾತಿ ಮಾಡುತ್ತದೆ**
+- **ಸರಳ ಶೈಲಿ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗುರಿಯಾಗಲು ವಿವರವಾದ ಕ್ಲಾಸ್ ಹೆಸರನ್ನು ಬಳಕೆ ಮಾಡುತ್ತದೆ**
+- **ಮೊದಲ ಬಾರಿಗೆ ವಿಸ್ತಾರವನ್ನು ಸೆಟ್ ಮಾಡುತ್ತಿರುವ ಬಳಕೆದಾರರಿಗೆ ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ**
+
+### ಫಲಿತಾಂಶ ಪ್ರದರ್ಶನವನ್ನು ನಿರ್ಮಿಸುವುದು
+
+ಮುಂದೆ, ಕಾರ್ಬನ್ ಫೂಟ್ಪ್ರಿಂಟ್ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸುವ ಫಲಿತಾಂಶ ಪ್ರದೇಶವನ್ನು ರಚಿಸಿ. ಈ HTML ಅನ್ನು ಫಾರ್ಮ್ ಕೆಳಗೆ ಸೇರಿಸಿ:
+
+```html
+
+
loading...
+
+
+
+
Region:
+
Carbon Usage:
+
Fossil Fuel Percentage:
+
+
Change region
+
` ಅಂಶವನ್ನು ಹೀರೋ ಮತ್ತು ಮಾನ್ತ್ರಗಳ ತುಂಬಿದ ಗೇಮ್ ವಿಶ್ವಕ್ಕೆ ಪರಿವರ್ತಿಸುತ್ತೇವೆ. ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ನಿಮ್ಮ ಡಿಜಿಟಲ್ ಆರ್ಟ್ ಬೋರ್ಡ್ ಎಂದು ಪರಿಗಣಿಸಿ, ಅಲ್ಲಿ ಕೋಡ್ ದೃಶ್ಯವಾಗುತ್ತದೆ.
+
+ನೀವು ಮೊದಲು ಪಾಠದಲ್ಲಿ ಕಲಿತದಕ್ಕಾಗಿ ನಾವು ನಿರ್ಮಾಣ ಮಾಡುತ್ತಿದ್ದೇವೆ, ಮತ್ತು ಈಗ ನಾವು ದೃಶ್ಯಾತ್ಮಕ ಭಾಗಗಳಿಗೆ ತೊಡಗಿಯಿಡುತ್ತೇವೆ. ನೀವು ಹೇಗೆ ಗೇಮ್ ಸ್ಪ್ರೈಟ್ಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ ಪ್ರದರ್ಶಿಸುತ್ತೀರಾ, ಅಂಶಗಳನ್ನು ನಿಖಚಿತವಾಗಿ ಸ್ಥಾಪಿಸುವುದು, ಮತ್ತು ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮ್ನ ದೃಶ್ಯಮೂಲವನ್ನು ಸೃಷ್ಟಿಸುವುದು ಕಲಿತೀರಿ. ಇದು ಸ್ಥಾಯಿ ವೆಬ್ ಪುಟಗಳು ಮತ್ತು ಚಟುವಟಿಕೆ, ಸಂವಾದಾತ್ಮಕ ಅನುಭವಗಳ ನಡುವೆ ಸೇತುವೆಯನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ.
+
+ಈ ಪಾಠದ ಕೊನೆಯಲ್ಲಿ, ನೀವು ನಿಮ್ಮ ಹೀರೋ ಹಡಗಿನ ಸರಿಯಾದ ಸ್ಥಾನದಲ್ಲಿ ಹೊಂದಿದ್ದ ಹಾಗೂ ಯುದ್ದಕ್ಕೆ ಸಜ್ಜಾಗಿರುವ ಶತ್ರು ರೂಪರೇಷೆಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಗೇಮ್ ದೃಶ್ಯವನ್ನು ಹೊಂದಿರುತ್ತೀರಿ. ನೀವು ಆಧುನಿಕ ಗೇಮ್ಗಳು ಬ್ರೌಸರ್ನಲ್ಲಿ ಗ್ರಾಫಿಕ್ಸ್ ಹೇಗೆ ರೆಂಡರ್ ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ ಮತ್ತು ನಿಮ್ಮದೇ ಸಂವಾದಾತ್ಮಕ ದೃಶ್ಯಾನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುವ ಕೌಶಲಗಳನ್ನು ಪಡೆಯುತ್ತೀರಿ. ಕ್ಯಾನ್ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ವೇಷಿಸಿ, ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಂಗೆ ಜೀವ ನೀಡೋಣ!
+
+```mermaid
+mindmap
+ root((ಕ್ಯಾನ್ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್))
+ Canvas Element
+ HTML5 ವೈಶಿಷ್ಟ್ಯ
+ 2D ಪ್ರಕಟಣೆ
+ ಸಂಯೋಜನಾ ವ್ಯವಸ್ಥೆ
+ ಪಿಕ್ಸೆಲ್ ನಿಯಂತ್ರಣ
+ ಆಕರಣ ಕಾರ್ಯಾಚರಣೆಗಳು
+ ಮೂಲಾಕೃತಿ
+ ಪಠ್ಯ ಪ್ರദರ್ಶನ
+ ಚಿತ್ರ ಪ್ರದರ್ಶನ
+ ಮಾರ್ಗದ ಆಕರಣೆ
+ ಆಸ್ತಿ ನಿರ್ವಹಣೆ
+ ಚಿತ್ರ ಲೋಹಣ
+ ಅಸಿಂಕ್ರೋ ಕಾರ್ಯಾಚರಣೆಗಳು
+ ತಪ್ಪು ನಿರ್ವಹಣೆ
+ ಕಾರ್ಯಕ್ಷಮತೆ
+ ಆಟದ ಪ್ರದರ್ಶನ
+ ಸ್ಪ್ರೈಟ್ ಸ್ಥಾನಕ್ಕೆ
+ ರಚನೆ ವಿನ್ಯಾಸ
+ ದೃಶ್ಯ ಸಂಯೋಜನೆ
+ ಫ್ರೇಮ್ ನವೀಕರಣಗಳು
+ ದೃಶ್ಯ ಪರಿಣಾಮಗಳು
+ ಬಣ್ಣಗಳು ಮತ್ತು ಶೈಲಿಗಳು
+ ಪರಿವರ್ತನೆಗಳು
+ ಅನಿಮೇಷನ್ಗಳು
+ ನಲ್ಲಿ ಅಡ್ಡರೇಖೆ
+```
+## ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/31)
+
+## ಕ್ಯಾನ್ವಾಸ್
+
+ಈ `` ಅಂಶವೆಂದರೆ ಏನು? ಇದು ವೆಬ್ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಗತಿಶೀಲ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಅನಿಮೆಶನ್ಗಳನ್ನು ಸೃಷ್ಟಿಸಲು HTML5 ನ ಪರಿಹಾರ. ಸಾಮಾನ್ಯ ಚಿತ್ರಗಳು ಅಥವಾ ವೀಡಿಯೊಗಳು ಸ್ಥಿರವಾದವುಗಳಲ್ಲ, ಕ್ಯಾನ್ವಾಸ್ ನೀವು ಪರದೆ ಮೇಲೆ ಪ್ರತಿ ಪಿಕ್ಸೆಲ್ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಗೇಮ್ಗಳು, ಡೇಟಾ ದೃಶ್ಯೀಕರಣ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಆರ್ಟ್ಗೆ ಅತ್ಯುತ್ತಮ. ಇದನ್ನು ಪ್ರೋಗ್ರಾಮೇಬಲ್ ಡ್ರಾಯಿಂಗ್ ಸರ್ಫೇಸ್ ಎಂದು ಪರಿಗಣಿಸಿ, ಅಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಮ್ಮ ಬಣ್ಣದ ಹೊಗಾರಣಿಯಾಗಿದೆ.
+
+ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಕ್ಯಾನ್ವಾಸ್ ಅಂಶವು ನಿಮ್ಮ ಪುಟದಲ್ಲಿ ಖಾಲಿ, ಪಾರದರ್ಶಕ ಆಯತಾಕೃತಿಯಾಗಿರುತ್ತದೆ. ಆದರೆ ಅದರಲ್ಲಿ ಶಕ್ತಿ ಇದೆ! ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಆಕಾರಗಳನ್ನು ಬಿಡಿಸಿ, ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ, ಅನಿಮೆಶನ್ಗಳನ್ನು ರಚಿಸಿ ಮತ್ತು ಬಳಕೆದಾರ ಸಂವಾದಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದರಲ್ಲಿ ಅದರ ನಿಜವಾದ ಶಕ್ತಿ ಮೆರೆಯುತ್ತದೆ. ಇದು 1960 ರಲ್ಲಿ ಬೆಲ್ ಲ್ಯಾಬ್ಸ್ನ ಮೊದಲ ಡಿಜಿಟಲ್ ಅನಿಮೆಶನ್ ರಚನೆಗೊಂಡಾಗ ಪ್ರತಿ ಪಿಕ್ಸೆಲ್ ಪ್ರೋಗ್ರಾಮ್ ಮಾಡಬೇಕಾಗಿದ್ದಂತಹ ಪರಿಕಲ್ಪನೆಗೆ ಸಮಾನ.
+
+✅ MDN ನಲ್ಲಿ [ಕ್ಯಾನ್ವಾಸ್ ಎಪಿಐ ಬಗ್ಗೆ ಹೆಚ್ಚಿನುದನ್ನು ಓದಿ](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಹೇಗೆ ಘೋಷಿಸಲಾಗುತ್ತದೆ, ಪುಟದ ದೇಹ ಭಾಗವಾಗಿ:
+
+```html
+ಿದ್ಧವಾಗಿದೆ
+ console.log('Image loaded successfully!');
+};
+```
+
+**ಈ ಕೋಡ್ನಲ್ಲಿ ಏನಾಗುತ್ತಿದೆ:**
+- ನಾವು ಹೊಸ `Image` ವಸ್ತವನ್ನು ರಚಿಸುತ್ತೇವೆ, ಇದರಲ್ಲಿ ನಮ್ಮ ಸ್ಪ್ರೈಟ್ ಅಥವಾ ಟೆಕ್ಸ್ಚರ್ಗಳು ಇರಲು ಸಾಧ್ಯ
+- ನಾವು ಮೂಲ ಮಾರ್ಗವನ್ನು ಸೆಟ್ ಮಾಡಿ ಯಾವ ಚಿತ್ರ ಫೈಲ್ ಲೋಡ್ ಮಾಡಬೇಕೆಂದು ತಿಳಿಸುತ್ತೇವೆ
+- ನಾವು `load` ಘಟನೆಯಿಗಾಗಿ ಕೇಳುತ್ತಿದ್ದೇವೆ ಅದರಿಂದ ಚಿತ್ರ ಸಿದ್ಧವಾಗಿದ್ದು ಎಂಬುದನ್ನು ತಿಳಿದುಕೊಳ್ಳಲು
+
+### ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡುವ ಉತ್ತಮ ವಿಧಾನ
+
+ಚಿತ್ರ ಲೋಡ್ ಮಾಡುವ ಮತ್ತಷ್ಟು ಬಲವಾದ ವಿಧಾನವನ್ನು ಇಲ್ಲಿ ತೋರಲಾಗಿದೆ, ಇದನ್ನು ವೃತ್ತಿಪರ ಡೆವಲಪರ್ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುತ್ತಾರೆ. ನಾವು Promise ಆಧಾರಿತ ಕಾರ್ಯತ್ವದಲ್ಲಿ ಚಿತ್ರ ಲೋಡ್ ಮಾಡುವುದನ್ನು ಸುತ್ತಿಬಿದ್ದೇವೆ – ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ES6 ನಲ್ಲಿ Promises ನಿಯಮಿತವಾಗಿದೆಯೆಂದು ಈ ವಿಧಾನ ಪ್ರಚಲಿತವಾಗಿದೆ, ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ವ್ಯವಸ್ಥಿತವಾಗಿಸುವುದಕ್ಕೂ ಹಾಗೂ ದೋಷಗಳ ನಿರ್ವಹಣೆಗೆ ಅನುಕೂಲವಾಗುತ್ತದೆ:
+
+```javascript
+function loadAsset(path) {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.src = path;
+ img.onload = () => {
+ resolve(img);
+ };
+ img.onerror = () => {
+ reject(new Error(`Failed to load image: ${path}`));
+ };
+ });
+}
+
+// ಆಧುನಿಕ ಬಳಕೆ async/await ಜೊತೆಗೆ
+async function initializeGame() {
+ try {
+ const heroImg = await loadAsset('hero.png');
+ const monsterImg = await loadAsset('monster.png');
+ // ಚಿತ್ರಗಳು ಈಗ ಬಳಕೆಗಾಗಿ ಸಿದ್ಧವಾಗಿವೆ
+ } catch (error) {
+ console.error('Failed to load game assets:', error);
+ }
+}
+```
+
+**ನಾವು ಇಲ್ಲಿ ಮಾಡಿದೆವು:**
+- ಚಿತ್ರ ಲೋಡ್ ಮಾಡುವ ಎಲ್ಲಾ ಲಾಜಿಕ್ನು Promise ನಲ್ಲಿ ಸುತ್ತಿಬಿಟ್ಟಿದ್ದೇವೆ ಹೀಗಾಗಿ ಅದನ್ನು ಉತ್ತಮವಾಗಿ ನಿರ್ವಹಿಸಬಹುದು
+- ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಸೇರಿಸಿದ್ದೇವೆ, ಇದು ಏನಾದರೂ ತಪ್ಪಿದ್ದಾಗ ನಮಗೆ ತಿಳಿಸುತ್ತದೆ
+- ಆಧುನಿಕ async/await ವಾಕ್ಯರಚನೆಯನ್ನು ಬಳಸಿದೆವು ಏಕೆಂದರೆ ಇದು ಓದಲು ಬಹಳ ಸ್ವಚ್ಛವಾಗಿದೆ
+- try/catch ಬ್ಲಾಕ್ಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ ಯಾವುದೇ ಲೋಡ್ ಸಮಸ್ಯೆಗಳನ್ನು ಸವಿಯಾಗೀ ನಿರ್ವಹಿಸಲು
+
+ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡಿದ ನಂತರ, ಅವನ್ನು ಕ್ಯಾನ್ವಾಸ್ಗೆ ಬಿಡಿಸುವುದು ನಿಜವಾಗಿಯೂ ಸರಳವಾಗಿರುತ್ತದೆ:
+
+```javascript
+async function renderGameScreen() {
+ try {
+ // ಗೇಮ್ ಆಸ್ತಿಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ
+ const heroImg = await loadAsset('hero.png');
+ const monsterImg = await loadAsset('monster.png');
+
+ // ಕ್ಯಾನ್ವಾಸ್ ಮತ್ತು ಸಂಧರ್ಭವನ್ನು ಪಡೆಯಿರಿ
+ const canvas = document.getElementById("myCanvas");
+ const ctx = canvas.getContext("2d");
+
+ // ಚಿತ್ರಗಳನ್ನು ನಿಶ್ಚಿತ ಸ್ಥಾನಗಳಿಗೆ desenhos ಮಾಡಿ
+ ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
+ ctx.drawImage(monsterImg, 0, 0);
+ } catch (error) {
+ console.error('Failed to render game screen:', error);
+ }
+}
+```
+
+**ಈ ಹಂತಗಳನ್ನು ಹೀಗೆ ಹಾದುಹೋಗೋಣ:**
+- ನಾವು ಹೆರೋ ಮತ್ತು ಮಾನ್ತ್ರ ಎರಡೂ ಚಿತ್ರಗಳನ್ನು ಹಿನ್ನೆಲೆಯಿಂದ await ಬಳಸಿ ಲೋಡ್ ಮಾಡುತ್ತೇವೆ
+- ನಾವು ನಮ್ಮ ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಹಿಡಿದು 2D ರೆಂಡರಿಂಗ್ ಕಂಟೆಕ್ಸ್ಟ್ ಪಡೆಯುತ್ತೇವೆ
+- ನಾವು ಕೆಲವು ಸರಳ ಸಂಕೇತ ಗಣಿತದಿಂದ ಹೀರೋ ಚಿತ್ರವನ್ನು ಮಧ್ಯಭಾಗದಲ್ಲಿ ನಿಖರವಾಗಿ ಸ್ಥಾಪಿಸುತ್ತೇವೆ
+- ಮಾನ್ತ್ರದ ಚಿತ್ರವನ್ನು ಎಡ-ಮೇಲೆ ಮೂಲೆಯಲ್ಲಿಡುತ್ತೇವೆ, ನಮ್ಮ ಶತ್ರು ರೂಪರೇಷೆ ಪ್ರಾರಂಭಿಸಲು
+- ಲೋಡ್ ಅಥವಾ ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ಸಂಭವಿಸಬಹುದಾದ ದೋಷಗಳನ್ನು ನಾವು ಹಿಡಿದುಕೊಳ್ಳುತ್ತೇವೆ
+
+```mermaid
+flowchart TD
+ A[ಆಸ್ತಿ ಲೋಡ್ ಮಾಡಿ] --> B{ಎಲ್ಲಾ ಚಿತ್ರಗಳು ಲೋಡ್ ಆಗಿದೆಯೇ?}
+ B -->|ಇಲ್ಲ| C[ಲೋಡಿಂಗ್ ತೋರಿಸಿ]
+ B -->|ಹೌದು| D[ಕ್ಯಾಂವಾಸ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಪಡೆಯಿರಿ]
+ C --> B
+ D --> E[ಸ್ಕ್ರೀನ್ ತೆರವುಗೊಳಿಸಿ]
+ E --> F[ಹಿನ್ನೆಲೆ ರೇಖೆ]
+ F --> G[ಶತ್ರು ರಚನೆ ರೇಖೆ]
+ G --> H[ನಾಯಕ ಹಡಗು ರೇಖೆ]
+ H --> I[ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ಅನ್ವಯಿಸಿ]
+ I --> J[ಫ್ರೇಮ್ ರೆಂಡರ್ ಮಾಡಿ]
+
+ subgraph "ರೆಂಡರಿಂಗ್ ಪೈಪ್ಲೈನ್"
+ K[ಆಸ್ತಿ ನಿರ್ವಹಣೆ]
+ L[ದೃಶ್ಯ ಸಂಯೋಜನೆ]
+ M[ರೂಪರೇಖಾ ಕಾರ್ಯಾಚರಣೆಗಳು]
+ N[ಫ್ರೇಮ್ ಔಟ್ಪುಟ್]
+ end
+
+ style A fill:#e1f5fe
+ style J fill:#e8f5e8
+ style I fill:#fff3e0
+```
+## ಈಗ ನಿಮ್ಮ ಗೇಮ್ ನಿರ್ಮಿಸೋಣ
+
+ಈಗ ನಾವು ಎಲ್ಲವನ್ನೂ ಸೇರಿಸಿ ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮ್ನ ದೃಶ್ಯ ಮೂಲವನ್ನು ನಿರ್ಮಿಸುತ್ತೇವೆ. ನೀವು ಕ್ಯಾನ್ವಾಸ್ ಮೂಲಭೂತಗಳು ಮತ್ತು ಚಿತ್ರ ಲೋಡ್ ತಂತ್ರಗಳನ್ನು ಚೆನ್ನಾಗಿ ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದೀರಿ, ಈ ಕೈ ಜೋಡಿಸಿದ ವಿಭಾಗವು ಸುಸಜ್ಜಿತ ಸ್ಪ್ರೈಟ್ಗಳನ್ನು ಸರಿಯಾದ ಸ್ಥಾನದಲ್ಲಿ ನಿರ್ಮಿಸುವ ಸಂಪೂರ್ಣ ಗೇಮ್ ಪರದೆ ನಿರ್ಮಾಣಕ್ಕೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತದೆ.
+
+### ನಿಮಗೆ ನಿರ್ಮಿಸಬೇಕಾಗಿರುವುದು
+
+ನೀವು ಕ್ಯಾನ್ವಾಸ್ ಅಂಶವನ್ನು ಹೊಂದಿರುವ ವೆಬ್ ಪುಟವನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ, ಅದು ಕಪ್ಪು ಬೆಕೆಗ್ರೌಂಡ್ನ್ನು `1024*768` ನಲ್ಲಿ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ನಾವು ನಿಮಗೆ ಎರಡು ಚಿತ್ರಗಳನ್ನು ಒದಗಿಸಿದ್ದೇವೆ:
+
+- ಹೀರೋ ಹಡಗು
+
+ 
+
+- 5*5 ಮಾನ್ತ್ರಗಳು
+
+ 
+
+### ಅಭಿವೃದ್ಧಿ ಪ್ರಾರಂಭಿಸಲು ಶಿಫಾರಸು ಮಾಡಿದ ಹಂತಗಳು
+
+ನೀವು `your-work` ಉಪ ಫೋಲ್ಡರ್ನಲ್ಲಿ ಸೃಷ್ಟಿಸಿದ ಸ್ಟಾರ್ಟರ್ ಫೈಲ್ಗಳನ್ನು ಕಂಡುಹಿಡಿಯಿರಿ. ನಿಮ್ಮ ಯೋಜನಾ ರಚನೆ ಇವುಗಳನ್ನು ಒಳಗೊಂಡಿರಬೇಕು:
+
+```bash
+your-work/
+├── assets/
+│ ├── enemyShip.png
+│ └── player.png
+├── index.html
+├── app.js
+└── package.json
+```
+
+**ನೀವು ಇವುಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದೀರಿ:**
+- **ಗೇಮ್ ಸ್ಪ್ರೈಟ್ಗಳು** `assets/` ಫೋಲ್ಡರ್ನಲ್ಲಿ ಇರುತ್ತವೆ, ಆದ್ದರಿಂದ ಎಲ್ಲವು ವ್ಯವಸ್ಥಿತವಾಗಿರುತ್ತದೆ
+- **ನಿಮ್ಮ ಮುಖ್ಯ HTML ಫೈಲ್** ಕ್ಯಾನ್ವಾಸ್ ಅಂಶವನ್ನು ಸೆಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಎಲ್ಲವನ್ನೂ ಸಿದ್ಧಪಡಿಸುತ್ತದೆ
+- **ಒಂದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್** ಇಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಗೇಮ್ ರೆಂಡರ್ ಮ್ಯಾಜಿಕ್ ಬರೆಯುತ್ತೀರಿ
+- **ಒಂದು package.json** ಇದು ವರಡುಟ್ಟಾಗಿ ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಅನ್ನು ಸೆಟ್ ಅಪ್ ಮಾಡುತ್ತದೆ, ನೀವು ಸ್ಥಳೀಯವಾಗಿ ಪರೀಕ್ಷಿಸಲು
+
+ಈ ಫೋಲ್ಡರ್ ಅನ್ನು Visual Studio Code ನಲ್ಲಿ ತೆರೆಯಿರಿ ಬೆಳವಣಿಗೆ ಪ್ರಾರಂಭಿಸಲು. ನೀವು ಸ್ಥಳೀಯ ಬೆಳವಣಿಗೆ ಪರಿಸರದಲ್ಲಿ Visual Studio Code, NPM, ಮತ್ತು Node.js ಹೊಂದಿರಬೇಕು. ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ನಲ್ಲಿ `npm` ಸ್ಥಾಪಿತವಿಲ್ಲದಿದ್ದರೆ, [ಇದನ್ನು ಹೇಗೆ ಸ್ಥಾಪಿಸುವುದು](https://www.npmjs.com/get-npm) ನೋಡಿರಿ.
+
+ನೀವು `your-work` ಫೋಲ್ಡರ್ಗೆ ತೆರಳಿ ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಪ್ರಾರಂಭಿಸಿ:
+
+```bash
+cd your-work
+npm start
+```
+
+**ಈ ಆಜ್ಞೆ ಕೆಲವು ಬಹಳ ಚೆಲುವಾದ ಕಾರ್ಯಗಳನ್ನು ಮಾಡುತ್ತದೆ:**
+- **ಸ್ಥಳೀಯ ಸರ್ವರ್ ಪ್ರಾರಂಭಿಸುತ್ತದೆ** `http://localhost:5000` ನಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಗೇಮ್ ಪರೀಕ್ಷಿಸಬಹುದಾಗಿದೆ
+- **ನಿಮ್ಮ ಎಲ್ಲಾ ಫೈಲ್ಗಳ ಸರಿಯಾದ ಸೇವೆಯನ್ನು ನೀಡುತ್ತದೆ** ಅಂದರೆ ನೀವು ಬ್ರೌಸರ್ನಲ್ಲಿ ಸರಿಯಾಗಿ ಲೋಡ್ ಮಾಡಬಹುದು
+- **ನಿಮ್ಮ ಫೈಲ್ಗಳಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ನೋಡಿಕೊಳ್ಳುತ್ತದೆ** ಆದ್ದರಿಂದ ನೀವು ಸುಗಮವಾಗಿ ಅಭಿವೃದ್ಧಿ ಮಾಡಬಹುದು
+- **ನಿಮಗೆ** ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ ಪರಿಸರವನ್ನು ನೀಡುತ್ತದೆ ಎಲ್ಲವನ್ನೂ ಪರೀಕ್ಷಿಸಲು
+
+> 💡 **ಟಿಪ್ಪಣಿ**: ಆರಂಭದಲ್ಲಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಖಾಲಿ ಪುಟವನ್ನು ತೋರಿಸುತ್ತದೆ – ಇದು ಅಪೇಕ್ಷಿತ. ನೀವು ಕೋಡ್ ಸೇರಿಸುವಂತೆ, ಬ್ರೌಸರ್ ಅನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿ ಬದಲಾವಣೆಗಳನ್ನು ನೋಡಿ. ಈ ಪುನರಾವೃತ ಬೆಳವಣಿಗೆ ವಿಧಾನ NASA ಯವರು ಅಪೊಲೊ ಗೈಡನ್ಸ್ ಕಂಪ್ಯೂಟರ್ ನಿರ್ಮಿಸಲಾಗಿದಾಗ ಪ್ರತಿಯೊಂದು ಭಾಗದ ಪರೀಕ್ಷೆಯ ರೀತಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ – ಸಮಗ್ರ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಸೇರಿಸುವ ಮುನ್ನ.
+
+### ಕೋಡ್ ಸೇರಿಸಿ
+
+ಕೆಳಗಿನ ಕಾರ್ಯಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು `your-work/app.js` ನಲ್ಲಿ ಅಗತ್ಯವಿರುವ ಕೋಡ್ ಸೇರಿಸಿ:
+
+1. **ಕಪ್ಪು ಹಿನ್ನೆಲೆಯೊಂದಿಗೆ ಕ್ಯಾನ್ವಾಸ್ ಬಿಡಿಸಿ**
+ > 💡 **ಹೀಗೆ ಮಾಡಿ**: `/app.js` ನಲ್ಲಿ TODO ಅನ್ನು ಹುಡುಕಿ ಮತ್ತು ಕೇವಲ ಎರಡು ಸಾಲುಗಳನ್ನು ಸೇರಿಸಿ. `ctx.fillStyle` ಅನ್ನು ಕಪ್ಪು ಆಗಿ ಸೆಟ್ ಮಾಡಿ, ನಂತರ (0,0) ರಿಂದ ಪ್ರಾರಂಭಿಸಿ ನಿಮ್ಮ ಕ್ಯಾನ್ವಾಸ್ ಆಯಾಮಗಳೊಂದಿಗೆ `ctx.fillRect()` ಬಳಸಿ. ಸುಲಭ!
+
+2. **ಗೇಮ್ ಟೆಕ್ಸ್ಚರ್ಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ**
+ > 💡 **ಹೀಗೆ ಮಾಡಿ**: `await loadAsset()` ಬಳಸಿ ನಿಮ್ಮ ಪ್ಲೇಯರ್ ಮತ್ತು ಶತ್ರು ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ. ಅವುಗಳನ್ನು ಖಚಿತವಾಗಿ ನಂತರ ಬಳಸಲು ವೇರಿಯೇಬಲಿನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ. ನೆನಪಿಡಿ – ನೀವು ಅವುಗಳನ್ನು ಬಿಡಿಸುವವರೆಗೂ ಅವು ಕಾಣಿಸುವುದಿಲ್ಲ!
+
+3. **ಹೀರೋ ಹಡಗು ಕೇಂದ್ರದ ಕೆಳಭಾಗದಲ್ಲಿ ಬಿಡಿಸಿ**
+ > 💡 **ಹೀಗೆ ಮಾಡಿ**: `ctx.drawImage()` ಬಳಸಿ ನಿಮ್ಮ ಹೀರೋ ಹಡಗು ಸ್ಥಾನದೊಂದಿಗೆ ಬಿಡಿಸಿ. x-ಸ್ಥಾನದಿಗಾಗಿ, `canvas.width / 2 - 45` ಬಳಸಿ ಮಧ್ಯದಲ್ಲಿ ಇರಿಸಲು, ಮತ್ತು y-ಸ್ಥಾನದಿಗಾಗಿ `canvas.height - canvas.height / 4` ಬಳಸಿ ಕೆಳಭಾಗದಲ್ಲಿ ಇರಿಸಲು ಪ್ರಯತ್ನಿಸಿ.
+
+4. **5×5 ಶತ್ರು ಹಡಗಿನ ರೂಪರೇಷೆಯನ್ನು ಬಿಡಿಸಿ**
+ > 💡 **ಹೀಗೆ ಮಾಡಿ**: `createEnemies` ಫಂಕ್ಷನ್ನಿನಲ್ಲಿ ನಕಲಿ ಲೂಪ್ ಸ್ಥಾಪಿಸಿ. ಆತ್ಮೀಯರಿಗೆ ಅಂತರ ಮತ್ತು ಸ್ಥಾನಗಳನ್ನು ಗಣಿತ ಮಾಡಲು ನಿಮ್ಮನ್ನು ಅತ್ಯಂತ ಸಹಾಯಕವಾಗಿರಬೇಕು – ನಾನು ನಿಮಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಹೇಗೆ ಮಾಡೋದು ತೋರಿಸುತ್ತೇನೆ!
+
+ಮೊದಲು, ಸರಿಯಾದ ಶತ್ರು ರೂಪರೇಷೆ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಸ್ಥಿರಾಂಕಗಳನ್ನು ಸ್ಥಾಪಿಸಿ:
+
+```javascript
+const ENEMY_TOTAL = 5;
+const ENEMY_SPACING = 98;
+const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
+const START_X = (canvas.width - FORMATION_WIDTH) / 2;
+const STOP_X = START_X + FORMATION_WIDTH;
+```
+
+**ಈ ಸ್ಥಿರಾಂಕಗಳು ಏನು ಮಾಡುತ್ತವೆ:**
+- ನಾವು ಪ್ರತಿ ಸಾಲಿನಲ್ಲಿ ಮತ್ತು ಕಾಲಮ್ನಲ್ಲಿ 5 ಶತ್ರುಗಳನ್ನು (ಏಕ್ ಸುಂದರ 5×5 ಜಾಲ) ಸೆಟ್ ಮಾಡುತ್ತೇವೆ
+- ಶತ್ರುಗಳ ನಡುವೆ ಎಷ್ಟು ಕಲ್ಲು ಹಾಕಬೇಕು ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ ಆದ್ದರಿಂದ ಅವು ಅಲೆಮ notícia ne ಈಗಾ
+- ನಮ್ಮ ಸಂಪೂರ್ಣ ರೂಪರೇಷೆಯ ಅಗಲವನ್ನು ಲೆಕ್ಕಿಸುತ್ತೇವೆ
+- ರೂಪರೇಷೆ ಕೇಂದ್ರಿತವಾಗಿದ್ದು ಹೊರ ಅನ್ನುವ ಪ್ರಾರಂಭ ಮತ್ತು ಕೊನೆ ಸ್ಥಳವನ್ನು ನಾವು ಕಂಡುಹಿಡಿಯುತ್ತೇವೆ
+
+```mermaid
+flowchart LR
+ A["ಕ್ಯಾನ್ವಾಸ್ ಅಗಲ: 1024px"] --> B["ಫಾರ್ಮೇಷನ್ ಅಗಲ: 490px"]
+ B --> C["ಪ್ರಾರಂಭ X: 267px"]
+ C --> D["ಶತ್ರು ನಡುವಣ: 98px"]
+
+ subgraph "5x5 ಶತ್ರು ಫಾರ್ಮೇಷನ್"
+ E["ಸಾಲು 1: Y=0"]
+ F["ಸಾಲು 2: Y=50"]
+ G["ಸಾಲು 3: Y=100"]
+ H["ಸಾಲು 4: Y=150"]
+ I["ಸಾಲು 5: Y=200"]
+ end
+
+ subgraph "ಕಾಲಮ್ ಮಧ್ಯಂತರ"
+ J["ಕಾಲಮ್ 1: X=267"]
+ K["ಕಾಲಮ್ 2: X=365"]
+ L["ಕಾಲಮ್ 3: X=463"]
+ M["ಕಾಲಮ್ 4: X=561"]
+ N["ಕಾಲಮ್ 5: X=659"]
+ end
+
+ style A fill:#e1f5fe
+ style B fill:#e8f5e8
+ style C fill:#fff3e0
+```
+ನಂತರ, ಶತ್ರು ರೂಪರೇಷೆಯನ್ನು ಬಿಡಿಸಲು ನಕಲಿ ಲೂಪ್ಗಳನ್ನು ರಚಿಸಿ:
+
+```javascript
+for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
+ for (let y = 0; y < 50 * 5; y += 50) {
+ ctx.drawImage(enemyImg, x, y);
+ }
+}
+```
+
+**ಈ ನಕಲಿ ಲೂಪ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- ಹೊರಗಿನ ಲೂಪ್ ನಮ್ಮ ರೂಪರೇಷೆಯಲ್ಲಿ ಎಡದಿಂದ ಬಲಕ್ಕೆ ಚಲಿಸುತ್ತದೆ
+- ಒಳಗಿನ ಲೂಪ್ ಮೇಲಿನಿಂದ ಕೆಳಗೆ ಹೋಗುತ್ತದೆ, ಸ್ವಚ್ಛವಾದ ಸಾಲುಗಳನ್ನು ರಚಿಸಲು
+- ನಾವು ಲೆಕ್ಕಹಾಕಿದ ನಿಖರ x,y ಸಂಯೋಜನೆಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಶತ್ರು ಸ್ಪ್ರೈಟ್ ಬಿಡಿಸುತ್ತೇವೆ
+- ಎಲ್ಲವನ್ನೂ ಸಮವೊಂದು ವೈಯಕ್ತಿಕವಾಗಿ ಇಡಲಾಗುತ್ತದೆ ಆಗ ಅದು ವೃತ್ತಿಪರ ಮತ್ತು ವ್ಯವಸ್ಥಿತವಾಗಿ ಕಾಣುತ್ತದೆ
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**ಗೇಮ್ ರೆಂಡರಿಂಗ್ ನಿಪುಣತೆ**: ಸಂಪೂರ್ಣ ರೆಂಡರಿಂಗ್ ವ್ಯವಸ್ಥೆಯ ಅರ್ಥವನ್ನು ಪರಿಶೀಲಿಸಿ:
+- ✅ ಗೇಮ್ ಪ್ರಾರುಂಭದಲ್ಲಿ ಅಸಿಂಕ್ರೊನಸ್ ಚಿತ್ರ ಲೋಡ್ ಮಾಡುವುದು UI ನಿರ್ಬಂಧವನ್ನು ಹೇಗೆ ತಡೆಗಟ್ಟುತ್ತದೆ?
+- ✅ ನಾವು ಕೇವಲ ನೇರಾಂಕಗಳನ್ನು ಬರೆದೆಲ್ಲದೇ ಸ್ಥಿರಾಂಕಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಶತ್ರು ರೂಪರೇಷೆಯ ಸ್ಥಾನಗಳನ್ನು ಲೆಕ್ಕಿಸುವುದು ಯಾಕೆ?
+- ✅ 2D ರೆಂಡರಿಂಗ್ ಕಂಟೆಕ್ಸ್ಟ್ ಬಿಡಿಸುವ ಕಾರ್ಯಗಳಲ್ಲಿನ ಪಾತ್ರವೇನು?
+- ✅ ನಕಲಿ ಲೂಪ್ಗಳು ಸಂಘಟಿತ ಸ್ಪ್ರೈಟ್ ರೂಪರೇಷೆಗಳನ್ನು ಹೇಗೆ ಸೃಷ್ಟಿಸುತ್ತವೆ?
+
+**ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಗಣನೆಗಳು**: ನಿಮ್ಮ ಗೇಮ್ ಈಗ ತೋರಿಸುತ್ತದೆ:
+- **ಕಾರ್ಯನಿರತ ಆಸ್ತಿ ಲೋಡಿಂಗ್**: Promise ಆಧಾರಿತ ಚಿತ್ರ ನಿರ್ವಹಣೆ
+- **ಸಂಘಟಿತ ರೆಂಡರಿಂಗ್**: ರಚಿತ ಬಿಡಿಸುವ ಕಾರ್ಯಗಳು
+- **ಗಣಿತೀಯ ಸ್ಥಾನ ನಿರ್ಧಾರ**: ಲೆಘಿಗೊಳಿಸಿದ ಸ್ಪ್ರೈಟ್ ಸ್ಥಳ
+- **ದೋಷ ನಿರ್ವಹಣೆ**: ಸುಗಮ ವಿಫಲ ನಿರ್ವಹಣೆ
+
+**ದೃಶ್ಯ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ತತ್ವಗಳು**: ನೀವು ಕಲಿತಿದ್ದೀರಿ:
+- **ಸಂಯೋಜನೆ ವ್ಯವಸ್ಥೆಗಳು**: ಗಣಿತವನ್ನು ಪರದೆ上的 ದಿನಾಂಕಗಳಿಗೆ ಅನುವಾದಿಸುವುದು
+- **ಸ್ಪ್ರೈಟ್ ವ್ಯವಸ್ಥಾಪನೆ**: ಆಟದ ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಲೋಡ್ ಮತ್ತು ಪ್ರದರ್ಶನ ಮಾಡುವುದು
+- **ಘടನೆಯ ಆಲ್ಗೊರಿತಮ್ಗಳು**: ಸಂಘಟಿತ ವಿನ್ಯಾಸಗಳಿಗಾಗಿ ಗಣಿತೀಯ ಮಾದರಿಗಳು
+- **ಏಸಿಂಕ್ ಕಾರ್ಯಾಚರಣೆಗಳು**: ಸಣ್ಣ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
+
+## ಫಲಿತಾಂಶ
+
+ಪೂರ್ಣವಾದ ಫಲಿತಾಂಶ ಹೀಗಿರಬೇಕು:
+
+
+
+## ಪರಿಹಾರ
+
+ದಯವಿಟ್ಟು ಮೊದಲು ನೀವು ತಾನೇ ಪ್ರಯತ್ನಿಸಿ, ಆದರೆ ನೀವು ಅटकಿಕೊಂಡರೆ [ಪರಿಹಾರ](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) ನೋಡಿರಿ
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸ್ಪರ್ಧೆ 🚀
+
+ಕೆಳಗಿನ ಸವಾಲನ್ನು ನಿಭಾಯಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ನೀವು ಕಲಿತ Canvas API ತಂತ್ರಗಳನ್ನು ಉಪಯೋಗಿಸಿಕೊಂಡು ನಿಮ್ಮ ಸ್ಪೇಸ್ ಆಟದ ಕ್ಯಾನ್ವಾಸ್ಗೆ ದೃಶ್ಯ ಪರಿಣಾಮಗಳು ಮತ್ತು ಸಂವಹನಾತ್ಮಕ ಅಂಶಗಳನ್ನು ಸೇರಿಸಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** `enhanced-canvas.html` ಎಂಬ ಹೊಸ ಕಡತವನ್ನು ಸೃಷ್ಟಿಸಿ, ಇದರಲ್ಲಿ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಅನಿಮೆಟ್ ಸ್ಟಾರ್ಗಳೊಂದಿಗೆ ಕ್ಯಾನ್ವಾಸ್ ಇದೆ, ಹೀರೋ ಶಿಪ್ ಗಾಗಿ ನಿಡುಗು health ಬಾರ್ ಆಗಿದ್ದು, ಮತ್ತು ಶತ್ರು ಶಿಪ್ ಗಳು ನಿಧಾನವಾಗಿ ಕೆಳಗೆ ಸರಿಯುತ್ತವೆ. ಅಂಧಕಾರಸ್ಥಳ ಹಾಗೂ ಆಕಾಶದ ಛಾಯಾಳಿಕೆಗಾಗಿ ಸಾಂಪ್ರದಾಯಿಕ ಸ್ಥಾನಗಳು ಮತ್ತು ಅಪಾರದೆ ನಿಯಂತ್ರಣ ಆಧಾರಿತ ಕಾಮಗಾರಿ ಮಾಡುತ್ತಿರುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಜೊತೆಗೆ ಅಂತಹ health ಬಾರ್ ಆರೋಗ್ಯ ಮಟ್ಟದ ಆಧಾರದ ಮೇಲೆ ಬಣ್ಣ (ಹಸಿರು > ಹಳದಿ > ಕೆಂಪು) ಬದಲಾಯಿಸುವುದು ಹಾಗೂ ವಿವಿಧ ವೇಗದಲ್ಲಿ ಶತ್ರು ಹಡಗನ್ನು ಕೆಳಗೆ ಚಲಿಸುವ ಅನಿಮೇಶನ್ ಮಾಡುವುದು ಸೇರಿಸಿ.
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಇನ್ನು ತಿಳಿಯಿರಿ.
+
+## 🚀 ಸವಾಲು
+
+ನೀವು 2D ಸ್ಪಷ್ಟ ಕ್ಯಾನ್ವಾಸ್ API ಬಳಸಿ ಚಿತ್ರಿಸುವಿಕೆ ಕಲಿದೀರಿ; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ನೋಡಿರಿ ಮತ್ತು 3D ವಸ್ತುವನ್ನು ಚಿತ್ರಿಸಲು ಪ್ರಯತ್ನಿಸಿ.
+
+## ಪಠ್ಯದ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಪಠ್ಯದ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/32)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+Canvas API ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ [ಇದನ್ನು ಓದಿಕೊಳ್ಳಿ](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದುದು**
+- [ ] ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್ ತೆರೆಯಿರಿ ಮತ್ತು `document.createElement('canvas')` ಬಳಸಿ ಕ್ಯಾನ್ವಾಸ್ ಅಂಶವನ್ನು ಸೃಷ್ಟಿಸಿ
+- [ ] `fillRect()` ಬಳಸಿ ಕ್ಯಾನ್ವಾಸ್ ಕಾಂಟೆಕ್ಸ್ಟ್ನಲ್ಲಿ ಒಂದು ಚತೆಗೆഴಿದಂತೆ ರಚಿಸಿ
+- [ ] ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸಲು `fillStyle` ಗುಣಲಕ್ಷಣವನ್ನು ಪ್ರಯೋಗಿಸಿ
+- [ ] `arc()` ವಿಧಾನದಿಂದ ಸರಳ ವೃತ್ತವನ್ನು ಚಿತ್ರಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದುದು**
+- [ ] ಪಠ್ಯದ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಕ್ಯಾನ್ವಾಸ್ ipilẹಭೂತಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ
+- [ ] ವಿಭಿನ್ನ ಆಕಾರಗಳು ಮತ್ತು ಬಣ್ಣಗಳೊಂದಿಗೆ ಕ್ಯಾನ್ವಾಸ್ ಚಿತ್ರಿಕಾ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸಿ
+- [ ] ನಿಮ್ಮ ಆಟಕ್ಕಾಗಿ ಚಿತ್ರ ಲೋಡ್ ಮತ್ತು ಸ್ಪ್ರೈಟ್ ರೆಂಡರಿಂಗ್ ಅನುಷ್ಟಾನ ಮಾಡಿ
+- [ ] ಸಾದಾರಣ ಅನಿಮೆಶನ್ ಸೃಷ್ಟಿಸಿ, ಬಸ್ತುಗಳನ್ನು ಕ್ಯಾನ್ವಾಸ್ ಮೇಲೆ ಚಲಿಸುವಂತೆ ಮಾಡಿ
+- [ ] ಮಾಪನ, ಸುತ್ತು, ಸ್ಥಳಾಂತರ ರೀತಿ ಕ್ಯಾನ್ವಾಸ್ ಪರಿವರ್ತನೆಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ಕ್ಯಾನ್ವಾಸ್ ಯಾತ್ರೆ**
+- [ ] ಸಜ್ಜುಗೊಂಡ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಸ್ಪ್ರೈಟ್ ಅನಿಮೆಶನ್ಗಳೊಂದಿಗೆ ಸ್ಪೇಸ್ ಆಟದ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಗ್ರೇಡಿಯೆಂಟ್, ಮಾದರಿಗಳು ಮತ್ತು ಕಾಂಪೊಸಿಟಿಂಗ್ ಮುಂತಾದ ಉನ್ನತ ಮಟ್ಟದ ಕ್ಯಾನ್ವಾಸ್ ತಂತ್ರಗಳನ್ನು ಮಾಸ್ಟರ್ ಮಾಡಿ
+- [ ] ಡೇಟಾ ಪ್ರದರ್ಶನಕ್ಕಾಗಿ ಇಂಟರಾಕ್ಟಿವ್ ವಿಸುಯಲೈಜೆಷನ್ ರಚಿಸಿ
+- [ ] ಸ್ಮೂತ್ ಕಾರ್ಯಕ್ಷಮತೆಯಿಗಾಗಿ ಕ್ಯಾನ್ವಾಸ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ
+- [ ] ವಿವಿಧ ಉಪಕರಣಗಳೊಂದಿಗೆ ಚಿತ್ರ ಮತ್ತು ಚಿತ್ರಣ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ಸೃಜನಶೀಲ ಕೋಡಿಂಗ್ ಮಾದರಿಗಳು ಮತ್ತು ಜನರೇಟಿವ್ ಆರ್ಟ್ ಬಗ್ಗೆ ಅನ್ವೇಷಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ಗ್ರಾಫಿಕ್ಸ್ ಪರಿಣತಿ**
+- [ ] Canvas 2D ಮತ್ತು WebGL ಬಳಸಿ ಸಂಕೀರ್ಣ ದೃಶ್ಯ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ಗ್ರಾಫಿಕ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ತತ್ವಗಳು ಮತ್ತು ಶೇಡರ್ ಮೂಲಭೂತಗಳನ್ನು ಕಲಿಯಿರಿ
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಗ್ರಂಥಾಲಯಗಳು ಮತ್ತು ವಿಸುಯಲೈಜೇಶನ್ ಉಪಕರಣಗಳಲ್ಲಿ ಕೊಡುಗೆ ನೀಡಿರಿ
+- [ ] ದೃಶ್ಯ ಗುಣಮಟ್ಟ ಹೆಚ್ಚಿಸಲು ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್ನಲ್ಲಿ ಪರಿಣತಿ ಪಡೆಯಿರಿ
+- [ ] ಕ್ಯಾನ್ವಾಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಮತ್ತು ಕಂಪ್ಯೂಟರ್ ಗ್ರಾಫಿಕ್ಸ್ ಬಗ್ಗೆ ಶೈಕ್ಷಣಿಕ ವಿಷಯವನ್ನು ರಚಿಸಿ
+- [ ] ದೃಶ್ಯ ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುವಲ್ಲಿ ಸಹಾಯ ಮಾಡುವ ಗ್ರಾಫಿಕ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ತಜ್ಞರಾಗಿ ಬೆಳೆಯಿರಿ
+
+## 🎯 ನಿಮ್ಮ ಕ್ಯಾನ್ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಪರಿಣತಿ ಟೈಮ್ಲೈನ್
+
+```mermaid
+timeline
+ title ಕ್ಯಾನ್ವಾಸ್ API ಕಲ-learning ಪ್ರಗತಿ
+
+ section ಕ್ಯಾನ್ವಾಸ್ ಮೂಲಭೂತಗಳು (15 ನಿಮಿಷಗಳು)
+ ಮೂಲಭೂತ ಕಾರ್ಯಾಚರಣೆಗಳು: ಪರಿಕರ ಉಲ್ಲೇಖ
+ : 2D ಕಂಟೆಕ್ಸ್ಟ್ ಪ್ರವೇಶ
+ : ಸಂಯೋಜನೆ ವ್ಯವಸ್ಥೆ
+ : ಸರಳ ಆಕಾರ ರೇಖಾಚಿತ್ರ
+
+ section ರೇಖಾಚಿತ್ರ ತಂತ್ರಗಳು (20 ನಿಮಿಷಗಳು)
+ ಗ್ರಾಫಿಕ್ಸ್ ಮೂಲಭೂತಗಳು: ಚೌಕಟ್ಟುಗಳು ಮತ್ತು ವೃತ್ತಗಳು
+ : ಬಣ್ಣಗಳು ಮತ್ತು ಶೈಲಿಗಳು
+ : ಪಠ್ಯದ ರೆಂಡರಿಂಗ್
+ : ಮಾರ್ಗ ಕಾರ್ಯಾಚರಣೆಗಳು
+
+ section ಚಿತ್ರ ನಿರ್ವಹಣೆ (25 ನಿಮಿಷಗಳು)
+ ಆಸ್ತಿ ನಿರ್ವಹಣೆ: ಚಿತ್ರ ವಸ್ತು ಸೃಷ್ಟಿ
+ : ಅಸಿಂಕ್ರೋನಸ್ ಲೋಡಿಂಗ್ ಮಾದರಿಗಳು
+ : ದೋಷ ನಿರ್ವಹಣೆ
+ : ಪ್ರದರ್ಶನ оптимೈಜೇಶನ್
+
+ section ಆಟದ ಗ್ರಾಫಿಕ್ಸ್ (30 ನಿಮಿಷಗಳು)
+ ಸ್ಪ್ರೈಟ್ ರೆಂಡರಿಂಗ್: ಸ್ಥಾನಸ್ಥಾಪನಾ ಅಲ್ಗೋರಿಧಮ್ಗಳು
+ : ವಿನ್ಯಾಸ ಲೆಕ್ಕಾಚಾರಗಳು
+ : ದೃಶ್ಯ ಸಂಯೋಜನೆ
+ : ಫ್ರೇಮ್ ರೆಂಡರಿಂಗ್
+
+ section ಉನ್ನತ ತಂತ್ರಗಳು (40 ನಿಮಿಷಗಳು)
+ ದೃಶ್ಯ ಪರಿಣಾಮಗಳು: ಪರಿವರ್ತನೆಗಳು
+ : ಅನಿಮೇಷನ್ಗಳು
+ : ಲೇಯರಿಂಗ್
+ : ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+
+ section ಪ್ರದರ್ಶನ (35 ನಿಮಿಷಗಳು)
+ ಸ್ವೀಕೃತಿ: ಪರಿಣಾಮಕಾರಿ ರೇಖಾಚಿತ್ರ
+ : ಮೆಮೊರಿ ನಿರ್ವಹಣೆ
+ : ಫ್ರೇಮ್ ದರ ನಿಯಂತ್ರಣ
+ : ಆಸ್ತಿ ಕ್ಯಾಶಿಂಗ್
+
+ section ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು (1 ವಾರ)
+ ಉತ್ಪಾದನಾ ಗ್ರಾಫಿಕ್ಸ್: WebGL ಏಕೀಕರಣ
+ : ಕ್ಯಾನ್ವಾಸ್ ಲೈಬ್ರರಿಗಳು
+ : ಆಟ ಎಂಜಿನ್ಗಳು
+ : ವೇದಿಕೆಗಳಾದ್ಯಾಂತ ಪರಿಗಣನೆಗಳು
+
+ section ಉನ್ನತ ಗ್ರಾಫಿಕ್ಸ್ (1 ತಿಂಗಳು)
+ ವಿಶಿಷ್ಟ ಅನ್ವಯಿಕೆಗಳು: ಡೇಟಾ ದೃಶ್ಯೀಕರಣ
+ : ಸಂವಹನ ಕಲೆಯು
+ : ನಿಜ ಸಮಯ ಪರಿಣಾಮಗಳು
+ : 3D ಗ್ರಾಫಿಕ್ಸ್
+```
+### 🛠️ ನಿಮ್ಮ ಕ್ಯಾನ್ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಟೂಲ್ಕಿಟ್ ಸಾರಾಂಶ
+
+ಈ ಪಾಠದ ನಂತರ, ನಿಮಗಿದ್ದು:
+- **ಕ್ಯಾನ್ವಾಸ್ API ಪರಿಣತಿ**: 2D ಗ್ರಾಫಿಕ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಸಂಪೂರ್ಣ ಅರಿವು
+- **ಸಂಯೋಜನೆ ಗಣಿತಶಾಸ್ತ್ರ**: ನಿಖರ ಸ್ಥಾನ ನಿರ್ಧಾರ ಮತ್ತು ವಿನ್ಯಾಸ ಆಲ್ಗೊರಿತಮ್ಗಳು
+- **ಆಸ್ತಿ ನಿರ್ವಹಣೆ**: ವೃತ್ತಿಪರ ಚಿತ್ರ ಲೋಡಿಂಗ್ ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆ
+- **ರೆಂಡರಿಂಗ್ ಪೈಪ್ಲೈನ್**: ದೃಶ್ಯ ರಚನೆಯ ಸಿದ್ಧಾಂತಗೊಳಿಸಿದ ವಿಧಾನ
+- **ಆಟ ಗ್ರಾಫಿಕ್ಸ್**: ಸ್ಪ್ರೈಟ್ ಸ್ಥಾನದ ನಿರ್ಧಾರ ಮತ್ತು ರೂಪ ರಚನೆ ಗಣನೆಗಳು
+- **ಏಸಿಂಕ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಸ್ಮೂತ್ ಕಾರ್ಯಾಚರಣೆಯ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿಗಳು
+- **ದೃಶ್ಯಾತ್ಮಕ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಗಣಿತ ತತ್ವಗಳನ್ನು ಪರದೆ上的 ಗ್ರಾಫಿಕ್ಸ್ಗೆ ಅನುವಾದಿಸುವುದು
+
+**ವಾಸ್ತವಿಕ ಜಗತ್ತಿನ ಅನ್ವಯಿಕೆಗಳು:** ನಿಮ್ಮ ಕ್ಯಾನ್ವಾಸ್ ಹಲವಾರು ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ಉಪಯೋಗವಾಗುತ್ತದೆ:
+- **ಡೇಟಾ ವಿಸುಯಲೈಜೇಶನ್**: ಚಾರ್ಟ್ ಗಳು, ಗ್ರಾಫ್ ಗಳು ಮತ್ತು ಸಂವಹನಾತ್ಮಕ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಗಳು
+- **ಆಟ ಅಭಿವೃದ್ಧಿ**: 2D ಆಟಗಳು, ಸಿಮ್ಯುಲೇಶನ್ಗಳು ಮತ್ತು ಸಂವಹನಾತ್ಮಕ ಅನುಭವಗಳು
+- **ಡಿಜಿಟಲ್ ಆರ್ಟ್**: ಸೃಜನಶೀಲ ಕೋಡಿಂಗ್ ಮತ್ತು ಜನರೇಟಿವ್ ಆರ್ಟ್ ಪರಿಯೋಜನೆಗಳು
+- **UI/UX ವಿನ್ಯಾಸ**: ಕಸ್ಟಮ್ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಸಂವಹನಾತ್ಮಕ ಅಂಶಗಳು
+- **ಶೈಕ್ಷಣಿಕ ಸಾಫ್ಟ್ವೇರ್**: ದೃಶ್ಯלמידನ ಉಪಕರಣಗಳು ಮತ್ತು ಸಿಮ್ಯುಲೇಶನ್ಗಳು
+- **ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ಗತಿಶೀಲ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ರಿಯಲ್ ಟೈಮ್ ವಿಸುಯಲೈಜೇಶನ್ ಗಳು
+
+**ಪ್ರೊಫೆಷನಲ್ ಕೌಶಲ್ಯಗಳು**: ನೀವು ಈಗ ಮಾಡಬಹುದಾಗಿದೆ:
+- **ನಿರ್ಮಿಸಿ** ಹೊರಗಿನ ಗ್ರಂಥಾಲಯಗಳಿಲ್ಲದೆ ಕಸ್ಟಮ್ ಗ್ರಾಫಿಕ್ಸ್ ಪರಿಹಾರಗಳನ್ನು
+- ** ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿ** ಸ್ಮೂತ್ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯದಕ್ಷತೆಯನ್ನು
+- **ಡಿಬಗ್ ಮಾಡಿ** ಸಂಕೀರ್ಣ ದೃಶ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಬಳಸಿ
+- ** ವಿನ್ಯಾಸ ಮಾಡಿ** ಗಣಿತ ತತ್ವಗಳನ್ನು ಬಳಸಿಕೊಂಡು ವಿಸ್ತರಿಸಬಹುದಾದ ಗ್ರಾಫಿಕ್ಸ್ ವ್ಯವಸ್ಥೆಗಳನ್ನು
+- **ಸ್ಪರ್ಶಿಸಿ** ಸಾರಿಕೇತರ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಫ್ರೇಮ್ವರ್ಕ್ಗಳೊಡನೆ ಕ್ಯಾನ್ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಸಂಯೋಜಿಸಿ
+
+**ನೀವು ಮಾಸ್ಟರ್ ಮಾಡಿದ ಕ್ಯಾನ್ವಾಸ್ API ವಿಧಾನಗಳು:**
+- **ಅಂಶ ನಿರ್ವಹಣೆ**: getElementById, getContext
+- **ಚಿತ್ರಣ ಕಾರ್ಯಾಚರಣೆಗಳು**: fillRect, drawImage, fillStyle
+- **ಆಸ್ತಿ ಲೋಡಿಂಗ್**: ಚಿತ್ರ ವಸ್ತುಗಳು, Promise ಮಾದರಿಗಳು
+- **ಗಣಿತೀಯ ಸ್ಥಾನ ನಿರ್ಧಾರ**: ಸಂಯೋಜನೆ ಲೆಕ್ಕಾಚಾರಗಳು, ರೂಪ ರಚನೆ ಆಲ್ಗೊರಿಥಮ್ಗಳು
+
+**ಮುಂದಿನ ಹಂತ:** ನೀವು ಅನಿಮೇಶನ್, ಬಳಕೆದಾರ ಸಂವೇದನೆ, ಘರ್ಷಣೆ ಪತ್ತೆಮಾಡುವಿಕೆ ಅಥವಾ 3D ಗ್ರಾಫಿಕ್ಸ್ಗಾಗಿ WebGL ಅನ್ನು ಅನ್ವೇಷಿಸಲು ಸಿದ್ದರಿದ್ದೀರಿ!
+
+🌟 **ಅರ್ಜಿತರ ಸಾಧನೆ:** ನೀವು ಮೂಲಭೂತ Canvas API ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಉಪಯೋಗಿಸಿ ಸಂಪೂರ್ಣ ಆಟ ರೆಂಡರಿಂಗ್ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಿ!
+
+## ನಿಯೋಜನೆ
+
+[Canvas API ilə ಆಟ ಆಡಿರಿ](assignment.md)
+
+---
+
+
+**ಅಸ್ವೀಕಾರ**:
+ಈ ದಾಖಲೆ AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಉಪಯೋಗಿಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಿಖರತೆಯನ್ನು ನಾವು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರದಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಾಖಲೆ ಅದರ ಸ್ವದೇಶಿ ಭಾಶೆಯಲ್ಲಿ ಅಧಿಪ್ರಧಾನ ಮೂಲವಾಗಿರಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗೆ ಹೋರಸದ ಮಾನವನ ಭಾಷಾಂತರ ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರದಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥ ತಪ್ಪುಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತಗೊಳ್ಳುವುದಕ್ಕೆ ನಾವು ಜವಾಬ್ದಾರಿಗಳಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/2-drawing-to-canvas/assignment.md b/translations/kn/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 000000000..319c12756
--- /dev/null
+++ b/translations/kn/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,83 @@
+
+# ನಿಯೋಜನೆ: ಕ್ಯಾನ್ವಾಸ್ API ಅನ್ನು ಅನ್ವೇಷಿಸಿ
+
+## ಕಲಿಕೆಯ ಉದ್ದೇಶಗಳು
+
+ಈ ನಿಯೋಜನೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸುವ ಮೂಲಕ, ನೀವು ಕ್ಯಾನ್ವಾಸ್ API ಮೂಲತತ್ವಗಳನ್ನು ತಿಳಿದುಕೊಂಡಿರುವುದು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು HTML5 ಕ್ಯಾನ್ವಾಸ್ ಬಳಸಿ ದೃಶ್ಯಾತ್ಮಕ ಅಂಶಗಳನ್ನು ರಚಿಸಲು ಸೃಜನಶೀಲ ಸಮಸ್ಯೆ ಪರಿಹಾರವನ್ನು ಅನ್ವಯಿಸುವುದನ್ನು ಪ್ರದರ್ಶಿಸುವಿರಿ.
+
+## ಸೂಚನೆಗಳು
+
+ನಿಮಗೆ ಆಸಕ್ತಿ ಇರುವ ಕ್ಯಾನ್ವಾಸ್ API ಯ ಒಂದು ಅಂಶವನ್ನು ಆಯ್ಕೆಮಾಡಿ ಅದರ ಸುತ್ತಲೂ ಆಕರ್ಷಕ ದೃಶ್ಯ ಪ್ರಾಜೆಕ್ಟ್ ರಚಿಸಿ. ಈ ನಿಯೋಜನೆ ನೀವು ಕಲಿತಿದೆ ಬದಲಾಯಿಸುವ ಚಿತ್ರಕಲೆ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಪ್ರಯೋಗಿಸುವಂತೆ ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮದೇ ಪ್ರತ್ಯೇಕವಾದ ಯಾವುದಾದರೂ ನಿರ್ಮಿಸಲು ವಿನಂತಿಸುತ್ತದೆ.
+
+### ಪ್ರಾಜೆಕ್ಟ್ ಕಲ್ಪನೆಗಳು ನಿಮಗೆ ಪ್ರೇರಣೆ ನೀಡಲು
+
+**ಭೌಮಿತೀಯ ಮಾದರಿಗಳು:**
+- **ರಚಿಸಿ** ಯಾದೃಚ್ಛಿಕ ಸ್ಥಾನಗಳಿಸುವಿಕೆಯಿಂದ ಚಂದಿರದ ನಕ್ಷತ್ರಗಳ ಅನಿಮೇಟೆಡ್ ಟ್ವಿಂಕ್ಲಿಂಗ್ ಗ್ಯಾಲಕ್ಸಿ
+- **ಆಯೋಜಿಸಿ** ಪುನರಾವರ್ತಿತ ಭೌಮಿತೀಯ ಆಕಾರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಆಸಕ್ತಿಕರ ಬಣ್ಣಾರಿತ್ರ
+- **ಕಟ್ಟಿಸಿ** ಸುತ್ತುವ, ಬಣ್ಣದ ಮಾದರಿಗಳೊಂದಿಗೆ ಕಲೈಡೋಸ್ಕೋಪ್ ಪರಿಣಾಮ
+
+**ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ಅಂಶಗಳು:**
+- **ವಿಕಸಿಸಿ** ಮೌಸ್ ಚಲನೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಚಿತ್ರಕಲೆ ಉಪಕರಣ
+- **ಅಳವಡಿಸಿ** ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಬಣ್ಣ ಬದಲಿಸುವ ಆಕಾರಗಳು
+- **ಆಯೋಜಿಸಿ** ಚಲಿಸುವ ಅಂಶಗಳೊಂದಿಗೆ ಸರಳ ಅನಿಮೇಷನ್ ಲೂಪ್
+
+**ಗೇಮ್-ಸಂಬಂಧಿತ ಗ್ರಾಫಿಕ್ಸ್:**
+- **ರಚಿಸಿ** ಸ್ಥಳ ಗೇಮ್ಗಾಗಿ ಸ್ಕ್ರოლಿಂಗ್ ಹಿನ್ನೆಲೆ
+- **ಕಟ್ಟಿಸಿ** ಸ್ಪೋಟಗಳು ಅಥವಾ ಜಾದೂ ಮಂತ್ರಗಳಂತಹ ಕಣ ಪರಿಣಾಮಗಳು
+- **ತಯಾರಿಸಿ** ಹಲವಾರು ಫ್ರೇಮ್ಗಳೊಂದಿಗೆ ಅನಿಮೇಟೆಡ್ ಸ್ಪ್ರಿಟ್ಗಳು
+
+### ಅಭಿವೃದ್ಧಿ ಮಾರ್ಗಸೂಚಿಗಳು
+
+**ಸಂದರ್ಬ ಮತ್ತು ಪ್ರೇರಣೆ:**
+- **ಬ್ರೌಸ್ ಮಾಡಿ** criatividade ಕಾನ್ವಾಸ್ ಉದಾಹರಣೆಗಳು (ಪ್ರೇರಣೆಗೆ, ನಕಲಿಗೆ ಅಲ್ಲ)
+- **ಅಧ್ಯಯನ ಮಾಡಿ** [ಕ್ಯಾನ್ವಾಸ್ API ಡಾಕ್ಯುಮೆಂಟೇಶನ್](https://developer.mozilla.org/docs/Web/API/Canvas_API) ಹೆಚ್ಚುವರಿ ವಿಧಾನಗಳಿಗಾಗಿ
+- **ಪ್ರಯೋಗಮಾಡಿ** ವಿಭಿನ್ನ ಚಿತ್ರಕಲೆ ಕಾರ್ಯಗಳು, ಬಣ್ಣಗಳು, ಆಗಮನ್ಗಳನ್ನು
+
+** ತಾಂತ್ರಿಕ ಅವಶ್ಯಕತೆಗಳು:**
+- **ಬಳಸಿ** ಸರಿಯಾದ ಕ್ಯಾನ್ವಾಸ್ ವ್ಯವಸ್ಥೆಯನ್ನು `getContext('2d')`ೊಂದಿಗೆ
+- **ಒಳಗೆ ಸೇರಿಸಿ** ನಿಮ್ಮ ಆದೇಶವನ್ನು ವಿವರಿಸುವ ಮಹತ್ವದ ಕಾಮೆಂಟ್ಗಳು
+- **ತಪಾಸಿಸಿ** ನಿಮ್ಮ ಸಂಹಿತೆಯನ್ನು ಪೂರ್ತಿ ಆಗುಹೋಗುವುದಿಲ್ಲ ಎಂದು ಖಾತ್ರಿ ಪಡಿಸಿ
+- **ಅನುಸರಿಸಿ** ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಿಂಟ್ಯಾಕ್ಸ್ (const/let, ಆಯರ್ ಫಂಕ್ಷನ್ಗಳು)
+
+**ಸೃಜನಶೀಲ ವ್ಯಕ್ತಪಡಿಸುವಿಕೆ:**
+- **ಕೇಂದ್ರೀಕರಿಸಿರಿ** ಒಬ್ಬ ಕ್ಯಾನ್ವಾಸ್ API ಫೀಚರ್ ಮೇಲೆ ಆದರೆ ಅದನ್ನು ಆಳವಾಗಿ ಅನ್ವೇಷಿಸಿ
+- **ನಿಮ್ಮದೇ ಸೃಜನಶೀಲ ತಿರುವನ್ನು ಸೇರಿಸಿರಿ** ಪ್ರಾಜೆಕ್ಟ್ ವೈಯಕ್ತಿಕವಾಗಿರಲು
+- **ಪರಿಗಣಿಸಿ** ನಿಮ್ಮ ರಚನೆ ಹೇಗೆ ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನಿನ ಭಾಗವಾಗಿರಬಹುದು
+
+### ಸಲ್ಲಿಕೆಯ ಮಾರ್ಗಸೂಚಿಗಳು
+
+ನೀವು ಪೂರ್ಣಗೊಳಿಸಿದ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಒಂದೇ HTML ಫೈಲ್ ಆಗಿ ಬಳಕೆದಾರರೊಳಗಿನ CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ಗಳೊಂದಿಗೆ ಸಲ್ಲಿಸಿ, ಅಥವಾ ಫೋಲ್ಡರ್ನಲ್ಲಿ ಬೇರೆ ಬೇರೆ ಫೈಲ್ಗಳಾಗಿ. ನಿಮ್ಮ ಸೃಜನಶೀಲ ಆಯ್ಕೆಗಳು ಮತ್ತು ನೀವು ಅನ್ವೇಷಿಸಿದ ಕ್ಯಾನ್ವಾಸ್ API ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ವಿವರಿಸುವ ಸಂಕ್ಷಿಪ್ತ ಕಾಮೆಂಟ್ ಸೇರಿಸಿ.
+
+## ಮಾಪಕ ಶಿಬಿರ
+
+| ಮಾನದಂಡಗಳು | ಅತಿ ಶ್ರೇಷ್ಠ | ಸೂಕ್ತ | ಸುಧಾರಣೆ ಬೇಕು |
+|-------------|--------------|---------|--------------|
+| **ತಾಂತ್ರಿಕ ಅನುಷ್ಠಾನ** | ಹಲವಾರು ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಸೃಜನಶೀಲವಾಗಿ ಕ್ಯಾನ್ವಾಸ್ API ಬಳಸಲಾಗಿದೆ, ಸಂಕೇತ ದೋಷರಹಿತವಾಗಿ ನಡೆಯುತ್ತಿದೆ, ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ವಯಿಸಿದೆ | ಸರಿಯಾಗಿ ಕ್ಯಾನ್ವಾಸ್ API ಬಳಸಲಾಗಿದೆ, ಸಂಕೇತವು ಸಣ್ಣ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ, ಮೂಲ ಅನುಷ್ಠಾನ | ಕ್ಯಾನ್ವಾಸ್ API ಪ್ರಯತ್ನಿಸಿದೆ ಆದರೆ ಸಂಕೇತದಲ್ಲಿ ದೋಷಗಳಿವೆ ಅಥವಾ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತಿಲ್ಲ |
+| **ಸೃಜನಶೀಲತೆ ಮತ್ತು ವಿನ್ಯಾಸ** | ಅತ್ಯಂತ ಮೂಲಭೂತ ಕಲ್ಪನೆ, ಪದಕ್ಷಿಣ ದೃಶ್ಯ ಆಕರ್ಷಣೆ, ಆಯ್ಕೆಮಾಡಿದ ಕ್ಯಾನ್ವಾಸ್ ಫೀಚರ್ ಆಳವಾದ ಅನ್ವೇಷಣೆಯನ್ನು ತೋರಿಸುತ್ತದೆ | ಕ್ಯಾನ್ವಾಸ್ ವೈಶಿಷ್ಟ್ಯಗಳ ಉತ್ತಮ ಬಳಕೆ ಕೆಲವು ಸೃಜನಶೀಲ ಅಂಶಗಳೊಂದಿಗೆ, ದೃಢ ದೃಶ್ಯ ಫಲಿತಾಂಶ | ಮೂಲ ಅನುಷ್ಠಾನ, ಅತ್ಯಲ್ಪ ಸೃಜನಶೀಲತೆ ಅಥವಾ ದೃಶ್ಯ ಆಕರ್ಷಣೆ |
+| **ಸಂಕೇತ ಗುಣಮಟ್ಟ** | ಉತ್ತಮ ಸಂಘಟಿತ, ಕಾಮೆಂಟ್ ಗಳೊಂದಿಗೆ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಸಂಕೇತ, ಪರಿಣಾಮಕಾರಿಯಾದ ಅಲ್ಗಾರಿಥಮ್ಗಳು | ಸ್ವಚ್ಛ ಸಂಕೇತ, ಕೆಲವು ಕಾಮೆಂಟ್ಗಳೊಂದಿಗೆ, ಮೂಲ ಕೋಡಿಂಗ್ ಮಾನದಂಡಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ | ಸಂಕೇತದ ಸಂಘಟನೆಯ ಕೊರತೆ, ಕನಿಷ್ಠ ಕಾಮೆಂಟ್ಗಳು, ಪರಿಣಾಮಕಾರಿವಲ್ಲದ ಅನುಷ್ಠಾನ |
+
+## ಪ್ರತಿಬಿಂಬ ಪ್ರಶ್ನೆಗಳು
+
+ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ಈ ಪ್ರಶ್ನೆಗಳನ್ನು ಪರಿಗಣಿಸಿ:
+
+1. **ನೀವು ಯಾವ ಕ್ಯಾನ್ವಾಸ್ API ವೈಶಿಷ್ಟ್ಯವನ್ನು ಆಯ್ಕೆ ಮಾಡಿಕೊಂಡಿರುತ್ತೀರಿ ಮತ್ತು ಏಕೆ?**
+2. **ಪ್ರಾಜೆಕ್ಟ್ ನಿರ್ಮಿಸುವಾಗ ನೀವು ಎದುರಿಸಿದ ಸವಾಲುಗಳು ಯಾವುವು?**
+3. **ಈ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನ್ ಅಥವಾ ಗೇಮ್ ಆಗಿ ಹೇಗೆ ವಿಸ್ತರಿಸಬಹುದು?**
+4. **ಮುಂದೆ ನೀವು ಯಾವ ಇನ್ನೂ ಕ್ಯಾನ್ವಾಸ್ API ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಇಚ್ಛಿಸುತ್ತೀರಿ?**
+
+> 💡 **ಪ್ರೋ ಟಿಪ್**: ಸರಳವಾದ ವಿಚಾರದಿಂದ ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ಕ್ರಮೇಣ ಸಂಕೀರ್ಣತೆಗೆ ಹೋಗಿ. ಒಳ್ಳೆಯದಾಗಿ ನಿರ್ವಹಿಸಲಾದ ಸರಳ ಪ್ರಾಜೆಕ್ಟ್ ಸರಿಯಾಗಿಲ್ಲದ ತುಂಬಾ ಮಹತ್ವಾಕಾಂಕ್ಷಿ ಪ್ರಾಜೆಕ್ಟ್ కన్నೆ ಉತ್ತಮ!
+
+---
+
+
+**ನಿರಾಕರಣೆ**:
+ಈ ದಾಖಲೆಯನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಾದಕ್ಕಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಾಖಲೆಯ ಸ್ಥಳೀಯ ಭಾಷೆಯ ಆವೃತ್ತಿಯೇ ಅಧಿಕೃತ ಮೂಲವಾಗಿರುತ್ತದೆ. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿಕೆ ಅಥವಾ ತಪ್ಪು ಬಿರುಗಾಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/3-moving-elements-around/README.md b/translations/kn/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 000000000..05964d9d1
--- /dev/null
+++ b/translations/kn/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,900 @@
+
+# ಬಯಲು ಆಟವನ್ನು ರಚಿಸುವ ಭಾಗ 3: ಚಲನೆಯು ಸೇರಿಸುವುದು
+
+```mermaid
+journey
+ title ನಿಮ್ಮ ಆಟದ ಅನಿಮೆಷನ್ ಪ್ರಯಾಣ
+ section ಚಲನೆಯ ಮೂಲತತ್ವಗಳು
+ ಚಲನಾ ನಿಯಮಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 3: Student
+ ಸಂಕೇತ ಸಂಯೋಜನೆಗಳ ನವೀಕರಣವನ್ನು ಕಲಿಯಿರಿ: 4: Student
+ ಮೂಲ ಚಲನವಳಿಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ: 4: Student
+ section ಆಟಗಾರ ನಿಯಂತ್ರಣೆಗಳು
+ ಕೀಲಿಮಣೆ ಘಟನೆಗಳನ್ನು ಹ್ಯಾಂಡಲ್ ಮಾಡಿ: 4: Student
+ ಡೀಫಾಲ್ಟ್ ವರ್ತನೆಗಳ ತಡೆಗಟ್ಟುವುದು: 5: Student
+ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ನಿಯಂತ್ರಣಗಳನ್ನು ರಚಿಸಿ: 5: Student
+ section ಆಟದ ವ್ಯವಸ್ಥೆಗಳು
+ ಆಟ ಲೂಪನ್ನು ನಿರ್ಮಿಸಿ: 5: Student
+ ವಸ್ತು ಜೀವನಚಕ್ರ ನಿರ್ವಹಣೆ: 5: Student
+ pub/sub ಮಾದರಿಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ: 5: Student
+```
+ನಿಮ್ಮлюбимый ಆಟಗಳನ್ನು ಯೋಚಿಸಿ – ಅವುಗಳನ್ನು ಆಕರ್ಷಕವಾಗಿಸುವುದು ಕೇವಲ ಸುಂದರ ಗ್ರಾಫಿಕ್ಸ್ ಅಲ್ಲ, ಅದು ಎಲ್ಲವನ್ನೂ ಚಲಿಸುವ ರೀತಿಯಾಗಿದೆ ಮತ್ತು ನಿಮ್ಮ ಕ್ರಮಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದು. ಈಗಾಗಲೇ, ನಿಮ್ಮ ಬಯಲು ಆಟವು ಒಂದು ಸುಂದರ ಚಿತ್ರಕಾರ್ಯವಾಗಿದೆ, ಆದರೆ ನಾವು ಅದಕ್ಕೆ ಜೀವನವನ್ನು ತಂದ ಚಲನೆ ಸೇರಿಸಲು ಹೊರಟಿದ್ದೇವೆ.
+
+ನಾಸಾ ಇಂಜಿನಿಯರ್ಗಳು ಅಪೊලೋ ಮಿಷನ್ಗಳಿಗಾಗಿ ಮಾರ್ಗದರ್ಶಕ ಗಣಕಯಂತ್ರವನ್ನು ಪ್ರೋಗ್ರಾಮ್ ಮಾಡಿದಾಗ, ಅವರು ಸಮಾನ ಸವಾಲಿನ ಎದುರಿಸಲಾಗಿದೆ: ಪೈಲೆಟ್ ಇನ್ಪುಟ್ಗೆ ಬಯಲು ನೌಕೆಯನ್ನು ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಮಾಡಿ ಕ್ರಮ ತುಂಬಿ ದಾರಿದೀಪ ತಿದ್ದುವುದನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕಾಪಾಡುವುದು ಹೇಗೆ? ನಾವು ಇಂದು ಕಲಿಯುವ ತತ್ವಗಳು ಆ mêmes concepts ಅನ್ನು ಪ್ರತಿಧ್ವನಿಸುತ್ತದೆ – ಆಟಗಾರ ನಿಯಂತ್ರಿತ ಚಲನವಲನ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ವ್ಯವಸ್ಥೆಯ ವರ್ತನೆಗಳ ನಿರ್ವಹಣೆ.
+
+ಈ ಪಾಠದಲ್ಲಿ, ನೀವು ಬಯಲು ನೌಕೆಯನ್ನು ಪರದೆಯಾದ ಮೇಲೆ ನೆರಳಿಸುವಂತೆ, ಆಟಗಾರನ ಆಜ್ಞೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಮತ್ತು ಮೃದುವಾದ ಚಲನಾ ಮಾದರಿಗಳನ್ನು ರಚಿಸುವುದನ್ನು ಕಲಿಯುತ್ತೀರಿ. ನಾವು ಎಲ್ಲವನ್ನೂ ಸಹಜವಾಗಿ ಪರಸ್ಪರ ಕಟ್ಟಿಕೊಂಡುಕೊಂಡ manageable ತತ್ವಗಳಾಗಿ ವಿಭಜಿಸುತ್ತೇವೆ.
+
+ಅಂತಿಮದಲ್ಲಿ, ನೀವು ನಿಮ್ಮ ನಾಯಕ ನೌಕೆಯನ್ನು ಪರದೆಬದಿಯಲ್ಲಿ ಹಾರಿಸುವಂತೆ ಮಾಡಿದ್ದೀರಾ ಮತ್ತು ಶತ್ರು ನೌಕೆಗಳು ಮೇಲ್ಮೆಯ ಮೇಲೆ ರಕ್ಷಕರಾಗಿ ನಿರ್ಣಯಿಸುತ್ತಿವೆ. ಹೆಚ್ಚು ಪ್ರಾಮುಖ್ಯವಾದುದು, ನೀವು ಆಟ ಚಲನ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಚಾಲನೆ ಮಾಡುವ ಮೂಲ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಿರಿ.
+
+```mermaid
+mindmap
+ root((ಆಟ ಮೌಲ್ಯನಿರ್ಮಾಣ))
+ Movement Types
+ Player Controlled [ಆಟಗಾರ ನಿಯಂತ್ರಿತ]
+ Automatic Motion [ಸ್ವಯಂಚಾಲಿತ ಚಲನೆ]
+ Physics Based [ಭೌತಶಾಸ್ತ್ರ ಆಧಾರಿತ]
+ Scripted Paths [ಸ್ಕ್ರಿಪ್ಟ್ ಮಾರ್ಗಗಳು]
+ Event Handling [ಕಾರ್ಯಕ್ರಮ ನಿರ್ವಹಣೆ]
+ Keyboard Input [ಕೀಲಿಮಣೆ ಇನ್ಪುಟ್]
+ Mouse Events [ಮೌಸ್ ಘಟನೆಗಳು]
+ Touch Controls [ಟಚ್ ನಿಯಂತ್ರಣಗಳು]
+ Default Prevention [ಪೂರ್ವನಿಯೋಜಿತ ತಡೆ]
+ Game Loop [ಆಟ ಲೂಪ್]
+ Update Logic [ಅಪ್ಡೇಟ್ ಲಾಜಿಕ್]
+ Render Frame [ರೆಂಡರ್ ಫ್ರೇಮ್]
+ Clear Canvas [ಕ್ಯಾನ್ವಾಸ್ ಕ್ಲೀರ್]
+ Frame Rate Control [ಫ್ರೇಮ್ ದರ ನಿಯಂತ್ರಣ]
+ Object Management [ವಸ್ತು ನಿರ್ವಹಣೆ]
+ Position Updates [ಸ್ಥಾನ ಅಪ್ಡೇಟುಗಳು]
+ Collision Detection [Possion ಪತ್ತೆ]
+ Lifecycle Management [ಜೀವಚರ್ಯ ನಿರ್ವಹಣೆ]
+ State Tracking [ಸ್ಥಿತಿ ಹಾದುಹೋಗುವುದು]
+ Communication [ಸಂವಹನ]
+ Pub/Sub Pattern [ಪುಬ್/ಸಬ್ ಮಾದರಿ]
+ Event Emitters [ಕಾರ್ಯಕ್ರಮ ಹೊರಹೊಮ್ಮಿಸುವವರು]
+ Message Passing [ಸಂದೇಶ ಹಂಚಿಕೆ]
+ Loose Coupling [ಮುಕ್ತ ಜೋಡಣೆ]
+```
+## ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/33)
+
+## ಆಟ ಚಲನ ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳುವುದು
+
+ಆಟಗಳು ಸಜೀವರಾಗುತ್ತವೆ, ಎಲ್ಲವನ್ನೂ ಚಲಿಸುವಾಗ, ಮತ್ತು ಸರ್ವೋತ್ತರ ಎರಡು ರೀತಿಯಲ್ಲಿ ಇದು ಸಂಭವಿಸುತ್ತದೆ:
+
+- **ಆಟಗಾರ-ನಿಯಂತ್ರಿತ ಚಲನ**: ನೀವು ಕೀಲಿ ಒತ್ತಿದಾಗ ಅಥವಾ ಮೌಸ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಯಾವುದೋ ಒಂದು ಚಲಿಸುತ್ತದೆ. ಇದು ನಿಮಗೂ ನಿಮ್ಮ ಆಟ ಜಗತ್ತಿನ ನಡುವೆ ನೇರ ಸಂಪರ್ಕವಾಗಿದೆ.
+- **ಸ್ವಯಂಚಾಲಿತ ಚಲನ**: ಆಟವೇ ತನ್ನಿಂದೇ ಚಲಿಸುವುದನ್ನು ನಿರ್ಧರಿಸುವುದು – ಉದಾಹರಣೆಗೆ ಆ ಶತ್ರು ನೌಕೆಗಳು ಪರದೆಬದಿಯಲ್ಲಿ ಪ್ಯಾಟ್ರೋಲ್ ಮಾಡುತ್ತಿದ್ದಾರೆಯೋ ನಿಮ್ಮ ಏನೂ ಮಾಡದೇ ಇದ್ದರೂ.
+
+ಕಂಪ್ಯೂಟರ್ ಪರದೆ ಮೇಲೆ ವಸ್ತುಗಳನ್ನು ಚಲಿಸುವುದು ನೀವು ಊಹಿಸುವುದಕ್ಕಿಂತ ಸರಳ. ಗಣಿತ ತರಗತಿಯಲ್ಲಿ ಇದ್ದ x ಮತ್ತು y ನಿರ್ದಿಷ್ಟಾಂಕಗಳನ್ನು ನೆನಪಿಡಿ? ಅದೇನಾಗಿದೆ ಇಲ್ಲಿ ನಾವು ಕೆಲಸ ಮಾಡುತ್ತೇವೆ. 1610 ರಲ್ಲಿ ಗ್ಯಾಲಿಲಿಯೋ ಜುಪಿಟರ್ ಚಂದ್ರಿಕೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿದಾಗ, ಅವನು ಅದೇನೂ ಮಾಡುತ್ತಿದ್ದ - ಸಮಯದ ಮೇಲೆ ಸ್ಥಾನಗಳನ್ನು ಬಿಂದು ಹಾಕಿ ಚಲನ ಮಾದರಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು.
+
+ಪರದೆ ಮೇಲೆಯೇ ವಸ್ತುಗಳನ್ನು ಚಲಿಸುವುದು ಒಂದು ಫ್ಲಿಪ್ ಬುಕ್ ಅನಿಮೇಶನ್ ಸೃಷ್ಟಿಸುವಂತಿದೆ – ನೀವು ಈ ಮೂರು ಸರಳ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಬೇಕು:
+
+```mermaid
+flowchart LR
+ A["ಫ್ರೇಮ್ N"] --> B["ಸ್ಥಿತಿಗಳನ್ನು ನವೀಕರಿಸಿ"]
+ B --> C["ಕ್ಯಾನ್ವಾಸ್ ತೆರವುಗೊಳಿಸಿ"]
+ C --> D["ವಸ್ತುಗಳನ್ನು ರೇಖಾಚಿತ್ರಗೊಳಿಸಿ"]
+ D --> E["ಫ್ರೇಮ್ N+1"]
+ E --> F{ಮುಂದುವರೆಯಬೇಕೆ?}
+ F -->|ಹೌದು| B
+ F -->|ಇಲ್ಲ| G["ಗೇಮ್ ಮುಗಿದಿದೆ"]
+
+ subgraph "ಅನಿಮೇಷನ್ ಚಕ್ರ"
+ H["1. ಹೊಸ ಸ್ಥಾನಗಳನ್ನು ಲೆಕ್ಕಹಾಕಿ"]
+ I["2. ಹಿಂದಿನ ಫ್ರೇಮನ್ನು ಅಳಿಸಿ"]
+ J["3. ಹೊಸ ಫ್ರೇಮನ್ನು ರೆಂಡರ್ ಮಾಡಿ"]
+ end
+
+ style B fill:#e1f5fe
+ style C fill:#ffebee
+ style D fill:#e8f5e8
+```
+1. ** ಸ್ಥಾನವನ್ನು ನವೀಕರಿಸು** – ನಿಮ್ಮ ವಸ್ತುವಿನ ಹೊಸ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸಿ (ಬಹುಶಃ 5 ಪಿಕ್ಸೆಲ್ಸ್ ಬಲಕ್ಕೆ ಸರಿಸಿ)
+2. ** ಹಳೆಯ ಫ್ರೇಮ್ ಅನ್ನು ಅಳಿಸಿ** – ಪರದೆಯನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ ಹಾಳಾದ ಹೊದಿಕೆಯ ರೇಖೆಗಳನ್ನು ಕಾಣಿಸುವುದನ್ನು ತಡೆಯಿರಿ
+3. **ಹೊಸ ಫ್ರೇಮ್ ಅನ್ನು ಬಿಡಿಸಿ** – ನಿಮ್ಮ ವಸ್ತುವನ್ನು ಅದರ ಹೊಸ ಸ್ಥಾನದಲ್ಲಿ ಚಿತ್ರಿಸಿ
+
+ಈ ಕಾರ್ಯವನ್ನು ಸಾಕಷ್ಟು ವೇಗವಾಗಿ ಮಾಡಿದರೆ, ಬೂಂ! ನೀವು ಮೃದುವಾದ, ಸ್ವಾಭಾವಿಕವಾಗಿ ತಾಳಮೇಳ ಹೊಂದಿದ ಚಲನವಳಿಯನ್ನು ಹೊಂದಿದ್ದೀರಾ.
+
+ಇದನ್ನು ಕೋಡ್ ನಲ್ಲಿ ಹೇಗೆ ಕಾಣಿಸಬಹುದು ಎಂಬುದೆ ಇಲ್ಲಿ:
+
+```javascript
+// ಹೀರೋನ ಸ್ಥಳವನ್ನು ಹೊಂದಿಸಿ
+hero.x += 5;
+// ಹೀರೋವನ್ನು ಹೊಂದಿರುವ ಆಯತವನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+// ಆಟದ ಹಿನ್ನೆಲೆ ಮತ್ತು ಹೀರೋವನ್ನು ಮರು ಬರೆಯಿರಿ
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ctx.fillStyle = "black";
+ctx.drawImage(heroImg, hero.x, hero.y);
+```
+
+**ಈ ಕೋಡ್ ಮಾಡುವುದು:**
+- ನಾಯಕನ x-ನಿರ್ದಿಷ್ಟಾಂಕವನ್ನು 5 ಪಿಕ್ಸೆಲ್ಸ್ ಬಲಕ್ಕೆ ನವೀಕರಿಸುತ್ತದೆ
+- ಹಿಂದಿನ ಫ್ರೇಮ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು ಸಂಪೂರ್ಣ ಕ್ಯಾನ್ವಾಸ್ ಪ್ರದೇಶವನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ
+- ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಕಪ್ಪು ಹಿನ್ನೆಲೆ ಬಣ್ಣದಿಂದ ಭರಿಸುತ್ತದೆ
+- ನಾಯಕನ ಚಿತ್ರವನ್ನು ಹೊಸ ಸ್ಥಾನದಲ್ಲಿ ಮರುಬಿಡಿಸುತ್ತದೆ
+
+✅ ನಿಮ್ಮ ನಾಯಕನ ಬಹು ಫ್ರೇಮ್ಗಳನ್ನು ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ ಮರುಬಿಡಿಸುವುದರಿಂದ ಏನಾದರೂ ಕಾರ್ಯಕ್ಷಮತೆ ದೋಷಗಳು ಬರುತ್ತೇ ಎಂದೂ ನಿಮಗೆ ಯೋಚನೆ ಇದೆಯೇ? ಈ ಮಾದರಿಯ ಪರ್ಯಾಯಗಳ ಬಗ್ಗೆ ಓದಿ: [alternatives to this pattern](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳನ್ನು ನಿರ್ವಹಿಸು
+
+ಇದು ಆಟಗಾರನ ಇನ್ಪುಟ್ ಅನ್ನು ಆಟ ಕ್ರಿಯೆಗೆ ಸಂಪರ್ಕಿಸುವ ಸ್ಥಳ. ಯಾರಾದರೂ ಸ್ಪೇಸ್ಬಾರ್ ಒತ್ತಿ ಲೇಸರ್ ಫೈರ್ ಮಾಡುವಾಗ ಅಥವಾ ತಿರುಗುವ ತೀಪತ್ತಿಯನ್ನು ತಟ್ಟಿದಾಗ, ನಿಮ್ಮ ಆಟ ಆ ಇನ್ಪುಟ್ ಅನ್ನು ಗುರುತಿಸಿ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾಗುತ್ತದೆ.
+
+ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳು window ಮಟ್ಟದಲ್ಲಿ ನಡೆಯುತ್ತವೆ, ಅಂದರೆ ನಿಮ್ಮ ಪೂರ್ಣ ಬ್ರೌಸರ್ ವಿಂಡೋ ಅವುಗಳಿಗೋಸ್ಕರ ಜಾಗರೂಕವಾಗಿದೆ. mouse ಕ್ಲಿಕ್ಸ್, ಇತರ ಬದಿಗೆ, ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳಿಗೆ ಕಟ್ಟಿ ಅತ್ಯಾಧಾರಿತವಾಗಬಹುದು (ಉದಾ: ಬಟನ್ ಕ್ಲಿಕ್). ನಮ್ಮ ಬಯಲು ಆಟದಲ್ಲಿ, ನಾವು ಕೀಬೋರ್ಡ್ ನಿಯಂತ್ರಣಗಳಿಗೆ ಗಮನ ನೀಡುತ್ತೇವೆ ಏಕೆಂದರೆ ಅದು ಆಟಗಾರರಿಗೆ ಆರ್ಕೇಡ್ ಭಾವನೆಯನ್ನು ನೀಡುತ್ತದೆ.
+
+ಈದು ನನಗೆ 1800ರ ದಶಕದ ಟೇಲಿಗ್ರಾಫ್ ಆಪರೇಟರ್ಗಳು ಮೊರ್ಸ್ ಕೋಡ್ ಇನ್ಪುಟ್ ಅನ್ನು ಅರ್ಥಪೂರ್ಣ ಸಂದೇಶಗಳಿಗೆ ಅನುವಾದಿಸುವಂತಿರುವುದು ನೆನಪಾಗುತ್ತದೆ – ನಾವು ಸಹ ಅದೇ ಕಾರ್ಯವನ್ನು ಮಾಡುತ್ತಿದ್ದೇವೆ, ಕೀಲಿಪತ್ತಿಗಳನ್ನು ಆಟ ಆದೇಶಗಳಿಗೆ ಅನುವಾದಿಸಿ.
+
+ಘಟನೆಯನ್ನು ನಿರ್ವಹಿಸಲು ನೀವು window ನ `addEventListener()` ವಿಧಾನವನ್ನು ಬಳಸಬೇಕು ಮತ್ತು ಅದಕ್ಕೆ ಎರಡು ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ನೀಡಬೇಕು. ಮೊದಲ ಪ್ಯಾರಾಮೀಟರ್ ಘಟನೆ ಹೆಸರು, ಉದಾಹರಣೆಗೆ `keyup`. ಎರಡನೇ ಪ್ಯಾರಾಮೀಟರ್ ಘಟನೆ ಸಂಭವಿಸಿದಾಗ ಕರೆಮಾಡುವ ಫಂಕ್ಷನ್.
+
+ಇದೀಗ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+ // evt.key = ಕೀಲಿಯ ಸ್ಟ್ರಿಂಗ್ ಪ್ರತಿನಿಧಿ
+ if (evt.key === 'ArrowUp') {
+ // ಕೆಲವು ಕಾರ್ಯಗಳನ್ನು ಮಾಡಿ
+ }
+});
+```
+
+**ಇಲ್ಲಿ ಏನು ನಡೆಯುತ್ತಿದೆ:**
+- ಸಂಪೂರ್ಣ window ನಲ್ಲಿ ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳನ್ನು ಕೇಳುತ್ತಿದೆ
+- ಒತ್ತಿದ ಕೀ ಯಾವುದು ಎಂಬ ಮಾಹಿತಿಯೊಂದಿಗೆ ಘಟನೆ ವಸ್ತುವನ್ನು ಸೆರೆಹಿಡಿಯುತ್ತಿದೆ
+- ಒತ್ತಿದ ಕೀ ಒಂದು ನಿರ್ದಿಷ್ಟ ಕೈ(ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಮೇಲ್ವನದ ತೀಪತ್ತಿ) ಜೊತೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ಶರತ್ತು ಪೂರೈಸಿದಾಗ ಕೋಡ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ
+
+ಕೀಘಟನೆಯಲ್ಲಿ ನೀವು `key` ಮತ್ತು `keyCode` ಎಂಬ ಎರಡು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಉಪಯೋಗಿಸಬಹುದು:
+
+- `key` - ಒತ್ತಿದ ಕೀಲಿಯ string ಪ್ರತಿನಿಧಾನ, ಉದಾ: `'ArrowUp'`
+- `keyCode` - ಸಂಖ್ಯೆ ಪ್ರತಿನಿಧಾನ, ಉದಾ: `37`, ಇದು `ArrowLeft` ಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ
+
+✅ ಕೀಘಟನೆಯ ನಿಯಂತ್ರಣ ಆಟ ಅಭಿವೃದ್ಧಿಯಿಂದ ಹೊರಗೂ ಉಪಯುಕ್ತ. ಈ ತಂತ್ರವನ್ನು ನೀವು ಇನ್ನೇನು ಬಗೆಯ ಉಪಯೋಗಿಸಬಹುದು ಎಂದು ಯೋಚಿಸಿ.
+
+```mermaid
+sequenceDiagram
+ participant User
+ participant Browser
+ participant EventSystem
+ participant GameLogic
+ participant Hero
+
+ User->>Browser: ಅರೋವ್ ಅಪ್ ಕೀಲಿಯನ್ನು ಒತ್ತುತ್ತದೆ
+ Browser->>EventSystem: ಕೀಲಿಯಡೊಳಗಿನ ಈವೆಂಟ್
+ EventSystem->>EventSystem: preventDefault()
+ EventSystem->>GameLogic: emit('KEY_EVENT_UP')
+ GameLogic->>Hero: hero.y -= 5
+ Hero->>Hero: ಸ್ಥಾನವನ್ನು ನವೀಕರಿಸಿ
+
+ Note over Browser,GameLogic: ಈವೆಂಟ್ ಹರಿವು ಬ್ರೌಸರ್ ಪೂರ್ವನಿರ್ಧಾರಗಳನ್ನು ತಡೆಯುತ್ತದೆ
+ Note over GameLogic,Hero: ಪಬ್/ಸಬ್ ಮಾದರಿ ಸ್ವಚ್ಛ ಸಂವಹನಕ್ಕೆ ಅನುಮತಿಸುತ್ತದೆ
+```
+### ವಿಶೇಷ ಕೀಗಳು: heads up!
+
+ಕೆಲವು ಕೀಗಳಿಗೆ ಬ್ರೌಸರ್ನಲ್ಲಿ ನಿರ್ಮಿತ ವರ್ತನೆಗಳಿವೆ, ಅವು ನಿಮ್ಮ ಆಟಕ್ಕೆ ಅಡ್ಡಿಪಡಿಸಬಹುದು. ತೀರಿಗಳ ಕೀಲಿಗಳು ಪುಟವನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡುತ್ತವೆ ಮತ್ತು ಸ್ಪೇಸ್ಬಾರ್ ಕೆಳಗೆ ಜಿಗಿತು – ನೌಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು ಪ್ರಯತ್ನಿಸುವಾಗ ನೀವು ಇದನ್ನು ಬಯಸುವುದಿಲ್ಲ.
+
+ನಾವು ಈ ಡಿಫಾಲ್ಟ್ ವರ್ತನೆಗಳನ್ನು ತಡೆಯಬಹುದು ಮತ್ತು ಬದಲಿಗೆ ನಮ್ಮ ಆಟ ಇನ್ಪುಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಆರಂಭದ ಕಂಪ್ಯೂಟರ್ ಪ್ರೋಗ್ರಾಮರ್ಗಳು ಸಿಸ್ಟಂ ಇಂಟರಪ್ಟ್ಗಳನ್ನು ಮೀರಿಸುವಂತೆ ಮಾಡುವುದಕ್ಕೆ ಸಮಾನ – ನಾವು ಬ್ರೌಸರ್ ಮಟ್ಟದಲ್ಲಿ ಅದೇನೂ ಮಾಡುತ್ತಿದ್ದೇವೆ. ಇಲ್ಲಿದೆ ಹೇಗೆ:
+
+```javascript
+const onKeyDown = function (e) {
+ console.log(e.keyCode);
+ switch (e.keyCode) {
+ case 37:
+ case 39:
+ case 38:
+ case 40: // ಅರುವ ಚಿಮ್ಮೆಗಳು
+ case 32:
+ e.preventDefault();
+ break; // ಖಾಲಿ ಜಾಗ
+ default:
+ break; // ಇತರ ಕೀಗಳನ್ನು ತಡೆಬಾರದು
+ }
+};
+
+window.addEventListener('keydown', onKeyDown);
+```
+
+**ಈ ತಡೆಯುವ ಕೋಡ್ ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳಿ:**
+- ಸಮಸ್ಯೆ ಉಂಟುಮಾಡಬಹುದಾದ ನಿರ್ದಿಷ್ಟ ಕೀ ಕೋಡ್ಗಳಿಗೆ ಪರಿಶೀಲನೆ ಮಾಡುತ್ತದೆ
+- ತೀರಿಗಳ ಕೀಲಿಗಳು ಮತ್ತು ಸ್ಪೇಸ್ಬಾರ್ಗಾಗಿ ಡಿಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ಕ್ರಿಯೆಯನ್ನು ತಡೆಯುತ್ತದೆ
+- ಇತರ ಕೀಲಿಗಳಿಗೆ ಸಾಮಾನ್ಯ ಕೆಲಸಕ್ಕೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ
+- `e.preventDefault()` ಉಪಯೋಗಿಸಿ ಬ್ರೌಸರ್ ಸಂರಚಿತ ವರ್ತನೆಯನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಘಟನಾ ನಿರ್ವಹಣೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು**: ಸ್ವಯಂಚಾಲಿತ ಚಲನಕ್ಕೆ ಮೊದಲು ಮಾಡಿ ನೋಡಬೇಕು:
+- ✅ `keydown` ಮತ್ತು `keyup` ಘಟನೆಯ ವ್ಯತ್ಯಾಸವನ್ನು ವಿವರಿಸಬಹುದು
+- ✅ ನಾವು ಡಿಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ವರ್ತನೆಗಳನ್ನು ಯಾಕೆ ತಡೆಯುತ್ತೇವೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಹುದು
+- ✅ ಘಟನೆ ಶ್ರೋತಿಗಳು ಬಳಕೆದಾರ ಇನ್ಪುಟ್ ಅನ್ನು ಆಟ ಲಾಗಿಕ್ ಗೆ ಹೇಗೆ ಸಂಪರ್ಕಿಸುತ್ತವೆ ವಿವರಿಸಬಹುದು
+- ✅ ಯಾವ ಕೀಗಳು ಆಟ ನಿಯಂತ್ರಣಗಳಿಗೆ ಸೆರೆಯಾಗಬಹುದು ಗುರುತಿಸಬಹುದು
+
+**ಸ್ವಯಂ-ಪರೀಕ್ಷೆ**: ನೀವು ತೀರಿಗಳ ಕೀಲಿಗಳ ಡಿಫಾಲ್ಟ್ ವರ್ತನೆ ತಡೆಯದಿದ್ದರೆ ಏನಾಗುತ್ತದೆ?
+*ಉತ್ತರ: ಬ್ರೌಸರ್ ಪುಟವನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡುತ್ತದೆ, ಇದು ಆಟ ಚಲನದಲ್ಲಿ ಅಡ್ಡಿಪಡಿಸುತ್ತದೆ*
+
+**ಘಟನೆ ವ್ಯವಸ್ಥೆ ನಿರ್ಮಾಣ**: ನೀವು ಈಗ ಅರ್ಥ ಮಾಡಿಕೊಂಡಿದ್ದೀರಿ:
+- **window-ಮಟ್ಟದ ಕೇಳುವಿಕೆ**: ಬ್ರೌಸರ್ ಮಟ್ಟದಲ್ಲಿ ಘಟನೆಗಳನ್ನು ಸೆರೆಹಿಡಿಯುವಿಕೆ
+- **ಘಟನಾ ವಸ್ತು ಗುಣಲಕ್ಷಣಗಳು**: `key` ಸ್ಟ್ರಿಂಗ್ಗಳು ಮತ್ತು `keyCode` ಸಂಖ್ಯೆಗಳು
+- **ಡಿಫಾಲ್ಟ್ ತಡೆ**: ಅಪ್ರಯೋಜಿತ ಬ್ರೌಸರ್ ವರ್ತನೆಗಳನ್ನು ನಿಲ್ಲಿಸುವಿಕೆ
+- **ಶರತ್ತುದಾರ ಫಲಿತಾಂಶ**: ನಿರ್ದಿಷ್ಟ ಕೀ ಸಂಯೋಜನೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವಿಕೆ
+
+## ಆಟದಿಂದ ಉಂಟಾಗುವ ಚಲನ
+
+ಹೀಗಾಗಿ ಆಟಗಾರನ ಇನ್ಪುಟ್ ಇಲ್ಲದೇ ಚಲಿಸುವ ವಸ್ತುಗಳನ್ನು ಕುರಿತು ಮಾತನಾಡೋಣ. ಶತ್ರು ನೌಕೆಗಳು ಪರದೆ ಮೇಲೆ ಸುತ್ತಾಡುತ್ತಿದ್ದಂತೆ, ಗುಂಡುಗಳು ನೇರ ರೇಖೆಗಳಲ್ಲಿ ಹಾರುತ್ತಿದ್ದಂತೆ, ಅಥವಾ ಮೋಡಗಳು ಹಿನ್ನೆಲೆಯಲ್ಲಿಯೇ ಒదಿದುಹೋಗುತ್ತಿರುವಂತೆ. ಈ ಸ್ವಯಂಚಾಲಿತ ಚಲನ ನಿಮ್ಮ ಆಟ ಜಗತ್ತನ್ನು ಜೀವಂತವಾಗಿಸುತ್ತದೆ ನಿಮ್ಮ ನಿಯಂತ್ರಣ ಸ್ಪರ್ಶವಿಲ್ಲದಿದ್ದರೂ ಸಹ.
+
+ನಾವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ ಬಿಲ್ಟ್-ಇನ್ ಟೈಮರ್ಗಳನ್ನು ನಿಯಮಿತ ಅಂತರಗಳಲ್ಲಿ ಸ್ಥಾನಗಳನ್ನು ನವೀಕರಿಸಲು ಬಳಸುತ್ತೇವೆ. ಈ ಕಲ್ಪನೆ ಪೆಂಡುಲಮ್ ಗಡಿಯಾರ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆಯೋ ಹಾಗೇ – ನಿಯಮಿತ, ಸಮಯಭದ್ಧ ಕ್ರಿಯೆಗಳನ್ನು ಪ್ರೇರೇಪಿಸುವ ವ್ಯವಸ್ಥೆ. ಇದು ಹೀಗಿದೆ:
+
+```javascript
+const id = setInterval(() => {
+ // ಶತ್ರುವನ್ನು y ಅಕ್ಷದಲ್ಲಿ ಚಲಾಯಿಸಿ
+ enemy.y += 10;
+}, 100);
+```
+
+**ಈ ಚಲನ ಕೋಡ್ ಮಾಡುವುದು:**
+- ಪ್ರತಿ 100 ಮಿಲಿಸೆಕೆಂಡಿಗೆ ಒಂದು ಟೈಮರ್ ರಚಿಸುತ್ತದೆ
+- ಪ್ರತಿ ಬಾರಿ ಶತ್ರುವಿನ y-ನಿರ್ದಿಷ್ಟಾಂಕವನ್ನು 10 ಪಿಕ್ಸೆಲ್ಸ್ ನವೀಕರಿಸುತ್ತದೆ
+- ನಂತರ ಅದನ್ನು ನಿಲ್ಲಿಸಲು Interval ID ಅನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ
+- ಶತ್ರುವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕೆಳಕ್ಕೆ ಪರದೆ ಮೇಲೆ ಚಲಿಸುತ್ತದೆ
+
+## ಆಟ ಲೂಪ್
+
+ಇದು ಎಲ್ಲವನ್ನೂ ಹೊಂದಿಸಿ ಬದ್ಧಗೊಳಿಸುವ ಕಲ್ಪನೆ – ಆಟ ಲೂಪ್. ನಿಮ್ಮ ಆಟ ಒಂದು ಚಲನಚಿತ್ರವಾದರೆ, ಆಟ ಲೂಪ್ ಚಿತ್ರತೊರೆ ಪ್ಯಾಜೆಕ್ಟರ್ ಆಗಿದ್ದು ಫ್ರೇಮ್ಗಳನ್ನೆಲಿಯ ತ್ವರಿತವಾಗಿ ತೋರಿಸಿ ಎಲ್ಲವನ್ನೂ ಸ್ಮೂತ್ ಆಗಿ ಚಲಿಸುವಂತೆ ತೋರ್ಪಡಿಸುತ್ತದೆ.
+
+ಪ್ರತಿ ಆಟದಲ್ಲೂ ಇಂತಹ ಲೂಪ್ ಪ್ರಗ್ರಾಮ್ ಹಿಂದೆ ನಡೆಯುತ್ತದೆ. ಇದು ಒಂದು ಫಂಕ್ಷನ್ ಆಗಿದ್ದು ಎಲ್ಲ ಆಟ ವಸ್ತುಗಳನ್ನು ನವೀಕರಿಸಿ, ಪರದೆ ಹೊಸದಾಗಿ ಬಿಡಿಸಿ, ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿರಂತರವಾಗಿಯೇ ಅನುಸರಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ನಾಯಕ, ಎಲ್ಲ ಶತ್ರುಗಳು, ಯಾವುದೇ ಲೇಸರ್ಗಳು – ಪೂರ್ಣ ಆಟ ಸ್ಥಿತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ.
+
+ಇದು ನಗೆ ಮೂವರು ಮುಂಚಿನ ಚಲನಚಿತ್ರ ಚಿತ್ರಕರಿಂದ್ರೆ, ವಾಲ್ಟ್ ಡಿಸ್ನಿ ಪಾತ್ರಗಳನ್ನು ಫ್ರೇಮ್ ಬಾಯ್ ಫ್ರೇಮ್ ಮರುಬಿಡಿಸುವ ಮೂಲಕ ಚಲನಭಾಸವನ್ನು ಸೃಷ್ಟಿಸುತ್ತಿದ್ದ ಪರಿಚಯವನ್ನು ನೆನಪಿಸುತ್ತದೆ. ನಾವು ಅದೇನೂ ಮಾಡುತ್ತಿರುವ ನೋಡು, ಕಾಗದದ ಬದಲು ಕೋಡ್ ಬಳಸಿ.
+
+ಒಂದು ಆಟ ಲೂಪ್ ಸಾಮಾನ್ಯವಾಗಿ ಕೋಡ್ ನಲ್ಲಿ ಹೇಗೆ ಕಾಣಬಹುದು ನೋಡೋಣ:
+
+```mermaid
+flowchart TD
+ A["ಆರಂಭಿಸಿ ಆಟದ ಲೂಪ್"] --> B["ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಶುದ್ಧಿಗೊಳಿಸಿ"]
+ B --> C["ಹೀಗೆಯೇ ಹಿನ್ನೆಲೆ ತುಂಬಿಸಿ"]
+ C --> D["ಆಟದ ವಸ್ತುಗಳನ್ನು ನವೀಕರಿಸಿ"]
+ D --> E["ನಾಯಕನೆಯನ್ನು ರೇಖಾಚಿತ್ರ ಕೊಡು"]
+ E --> F["ಶತ್ರುಗಳನ್ನು ರೇಖಾಚಿತ್ರ ಕೊಡು"]
+ F --> G["ಯುಐ ಅಂಶಗಳನ್ನು ರೇಖಾಚಿತ್ರ ಕೊಡು"]
+ G --> H["ಮುಂದಿನ ಫ್ರೇಮಿಗಾಗಿ ಕಾಯಿರಿ"]
+ H --> I{ಆಟ ನಡೆಯುತ್ತಿದೆಯೇ?}
+ I -->|ಹೌದು| B
+ I -->|ಇಲ್ಲ| J["ಆಟವನ್ನು ಮುಕ್ತಾಯ ಮಾಡಿ"]
+
+ subgraph "ಫ್ರೇಮ್ ದರ ನಿಯಂತ್ರಣ"
+ K["60 FPS = 16.67ms"]
+ L["30 FPS = 33.33ms"]
+ M["10 FPS = 100ms"]
+ end
+
+ style B fill:#ffebee
+ style D fill:#e1f5fe
+ style E fill:#e8f5e8
+ style F fill:#e8f5e8
+```
+```javascript
+const gameLoopId = setInterval(() => {
+ function gameLoop() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ drawHero();
+ drawEnemies();
+ drawStaticObjects();
+ }
+ gameLoop();
+}, 200);
+```
+
+**ಆಟ ಲೂಪ್ ರಚನೆಯ ಅರ್ಥ:**
+- ಹಿಂದಿನ ಫ್ರೇಮ್ನ್ನು ತೆಗೆದುಹಾಕಲು ಸಂಪೂರ್ಣ ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ
+- ಹಿನ್ನೆಲೆಯನ್ನು ದ್ರವ್ಯಮಯ ಬಣ್ಣದಿಂದ ತುಂಬುತ್ತದೆ
+- ಎಲ್ಲ ಆಟ ವಸ್ತುಗಳನ್ನು ಅವರ ಸದ್ಯದ ಸ್ಥಾನಗಳಲ್ಲಿ ಬಿಡಿಸುತ್ತದೆ
+- ಮೃದುವಾದ ಅನಿಮೇಷನ್ ಸೃಷ್ಟಿಸಲು ಪ್ರತಿ 200 ಮಿಲಿಸೆಕೆಂಡಿಗೆ ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪುನರಾವರ್ತಿಸುತ್ತದೆ
+- ಇಂಟರ್ವಲ್ ಸಮಯವನ್ನು ನಿಯಂತ್ರಿಸಿ ಫ್ರೇಮ್ ದರವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ
+
+## ಬಯಲು ಆಟವನ್ನು ಮುಂದುವರೆಸುವುದು
+
+ಈಗ ನಾವು ಪೂರ್ವದಲ್ಲಿ ನಿರ್ಮಿಸಿದ ಸ್ಥಿರ ದೃಶ್ಯಕ್ಕೆ ಚಲನ ಸೇರಿಸುತ್ತೇವೆ. ನಾವು ಇದನ್ನು ಸ್ಕ್ರೀನ್ಶಾಟ್ ನಿಂದ ಪಾರಸ್ಪರಿಕ ಅನುಭವಕ್ಕೆ ಪರಿವರ್ತಿಸುವೆವು. ಪ್ರತಿ ಹಂತವನ್ನು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಕಟ್ಟುವುದಾಗಿ ಕೆಲಸ ಮಾಡೋಣ.
+
+ನೀವು ಪೂರ್ವ ಪಾಠದಿಂದ ಬಿಟ್ಟಿದ್ದ ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ (ಅಥವಾ ಹೊಸ ಪ್ರಾರಂಭಕ್ಕಾಗಿ [ಭಾಗ II- ಪ್ರಾರಂಭಿಕ](../../../../6-space-game/3-moving-elements-around/your-work) ಫೋಲ್ಡರ್ನಲ್ಲಿನ ಕೋಡಿನಿಂದ ಪ್ರಾರಂಭಿಸಿ).
+
+**ಇಂದು ನಾವು ಏನನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೇವೆ:**
+- **ನಾಯಕ ನಿಯಂತ್ರಣಗಳು**: ತೀರಿಗಳ ಕೀಲಿಗಳು ನೌಕೆಯನ್ನು ಪರದೆ ಸುತ್ತ ಹಾರಿಸುವಲ್ಲಿ ಸಕ್ರಿಯವಾಗಲಿ
+- **ಶತ್ರು ಚಲನೆ**: ಆ ಪರಗ್ರಹ ನೌಕೆಗಳು ತಮ್ಮ ಮುನ್ನಡೆ ಆರಂಭಿಸುತ್ತವೆ
+
+ನಾವು ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಜಾರಿಗೆ ತರುವುದನ್ನು ಪ್ರಾರಂಭಿಸೋಣ.
+
+## ಶಿಫಾರಸು ಮಾಡಿದ ಹಂತಗಳು
+
+ನಿಮಗೆ ಸೃಷ್ಟಿಸಿದ ಫೈಲ್ಗಳನ್ನು `your-work` ಅಡ್ಹೊಡೆ ಶಿಷ್ಯಲ್ಲಿ ಹುಡುಕಿ. ಅವು ಕೆಳಕಂಡಂತೆ ಇರಬೇಕು:
+
+```bash
+-| assets
+ -| enemyShip.png
+ -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+ನೀವು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು `your-work` ಫೋಲ್ಡರ್ನಲ್ಲಿ ಈ ಕೆಳಗಿನ ರೀತಿಯಲ್ಲಿ ಪ್ರಾರಂಭಿಸುತ್ತೀರಿ:
+
+```bash
+cd your-work
+npm start
+```
+
+**ಈ ಆಜ್ಞೆ ಮಾಡುವುದು:**
+- ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಡೈರೆಕ್ಟರಿಗೆ ನಾವಿಗೇಟ್ ಆಗುತ್ತದೆ
+- ವಿಳಾಸದಲ್ಲಿ HTTP ಸರ್ವರ್ ಮರುಳಿಸುವೆ `http://localhost:5000`
+- ನಿಮಗೆ ಬೌರೋಸರ್ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಲು ನಿಮ್ಮ ಆಟ ಫೈಲ್ಗಳನ್ನು ಸರ್ವ್ ಮಾಡುತ್ತದೆ
+
+ಮೇಲಿನವು ವಿಳಾಸ `http://localhost:5000` ನಲ್ಲಿ HTTP ಸರ್ವರ್ ಪ್ರಾರಂಭ ಮಾಡುತ್ತದೆ. ಬ್ರೌಸರ್ ತಿರುಗಿಸಿ ಮತ್ತು ಆ ವಿಳಾಸವನ್ನು ಇನ್ಪುಟ್ ಮಾಡಿ, ಈಗ ನಾಯಕ ಮತ್ತು ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ಚಿತ್ರಿಸುತ್ತದೆ; ಯಾವುದೇ ಚಲನೆ ಇಲ್ಲ - ಇನ್ನೂ!
+
+### ಕೋಡ್ ಸೇರಿಸು
+
+1. `hero` ಮತ್ತು `enemy` ಮತ್ತು `game object` ಗಾಗಿ ನಿಗಧಿತ ವಸ್ತುಗಳನ್ನು ಸೇರಿಸಿ, ಅವುಗಳಲ್ಲಿ `x` ಮತ್ತು `y` ಗುಣಲಕ್ಷಣಗಳಿರಬೇಕು. ([@Inheritance or composition](../README.md) ಬಾಗವನ್ನು ನೆನಪಿಡಿ).
+
+ *ಸೂಚನೆ* `game object` ನಲ್ಲಿ `x` ಮತ್ತು `y` ಇರುತ್ತವೆ ಮತ್ತು ನಿಮ್ಮನ್ನು ಕ್ಯಾನ್ವಾಸ್ಗೆ ಚಿತ್ರಿಸುವ ಸಾಮರ್ಥ್ಯ ಇರಬೇಕು.
+
+ > **ಟಿಪ್**: ಹೊಸ `GameObject` ವರ್ಗವನ್ನು ಅದರ ಕಾಂಸ್ಟ್ರಕ್ಟರ್ ಅನ್ನು ಈ ಕೆಳಗಿನಂತೆ ರೂಪಿಸಿ ಮತ್ತು ನಂತರ ಅದನ್ನು ಕ್ಯಾನ್ವಾಸ್ ಗೆ ಬಿಡಿಸಿ:
+
+ ```javascript
+ class GameObject {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ this.dead = false;
+ this.type = "";
+ this.width = 0;
+ this.height = 0;
+ this.img = undefined;
+ }
+
+ draw(ctx) {
+ ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+ }
+ }
+ ```
+
+ **ಈ ಮೂಲ ವರ್ಗದ ಅರ್ಥ:**
+ - ಎಲ್ಲಾ ಆಟ ವಸ್ತುಗಳು ಹಂಚಿಕೊಳ್ಳುವ ಸಾಮಾನ್ಯ ಗುಣಲಕ್ಷಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ (ಸ್ಥಾನ, ಗಾತ್ರ, ಚಿತ್ರ)
+ - ವಸ್ತುವನ್ನು ಅಳಿಸಲು `dead` ಧ್ವಜವನ್ನು ಹೊಂದಿದೆ
+ - ವಸ್ತುವನ್ನು ಕ್ಯಾನ್ವಾಸ್ನಲ್ಲಿ ಬಿಡಿಸುವ `draw()` ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ
+ - ಎಲ್ಲಾ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಡಿಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿದ್ದು ಮಕ್ಕಳ ವರ್ಗಗಳು ಅವುಗಳನ್ನು ಮರಳಿಸಬಹುದು
+
+```mermaid
+classDiagram
+ class GameObject {
+ +x: number
+ +y: number
+ +dead: boolean
+ +type: string
+ +width: number
+ +height: number
+ +img: Image
+ +draw(ctx)
+ }
+
+ class Hero {
+ +speed: number
+ +type: "ಹೀರೋ"
+ +width: 98
+ +height: 75
+ }
+
+ class Enemy {
+ +type: "ಶತ್ರು"
+ +width: 98
+ +height: 50
+ +setInterval()
+ }
+
+ GameObject <|-- Hero
+ GameObject <|-- Enemy
+
+ class EventEmitter {
+ +listeners: object
+ +on(message, listener)
+ +emit(message, payload)
+ }
+```
+ ಈಗ, ಈ `GameObject` ಅನ್ನು ವಿಸ್ತರಿಸಿ `Hero` ಮತ್ತು `Enemy` ರಚಿಸಿ:
+
+ ```javascript
+ class Hero extends GameObject {
+ constructor(x, y) {
+ super(x, y);
+ this.width = 98;
+ this.height = 75;
+ this.type = "Hero";
+ this.speed = 5;
+ }
+ }
+ ```
+
+ ```javascript
+ class Enemy extends GameObject {
+ constructor(x, y) {
+ super(x, y);
+ this.width = 98;
+ this.height = 50;
+ this.type = "Enemy";
+ const id = setInterval(() => {
+ if (this.y < canvas.height - this.height) {
+ this.y += 5;
+ } else {
+ console.log('Stopped at', this.y);
+ clearInterval(id);
+ }
+ }, 300);
+ }
+ }
+ ```
+
+ **ಈ ವರ್ಗಗಳಲ್ಲಿ ಪ್ರಮುಖ ತತ್ವಗಳು:**
+ - `GameObject` ಅನ್ನು `extends` ಕೀವರ್ಡ್ ಬಳಸಿ ವಂಶಾವಳಿಯಾಗಿ ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ
+ - ಪೋಷಕರ ಕಾಂಸ್ಟ್ರಕ್ಟರ್ ಅನ್ನು `super(x, y)` ಮೂಲಕ ಕರೆ ಮಲ್ಪು ಮಾಡುತ್ತದೆ
+ - ಪ್ರತಿ ವಸ್ತುವಿನ ಪ್ರಕಾರ ಸಂಪರ್ದಿತ ಗಾತ್ರ ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ
+ - `setInterval()` ಬಳಸಿ ಶತ್ರುಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತ ಚಲನ ಮಾಡಿಸುತ್ತದೆ
+
+2. ಕೀ-ಘಟನೆ ನಿರ್ವಾಹಕರನ್ನು ಸೇರಿಸಿ ಕೀ ನ್ಯಾವಿಗೇಶನ್ ನ್ನು ನಿರ್ವಹಿಸಿ (ನಾಯಕವನ್ನು ಮೇಲ್ಗೆ/ಕೆಳಗೆ/ಎಡಕ್ಕೆ/ಬಲಕ್ಕೆ ಚಲಿಸು)
+
+ *ನೆನಪಿಡಿ* ಇದು ಕಾರ್ಟೇಶಿಯನ್ ವ್ಯವಸ್ಥೆಯಾಗಿದೆ, ಮೇಲಾಗಿನ ಬಲದ ಮೂಲಾಂಕವು `0,0`. ಡಿಫಾಲ್ಟ್ ವರ್ತನೆ ನಿಲ್ಲಿಸುವ ಕೋಡ್ ಅನ್ನು ಸೇರಿಸಬೇಕು.
+
+ > **ಟಿಪ್**: ನಿಮ್ಮ `onKeyDown` ಫಂಕ್ಷನ್ ರಚಿಸಿ ಅದನ್ನು window ಗೆ ಅಂಟಿಸಿ:
+
+ ```javascript
+ const onKeyDown = function (e) {
+ console.log(e.keyCode);
+ // ಡಿಫಾಲ್ಟ್ ವರ್ತನೆ ನಿಲ್ಲಿಸಲು ಮೇಲಿನ ಪಾಠದ ಕೋಡ್ ಸೇರಿಸಿ
+ switch (e.keyCode) {
+ case 37:
+ case 39:
+ case 38:
+ case 40: // ಅಂಬುಳ ಕೀಲಿಗಳು
+ case 32:
+ e.preventDefault();
+ break; // ಖಾಲಿ ಸ್ಥಳ
+ default:
+ break; // ಇतर ಕೀಲಿಗಳನ್ನು ತಡೆಹಿಡಿಯಬೆಡಿ
+ }
+ };
+
+ window.addEventListener("keydown", onKeyDown);
+ ```
+
+ **ಈ ಘಟನೆ ನಿರ್ವಹಕ ಮಾಡುವುದು:**
+ - ಸಂಪೂರ್ಣ window ನಲ್ಲಿ ಕೀಪಡೌನ್ ಘಟನೆಗಳನ್ನು ಕೇಳುತ್ತದೆ
+ - ಒತ್ತಿದ ಕೀ ಕೋಡ್ ಅನ್ನು ಡಿಬಗ್ ಮಾಡಲು ಲಾಗ್ ಮಾಡುತ್ತದೆ
+ - ತೀರಿಗಳ ಕೀಲಿಗಳು ಮತ್ತು ಸ್ಪೇಸ್ಬಾರ್ಗಾಗಿ ಡಿಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ವರ್ತನೆಯನ್ನು ತಡೆಯುತ್ತದೆ
+ - ಇತರ ಕೀಲಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ
+
+ ಈ ಸಮಯದಲ್ಲಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕಾನ್ಸೋಲ್ ನೋಡಿ ಮತ್ತು ಕೀಲಿಪತ್ತಿಯ ಲಾಗ್ ಆಗುತ್ತಿರುವುದು ಗಮನಿಸಿ.
+
+3. [Pub sub ಮಾದರಿಯನ್ನು](../README.md) ಜಾರಿಗೆ ತರುವುದು, ಇದು ಬಾಕಿ ಭಾಗಗಳನ್ನು ಅನುಸರಿಸುವಾಗ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛವಾಗಿರಿಸುತ್ತದೆ.
+
+ ಪಬ್ಲಿಷ್-ಸಬ್ ಸಿದ್ಧಾಂತವು ಘಟನಾ ಪತ್ತೆಯನ್ನು ಮತ್ತು ಘಟನಾ ನಿರ್ವಹಣೆಯನ್ನು ವಿಭಜಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸಂಘಟಿಸುತ್ತದೆ. ಇದರಿಂದ ನಿಮ್ಮ ಕೋಡ್ ಎಸ್ಮಾಡ್ಯೂಲರ್ ಆಗಿ ಮತ್ತು ನಿರ್ವಹಣೆಗೆ ಸುಲಭವಾಗುತ್ತದೆ.
+
+ ಈ ಕೊನೆಯ ಭಾಗವನ್ನು ಮಾಡಲು ನೀವು:
+
+ 1. window ಮೇಲೆ ಒಂದು ಘಟನೆ ಕೇಳುವವಳನ್ನು ಸೇರಿಸಿಕೊಳ್ಳಿ:
+
+ ```javascript
+ window.addEventListener("keyup", (evt) => {
+ if (evt.key === "ArrowUp") {
+ eventEmitter.emit(Messages.KEY_EVENT_UP);
+ } else if (evt.key === "ArrowDown") {
+ eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+ } else if (evt.key === "ArrowLeft") {
+ eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+ } else if (evt.key === "ArrowRight") {
+ eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+ }
+ });
+ ```
+
+ **ಈ ಘಟನೆ ವ್ಯವಸ್ಥೆ ಮಾಡುವುದು:**
+ - ಕೀಬೋರ್ಡ್ ಇನ್ಪುಟ್ ಅನ್ನು ಪತ್ತೆಮಾಡಿ ಕಸ್ಟಮ್ ಆಟ ಸಂದೇಶಗಳಿಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ
+ - ಇನ್ಪುಟ್ ಪತ್ತೆ ಮತ್ತು ಆಟ ನಿಯಮಗಳು ಬೇರೆಯಾಗಿ ವಿಂಗಡಿಸಲಾಗುತ್ತದೆ
+ - ನಿಯಂತ್ರಣಗಳನ್ನು ಬದಲಾಯಿಸಲು ಸುಲಭಮಾಡುತ್ತದೆ, ಆಟ ಕೋಡ್ ಪ್ರಭಾವಿತವಾಗದೆ
+ - ಅನೇಕ ವ್ಯವಸ್ಥೆಗಳು ಒದתגೊಳಿಸಿದ ಇನ್ಪುಟ್ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಮಾಡುತ್ತದೆ
+
+```mermaid
+flowchart TD
+ A["ಕೀಬೋರ್ಡ್ ಇನ್ಪುಟ್"] --> B["ವಿಂಡೋ ಘಟನಾ ಶ್ರೋತೆ"]
+ B --> C["ಘಟನಾ ಬಿಡುಗಡೆ"]
+ C --> D["ಕೀ_ಘಟನೆ_ಮೇಲ್"]
+ C --> E["ಕೀ_ಘಟನೆ_ಕೆಳಕ್ಕೆ"]
+ C --> F["ಕೀ_ಘಟನೆ_ಎಡಕ್ಕೆ"]
+ C --> G["ಕೀ_ಘಟನೆ_ಬಲಕ್ಕೆ"]
+
+ D --> H["ಹೀರೋ ಚಲನೆ"]
+ D --> I["ಶಬ್ದ ವ್ಯವಸ್ಥೆ"]
+ D --> J["ದೃಶ್ಯ ಪರಿಣಾಮಗಳು"]
+
+ E --> H
+ F --> H
+ G --> H
+
+ style A fill:#e1f5fe
+ style C fill:#e8f5e8
+ style H fill:#fff3e0
+```
+ 2. ಸಂದೇಶಗಳನ್ನು ಪ್ರಕಟಿಸಲು ಮತ್ತು ಅನುಸರಿಸಲು EventEmitter ತರಗತಿಯನ್ನು ರಚಿಸಿ:
+
+ ```javascript
+ class EventEmitter {
+ constructor() {
+ this.listeners = {};
+ }
+
+ on(message, listener) {
+ if (!this.listeners[message]) {
+ this.listeners[message] = [];
+ }
+ this.listeners[message].push(listener);
+ }
+
+ 3. ಸ್ಥಿರಾಂಕಗಳನ್ನು ಸೇರಿಸಿ ಮತ್ತು EventEmitter ಅನ್ನು ಸೆಟ್ ಮಾಡಿ:
+
+ ```javascript
+ const Messages = {
+ KEY_EVENT_UP: "KEY_EVENT_UP",
+ KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
+ KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
+ KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
+ };
+
+ let heroImg,
+ enemyImg,
+ laserImg,
+ canvas, ctx,
+ gameObjects = [],
+ hero,
+ eventEmitter = new EventEmitter();
+ ```
+
+ **ಈ ಸೆಟ್ಅಪ್ ಅರ್ಥ:**
+ - ಟಿಪ್ಪಣಿಗಳನ್ನು ತಪ್ಪಿಸಲು ಹಾಗೂ ಪುನಃರೂಪಗೊಳಿಸಲು ಸುಲಭ ಮಾಡಲು ಸಂದೇಶ ಸ್ಥಿರಾಂಕಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ
+ - ಚಿತ್ರಗಳು, ಕ್ಯಾನ್ವಾಸ್ ಹಿನ್ನೆಲೆ ಮತ್ತು ಆಟ ಸ್ಥಿತಿಗಾಗಿ ಚರಗಳನ್ನು ಘೋಷಿಸುತ್ತದೆ
+ - ಪಬ್-ಸಬ್ ವ್ಯವಸ್ಥೆಗೆ ಗ್ಲೋಬಲ್ ಇವೆಂಟ್ ಎಮಿಟರ್ ರಚಿಸುತ್ತದೆ
+ - **ಎಲ್ಲಾ ಆಟದ ವಸ್ತುಗಳನ್ನು ಹಿಡಿಯಲು** ಒಂದು ಅರೆ ಬಿಡುತ್ತದೆ
+
+ 4. **ಆಟವನ್ನು ಪ್ರಾರಂಭಿಸಿ**
+
+ ```javascript
+ function initGame() {
+ gameObjects = [];
+ createEnemies();
+ createHero();
+
+ eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+ hero.y -= 5;
+ });
+
+ eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+ hero.y += 5;
+ });
+
+ eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+ hero.x -= 5;
+ });
+
+4. **ಆಟ ಲೂಪ್ ಅನ್ನು ನಿಗದಿಪಡಿಸಿ**
+
+ `window.onload` ಫಂಕ್ಷನ್ ಅನ್ನು ಪುನರ್ ರಚಿಸಿ ಆಟವನ್ನು ಪ್ರಾರಂಭಿಸಲು ಮತ್ತು ಉತ್ತಮ ಮಧ್ಯಂತರದಲ್ಲಿ ಆಟ ಲೂಪ್ ಸ್ಥಾಪಿಸಲು. ನೀವು ಲೇಸರ್ ಕಿರಣವನ್ನು ಕೂಡ ಸೇರಿಸುತ್ತೀರಿ:
+
+ ```javascript
+ window.onload = async () => {
+ canvas = document.getElementById("canvas");
+ ctx = canvas.getContext("2d");
+ heroImg = await loadTexture("assets/player.png");
+ enemyImg = await loadTexture("assets/enemyShip.png");
+ laserImg = await loadTexture("assets/laserRed.png");
+
+ initGame();
+ const gameLoopId = setInterval(() => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ drawGameObjects(ctx);
+ }, 100);
+ };
+ ```
+
+ **ಆಟದ ಸೆಟ್ಅಪ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+ - **ಪುಟವು ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆಗುವುದನ್ನು ಕಾಯುತ್ತದೆ** ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು
+ - **ಕ್ಯಾನ್ವಾಸ್ ಅಂಕೆಯನ್ನು ಮತ್ತು ಅದರ 2D ರೆಂಡರಿಂಗ್ ಕಾನ್ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಪಡೆಯುತ್ತದೆ**
+ - **ಎಲ್ಲಾ ಚಿತ್ರ ಆಸ್ತಿ ಗಳನ್ನು ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ `await` ಬಳಸಿ ಲೋಡ್ ಮಾಡುತ್ತದೆ**
+ - **ಆಟ ಲೂಪ್ ಅನ್ನು 100ms ಮಧ್ಯಂತರದಲ್ಲಿ (10 FPS) ಪ್ರಾರಂಭಿಸುತ್ತದೆ**
+ - **ಪ್ರತಿ ಫ್ರೇಮಲ್ಲೂ ಸಂಪೂರ್ಣ ಪರದೆ ಅಳಿಸಿ ಮರುಚಿತ್ರಿಸುತ್ತದೆ**
+
+5. **ನಿರ್ದಿಷ್ಟ ಮಧ್ಯಂತರದಲ್ಲಿ ಶತ್ರುಗಳನ್ನು ಸರಿಸಲು** ಕೇಾಡ್ ಸೇರಿಸಿ
+
+ `createEnemies()` ಫಂಕ್ಷನ್ ಅನ್ನು ಪುನರ್ ರಚಿಸಿ ಶತ್ರುಗಳನ್ನು ರಚಿಸುವ ಹಾಗೆ ಮತ್ತು ಅವುಗಳನ್ನು ಹೊಸ gameObjects ವರ್ಗಕ್ಕೆ ಪುಷ್ ಮಾಡಿ:
+
+ ```javascript
+ function createEnemies() {
+ const MONSTER_TOTAL = 5;
+ const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+ const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+ const STOP_X = START_X + MONSTER_WIDTH;
+
+ for (let x = START_X; x < STOP_X; x += 98) {
+ for (let y = 0; y < 50 * 5; y += 50) {
+ const enemy = new Enemy(x, y);
+ enemy.img = enemyImg;
+ gameObjects.push(enemy);
+ }
+ }
+ }
+ ```
+
+ **ಶತ್ರು ರಚನೆಯ ಏನಾಗುತ್ತದೆ:**
+ - **ಶತ್ರುಗಳನ್ನು ಪರದೆ ಮಧ್ಯಭಾಗದಲ್ಲಿ ನೆಲೆಯಲ್ಲಿ ಇರಿಸುವ ಸ್ಥಾನಗಳನ್ನು ಲೆಕ್ಕಹಾಕುತ್ತದೆ**
+ - **ನಷ್ಟವಾದ ಲೂಪ್ಗಳಲ್ಲಿ ವ್ಯಾಪಿಸಿದ ಶತ್ರುಗಳ ತಂತಿಗಳನ್ನು ರಚಿಸುತ್ತದೆ**
+ - **ಶತ್ರು ಚಿತ್ರವನ್ನು ಪ್ರತಿ ಶತ್ರು ವಸ್ತುವಿಗೆ ನೇಮಿಸುತ್ತದೆ**
+ - **ಪ್ರತಿ ಶತ್ರುವನ್ನು ಜಾಗತಿಕ ಆಟ ವಸ್ತುಗಳ ಅರೆಗೆಯಲ್ಲಿ ಸೇರಿಸುತ್ತದೆ**
+
+ ಮತ್ತು `createHero()` ಫಂಕ್ಷನ್ ಅನ್ನು ಸೇರಿಸಿ ಹೀರೋಗೆ ಸಮಾನ ಪ್ರಕ್ರಿಯೆ ಮಾಡಲು.
+
+ ```javascript
+ function createHero() {
+ hero = new Hero(
+ canvas.width / 2 - 45,
+ canvas.height - canvas.height / 4
+ );
+ hero.img = heroImg;
+ gameObjects.push(hero);
+ }
+ ```
+
+ **ಹೀರೋ ರಚನೆಯ ಏನಾಗುತ್ತದೆ:**
+ - **ಹೀರೋವನ್ನು ಪರದೆ ಕೆಳಗಿನ ಮಧ್ಯಭಾಗದಲ್ಲಿ ನೆಲೆಸಿಸುತ್ತದೆ**
+ - **ಹೀರೋ ಚಿತ್ರವನ್ನು ಹೀರೋ ವಸ್ತುವಿಗೆ ನೇಮಿಸುತ್ತದೆ**
+ - **ಹೀರೋವನ್ನು ರೆಂಡರಿಂಗ್ಗಾಗಿ ಆಟ ವಸ್ತುಗಳ ಅರೆಗೆಯಲ್ಲಿ ಸೇರಿಸುತ್ತದೆ**
+
+ ಮತ್ತು ಕೊನೆಗೆ, ಚಿತ್ರಿಸಲು `drawGameObjects()` ಫಂಕ್ಷನ್ ಅನ್ನು ಸೇರಿಸಿ:
+
+ ```javascript
+ function drawGameObjects(ctx) {
+ gameObjects.forEach(go => go.draw(ctx));
+ }
+ ```
+
+ **ಚಿತ್ರಿಸುವ ಫಂಕ್ಷನ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+ - **ಅರೆದಲ್ಲಿನ ಎಲ್ಲಾ ಆಟ ವಸ್ತುಗಳ ಮೂಲಕ ಗೊತ್ತುಮಾಡುತ್ತದೆ**
+ - **ಪ್ರತಿ ವಸ್ತುವಿನ `draw()` ಮೆಥಡ್ ಕರೆ ಮಾಡುತ್ತದೆ**
+ - **ಕ್ಯಾಂವಾಸ್ ಕಾನ್ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಪಾಸ್ ಮಾಡುತ್ತದೆ ಆದರಿಂದ ವಸ್ತುಗಳು ತಾವುನ್ನು ರೆಂಡರ್ ಮಾಡಬಹುದು**
+
+ ### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ತಪಾಸಣೆ**
+ **ಪೂರ್ಣ ಆಟ ವ್ಯವಸ್ಥೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳು**: ಸಂಪೂರ್ಣ ವಾಸ್ತುಶಿಲ್ಪದ ಮೇಲೆ ನಿಮ್ಮ ನೈಪುಣ್ಯವನ್ನು ಪರಿಶೀಲಿಸಿ:
+ - ✅ ಹೇಗೆವರು ಹೀರೋ ಮತ್ತು ಶತ್ರು ಸಾಮಾನ್ಯ GameObject ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತಾರೆ ತಿಳಿದುಕೊಳ್ಳಿ?
+ - ✅ ನಿಮ್ಮ ಕೋಡ್ ನಿರ್ವಹಣಾ ಮಾಡಲು pub/sub ಮಾದರಿ ಹೇಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ?
+ - ✅ ಆಟ ಲೂಪ್ ನೇರವಾಗಿ ಸೌಕರ্যমಯ ಅನಿಮೇಶನ್ ನಿರ್ಮಿಸಲು ಯಾವ ಪಾತ್ರವಹಿಸುತ್ತದೆ?
+ - ✅ ಪ್ರಕಟಕ ಕೇಳುವಿಕೆಗಳು ಬಳಕೆದಾರನ ಇನ್ಪುಟ್ ಅನ್ನು ಆಟ ವಸ್ತುಗಳ ವರ್ತನೆಗೆ ಹೇಗೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ?
+
+ **ವ್ಯವಸ್ಥೆಯ ಸಮಗ್ರತೆ**: ನಿಮ್ಮ ಆಟ ಈಗ ತೋರಿಸುತ್ತದೆ:
+ - **ವಸ್ತು-ಮುಖ ಡಿಸೈನ್**: ಆಧಾರ ವರ್ಗಗಳೊಂದಿಗೆ ವಿಶೇಷೀಕೃತ ಅನುಕ್ರಮಣೆ
+ - **ಘಟನೆ-ಚಾಲಿತ ವಾಸ್ತುಶಿಲ್ಪ**: pub/sub ಮಾದರಿ ನೇರ ಸಂಪರ್ಕ ಕಡಿಮೆ
+ - **ಅನಿಮೇಶನ್ ಫ್ರೇಮ್ವರ್ಕ್**: ಪಂದ್ಯ ಲೂಪ್ ಸತತ ಫ್ರೇಮ್ ನವೀಕರಣಗಳು
+ - **ಇನ್ಪುಟ್ Haಂಡ್ಲಿಂಗ್**: ವಿಡಗಳ ಕಾರ್ಯಕ್ರಮಗಳೊಂದಿಗೆ ಡೀಫಾಲ್ಟ್ ತಡೆಹಿಡಿತ
+ - **ಆಸ್ತಿ ನಿರ್ವಹಣೆ**: ಚಿತ್ರ ಲೋಡಿಂಗ್ ಮತ್ತು ಸ್ಪ್ರೈಟ್ ರೆಂಡರಿಂಗ್
+
+ **ವೃತ್ತಿಪರ ಮಾದರಿಗಳು**: ನೀವು ಅನುಷ್ಠಾನಗೊಳಿಸಿದ್ದೀರಿ:
+ - **ಹೊರ ಹಿತಾಸಕ್ತಿಗಳ ವಿಭಜನೆ**: ಇನ್ಪುಟ್, ತರ್ಕ ಮತ್ತು ರೆಂಡರಿಂಗ್ ವಿಭಜಿಸಲಾಗಿದೆ
+ - **ಬಹುರೂಪತೆಯತೆ**: ಎಲ್ಲಾ ಆಟ ವಸ್ತುಗಳು ಸಾಮಾನ್ಯ ಚಿತ್ರಣ ಇಂಟರ್ಫೇಸ್ ಹಂಚಿಕೊಳ್ಳುತ್ತವೆ
+ - **ಸಂದೇಶ ಸಂವಹನ**: ಘಟಕಗಳ ಮಧ್ಯೆ ಸ್ವಚ್ಛ ಸಂವಹನ
+ - **ಸಂಪನ್ಮೂಲ ನಿರ್ವಹಣೆ**: ಪರಿಣಾಮಕಾರಿ ಸ್ಪ್ರೈಟ್ ಮತ್ತು ಅನಿಮೇಶನ್ ನಿರ್ವಹಣೆ
+
+ ನಿಮ್ಮ ಶತ್ರುಗಳು ನಿಮ್ಮ ಹೀರೋ ಬಾಹುಬಲ ನೌಕೆಯತ್ತ ಮುಂದುವರೆದಂತೆ ತೋರುತ್ತವೆ!
+
+ }
+ }
+ ```
+
+ and add a `createHero()` function to do a similar process for the hero.
+
+ ```javascript
+ function createHero() {
+ hero = new Hero(
+ canvas.width / 2 - 45,
+ canvas.height - canvas.height / 4
+ );
+ hero.img = heroImg;
+ gameObjects.push(hero);
+ }
+ ```
+
+ ಮತ್ತು ಕೊನೆಗೆ, ಚಿತ್ರಿಸಲು `drawGameObjects()` ಫಂಕ್ಷನ್ ಅನ್ನು ಸೇರಿಸಿ:
+
+ ```javascript
+ function drawGameObjects(ctx) {
+ gameObjects.forEach(go => go.draw(ctx));
+ }
+ ```
+
+ ನಿಮ್ಮ ಶತ್ರುಗಳು ನಿಮ್ಮ ಹೀರೋ ಬಾಹುಬಲ ನೌಕೆಯತ್ತ ಮುಂದುವರೆಯಲು ಪ್ರಾರಂಭಿಸಬೇಕು!
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ನಿಮ್ಮ ಆಟದ ಹೊಳಪನ್ನು ಹೆಚ್ಚಿಸುವ ಸವಾಲು ಇಲ್ಲಿ ಇದೆ: ಗಡಿಯಾರಗಳು ಮತ್ತು ಸುತ್ತುವರೆದ ನಿಯಂತ್ರಣಗಳನ್ನು ಸೇರಿಸುವುದು. ಪ್ರಸ್ತುತ, ನಿಮ್ಮ ಹೀರೋ ಪರದೆ ಬಿಟ್ಟು ಹೊರಗೆ ಹೋಗಬಹುದು, ಮತ್ತು ಚಲನೆಯು ಸಂಕುचितವಾದಂತೆ ಕಾಣಬಹುದು.
+
+**ನಿಮ್ಮ ಮಿಷನ್:** ನಿಮ್ಮ ಬಾಹುಬಲ ನೌಕೆಯನ್ನು ಬಲವಾದ ಪರದೆ ಗಡಿಗಳು ಮತ್ತು ಸುಗಮವಾದ ಚಲನೆಯೊಂದಿಗೆ ನೈಜತೆಯಂತೆ ಗೋಚರಿಸು. ಇದು NASA ನ ಫ್ಲೈಟ್ ನಿಯಂತ್ರಣ ವ್ಯವಸ್ಥೆಗಳು ಬಾಹುಬಲ ಯಾನಗಳನ್ನು ಸುರಕ್ಷಿತ ಕಾರ್ಯಾಚರಣಾ ನಿಯಮಗಳನ್ನು ಮೀರುವುದರಿಂದ ತಡೆಹಿಡಿಯುವುದರಂತೆ.
+
+**ನೀವು ಬಲಾಯಿಸಬೇಕಾದುದು:** ನಿಮ್ಮ ಹೀರೋ ಬಾಹುಬಲ ನೌಕೆಯನ್ನು ಪರದೆ ಒಳಗಿರಿಸುವ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿ, ಮತ್ತು ನಿಯಂತ್ರಣಗಳು ಸುಗಮವಾಗಿರಲಿ. ಆಟಗಾರರು ತಿರುಗುಬಾಣ ಕುಂಜಿಯನ್ನು ಒತ್ತಿದಾಗ, ನೌಕೆ ನಿರಂತರವಾಗಿ ಸರಿಯಬೇಕು, ಅಸ್ಥಿರ ಹಾದಿಯಲ್ಲಿ ಅಲ್ಲ. ನೌಕೆಯು ಪರದೆ ಗಡಿಯಲ್ಲಿದಾಗ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸೇರಿಸುವುದಾಗಿ ಪರಿಗಣಿಸಿ – ಆಟ ವಲಯದ ಸಂಖ್ಯೆಯನ್ನು ಸೂಚಿಸುವ ಸೂಕ್ಷ್ಮ ಪರಿಣಾಮ.
+
+ಇಲ್ಲಿ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಕುರಿತು ತಿಳಿಯಿರಿ.
+
+## 🚀 ಸವಾಲು
+
+ಕೋಡ್ ಸಂಘಟನೆಯು ಯೋಜನೆಗಳು ವಿಸ್ತಾರಗೊಳ್ಳುವಂತೆ ಹೆಚ್ಚಾಗುತ್ತದೆ. ನೀವು ಗಮನಿಸಿದ್ದು ಬಾಷೆಯು ಕಾರ್ಯಗಳು, ವ್ಯತ್ಯಾಸಗಳು, ಮತ್ತು ವರ್ಗಗಳು ಎಲ್ಲವೂ ಒಟ್ಟಿಗೆ ಕೂಡಿವೆ. ಇದು ನನ್ನಿಗೆ Apollo ಮಿಷನ್ ಕೋಡ್ ಅನ್ನು ಸಂಘಟಿಸುವುದರಲ್ಲಿ ಎಂಜಿನಿಯರ್ಗಳು ಕ್ಲಿಯರ್, ನಿರ್ವಹಣೆಯ Iyತ ವ್ಯವಸ್ಥೆಗಳನ್ನು ರಚಿಸಲು ಹೇಗೆ ಹೆಮ್ಮೆಯ ಕೆಲಸ ಮಾಡಿದರು ಎಂಬುದನ್ನು ನೆನಪಿಸುತ್ತದೆ.
+
+**ನಿಮ್ಮ ಮಿಷನ್:**
+ಸಾಫ್ಟ್ವೇರ್ ವಾಸ್ತುಶಿಲ್ಪಿಯಂತೆ ಯೋಚಿಸಿ. ಆರು ತಿಂಗಳುಗಳ ನಂತರ ನೀವು ಅಥವಾ ತಂಡದಿಂದ ಯಾರಾದರೂ ಏನಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ಅರಿತುಕೊಳ್ಳಲು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಸಂಘಟಿಸುವಿರಿ? ಈಗಾಗಲೇ ಒಬ್ಬೇ ಫೈಲ್ನಲ್ಲಿ ಇರುತ್ತಿದ್ದರೂ ನೀವು ಉತ್ತಮ ಸಂಘಟನೆಯೊಂದಿಗೆ ಮಾಡಬಹುದು:
+
+- **ಸಂಬಂಧಿತ ಕಾರ್ಯಗಳನ್ನು** ಸ್ಪಷ್ಟ ಕಾಮೆಂಟ್ ತಲೆಬರಹಗಳೊಂದಿಗೆ ಗುಂಪು ಮಾಡುವುದು
+- **ಹಿತಾಸಕ್ತಿಗಳನ್ನು ವಿಭಜಿಸುವುದು** - ಆಟ ತರ್ಕವನ್ನು ರೆಂಡರಿಂಗ್ ರಿಂದ ವಿಭಜಿಸಲು
+- **ಸ್ಥಿರ ನಾಮಕರಣ ನಿಯಮಗಳನ್ನು** ವ್ಯತ್ಯಾಸಗಳು ಮತ್ತು ಕಾರ್ಯಗಳಿಗೆ ಉಪಯೋಗಿಸುವುದು
+- **ಮಾಡ್ಯೂಲುಗಳು** ಅಥವಾ ಹೆಸರು ಬದಿಹಿಡಿವಿಕೆಗಳನ್ನು ಬಳಸಿ ನಿಮ್ಮ ಆಟದ ವಿಭಿನ್ನ ಆಯಾಮಗಳನ್ನು ಸಂಘಟಿಸುವುದು
+- **ಪ್ರಮುಖ ಭಾಗಗಳ ಉದ್ದೇಶವನ್ನು ವಿವರಿಸುವ** ದಾಖಲೆಗಳನ್ನು ಸೇರಿಸುವುದು
+
+**ಪುನರ್ಮೂಲ್ಯನು ಮಾಡಿಕೊಳ್ಳುವ ಪ್ರಶ್ನೆಗಳು:**
+- ನೀವು ಹಿಂದಿರುಗಿ ನೋಡಿದಾಗ ನಿಮ್ಮ ಕೋಡ್ನ ಯಾವ ಭಾಗಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟ?
+- ನೀವು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಸಂಘಟಿಸಿದರೆ ಮತ್ತೊಬ್ಬರು ಸುಲಭವಾಗಿ ಸಹಕಾರ ನೀಡಬಹುದು?
+- ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಲು (ಪವರ್-ಅಪ್ಗಳು ಅಥವಾ ವಿಭಿನ್ನ ಶತ್ರು ಪ್ರಕಾರಗಳು) ನೀವು ಯೋಜಿಸಿದರೆ ಏನು ಆಗಬಹುದು?
+
+## ಪೋಷ್ಟ್-ಲೆಕ್ಚರ್ ಕ್ವಿಜ್
+
+[ಪೋಷ್ಟ್-ಲೆಕ್ಚರ್ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/34)
+
+## ಪರಿಶೀಲನೆ ಮತ್ತು ಸ್ವತಃ ಅಧ್ಯಯನ
+
+ನಾವು ಎಲ್ಲವನ್ನೂ ನೂತನದಿಂದ ನಿರ್ಮಿಸುತ್ತಿದ್ದೇವೆ, ಇದು ಕಲಿಕೆಯು ಅದ್ಭುತವಾಗಿದೆ, ಆದರೆ ಇಲ್ಲಿ ಒಂದು ಸಣ್ಣ ರಹಸ್ಯ ಇದೆ – ಕೆಲವು ಅದ್ಭುತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಂವರ್ಕ್ಗಳಿವೆ, ಅವು ಬಹಳಷ್ಟು ಕಠಿಣ ಕೆಲಸಗಳನ್ನು ನಿಭಾಯಿಸಬಹುದು. ನೀವು ಮೂಲತತ್ವಗಳನ್ನು ಒಳ್ಳೆಯದಾಗಿ ಅರ್ಥಮಾಡಿಕೊಂಡಾಗ, ನೀವು [ಲಭ್ಯವಿರುವುದನ್ನು ಅನ್ವೇಷಿಸಬಹುದು](https://github.com/collections/javascript-game-engines).
+
+ಫ್ರೇಂವರ್ಕ್ಗಳನ್ನು ಕೈಯಲ್ಲಿ ಸಹಾಯಕರಾಗಿರುವ ಉತ್ತಮ ಸಲಕರಣೆಯ ಸಂಗ್ರಹದಂತೆ ಎಣಿಸಿ. ಅವು ನಮೂದಿಸಿದ ಕೋಡ್ ಸಂಘಟನೆ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸಬಹುದು, ಜೊತೆಗೆ ನೀವು ಸ್ವತಃ ನಿರ್ಮಿಸಲು ವಾರಗಳು ಬೇಕಾಗುವ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡಬಹುದು.
+
+**ಅನ್ವೇಷಿಸಲು ಚೆನ್ನಾಗಿರುವ ವಿಷಯಗಳು:**
+- ಆಟ ಎಂಜಿನ್ಗಳು ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಸಂಘಟಿಸುತ್ತವೆ – ಅವರ ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಬಳಕೆಯಾಗುವ ಮಾದರಿಗಳನ್ನು ನೀವು ಆಶ್ಚర్యಪಡುತ್ತೀರಿ
+- ಕ್ಯಾನ್ವಾಸ್ ಆಟಗಳನ್ನು ಮೃದುವಾಗಿ ನಿರ್ವಹಿಸಲು ಪ್ರದರ್ಶನ ತಂತ್ರಗಳು
+- ನಿಮ್ಮ ಕೋಡ್ ಕ್ಲೀನ್ ಮತ್ತು ನಿರ್ವಹಣೆಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನ ನವೀನ ವೈಶಿಷ್ಟ್ಯಗಳು
+- ಆಟ ವಸ್ತುಗಳನ್ನೂ ಅವುಗಳ ಸಂಬಂಧಗಳನ್ನೂ ನಿರ್ವಹಿಸುವ ವಿವಿಧ ವಿಧಾನಗಳು
+
+## 🎯 ನಿಮ್ಮ ಆಟ ಅನಿಮೇಶನ್ ನೈಪುಣ್ಯ ಸಮಯರೇಖೆ
+
+```mermaid
+timeline
+ title ಆಟದ ಅನಿಮೇಷನ್ ಮತ್ತು ಸಂವಹನ ಕಲಿಕೆ ಪ್ರಗತಿ
+
+ section ಚಲನೆಯ ಮೂಲತತ್ತ್ವಗಳು (20 ನಿಮಿಷಗಳು)
+ ಅನಿಮೇಷನ್ ತತ್ವಗಳು: ಫ್ರೇಮ್ ಆಧಾರಿತ ಅನಿಮೇಷನ್
+ : ಸ್ಥಾನ ಪರಿಶೋಧನೆಗಳು
+ : ಸಹನೀಯ ವ್ಯವಸ್ಥೆಗಳು
+ : ಮಧ್ಯಮ ಚಲನೆ
+
+ section ಘಟನೆ ವ್ಯವಸ್ಥೆಗಳು (25 ನಿಮಿಷಗಳು)
+ ಬಳಕೆದಾರ ಇನ್ಪುಟ್: ಕೀಪಾಡ್ ಘಟನೆ ನಿರ್ವಹಣೆ
+ : ಡೀಫಾಲ್ಟ್ ವರ್ತನೆ ತಡೆವಿಕೆ
+ : ಘಟನೆ ವಸ್ತು ಲಕ್ಷಣಗಳು
+ : ವಿಂಡೋ ಮಟ್ಟದ ಕೆಳಕೈ
+
+ section ಆಟದ ಆರ್ಕಿಟೆಕ್ಚರ್ (30 ನಿಮಿಷಗಳು)
+ ವಸ್ತು ಡಿಸೈನ್: ವಂಶಸ್ಥಾನದ ಮಾದರಿಗಳು
+ : ಮೂಲ ವರ್ಗ ರಚನೆ
+ : ವಿಶೇಷಿತ ಸ್ವಭಾವಗಳು
+ : ಬಹುರೂಪ ಸ 인터ಫೇಸ್ಗಳು
+
+ section ಸಂವಹನ ಮಾದರಿಗಳು (35 ನಿಮಿಷಗಳು)
+ ಪಬ್/ಸಬ್ ಅನುಷ್ಠಾನ: ಘಟನೆ ಹೊರಡುವಿಕೆ
+ : ಸಂದೇಶ ನಿರಂತರತೆ
+ : ನಿಜವಾದ ಸಂಯೋಗ
+ : ವ್ಯವಸ್ಥೆ ಸಂಯೋಜನೆ
+
+ section ಆಟದ ಲೂಪ್ ಪರಿಣಿತಿ (40 ನಿಮಿಷಗಳು)
+ ನಿಜ-ಸಮಯ ವ್ಯವಸ್ಥೆಗಳು: ಫ್ರೇಮ್ ದರ ನಿಯಂತ್ರಣ
+ : ಅಪ್ಡೇಟ್/ರೆಂಡರ್ ಚಕ್ರ
+ : ಸ್ಥಿತಿಯ ನಿರ್ವಹಣೆ
+ : ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆ
+
+ section ಉನ್ನತ ತಂತ್ರಗಳು (45 ನಿಮಿಷಗಳು)
+ ವೃತ್ತಿಪರ ವೈಶಿಷ್ಟ್ಯಗಳು: ಘರ್ಷಣೆ ಪತ್ತೆ
+ : ಭೌತಶಾಸ್ತ್ರೀಯ ನಕಲು
+ : ಸ್ಥಿತಿ ಯಂತ್ರಗಳು
+ : ಘಟಕ ವ್ಯವಸ್ಥೆಗಳು
+
+ section ಆಟದ ಎಂಜಿನ್ ತತ್ವಗಳು (1 ವಾರ)
+ ಫ್ರೇಮ್ವರ್ಕ್ ಅರಿವು: ಘಟಕ-ಸಂರಚನಾ ವ್ಯವಸ್ಥೆಗಳು
+ : ದೃಶ್ಯ ಬಾಲ್ಹಾರಿ
+ : ಆಸ್ತಿಗತಿಯ पाइಪ್ಲೈನ್ಗಳು
+ : ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರೊಫೈಲಿಂಗ್
+
+ section ಉತ್ಪಾದನಾ ಕೌಶಲ್ಯಗಳು (1 ತಿಂಗಳು)
+ ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ: ಕೋಡ್ ಸಂರಚನೆ
+ : ತಂಡ ಸಹಕಾರ
+ : ಪರೀಕ್ಷಣಾ ತಂತ್ರಗಳು
+ : ಹೊರತಾಗಿಸುವಿಕೆ ಸುಧಾರಣೆ
+```
+### 🛠️ ನಿಮ್ಮ ಆಟ ಅಭಿವೃದ್ಧಿ ಉಪಕರಣ ಸಾರಾಂಶ
+
+ಈ ಪಾಠ ಮುಗಿಸಿದ ನಂತರ, ನೀವು ಈಗಿದ್ದರು:
+- **ಅನಿಮೇಶನ್ ತತ್ವಗಳು**: ಫ್ರೇಮ್ ಆಧಾರಿತ ಚಲನೆ ಮತ್ತು ಮೃದುವಾದ ಪರಿವರ್ತನೆಗಳು
+- **ಘಟನೆ-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಕೀಬೋರ್ಡ್ ಇನ್ಪುಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಜೊತೆ ಸರಿಯಾದ ಘಟನೆ ನಿರ್ವಹಣೆ
+- **ವಸ್ತು-ಮುಖ ವಿನ್ಯಾಸ**: ಅನುಕ್ರಮಣ ಶ್ರೇಣಿಗಳು ಮತ್ತು ಬಹುರೂಪಾತ್ಮಕ ಇಂಟರ್ಫೇಸ್ಗಳು
+- **ಸಂದೇಶ ವಿನ್ಯಾಸ**: pub/sub ವಾಸ್ತುಶಿಲ್ಪ ನಿರ್ವಹಣೆಗೆ ಅನುಕೂಲಕರ
+- **ಆಟ ಲೂಪ್ ವಾಸ್ತುಶಿಲ್ಪ**: ನೈತಿಕ ನವೀಕರಣ ಮತ್ತು ಚಿತ್ರಣ ಚಕ್ರಗಳು
+- **ಇನ್ಪುಟ್ ವ್ಯವಸ್ಥೆಗಳು**: ಬಳಕೆದಾರ ನಿಯಂತ್ರಣ ಮ್ಯಾಪ್ ಮಾಡುವುದಾದರೊಂದಿಗೆ ಮೂಲ ವರ್ತನೆ ತಡೆಬಂದಿದೆ
+- **ಆಸ್ತಿ ನಿರ್ವಹಣೆ**: ಸ್ಪ್ರೈಟ್ ಲೋಡಿಂಗ್ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಚಿತ್ರಣ ತಂತ್ರಗಳು
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು**
+- [ ] ಬ್ರೌಸರ್ ಕન્સೋಲ್ ತೆರೆಯಿರಿ ಮತ್ತು `addEventListener('keydown', console.log)` ಪ್ರಯತ್ನಿಸಿ ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳನ್ನು ನೋಡಿ
+- [ ] ಸರಳ ಡಿವ್ ಅಂಶವನ್ನು ರಚಿಸಿ ಮತ್ತು ತಿರುಗುಬಾಣಗಳೊಂದಿಗೆ ಅದರ ಚಲನೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ
+- [ ] ನಿರಂತರ ಚಲನೆ ನಿರ್ಮಿಸಲು `setInterval` ಅನ್ನು ಪ್ರಯತ್ನಿಸಿ
+- [ ] `event.preventDefault()` ಯನ್ನು ಪ್ರಯತ್ನಿಸಿ ಮೂಲ ವರ್ತನೆಯನ್ನು ತಡೆಯಲು
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಏನು ಸಾಧಿಸಬಹುದಾಗಿದೆ**
+- [ ] ಪಾಠೋತ್ತರ ಕ್ವಿಜ್ ಪೂರ್ಣಗೊಳ್ಳಿಸಿ ಮತ್ತು ಘಟನೆ-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ಸಂಪೂರ್ಣ ಕೀಬೋರ್ಡ್ ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ ಚಲಿಸುವ ಹೀರೋ ಬಾಹುಬಲ ನೌಕೆಯನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ಮೃದುವಾದ ಶತ್ರು ಚಲನಾಚಲನ ಮಾದರಿಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ಆಟ ವಸ್ತುಗಳು ಪರದೆ ಬಿಡದಂತೆ ಗಡಿಬಿಡಿಯನ್ನು ಸೇರಿಸಿ
+- [ ] ಆಟ ವಸ್ತುಗಳ ನಡುವೆ ಮೂಲಭೂತ ಸಂಘರ್ಷ ಗುರುತಿಸುವಿಕೆ ರಚಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ಅನಿಮೇಶನ್ ಪಯಣ**
+- [ ] ಸುವ್ಯವಸ್ಥಿತ ಚಲನೆ ಮತ್ತು ಸಂವಹನಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಉಡಾಣ ಆಟವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ವಕ್ರತೆಗಳು, ವೇಗವರ್ಧನೆ, ಮತ್ತು ಭೌತಶಾಸ್ತ್ರದಂತಹ ಪ್ರಗತ ಚಲನ ಮಾದರಿಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಮೃದುವಾದ ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಈಸಿಂಗ್ ಫಂಕ್ಷನ್ಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ಕಣದ ಪರಿಣಾಮಗಳು ಮತ್ತು ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಮೃದು 60fps ಆಟಗತಿಯಕ್ಕಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಿಸಿ
+- [ ] ಮೊಬೈಲ್ ಟಚ್ ನಿಯಂತ್ರಣಗಳ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ ಸೇರಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ಇಂಟರೆಕ್ಟಿವ್ ಅಭಿವೃದ್ಧಿ**
+- [ ] ಪ್ರಗತ ಅನಿಮೇಶನ್ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ ಇಂಟರೆಕ್ಟಿವ್ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] GSAP ಅಥವಾ ನಿಮ್ಮ ಸ್ವಂತ ಅನಿಮೇಶನ್ ಎಂಜಿನ್ ಅನ್ನು ಕಲಿಯಿರಿ
+- [ ] ಓಪನ್ ಸೋರಸ್ ಆಟ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಅನಿಮೇಶನ್ ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿರಿ
+- [ ] ಗ್ರಾಫಿಕ್ಸ್ ಘನಾಂಶಗಳಿಗೆ ಕಾರ್ಯಕ್ಷಣೆಯನ್ನು ಪರಿಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಆಟ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಅನಿಮೇಶನ್ ಕುರಿತು ಶಿಕ್ಷಣಾತ್ಮಕ ವಿಷಯಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಸಂವಹನ ಮತ್ತಂಜೂರ ಆದಾಯದ ಕಾರ್ಯಕ್ರಮ ಕಲೆಹಾಕಿ
+
+**ವಾಸ್ತವಿಕ ಆಪ್ಲಿಕೇಶನ್ಗಳು:** ನಿಮ್ಮ ಆಟ ಅನಿಮೇಶನ್ ನೈಪುಣ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ:
+- **ಇಂಟರೆಕ್ಟಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ಡೈನಮಿಕ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಮತ್ತು ನೈತಿಕ ಇಂಟರ್ಫೇಸ್ಗಳು
+- **ಡೇಟಾ ದೃಶ್ಯೀಕರಣ**: ಅನಿಮೇಟೆಡ್ ಚಾರ್ಟ್ಗಳು ಮತ್ತು ಇಂಟರೆಕ್ಟಿವ್ ಗ್ರಾಫಿಕ್ಸ್
+- **ಶಿಕ್ಷಣಾತ್ಮಕ ಸಾಫ್ಟ್ವೇರ್**: ಇಂಟರೆಕ್ಟಿವ್ ಸಿಮ್ಯುಲೆಷನ್ಗಳು ಮತ್ತು ಕಲಿಕೆ ಸಲಕರಣೆಗಳು
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: ಟಚ್ ಆಧಾರಿತ ಆಟಗಳು ಮತ್ತು ಜೆಸ್ಟೂರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್
+- **ಡೆಸ್ಕ್ಟಾಪ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ಎಲೆಕ್ಟ್ರಾನ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಮೃದುವಾದ ಅನಿಮೇಶನ್ಗಳೊಂದಿಗೆ
+- **ವೆಬ್ ಅನಿಮೇಶನ್ಗಳು**: CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನಿಮೇಶನ್ ಲೈಬ್ರರಿಗಳು
+
+**ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು ನೀವು ಪಡೆದಿದ್ದು:**
+- **ಅನ್ವಯಿಸಲು** ಘಟನೆ-ಚಾಲಿತ ವ್ಯವಸ್ಥೆಗಳನ್ನು ವಿಸ್ತಾರಕ್ಕೆ ತಯಾರಾಗಿಸುವುದು
+- **ಅನುಷ್ಠಾನಗೊಳಿಸಲು** ಗಣಿತ ತತ್ವಗಳ ಮೂಲಕ ಸೌಕರ್ಯಮಯ ಅನಿಮೇಶನ್
+- **ಡಿಬಗ್** ಸಣ್ಣ ಸಣ್ಣ ಸಂಗತಿಗಳನ್ನು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್ಗಳನ್ನು ಬಳಸಿ
+- **ಕಾರ್ಯಕ್ಷಮಗೊಳಿಸಲು** ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಬ್ರೌಸರ್ಗಳಿಗೆ ಆಟದ ಕಾರ್ಯಕ್ಷಮತೆ
+- ** ವಿನ್ಯಾಸ ಮಾಡಲು** ಸುಲಭ ನಿರ್ವಹಿಸುವ ಕೋಡ್ ರಚನೆಗಳು ಸಾಧಿತ ಮಾದರಿಗಳಲ್ಲಿ
+
+**ಆಟ ಅಭಿವೃದ್ಧಿ ತತ್ವಗಳ ನೈಪುಣ್ಯ:**
+- **ಫ್ರೇಮ್ ದರ ನಿರ್ವಹಣೆ**: FPS ಮತ್ತು ಸಮಯ ನಿಯಂತ್ರಣಗಳ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+- **ಇನ್ಪುಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್**: ಔಟ್ಪಟ್ ಮತ್ತು ಘಟನೆ ವ್ಯವಸ್ಥೆಗಳ ಕ್ರಾಸ್-ಪ್ಲಾಟ್ಫಾರ್ಮ್
+- **ವಸ್ತು ಜೀವನಚಕ್ರ**: ರಚನೆ, ನವೀಕರಣ, ಮತ್ತು ನಾಶ ಮಾದರಿಗಳು
+- **ಸ್ಥಿತಿ ಸಮನ್ವಯತೆ**: ಫ್ರೇಮ್ಗಳ ನಡುವಿನಲ್ಲಿ ಆಟ ಸ್ಥಿತಿಯನ್ನು ಸ್ಥಿರವಾಗಿಟ್ಟುಕೊಳ್ಳುವುದು
+- **ಘಟನೆ ವಾಸ್ತುಶಿಲ್ಪ**: ಆಟ ವ್ಯವಸ್ಥೆಗಳ ನಡುವೆ ಸ್ವತಂತ್ರ ಸಂವಹನ
+
+**ಮು೦ದಿನ ಹಂತ:** ನೀವು ಸಂಘರ್ಷ ಗುರುತಿಸುವಿಕೆ, ಅಂಕೆಗಳ ನಡವಳಿ ವ್ಯವಸ್ಥೆ, ಧ್ವನಿ ಪರಿಣಾಮಗಳು ಸೇರಿಸಬಹುದು ಅಥವಾ Phaser ಅಥವಾ Three.js ನಂತಹ ಆಧುನಿಕ ಆಟ ಫ್ರೇಂವರ್ಕ್ಗಳನ್ನು ಅನ್ವೇಷಿಸಬಹುದು!
+
+🌟 ** saavutettu saavutus**: ನೀವು ವೃತ್ತಿಪರ ವಾಸ್ತುಶಿಲ್ಪ ಮಾದರಿಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಇಂಟರೆಕ್ಟಿವ್ ಆಟ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಿ!
+
+## ನಿಯೋಜನೆ
+
+[ನಿಮ್ಮ ಕೋಡ್ಗೆ ಕಾಮೆಂಟ್ ಮಾಡಿ](assignment.md)
+
+---
+
+
+**ಸ್ಥಗಿತ ಪತ್ರಿಕೆ**:
+ಈ ದಾಖಲೆ AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದ್ದು, ನಾವು ನಿಖರತೆಯನ್ನು ನಾನು ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳಿರುವ ಸಾಧ್ಯತೆ ಇದೆ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿನ ಮೂಲ ದಾಖಲೆವೇ ಅಧಿಕೃತ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪ ಧಾರಣೆಗಳಿಗೆ ಅಥವಾ ಅರ್ಥ ಭ್ರಾಂತಿಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/3-moving-elements-around/assignment.md b/translations/kn/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 000000000..043c1f942
--- /dev/null
+++ b/translations/kn/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,38 @@
+
+# ನಿಮ್ಮ ಕೋಡ್에 ಕಾಮೆಂಟ್ ಮಾಡಿ
+
+## ಸೂಚನೆಗಳು
+
+ಶುದ್ಧ, ಚೆನ್ನಾಗಿ ದಾಖಲೆ ಮಾಡಲಾದ ಕೋಡ್ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಹಂಚಿಕೊಳ್ಳಲು ಅಗತ್ಯವಾಗಿದೆ. ಈ ಕಾರ್ಯದಲ್ಲಿ, ನೀವು ವೃತ್ತಿಪರ ಡೆವಲಪರ್ಗಳ ಅತ್ಯಂತ ಪ್ರಮುಖ ಅಭ್ಯಾಸಗಳನ್ನು ಅಭ್ಯಾಸ ಮಾಡುತ್ತೀರಿ: ನಿಮ್ಮ ಕೋಡ್ನ ಉದ್ದೇಶ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ವಿವರಿಸುವ ಸ್ಪಷ್ಟ, ಸಹಾಯಕ ಕಾಮೆಂಟ್ಗಳನ್ನು ಬರೆಯುವುದು.
+
+ನಿಮ್ಮ ಗೇಮ್ ಫೋಲ್ಡರ್ನ `app.js` ಫೈಲ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಅದನ್ನು ಕಾಮೆಂಟ್ಮಾಡಿ ಹಾಗೂ ಶುದ್ಧಗೊಳಿಸುವ ರೀತಿಗಳಿಗೆ ಹುಡುಕಿ. ಕೋಡ್ ನಿಯಂತ್ರಣ ತಪ್ಪಿಸಿಕೊಳ್ಳುವುದು ತುಂಬಾ ಸುಲಭ, ಮತ್ತು ಈಗ ನೀವು ಓದಲು ಅನುಕೂಲಕರವಾಗಿರುವ ಕೋಡ್ ಹೊಂದಲು ಕಾಮೆಂಟ್ಗಳನ್ನು ಸೇರಿಸಲು ಉತ್ತಮ ಅವಕಾಶ.
+
+**ನಿಮ್ಮ ಕಾರ್ಯದಲ್ಲಿ شامل ಆಗಿರುವುದು:**
+- **ಪ್ರತಿ ಪ್ರಮುಖ ಕೋಡ್ ವಿಭಾಗ ಏನು ಮಾಡುತ್ತದೆ ಎಂದು** ವಿವರಿಸುವ ಕಾಮೆಂಟ್ಗಳನ್ನು ಸೇರಿಸಿ
+- **ಕಾರ್ಯಗಳನ್ನು ದಾಖಲೆ ಮಾಡುವುದು** ಅವುಗಳ ಉದ್ದೇಶ ಮತ್ತು ಪ್ಯಾರಾಮೀಟರ್ಗಳ ಸ್ಪಷ್ಟ ವಿವರಣೆಗಳೊಂದಿಗೆ
+- **ಲಾಜಿಕಲ್ ಬ್ಲಾಕ್ಗಳಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ವ್ಯವಸ್ಥಾಪಿಸಲು** ವಿಭಾಗ ಶೀರ್ಷಿಕೆಗಳನ್ನು ಬಳಸಿ
+- **ಬಳಸದ ಅಥವಾ ಅನಗತ್ಯವಾದ ಕೋಡ್ ಅನ್ನು** ತೆಗೆದುಹಾಕಿ
+- **ಚಿರಂತನ ಹೆಸರಿನ ನಿಯಮಗಳನ್ನು** ಬಳಸಿ ವ್ಯತ್ಯಾಸಗಳ ಮತ್ತು ಕಾರ್ಯಗಳಿಗಾಗಿ
+
+## ಮೌಲ್ಯಮಾಪನ ಮಾನದಂಡ
+
+| ಮಾನದಂಡ | ಉದಾಹರಣೆ | ಸಮರ್ಪಕ | ಸುಧಾರಣೆಗೆ ಅಗತ್ಯವಿದೆ |
+| -------- | --------- | -------- | ----------------- |
+| **ಕೋಡ್ ದಾಖಲೆ** | `app.js` ಕೋಡ್ ಪೂರ್ಣವಾಗಿ ಕಾಮೆಂಟ್ ಮಾಡಲಾಗಿದೆ ಎಲ್ಲಾ ಪ್ರಮುಖ ವಿಭಾಗಗಳು ಮತ್ತು ಕಾರ್ಯಗಳ ಸ್ಪಷ್ಟ, ಸಹಾಯಕ ವಿವರಣೆಗಳೊಂದಿಗೆ | `app.js` ಕೋಡ್ ಸಮರ್ಪಕವಾಗಿ ಕಾಮೆಂಟ್ ಮಾಡಲಾಗಿದೆ ಹೆಚ್ಚಿನ ವಿಭಾಗಗಳಿಗೆ ಮೂಲಭೂತ ವಿವರಣೆಗಳೊಂದಿಗೆ | `app.js` ಕೋಡ್ ಕನಿಷ್ಠ ಕಾಮೆಂಟ್ಗಳನ್ನು ಹೊಂದಿದೆ ಮತ್ತು ಸ್ಪಷ್ಟ ವಿವರಣೆ ಇಲ್ಲದಿರುವುದು |
+| **ಕೋಡ್ ವ್ಯವಸ್ಥಾಪನೆ** | ಕೋಡ್ ಲಾಜಿಕಲ್ ಬ್ಲಾಕ್ಗಳಾಗಿ ವಿಭಾಗ ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ ಮತ್ತು ನಿಯಮಿತ ರಚನೆಯೊಂದಿಗೆ ವ್ಯವಸ್ಥಿತವಾಗಿದೆ | ಕೋಡ್ ಕೆಲವು ಸಂಘಟನೆಯೊಂದಿಗೆ ಸಂಬಂಧಿತ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೂಲಸ್ಥಾಗತಿಯನ್ನು ಹೊಂದಿದೆ | ಕೋಡ್ ಸ್ವಲ್ಪ ಅಸಂಯೋಜಿತವಾಗಿದೆ ಮತ್ತು ಅನುಸರಿಸಲು ಕಷ್ಟವಾಗಿದೆ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಎಲ್ಲಾ ವ್ಯತ್ಯಾಸಗಳು ಮತ್ತು ಕಾರ್ಯಗಳು ವಿವರಣಾತ್ಮಕ ಹೆಸರನ್ನು ಬಳಸುತ್ತವೆ, ಯಾವುದೇ ಬಳಸದ ಕೋಡ್ ಇಲ್ಲ, ನಿಯಮಿತ ಶೈಲಿ ಪಾಲನೆ | ಹೆಚ್ಚಿನ ಕೋಡ್ ಉತ್ತಮ ಹೆಸರಿನ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ ಕಡಿಮೆ ಬಳಸದ ಕೋಡ್ | ವ್ಯತ್ಯಾಸ ಹೆಸರಗಳು ಅಸ್ಪಷ್ಟವಾಗಿವೆ, ಬಳಸದ ಕೋಡ್ ಇದೆ, ಅಸಮರ್ಪಕ ಶೈಲಿ |
+
+---
+
+
+**ಅಸ್ವೀಕಾರಿಕೆ**:
+ಈ ದಸ್ತಾವೇಜು AI ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಗೆ ಪ್ರಯತ್ನಿಸುವಾಗಲೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರಬಹುದೆಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿ ಇದ್ದ ಮೂಲ ದಸ್ತಾವೇಜು ಆದ್ಯಕ್ಷತೆಯ ಮೂಲವಾಗಿರಬೇಕೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಗಂಭೀರ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಭಾಷಾಂತರದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪುಗಳು, ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆಗಳ ಬಗ್ಗೆ ನಾವು ಜವಾಬ್ದಾರರಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/4-collision-detection/README.md b/translations/kn/6-space-game/4-collision-detection/README.md
new file mode 100644
index 000000000..a3e759379
--- /dev/null
+++ b/translations/kn/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,776 @@
+
+# ಸ್ಪೇಸ್ ಗೇಮ್ ಭಾಗ 4: ಲೇಸರ್ ಸೇರಿಸುವುದು ಮತ್ತು ಘರ್ಷಣೆಗಳನ್ನು ಪತ್ತೆಮಾಡುವುದು
+
+```mermaid
+journey
+ title ನಿಮ್ಮ ಘರ್ಷಣೆ ಪತ್ತೆ journey
+ section ಭೌತಶಾಸ್ತ್ರ adhar
+ ವರ್ಗಚದರಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 3: Student
+ ಹಾದಿಮಾಡುವ ಗಣಿತವನ್ನು ಕಲಿಯಿರಿ: 4: Student
+ ಸಂಯೋಜನೆ ವ್ಯವಸ್ಥೆಗಳನ್ನಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 4: Student
+ section ಆಟ mecanics
+ ಲೇಸರ್ ಸಟಿಕೆ ನೆರವೇರಿಸಿ: 4: Student
+ ವಸ್ತು ಜೀವನಚಕ್ರ ಸೇರಿಸಿ: 5: Student
+ ಘರ್ಷಣೆ ನಿಯಮಗಳನ್ನು ರಚಿಸಿ: 5: Student
+ section ವ್ಯವಸ್ಥೆ ಏಕೀಕರಣ
+ ಘರ್ಷಣೆ ಪತ್ತೆಯನ್ನು ನಿರ್ಮಿಸಿ: 5: Student
+ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅತ್ಯುತ್ತಮಗೊಳಿಸಿ: 5: Student
+ ಪರಸ್ಪರ ಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ: 5: Student
+```
+## ಪೂರ್ವ-ಲೇಕ್ಚರ್ ಕ್ವಿಜ್
+
+[ಪೂರ್ವ-ಲೇಕ್ಚರ್ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/35)
+
+ಸ್ಟಾರ್ ವಾರ್ಸ್ನಲ್ಲಿ ಲ್ಯೂಕ್ ನ ಪ್ರೋಟಾನ್ ಟಾರ್ಪಿಡೊಗಳು ಡೆತ್ ಸ್ಟಾರ್ನ ಎಕ್ಸಹಾಸ್ಟ್ ಪೋರ್ಟ್ಗೆ ಹೊಡೆದ ಕ್ಷಣವನ್ನು ಬಿಚ್ಚು. ಆ ನಿಖರ ಘರ್ಷಣೆ ಪತ್ತೆ ಗ್ಯಾಲಕ್ಸಿಯ ವಿಧಿಯನ್ನು ಬದಲಾಯಿಸಿತು! ಆಟಗಳಲ್ಲಿ, ಘರ್ಷಣೆ ಪತ್ತೆ ಕಾರ್ಯದರ್ಶಿಯಂತೆ - ಇದು ಒಬ್ಬ ಅಂಶಗಳು ಎప్పుడు ಪರಸ್ಪರ ಸಂವಹಿಸುತ್ತವೆ ಮತ್ತು ತಕ್ಷಣ ಏನಾಗುತ್ತದೆ ಎಂದು ನಿರ್ಧರಿಸುತ್ತದೆ.
+
+ಈ ಪಾಠದಲ್ಲಿ, ನೀವು ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮಿಗೆ ಲೇಸರ್ ಆಯುಧಗಳನ್ನು ಸೇರಿಸಿ ಘರ್ಷಣೆ ಪತ್ತೆಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವಿರಿ. ನಾಸಾದ ಮಿಷನ್ ಯೋಜಕರು ಹಾಳಿರುವ ಅವಶೇಷಗಳನ್ನು ತಪ್ಪಿಸಲು ಬಾಹ್ಯಾಕಾಶಯಾನಿಗಳ ಮಾರ್ಗ ಗಳನ್ನು ಲೆಕ್ಕಹಾಕುವ ಹಾಗೆಯೇ, ನೀವು ಆಟದ ಅಂಶಗಳು ಎప్పుడు ಪರಸ್ಪರ ಮುಟ್ಟುತ್ತವೆ ಎಂದು ಕಂಡುಹಿಡಿಯುವುದು ಕಲಿಯುತ್ತೀರಿ. ನಾವು ಇದನ್ನು ಇತರ ವಿಷಯಗಳ ಮೇಲೆ ಕെട്ടಿಕೊಂಡು ಸರಳ ಹಂತಗಳಲ್ಲಿ ವಿಭಾಗಿಸುವೆವು.
+
+ಕೊನೆಯಲ್ಲಿ, ನಿಮ್ಮ ಬಳಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಹೋರಾಟ ವ್ಯವಸ್ಥೆಯಿದ್ದು ಲೇಸರ್ ಗಳು ಶತ್ರುಗಳನ್ನು ನಾಶಮಾಡುತ್ತವೆ ಮತ್ತು ಘರ್ಷಣೆಗಳು ಆಟದ ಸಂದರ್ಭಗಳನ್ನು ಪ್ರೇರೇಪಿಸುತ್ತವೆ. ಇವು ಫಿಜಿಕ್ಸ್ ಸಿಮ್ಯುಲೇಷನಿನಿಂದ ಇಂಟೆರ್ಯಾಕ್ಟಿವ್ ವೆಬ್ ಇಂಟರ್ಫೇಸ್ಗಳವರೆಗೆ ಎಲ್ಲಲ್ಲಿ ಬಳಸಲ್ಪಡುವ ಸೂತ್ರಗಳಾಗಿವೆ.
+
+```mermaid
+mindmap
+ root((Collision Detection))
+ Physics Concepts
+ ಬಾಹ್ಯ ಕುರಿತಡೆಗಳು
+ ಸಂಪರ್ಕ ಪರೀಕ್ಷೆ
+ ನಿರ್ಧಾರ ವ್ಯವಸ್ಥೆಗಳು
+ ಬೇರ್ಪಡಿಸುವ ತರ್ಕ
+ Game Objects
+ ಲೇಸರ್ ಪ್ರಾಜೆಕ್ಟೈಲ್ಗಳು
+ ಶತ್ರು ಬೋಟುಗಳು
+ ನಾಯಕ ಪಾತ್ರ
+ ಸಂಧಾನ ವಲಯಗಳು
+ Lifecycle Management
+ ವಸ್ತು ರಚನೆ
+ ಚಲನೆಯ ನವೀಕರಣಗಳು
+ ನಾಶದ ಗುರುತಿಸುವಿಕೆ
+ ಮೆಮೊರಿ ಶುದ್ದಿ
+ Event Systems
+ ಕೀಬೋರ್ಡ್ ಇನ್ಪುಟ್
+ ಸಂಧಾನ ಘಟನೆಗಳು
+ ಆಟ ಸ್ಥಿತಿ ಬದಲಾವಣೆಗಳು
+ ಧ್ವನಿ/ದೃಶ್ಯ ಪರಿಣಾಮಗಳು
+ Performance
+ ಪರಿಣಾಮಕಾರಿ ಆಲ್ಗೋರಿದಮ್ ಗಳು
+ ಫ್ರೇಮ್ ದರ ಅನುಕೂಲತೆ
+ ಮೆಮೊರಿ ನಿರ್ವಹಣೆ
+ ಸ್ಥಳೀಯ ಭಾಗೀಕರಣ
+```
+✅ ಪ್ರಥಮವಾಗಿ ಬರೆಯಲಾದ ಕಂಪ್ಯೂಟರ್ ಆಟದ ಬಗ್ಗೆ ಸ್ವಲ್ಪ ಅಧ್ಯಯನ ಮಾಡಿ. ಅದರ ಕಾರ್ಯಕ್ಷಮತೆ ಏನು?
+
+## ಘರ್ಷಣೆ ಪತ್ತೆ
+
+ಘರ್ಷಣೆ ಪತ್ತೆ ಅಪೊಲೋ ಲೂನರ್ ಮೋಡ್ಯೂಲ್ನ ಸಮೀಪತಾ ಸೆನ್ಸಾರ್ಗಳಂತೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ - ಅದು მუდმಾಗಿ ದೂರಗಳನ್ನು ಪರಿಶೀಲಿಸಿ ಅಂಶಗಳು ತುಂಡುಗಳಾಗಿರುವಾಗ ಎಚ್ಚರಿಕೆ ನೀಡುತ್ತದೆ. ಆಟಗಳಲ್ಲಿ, ಈ ವ್ಯವಸ್ಥೆ ಅಂಶಗಳು ಪರಸ್ಪರ ಸಂವಹಿಸುವ ಸಮಯ ಮತ್ತು ನಂತರ ಏನಾಗಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.
+
+ನಾವು ಬಳಸುವ ವಿಧಾನವು ಪ್ರತಿಯೊಂದು ಆಟದ ಅಂಶವನ್ನುAy ಎರಡು ಹಕ್ಕಲುಗಳಾಗಿ ಪರಿಗಣಿಸುತ್ತದೆ, ವಿಮಾನ ಸಂಚಾರ ನಿಯಂತ್ರಣ ವ್ಯವಸ್ಥೆಗಳು ವಿಮಾನಗಳನ್ನು ಅನುಸರಿಸಲು ಸರಳ ಜ್ಯಾಮಿತಿ ಆಕಾರಗಳನ್ನು ಬಳಸುವ ಹಾಗೆ. ಈ ಚೌಕ ಆಧಾರಿತ ವಿಧಾನ ಸರಳವಾಗಿದೆ ಅನ್ನಿಸಬಹುದು, ಆದರೆ ಇದು ಗಣನಾತ್ಮಕವಾಗಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ ಮತ್ತು ಹೆಚ್ಚಿನ ಆಟದ ಪರಿಸ್ಥಿತಿಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ.
+
+### ಚೌಕಾಕೃತಿಯ ಪ್ರತಿನಿಧಿತ್ವ
+
+ಪ್ರತೀ ಆಟದ ಅಂಶಕ್ಕೆ ನಿರ್ದಿಷ್ಟ ಅಂಚುಗಳ ಸಂಕೇತಗಳ ಅಗತ್ಯವಿದೆ, ಮಾರ್ಸ್ ಪಾತ್ಫೈನ್ಡರ್ ರೋವರ್ ತನ್ನ ನಕ್ಷೆ ಸಂಗ್ರಹಿಸುವ ಹಾದಿಯ ಹಾದಿಯನ್ನು ಹೇಗೆ ನಕ್ಷೆ ಹಾಕಿತು ಅಂತೆಯೇ. ಇಲ್ಲಿ ನಾವು ಈ ಅಂಚುಗಳ ಸಂಕೇತಗಳ ವಿವರ ನೀಡುತ್ತೇವೆ:
+
+```mermaid
+flowchart TD
+ A["🎯 ಆಟದ ವಸ್ತು"] --> B["📍 ಸ್ಥಿತಿ (x, y)"]
+ A --> C["📏 ಆಯಾಮಗಳು (ಅಗಲ, ಎತ್ತರ)"]
+
+ B --> D["ಮೇಲೆ: y"]
+ B --> E["ಎಡ: x"]
+
+ C --> F["ಕೆಳಗೆ: y + ಎತ್ತರ"]
+ C --> G["ಬಲಗೆ: x + ಅಗಲ"]
+
+ D --> H["🔲 ಚದರ ಆಕರಗಳು"]
+ E --> H
+ F --> H
+ G --> H
+
+ H --> I["ಸ೦ಘರ್ಷ ಪತ್ತೆಗಾಗಿ ಸಿದ್ಧ"]
+
+ style A fill:#e3f2fd
+ style H fill:#e8f5e8
+ style I fill:#fff3e0
+```
+```javascript
+rectFromGameObject() {
+ return {
+ top: this.y,
+ left: this.x,
+ bottom: this.y + this.height,
+ right: this.x + this.width
+ }
+}
+```
+
+**ಇದನ್ನು ವಿವರಿಸುತ್ತೇವೆ:**
+- **ಮೇಲ್ಭಾಗದ ಅಂಚು**: ನೀವು ಅಂಶವನ್ನು ತಳ್ಳಿಸುವ ಸ್ಥಳ (ಅದರ y ಸ್ಥಾನ)
+- **ಎಡಭಾಗದ ಅಂಚು**: ಅದನ್ನು ಹೊಡಿದುಕೊಳ್ಳುವ ಸ್ಥಳ (ಅದರ x ಸ್ಥಾನ)
+- **ಕೆಳಭಾಗದ ಅಂಚು**: y ಸ್ಥಾನದ ಮೇಲೆ ಎತ್ತರವನ್ನು ಸೇರಿಸಿ - ಅದು ಎಲ್ಲಿಗೆ ಮುಕ್ತಾಯವಾಗುತ್ತದೆ ತಿಳಿದುಕೊಳ್ಳಿ!
+- **ಬಲಭಾಗದ ಅಂಚು**: x ಸ್ಥಾನದ ಮೇಲೆ ಅಗಲವನ್ನು ಸೇರಿಸಿ - ಸಂಪೂರ್ಣ ಅಂಚು ಸಿಗುತ್ತದೆ
+
+### ಮುಟ್ಟಿಕೆ ಪರೀಕ್ಷೆ ಅಲ್ಗೊರಿದಮ್
+
+ಚೌಕಗಳು ಪರಸ್ಪರ ಮುಟ್ಟಿದೆಯೇ ಎಂದು ಪತ್ತೆಮಾಡುವುದು ಹಬಲ್ ಸ್ಪೇಸ್ ಟೆಲಿಸ್ಕೋಪ್ ತನ್ನ ದೃಶ್ಯ ಕ್ಷೇತ್ರದಲ್ಲಿ ಖಗೋಳೀಯ ಅಂಶಗಳು ಮುಟ್ಟುತ್ತವೆಯೇ ಎಂದು ತಿಳಿದುಕೊಳ್ಳುವ ವಿಧಾನದಂತಹ ನಿಯಮವನ್ನು ಬಳಸುತ್ತದೆ. ಅಲ್ಗೊರಿದಮ್ ವಿಭಜನೆಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ:
+
+```mermaid
+flowchart LR
+ A["ಆಯತ 1"] --> B{"ವಿಭಾಗ ಪರೀಕ್ಷೆಗಳು"}
+ C["ಆಯತ 2"] --> B
+
+ B --> D["R2 ಎಡ > R1 ಬಲವೇ?"]
+ B --> E["R2 ಬಲ < R1 ಎಡವೇ?"]
+ B --> F["R2 ಮೇಲ್ಭಾಗ > R1 ಕೆಳಭಾಗವೇ?"]
+ B --> G["R2 ಕೆಳಭಾಗ < R1 ಮೇಲ್ಭಾಗವೇ?"]
+
+ D --> H{"ಯಾವುದೇ ಸತ್ಯವಿದೆಯೇ?"}
+ E --> H
+ F --> H
+ G --> H
+
+ H -->|ಹೌದು| I["❌ ಗೆರಲಿಲ್ಲ"]
+ H -->|ಇಲ್ಲ| J["✅ ಗೆರ ಕಂಡುಬಂದಿದೆ"]
+
+ style B fill:#e3f2fd
+ style I fill:#ffebee
+ style J fill:#e8f5e8
+```
+```javascript
+function intersectRect(r1, r2) {
+ return !(r2.left > r1.right ||
+ r2.right < r1.left ||
+ r2.top > r1.bottom ||
+ r2.bottom < r1.top);
+}
+```
+
+**ವಿಭಜನೆ ಪರೀಕ್ಷೆ ರಡಾರ್ ವ್ಯವಸ್ಥೆಗಳಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ:**
+- ಚೌಕ 2 ಸಂಪೂರ್ಣವಾಗಿ ಚೌಕ 1 ಯ ದಕ್ಷಿಣಕ್ಕೆ ಇದೆಯೇ?
+- ಚೌಕ 2 ಸಂಪೂರ್ಣವಾಗಿ ಚೌಕ 1 ಯ ಬಲಕ್ಕೆ ಇದೆಯೇ?
+- ಚೌಕ 2 ಸಂಪೂರ್ಣವಾಗಿ ಚೌಕ 1 ಯ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಇದೆಯೇ?
+- ಚೌಕ 2 ಸಂಪೂರ್ಣವಾಗಿ ಚೌಕ 1 ಯ ಕೆಳಭಾಗದಲ್ಲಿ ಇದೆಯೇ?
+
+ಈ ಯಾವ ಶರತ್ತುಗಳೂ ಅಳ್ಳಿಸದಿದ್ದರೆ, ಚೌಕಗಳು ಒಟ್ಟಿಗೆ ಮುಟ್ಟಿರಬೇಕು ಎಂದು ಅರ್ಥ. ಈ ವಿಧಾನ ಎರಡು ವಿಮಾನಗಳು ಸುರಕ್ಷಿತ ದೂರದಲ್ಲಿರುವುದನ್ನು ರಡಾರ್ ನಿಯಂತ್ರಕರು ಹೇಗೆ ಅರಿಯುತ್ತಾರೆ ಅಂತಹಂತೆಯೇ.
+
+## ಅಂಶಗಳ ಜೀವಚಕ್ರ ನಿರ್ವಹಣೆ
+
+ಲೇಸರ್ ಶತ್ರುವನ್ನು ಹೊಡೆದಾಗ, ಎರಡು ಅಂಶಗಳನ್ನೂ ಆಟದಿಂದ ತೆಗೆದುಹಾಕಬೇಕಾಗುತ್ತದೆ. ಹೀಗಾಗಿಯೇ, ಮಧ್ಯ.loop(delete) ಮಾಡುವಾಗ ಆಪತ್ತು ಉಂಟಾಗಬಹುದು - ಇದನ್ನು ಅಪೊಲೋ ಗೈಡೆನ್ಸ್ ಕಂಪ್ಯೂಟರ್ ಮೊದಲಿನ ಗಣಕಗಳಲ್ಲಿ ಕಠಿಣ ಪಾಠವಾಗಿ ಕಲಿತವು. ಬದಲು, ನಾವು "ಅಳಿಸುವ ಗುರುತು" ವಿಧಾನವನ್ನು ಬಳಸುತ್ತೇವೆ, ಇದು ಫ್ರೇಮ್ಗಳ ನಡುವೆ ಸುರಕ್ಷಿತವಾಗಿ ಅಂಶಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.
+
+```mermaid
+stateDiagram-v2
+ [*] --> Active: ವಸ್ತು ರಚಿಸಲಾಗಿದೆ
+ Active --> Collided: ಸಂಘರ್ಷ ಕಂಡುಬಂದಿದೆ
+ Collided --> MarkedDead: ಮರಣ = ಸತ್ಯ ಎಂದು ಸೆಟ್ ಮಾಡಿ
+ MarkedDead --> Filtered: ಮುಂದಿನ ಚೌಕಟ್ಟು
+ Filtered --> [*]: ವಸ್ತು ತೆಗೆದುಹಾಕಲಾಗಿದೆ
+
+ Active --> OutOfBounds: ಪರದೆ ಬಿಟ್ಟುಹೋಗಿದೆ
+ OutOfBounds --> MarkedDead
+
+ note right of MarkedDead
+ ಮುಂದುವರಿಯಲು ಸುರಕ್ಷಿತ
+ ಪ್ರಸ್ತುತ ಚೌಕಟ್ಟು
+ end note
+
+ note right of Filtered
+ ವಸ್ತುಗಳು ತೆಗೆದುಹಾಕಲಾಗಿದೆ
+ ಚೌಕಟ್ಟುಗಳ ನಡುವೆ
+ end note
+```
+ನಾವು ಅಳಿಸುವುದಕ್ಕೆ ಗುರುತಿಸುವ ವಿಧಾನ ಇಲ್ಲಿದೆ:
+
+```javascript
+// ಅಂಶವನ್ನು ತೆಗೆದುಹಾಕಲು ಸೂಚಿಸಿ
+enemy.dead = true;
+```
+
+**ಈ ವಿಧಾನ ಏಕೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ:**
+- ನಾವು ಅಂಶವನ್ನು "ಸತ್ತುಹೋಯಿತು" ಎನ್ನುತ್ತೇವೆ ಆದರೆ ತಕ್ಷಣ ಅಳಿಸುವುದಿಲ್ಲ
+- ಇದರಿಂದ ಪ್ರಸ್ತುತ ಗೇಮ್ ಫ್ರೇಮ್ ಸುರಕ್ಷಿತವಾಗಿ ಮುಗಿಯುತ್ತದೆ
+- ಬಿಟ್ಟುಹೋಗಿದ್ದುದನ್ನು ಬಳಸಲು ಯತ್ನಿಸಿದಾಗ ಆಗುವ ಅಪಾಯಗಳು ಇಲ್ಲ!
+
+ನಂತರ ಮಾರ್ಕ್ ಮಾಡಲಾದ ಅಂಶಗಳನ್ನು ಮುಂದೆ ರೆಂಡರ್ಗೆ ಮುಂಚೆ ಫಿಲ್ಟರ್ ಮಾಡಲು:
+
+```javascript
+gameObjects = gameObjects.filter(go => !go.dead);
+```
+
+**ಈ ಫಿಲ್ಟರಿಂಗ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- "ಬಳಿ ಜೀವಂತ" ಅಂಶಗಳಲ್ಲಿ ಮಾತ್ರ ಹೊಸ ಪಟ್ಟಿ ರಚಿಸುತ್ತದೆ
+- ಸತ್ತ ಗುರುತಿಸಲಾದ ಅಂಶಗಳನ್ನು ಬ ಹೊರ ಹಾಕುತ್ತದೆ
+- ನಿಮ್ಮ ಆಟವನ್ನು ಹೊಂದಿಕೊಳ್ಳುವಂತೆಯೂ ಸೌಕರ್ಯವನ್ನೂ ಒದಗಿಸುತ್ತದೆ
+- ಪರಿಸ್ಥಿತಿಯಲ್ಲಿ ನಾಶವಾದ ಅಂಶಗಳ ಸಂಗ್ರಹದಿಂದ ಮೆಮೊರಿ ಬಿಲ್ಲು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ
+
+## ಲೇಸರ್ ಮೆಕ್ಯಾನಿಕ್ಸ್ ಅನುಷ್ಠಾನ
+
+ಲೇಸರ್ ಪ್ರೊಜೆಕ್ಟೈಲ್ ಗಳು ಆಟಗಳಲ್ಲಿ ಸ್ಟಾರ್ ಟ್ರೆಕ್ನ ಫೋಟಾನ್ ಟಾರ್ಪಿಡೊಗಳ ಹಾಗೆಯೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ - ಸ್ವತಂತ್ರ ವಸ್ತುಗಳು ನೇರ ಮಾರ್ಗದಲ್ಲಿ ಪ್ರಯಾಣ ಮಾಡಿ ಯಾವುದಾದರೂ ಹೊಡೆದಾಗ ನಿಗದಿತ ಪರಿಣಾಮ ಹೊಂದುತ್ತವೆ. ಪ್ರತಿ ಸ್ಪೇಸ್ ಬಾರ್ ಒತ್ತುವಿಕೆ ಹೊಸ ಲೇಸರ್ ವಸ್ತುವನ್ನು ಸೃಷ್ಟಿಸಿ ಪರದೆ ಮೇಲೆ ಸಾಗುತ್ತದೆ.
+
+ಈ ಕಾರ್ಯಕ್ಕೆ, ನಾವು ವಿವಿಧ ಭಾಗಗಳನ್ನು ಸಮನ್ವಯ ಮಾಡಬೇಕಾಗುತ್ತದೆ:
+
+**ಮುಖ್ಯ ಅಂಶಗಳು:**
+- **ಲೇಸರ್ ವಸ್ತುಗಳನ್ನು ಸೃಷ್ಟಿಸುವುದು** ಹೀರೋನ ಸ್ಥಾನದಿಂದ ಹೊರಹೊಮ್ಮುವಂತೆ
+- **ಕೀಬೋರ್ಡ್ ಇನ್ಪುಟ್ ನಿರ್ವಹಣೆ** ಲೇಸರ್ ಸೃಷ್ಟಿಗೆ
+- **ಲೇಸರ್ ಚಲನೆ ಮತ್ತು ಜೀವಚಕ್ರ ನಿರ್ವಹಣೆ**
+- **ಲೇಸರ್ ಪ್ರೊಜೆಕ್ಟೈಲುಗಳ ದೃಶ್ಯಾತ್ಮಕ ಪ್ರತಿನಿಧಾನ ಪೂರೈಸು**
+
+## ಫೈರಿಂಗ್ ದರ ನಿಯಂತ್ರಣ ಅನುಷ್ಠಾನ
+
+ಅನಿಯಂತ್ರಿತ ಸ್ಪಂದನಗಳೇ ಆಟದ ಎಂಜಿನ್ ಅನ್ನು ಹಾರಾಯಿಸಿಬಿಡುತ್ತಿತ್ತು ಮತ್ತು ಆಟ ಸುಲಭವಾಗುತ್ತಿದ್ದಿತ್ತು. ನಿಜವಾದ ಆಯುಧ ವ್ಯವಸ್ಥೆಗಳಿಗೂ ಹೋಲುವ ನಿಯಂತ್ರಣಗಳು ಇರುತ್ತವೆ - USS ಎಂಟರ್ಪ್ರೈಸ್ನ್ ಫೇಜರ್ಸ್ಗೂ ಬ್ಯಾಟ್ ರೀಚಾರ್ಜ್ ಸಮಯ ಬೇಕಾಗಿತ್ತು.
+
+ನಾವು ಪ್ರತ್ಯುತ್ತರದಾಗುವ ನಿಯಂತ್ರಣ ವ್ಯವಸ್ಥೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುತ್ತೇವೆ, ಇದು ವೇಗವಾಗಿ ಬಂಧಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ನಿಯಂತ್ರಣವನ್ನು ಪ್ರತಿಕ್ರಿಯಾಶೀಲವಾಗಿರಿಸುತ್ತದೆ:
+
+```mermaid
+sequenceDiagram
+ participant Player
+ participant Weapon
+ participant Cooldown
+ participant Game
+
+ Player->>Weapon: ಸ್ಪೇಸ್ಬಾರ್ ಒತ್ತಿ
+ Weapon->>Cooldown: ತಂಪಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
+
+ alt ಆಯುಧ ಸಿದ್ದವಾಗಿದೆ
+ Cooldown->>Weapon: ತಂಪು = ಸರಿ
+ Weapon->>Game: ಲೇಸರ್ ರಚಿಸಿ
+ Weapon->>Cooldown: ಹೊಸ ತಂಪಾಗುವ ಸಮಯ ಪ್ರಾರಂಭಿಸಿ
+ Cooldown->>Cooldown: ತಂಪು = ತಪ್ಪು
+
+ Note over Cooldown: 500ms ಕಾಯಿರಿ
+
+ Cooldown->>Cooldown: ತಂಪು = ಸರಿ
+ else ಆಯುಧ ತಂಪಾಗುತ್ತಿದೆ
+ Cooldown->>Weapon: ತಂಪು = ತಪ್ಪು
+ Weapon->>Player: ಯಾವುದೇ ಕ್ರಿಯೆ ಇಲ್ಲ
+ end
+```
+```javascript
+class Cooldown {
+ constructor(time) {
+ this.cool = false;
+ setTimeout(() => {
+ this.cool = true;
+ }, time);
+ }
+}
+
+class Weapon {
+ constructor() {
+ this.cooldown = null;
+ }
+
+ fire() {
+ if (!this.cooldown || this.cooldown.cool) {
+ // ಲೇಸರ್ ಪ್ರಕ್ಷೇಪಣಿಕೆ ರಚಿಸಿ
+ this.cooldown = new Cooldown(500);
+ } else {
+ // ಶಸ್ತ್ರಾಸ್ತ್ರ ಇನ್ನೂ ಶೀತಲವಾಗುತ್ತಿದೆ
+ }
+ }
+}
+```
+
+**ಕೂಲ್ಡೌನ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ:**
+- ಸೃಷ್ಟಿಸಿದಾಗ, ಆಯುಧ "ಹಾಟ್" ಆಗಿರುತ್ತದೆ (ಇನ್ನೂ ಬೆಂಕಿ ಹೊಡೆಯಲು ಸಾಧ್ಯವಿಲ್ಲ)
+- ಕಾಲಾವಧಿ ನಂತರ, ಇದು "ಕೂಲ್" ಆಗಿ ಫೈರ್ ಮಾಡಲು ಸಿದ್ಧವಾಗುತ್ತದೆ
+- ಫೈರ್ ಮಾಡುವ ಮೊದಲು, ನಾವು "ಆಯುಧ ಕೂಲ್ ಆಗಿದೆಯೇ?" ಎನ್ನುತ್ತೇವೆ
+- ಇದು ಸ್ಪ್ಯಾಮ್ ಕ್ಲಿಕ್ಕಿಂಗ್ ತಡೆಯುತ್ತದೆ ಮತ್ತು ನಿಯಂತ್ರಣವನ್ನು ಪ್ರತಿಕ್ರಿಯಾಶೀಲವಾಗಿರಿಸುತ್ತದೆ
+
+✅ ಸ್ಪೇಸ್ ಗೇಮ್ ಸರಣಿಯ ಪಾಠ 1ಕ್ಕೆ ಈ ಕುಲ್ಡ್ಆನ್ಗಳು ಕುರಿತು ನೆನಪಿಕೊಳ್ಳಿ.
+
+## ಘರ್ಷಣೆ ವ್ಯವಸ್ಥೆ ನಿರ್ಮಾಣ
+
+ನೀವು ಈಗಿರುವ ಸ್ಪೇಸ್ ಗೇಮ್ ಕೋಡ್ ಅನ್ನು ವಿಸ್ತರಿಸಿ ಘರ್ಷಣೆ ಪತ್ತೆ ವ್ಯವಸ್ಥೆಯನ್ನು ಸೃಷ್ಟಿಸುವಿರಿ. ಅಂತಾರಾಷ್ಟ್ರೀಯ ಬಾಹ್ಯಾಕಾಶ ಸ್ಟೇಷನ್ನ ಸ್ವಯಂಚಾಲಿತ ಘರ್ಷಣೆ ತಪ್ಪಿಸುವ ವ್ಯವಸ್ಥೆಯಂತೆ, ನಿಮ್ಮ ಆಟವು ನಿರಂತರವಾಗಿ ಅಂಶಗಳ ಸ್ಥಾನಗಳನ್ನು ವೀಕ್ಷಿಸಿ ಪರಸ್ಪರ ಮುಟ್ಟಿಸುವಾಗ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ.
+
+ಮತ್ತೆ ನಿಮ್ಮ ಹಿಂದೆ ಇರುವ ಪಾಠ ಕೋಡ್ರಿಂದ ಪ್ರಾರಂಭಿಸಿ, ನಿಗದಿತ ನಿಯಮಗಳೊಂದಿಗೆ ಘರ್ಷಣೆ ಪತ್ತೆಯನ್ನು ಸೇರಿಸುವಿರಿ.
+
+> 💡 **ಪ್ರೊ ಟಿಪ್**: ಲೇಸರ್ ಸ್ಪ್ರೈಟ್ ಈಗಾಗಲೇ ನಿಮ್ಮ ಆಸ್ತಿ ಸಂಪಂಬದಲ್ಲಿದ್ದು ನಿಮ್ಮ ಕೋಡಿನಲ್ಲಿ ಉಲ್ಲೇಖಿಸಲಾಗಿದೆ, ಅನುಷ್ಠಾನಕ್ಕೆ ಸಿದ್ಧವಾಗಿದೆ.
+
+### ಅನುಷ್ಠಾನಗೊಳಿಸಬೇಕಾದ ಘರ್ಷಣೆ ನಿಯಮಗಳು
+
+**ಆಟದ ಯಾಂತ್ರಿಕತೆಗಳು ಸೇರಿಸಲು:**
+1. **ಲೇಸರ್ ಶತ್ರुलाई ಹೊಡೆದು ಹಾಳುಮಾಡುವುದು**: ಲೇಸರ್ ಪ್ರಾಜೆಕ್ಟೈಲ್ ಹೊಡೆಯುವಾಗ ಶತ್ರು ವಸ್ತು ನಾಶವಾಗುತ್ತದೆ
+2. **ಲೇಸರ್ ಪರದೆ ಅಂಚಿಗೆ ತಲುಪಿದಾಗ**: ಲೇಸರ್ ಪರದೆ ಮೇಲ್ಭಾಗದ ಅಂಚು ತಲುಪಿದಾಗ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ
+3. **ಶತ್ರು ಮತ್ತು ಹೀರೋ ಘರ್ಷಣೆ**: ಶುಲ್ಕವಾಗಿ ಇಬ್ಬರೂ ವಸ್ತುಗಳು ನಾಶವಾಗುತ್ತವೆ
+4. **ಶತ್ರು ಕೆಳಭಾಗ ತಲುಪಿದಾಗ**: ಶತ್ರುಗಳು ಪರದೆ ಕೆಳಭಾಗ ತಲುಪಿದಾಗ ಆಟ ಮುಗಿಯುತ್ತದೆ
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**ಘರ್ಷಣೆ ಪತ್ತೆ ಆಧಾರ:** ಅನುಷ್ಠಾನ ಮಾಡುವ ಮೊದಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+- ✅ ಚೌಕ ಅಂಚುಗಳು ಘರ್ಷಣೆ ಪ್ರಾಂತಗಳನ್ನು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ
+- ✅ ವಿಭಜನೆ ಪರೀಕ್ಷೆ Intersection ಲೆಕ್ಕಾಚರಣೆಗಿಂತ ಏಕೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ
+- ✅ ಆಟದ ಲೂಪ್ನಲ್ಲಿ ಅಂಶಗಳ ಜೀವಚಕ್ರ ನಿರ್ವಹಣೆಯ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು
+- ✅ ಘಟನೆ ಚಾಲಿತ ವ್ಯವಸ್ಥೆಗಳು ಘರ್ಷಣೆ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಹೇಗೆ ಸಂಯೋಜಿಸುತ್ತವೆ
+
+**ತ್ವರಿತ ಸ್ವ-ಪರೀಕ್ಷೆ:** ನೀವು ತಕ್ಷಣ ಅಂಶಗಳನ್ನು ಅಳಿಸಿದರೆ ಏನಾಗುತ್ತದೆ?
+*ಉತ್ತರ: ಮಧ್ಯದಲ್ಲಿ ಅಳಿಸುವುದರಿಂದ ಆಪತ್ತಾಗಬಹುದು ಅಥವಾ ಪುನರಾವರ್ತನೆ ಲೋಪವಾಗಬಹುದು*
+
+**ಭೌತಶಾಸ್ತ್ರ ಅರಿವು:** ನೀವು ಈಗ ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದು:
+- **ಕೋಆರ್ಡಿನೇಟ್ ವ್ಯವಸ್ಥೆಗಳು**: ಸ್ಥಾನ ಮತ್ತು ಆಯಾಮಗಳು ಅಂಚುಗಳನ್ನು ಸೃಷ್ಟಿಸುವುದು
+- **ಘರ್ಷಣೆ ಲಾಜಿಕ್**: ಘರ್ಷಣೆ ಪತ್ತೆ ಹಿಂಬಾಲಿಸುವ ಗಣಿತೀಯ ಸಿದ್ಧಾಂತಗಳು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಏರಿಸಲು**: ಸಮಯ ಪ್ರಾಯೋಗಿಕ ವ್ಯವಸ್ಥೆಗಳಲ್ಲಿ ಪರಿಣಾಮಕಾರಿ ಅಲ್ಗೊರಿದಮ್ಗಳು ಏಕೆ ಮುಖ್ಯ
+- **ಮೆಮೊರಿ ನಿರ್ವಹಣೆ**: ಸ್ಥಿರತೆಗಾಗಿ ಸುರಕ್ಷಿತ ಅಂಶದ ಜೀವಚಕ್ರ ಮಾದರಿಗಳು
+
+## ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಪರಿಸರವನ್ನು ಸ್ಥಾಪಿಸುವುದು
+
+ಸರಿಯಾದ ಸುದ್ದಿ - ನಾವು ಬಹುತೇಕ ನೆಲೆಗೊಳಿಸುವ ಅವಕಾಶಗಳನ್ನು ನಿಮಗಾಗಿ ಹಿಂದೆಯೇ ಮಾಡಿದ್ದೇವೆ! ನಿಮ್ಮ ಎಲ್ಲ ಆಟದ ಸಂಪದ್ರೆಗಗಳು ಮತ್ತು ಮೂಲ ರಚನೆ `your-work` ಉಪಫೋಲ್ಡರ್ನಲ್ಲಿ ಇದೆ, ನೀವು ಆಢಂಬರಗಳ ಘರ್ಷಣೆ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಲು ಸಿದ್ದವಾಗಿದ್ದೀರಿ.
+
+### ಯೋಜನೆ ರಚನೆ
+
+```bash
+-| assets
+ -| enemyShip.png
+ -| player.png
+ -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+**ಫೈಲ್ ರಚನೆಯ ವಿವರ:**
+- **ಆಟದ ಎಲ್ಲಾ ಸ್ಪ್ರೈಟ್ ಚಿತ್ರಗಳನ್ನು ಹೊಂದಿದೆ**
+- **ಮುಖ್ಯ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಫೈಲ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ**
+- **ಸ್ಥಳಿತ ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಅವರ ಪ್ಯಾಕೇಜ್ ಸಂರಚನೆ ನೀಡುತ್ತದೆ**
+
+### ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಆರಂಬಿಸುವುದು
+
+ನಿಮ್ಮ ಯೋಜನೆ ಫೋಲ್ಡರ್ಗೆ ಹೋಗಿ ಸ್ಥಳೀಯ ಸರ್ವರ್ ಆರಂಭಿಸಿ:
+
+```bash
+cd your-work
+npm start
+```
+
+**ಈ ಆಜ್ಞೆ ಸರಣಿ:**
+- **ನಿಮ್ಮ ಕಾರ್ಯಾಚರಣಾ ಯೋಜನೆ ಫೋಲ್ಡರ್ಗೆ ಡೈರೆಕ್ಟರಿ ಬದಲಾಯಿಸುತ್ತದೆ**
+- **`http://localhost:5000` ನಲ್ಲಿ ಸ್ಥಳೀಯ HTTP ಸರ್ವರ್ ಆರಂಭಿಸುತ್ತದೆ**
+- **ಪರೀಕ್ಷೆ ಮತ್ತು ಅಭಿವೃದ್ಧಿಗೆ ನಿಮ್ಮ ಆಟದ ಫೈಲ್ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ**
+- **ಸ್ವಯಂಚಾಲಿತ ಪುನಃಲೋಡ್ ಮೂಲಕ ಜೀವಂತ ಅಭಿವೃದ್ಧಿಗೆ ಅನುಮತಿಸುತ್ತದೆ**
+
+ನಿಮ್ಮ ಬ್ರೌಸರ್ ತೆರೆಯಿರಿ ಮತ್ತು `http://localhost:5000`ಗೆ ಹೋಗಿ ನಿಮ್ಮ ಪ್ರಸ್ತುತ ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಹೀರೋ ಮತ್ತು ಶತ್ರುಗಳೊಂದಿಗೆ ಪರದೆ ಮೇಲೆ ನೋಡಿ.
+
+### ಹಂತದ ಹಂತದ ಅನುಷ್ಠಾನ
+
+ನಾಸಾ ವಾಯೇಜರ್ ಬಾಹ್ಯಾಕಾಶಯಾನಿಯನ್ನು ಪ್ರೋಗ್ರಾಂ ಮಾಡಿದ್ದಂತೆ ಕ್ರಮಬದ್ಧವಾಗಿ ಘರ್ಷಣೆ ಪತ್ತೆ ಅನ್ನು ಅನುಷ್ಠಾನ ಮಾಡೋಣ.
+
+```mermaid
+flowchart TD
+ A["1. ಆಯತಿಕ ಬೌಂಡರಿಗಳು"] --> B["2. ಸಂಕ্ৰমಣ ಪತ್ತೆ"]
+ B --> C["3. ಲೇಸರ್ ವ್ಯವಸ್ಥೆ"]
+ C --> D["4. ಘಟನೆ ನಿರ್ವಹಣೆ"]
+ D --> E["5. ಘರ್ಷಣೆ ನಿಯಮಗಳು"]
+ E --> F["6. ಕೂಲ್ಡೌನ್ ವ್ಯವಸ್ಥೆ"]
+
+ G["ವಸ್ತು ಬೌಂಡರಿಗಳು"] --> A
+ H["ಭೌತಶಾಸ್ತ್ರ ಆಲ್ಗೋರಿಥಮ್"] --> B
+ I["ಪ್ರಾಜೆಕ್ಟೈಲ್ ರಚನೆ"] --> C
+ J["ಕೀಬೋರ್ಡ್ ಇನ್ಪುಟ್"] --> D
+ K["ಗೇಮ್ ಲಾಜಿಕ್ಸ್"] --> E
+ L["ರೇಟು ಮಿತಿಮೀರುವುದು"] --> F
+
+ F --> M["🎮 ಸಂಪೂರ್ಣ ಗೇಮ್"]
+
+ style A fill:#e3f2fd
+ style B fill:#e8f5e8
+ style C fill:#fff3e0
+ style D fill:#f3e5f5
+ style E fill:#e0f2f1
+ style F fill:#fce4ec
+ style M fill:#e1f5fe
+```
+#### 1. ಚೌಕದ ಘರ್ಷಣೆ ಅಂಚುಗಳನ್ನು ಸೇರಿಸಿ
+
+ಮೊದಲು, ನಿಮ್ಮ ಆಟದ ಅಂಶಗಳಿಗೆ ತಮ್ಮ ಅಂಚುಗಳನ್ನು ವರ್ಣಿಸುವ ವಿಧಾನ ಕಲಿಸೋಣ. ನಿಮ್ಮ `GameObject` ಕ್ಲಾಸ್ಗೆ ಈ ವಿಧಾನವನ್ನು ಸೇರಿಸಿ:
+
+```javascript
+rectFromGameObject() {
+ return {
+ top: this.y,
+ left: this.x,
+ bottom: this.y + this.height,
+ right: this.x + this.width,
+ };
+ }
+```
+
+**ಈ ವಿಧಾನ ಸಾಧಿಸುವುದು:**
+- **ನಿಖರ ಅಂಚು ಸಂಕೇತಗಳೊಂದಿಗೆ ಚೌಕಾಕೃತಿಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ**
+- **ಸ್ಥಾನ ಹಾಗೂ ಆಯಾಮಗಳನ್ನು ಬಳಸಿ ಕೆಳಭಾಗ ಮತ್ತು ಬಲಭಾಗಗಳನ್ನು ಲೆಕ್ಕಿಸುತ್ತದೆ**
+- **ಘರ್ಷಣೆ ಪತ್ತೆ ಅಲ್ಗೊರಿದಮ್ಗಳಿಗೆ ಸಿದ್ಧವಾದ ವಸ್ತುವನ್ನು ರಿಟರ್ನ್ ಮಾಡುತ್ತದೆ**
+- **ಎಲ್ಲಾ ಆಟದ ಅಂಶಗಳಿಗೆ ಸಾಂದರ್ಭಿಕ ಇಂಟರ್ಫೇಸ್ ಒದಗಿಸುತ್ತದೆ**
+
+#### 2. ಮುಟ್ಟಿಕೆ ಪತ್ತೆ ಅನುಷ್ಠಾನ ಮಾಡಿ
+
+ಈಗ, ನಾವು ಎರಡು ಚೌಕಗಳು ಮುಟ್ಟಿದೆಯೇ ಎಂದು ತಿಳಿಸುವ ಫಂಕ್ಷನ್ ಸೃಷ್ಟಿಸೋಣ:
+
+```javascript
+function intersectRect(r1, r2) {
+ return !(
+ r2.left > r1.right ||
+ r2.right < r1.left ||
+ r2.top > r1.bottom ||
+ r2.bottom < r1.top
+ );
+}
+```
+
+**ಈ ಅಲ್ಗೊರಿದಮ್ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದು:**
+- **ಚೌಕಗಳ ನಡುವೆ ನಾಲ್ಕು ವಿಭಜನೆ ಪರೀಕ್ಷೆಗಳನ್ನು ನಡೆಸುತ್ತದೆ**
+- **ಯಾವುದೇ ವಿಭಜನೆ ಹೌದಾದರೆ `false` ಅನ್ನು ನೀಡುತ್ತದೆ**
+- **ಯಾವುದೇ ವಿಭಜನೆ ಸತ್ಯವಲ್ಲದಿದ್ದರೆ ಘರ್ಷಣೆ ಇದ್ದಂತೆ ಸೂಚಿಸುತ್ತದೆ**
+- **ಜಂಟಿ ಪರೀಕ್ಷೆಗೆ ನೆಗೇಷನ್ ಲಾಜಿಕ್ ಬಳಸುತ್ತದೆ**
+
+#### 3. ಲೇಸರ್ ಫೈರಿಂಗ್ ವ್ಯವಸ್ಥೆ ಅನುಷ್ಠಾನ
+
+ಇಲ್ಲಿ ರೋಮಾಂಚಕಾರಿ ಭಾಗ ಇದೆ! ಲೇಸರ್ ಫೈರಿಂಗ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಸ್ಥಾಪಿಸೋಣ.
+
+##### ಸಂದೇಶ ಸ್ಥಿರಾಂಕಗಳು
+
+ಮೊದಲು, ನಮ್ಮ ಆಟದ ವಿಭಿನ್ನ ಭಾಗಗಳ ನಡುವೆ ಸಂವಹನ ಮಾಡಲು ಕೆಲವು ಸಂದೇಶ ಪ್ರಕಾರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸೋಣ:
+
+```javascript
+KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+```
+
+**ಈ ಸ್ಥಿರಾಂಕಗಳು ಒದಗಿಸುವುದು:**
+- **ನಿರಂತರ ಘಟನೆಗಳ ಹೆಸರನ್ನು ಸಾಮರಸ್ಯಗೊಳಿಸುತ್ತದೆ**
+- **ಆಟದ ವ್ಯವಸ್ಥೆಗಳ ನಡುವೆ ಸರಾಗ ಸಂವಹನವನ್ನು ಅನುಮತಿಸುತ್ತದೆ**
+- **ಘಟನೆಗಳ ನೋಂದಣಿಯಲ್ಲಿ ತಪ್ಪುಗಳನ್ನು ತಪ್ಪಿಸುತ್ತದೆ**
+
+##### ಕೀಬೋರ್ಡ್ ಇನ್ಪುಟ್ ನಿರ್ವಹಣೆ
+
+ನಿಮ್ಮ ಕೀ ಇವೆಂಟ್ ಲಿಸ್ನರ್ಗೆ ಸ್ಪೇಸ್ ಕೀ ಪತ್ತೆ ಸೇರಿಸಿ:
+
+```javascript
+} else if(evt.keyCode === 32) {
+ eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+}
+```
+
+**ಈ ಇನ್ಪುಟ್ ನಿರ್ವಹಣೆ:**
+- **ಕೀಕೋಡ್ 32 ಬಳಸಿ ಸ್ಪೇಸ್ ಕೀಲಿಯನ್ನು ತೋರಿಸುತ್ತದೆ**
+- **ಪ್ರಮಾಣೀಕೃತ ಘಟನೆ ಸಂದೇಶವನ್ನು ಉತ್ಸರ್ಜಿಸುತ್ತದೆ**
+- **ಡಿಕಪಲ್ ಫೈರಿಂಗ್ ಲಾಜಿಕ್ನ್ನು ಕಾರ್ಯಾನುಷ್ಠಾನಕ್ಕೆ ತರುವಂತೆ ಮಾಡುತ್ತದೆ**
+
+##### ಘಟನೆ ಲಿಸ್ನರ್ ನೋಂದಣಿ
+
+ನಿಮ್ಮ `initGame()` ಫಂಕ್ಷನ್ನಲ್ಲಿ ಫೈರಿಂಗ್ ವರ್ತನೆ ನೋಂದಣಿ ಮಾಡಿ:
+
+```javascript
+eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+ if (hero.canFire()) {
+ hero.fire();
+ }
+});
+```
+
+**ಈ ಘಟನೆ ಲಿಸ್ನರ್:**
+- **ಸ್ಪೇಸ್ ಕೀ ಘಟನೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ**
+- **ಫೈರಿಂಗ್ ಕೂಲ್ಡ್ಆನ್ ಸ್ಥಿತಿಯನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ**
+- **ಅನುಮತಿತಾಗುವಾಗ ಲೇಸರ್ ಸೃಷ್ಟಿಯನ್ನು ಪ್ರೇರೇಪಿಸುತ್ತದೆ**
+
+ಲೇಸರ್-ಶತ್ರು ಘರ್ಷಣೆ ನಿರ್ವಹಣೆಯನ್ನು ಸೇರಿಸಿ:
+
+```javascript
+eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+ first.dead = true;
+ second.dead = true;
+});
+```
+
+**ಈ ಘರ್ಷಣೆ ನಿಯಂತ್ರಕ:**
+- **ಎರಡು ಅಂಶಗಳ ಜೊತೆಗೆ ಘರ್ಷಣೆ ಘಟನೆ ಮಾಹಿತಿಯನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ**
+- **ಎರಡೂ ಅಂಶಗಳನ್ನು ಅಳಿಸಲು ಗುರುತಿಸುತ್ತದೆ**
+- **ಘರ್ಷಣೆ ನಂತರ ಸರಿಯಾದ ಶುದ್ಧೀಕರಣವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ**
+
+#### 4. ಲೇಸರ್ ಕ್ಲಾಸ್ ರಚಿಸಿ
+
+ಮೇಲಕ್ಕೆ ಚಲಿಸುವ ಮತ್ತು ತನ್ನ ಜೀವಚಕ್ರವನ್ನು ನಿರ್ವಹಿಸುವ ಲೇಸರ್ ಪ್ರೊಜೆಕ್ಟೈಲ್ ಅನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ:
+
+```javascript
+class Laser extends GameObject {
+ constructor(x, y) {
+ super(x, y);
+ this.width = 9;
+ this.height = 33;
+ this.type = 'Laser';
+ this.img = laserImg;
+
+ let id = setInterval(() => {
+ if (this.y > 0) {
+ this.y -= 15;
+ } else {
+ this.dead = true;
+ clearInterval(id);
+ }
+ }, 100);
+ }
+}
+```
+
+**ಈ ಕ್ಲಾಸ್ ಅನುಷ್ಠಾನ:**
+- **GameObject ವ得ಯನ್ನು ವಿಸ್ತರಿಸಿ ಮೂಲ ಕಾರ್ಯವನ್ನು ಪಡೆದಿದೆ**
+- **ಲೇಸರ್ ಸ್ಪ್ರೈಟ್ಗಾಗಿ ಸೂಕ್ತ ಆಯಾಮಗಳನ್ನು ಹೊಂದಿದೆ**
+- **`setInterval()` ಬಳಸಿ ಸ್ವಯಂಚಾಲಿತ ಮೇಲ್ಗಡೆ ಚಲನೆ ಅನ್ವಯಿಸುತ್ತದೆ**
+- **ಪರದೆ ಮೇಲ್ಭಾಗ ತಲುಪಿದಾಗ ಸ್ವಯಂ-ಧ್ವಂಸಣೆ ನೇರವಾಗಿ ನಡೆಯುತ್ತದೆ**
+- **ಸ್ವಂತ ಅನಿಮೇಷನ್ ಸಮಯ ಮತ್ತು ಶುದ್ಧೀಕರಣ ನಿರ್ವಹಣೆ ಮಾಡಿದ್ದಾರೆ**
+
+#### 5. ಘರ್ಷಣೆ ಪತ್ತೆ ವ್ಯವಸ್ಥೆ ಅನುಷ್ಠಾನ
+
+ಸ್ವಯಂಚಾಲಿತ ಘರ್ಷಣೆ ಪತ್ತೆ ಕಾರ್ಯಾಚರಣೆ ರಚಿಸಿ:
+
+```javascript
+function updateGameObjects() {
+ const enemies = gameObjects.filter(go => go.type === 'Enemy');
+ const lasers = gameObjects.filter(go => go.type === "Laser");
+
+ // ಲೇಸರ್-ಶತ್ರು ಸಂಘರ್ಷಗಳನ್ನು ಪರೀಕ್ಷಿಸು
+ lasers.forEach((laser) => {
+ enemies.forEach((enemy) => {
+ if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) {
+ eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+ first: laser,
+ second: enemy,
+ });
+ }
+ });
+ });
+
+ // ಹಾಳಾದ ವಸ್ತುಗಳನ್ನು ತೆಗೆದುಹಾಕು
+ gameObjects = gameObjects.filter(go => !go.dead);
+}
+```
+
+**ಈ ಘರ್ಷಣೆ ವ್ಯವಸ್ಥೆ:**
+- **ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಆಟದ ಅಂಶಗಳನ್ನು ಪ್ರಕಾರದ ಮೂಲಕ ಫಿಲ್ಟರ್ ಮಾಡುತ್ತದೆ**
+- **ಪ್ರತಿ ಲೇಸರ್ ಪ್ರತಿಯೊಂದು ಶತ್ರುಗಳ ವಿರುದ್ಧ ಮುಟ್ಟಿಕೆ ಪರಿಶೀಲನೆ ನಡೆಸುತ್ತದೆ**
+- **ಘರ್ಷಣೆ ಕಂಡುಬಂದಾಗ ಘಟನೆಗಳನ್ನು ಉತ್ಸರ್ಜಿಸುತ್ತದೆ**
+- **ಘರ್ಷಣೆಯ ಬಳಿಕ ಹಾಳಾಗಿದ ಅಂಶಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ**
+
+> ⚠️ **ಅತ್ಯಂತ ಮುಖ್ಯ**: ಘರ್ಷಣೆ ಪತ್ತೆ ಮಾಡಲು `updateGameObjects()` ಅನ್ನು ನಿಮ್ಮ ಮುಖ್ಯ ಗೇಮ್ ಲೂಪಿಗೆ `window.onload`ನಲ್ಲಿ ಸೇರಿಸಿ.
+
+#### 6. ಹೀರೋ ಕ್ಲಾಸ್ಗೆ ಕೂಲ್ಡ್ಆನ್ ವ್ಯವಸ್ಥೆ ಸೇರಿಸಿ
+
+ಹೀರೋ ಕ್ಲಾಸ್ ಅನ್ನು ಫೈರಿಂಗ್ ಮೆಕ್ಯಾನಿಕ್ಸ್ ಮತ್ತು ದರ ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಅಭಿವೃದ್ಧಿಪಡಿಸಿ:
+
+```javascript
+class Hero extends GameObject {
+ constructor(x, y) {
+ super(x, y);
+ this.width = 99;
+ this.height = 75;
+ this.type = "Hero";
+ this.speed = { x: 0, y: 0 };
+ this.cooldown = 0;
+ }
+
+ fire() {
+ gameObjects.push(new Laser(this.x + 45, this.y - 10));
+ this.cooldown = 500;
+
+ let id = setInterval(() => {
+ if (this.cooldown > 0) {
+ this.cooldown -= 100;
+ } else {
+ clearInterval(id);
+ }
+ }, 200);
+ }
+
+ canFire() {
+ return this.cooldown === 0;
+ }
+}
+```
+
+**ಬೆಳೆಸಲಾದ ಹೀರೋ ಕ್ಲಾಸ್ ವಿವರ:**
+- **ಶೂನ್ಯದಿಂದ ಕೂಲ್ಡ್ಆನ್ ಟೈಮರ್ ಆರಂಭಿಸುತ್ತದೆ (ತಕ್ಷಣ ಫೈರ್ ಮಾಡಲು ಸಿದ್ಧ)**
+- **ಲೇಸರ್ ವಸ್ತುಗಳನ್ನು ಹೀರೋ ನೌಕೆಯ ಮೇಲೆ ಸೃಷ್ಟಿಸುತ್ತದೆ**
+- **ವೇಗವಾಗಿ ಫೈರ್ ಮಾಡುವುದನ್ನು ತಡೆಯಲು ಕೂಲ್ಡ್ಆನ್ ಅವಧಿ ನಿಗದಿಗೊಳಿಸಲಾಗಿದೆ**
+- **ಅಂತರಾಲ ಆಧಾರಿತ ಅಪ್ಡೇಟ್ಗಳ ಮೂಲಕ ಕೂಲ್ಡ್ಆನ್ ಟೈಮರ್ ಇಳಿಸಿಕೊಳ್ಳುತ್ತದೆ**
+- **`canFire()` ವಿಧಾನದಿಂದ ಫೈರಿಂಗ್ ಸ್ಥಿತಿ ಪರಿಶೀಲನೆ ಒದಗಿಸುತ್ತದೆ**
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**ಪೂರ್ಣ ವ್ಯವಸ್ಥೆ ಅರಿವು:** ಘರ್ಷಣೆ ವ್ಯವಸ್ಥೆ ಬಗ್ಗೆ ನಿಮ್ಮ ನಿಪುಣತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+- ✅ ಚೌಕ ಅಂಚುಗಳು ಘರ್ಷಣೆ ಪತ್ತೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೇಗೆ ಮಾಡುತ್ತದೆ?
+- ✅ ಆಟದ ಸ್ಥಿರತೆಯಿಗಾಗಿ ಅಂಶಗಳ ಜೀವಚಕ್ರ ನಿರ್ವಹಣೆ ಬೇಕಾದ್ದೇಕೆ?
+- ✅ ಕೂಲ್ಡ್ಆನ್ ವ್ಯವಸ್ಥೆಯು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಹೇಗೆ ತಡೆಯುತ್ತದೆ?
+- ✅ ಘಟನಾಚಾಲಿತ ವ್ಯಾಸ್ಥೆಯು ಘರ್ಷಣೆ ನಿರ್ವಹಣೆಯಲ್ಲಿ ಯಾವ ಪಾತ್ರ ವಹಿಸುತ್ತದೆ?
+
+**ವ್ಯವಸ್ಥೆಯ ಸಂಯೋಜನೆ:** ನಿಮ್ಮ ಘರ್ಷಣೆ ಪತ್ತೆ ತೋರಿಸುತ್ತದೆ:
+- **ಗಣಿತ ನಿಖರತೆ**: ಚೌಕ ಮುಟ್ಟಿಕೆ ಆಲ್ಗೊರಿದಮ್ಗಳು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಏರಿಕೆ**: ಪರಿಣಾಮಕಾರಿ ಘರ್ಷಣೆ ಪರೀಕ್ಷಾ ಮಾದರಿಗಳು
+- **ಮೆಮೊರಿ ನಿರ್ವಹಣೆ**: ಸುರಕ್ಷಿತ ಅಂಶ ಸೃಷ್ಟಿ ಮತ್ತು ವಿನಾಶ
+- **ಘಟನೆ ಸಂಯೋಜನೆ**: ವಿಭಜಿತ ವ್ಯವಸ್ಥೆಯ ಸಂವಹನ
+- **ತಕ್ಷಣದ ಪ್ರಕ್ರಿಯೆ**: ಫ್ರೇಮ್ ಆಧಾರಿತ ಅಪ್ಡೆಟ್ ಸೈಕಲ್ಗಳು
+
+**ವೃತ್ತಿಪರ ಮಾದರಿಗಳು**: ನೀವು ಅನುಷ್ಠಾನ ಮಾಡಿರುವುದು:
+- **ಸ್ವತಂತ್ರ ಕರ್ತವ್ಯ ವಿಂಗಡಣೆ**: ಭೌತಶಾಸ್ತ್ರ, ರೆಂಡರಿಂಗ್ ಮತ್ತು ಇನ್ಪುಟ್ ವಿಭಜನೆ
+- **ಒಬ್ಜೆಕ್ಟ್ ಆರೆಂಟೆಡ್ ವಿನ್ಯಾಸ**: ಹೇರಿಕೆ ಮತ್ತು ಬಹುರೂಪತಾಂಶ
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಅಂಶಗಳ ಜೀವಚಕ್ರ ಮತ್ತು ಆಟದ ಸ್ಥಿತಿಯ ಟ್ರ್ಯಾಕಿಂಗ್
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಏರಿಕೆ**: ಸಮಯ ಪ್ರಾಯೋಗಿಕ ವ್ಯವಹಾರಗಳಿಗೆ ಪರಿಣಾಮಕಾರಿ ಅಲ್ಗೊರಿದಮ್
+
+### ನಿಮ್ಮ ಅನುಷ್ಠಾನವನ್ನು ಪರೀಕ್ಷಿಸುವುದು
+
+ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮ್ ಈಗ ಸಂಪೂರ್ಣ ಘರ್ಷಣೆ ಪತ್ತೆ ಮತ್ತು ಹೋರಾಟ ಕ್ರಿಯೆಗಳನ್ನು ಹೊಂದಿದೆ. 🚀 ಈ ಹೊಸ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ:
+- **ಅರೋ ಹುರುಹು ಮೂರು ಬಾಣಗಳಲ್ಲಿ ಹಾರಾಡಿ** ಚಲನೆ ನಿಯಂತ್ರಣ ಪರಿಶೀಲಿಸಲು
+- **ಸ್ಪೇಸ್ ಬಾರ್ ಬಳಸಿ ಲೇಸರ್ ಹೊಡೆದು** - ಕೂಲ್ಡ್ಆನ್ ಸ್ಪಾಮ್ ಕ್ಲಿಕ್ಕಿಂಗ್ ತಡೆಯುವುದನ್ನು ಗಮನಿಸಿ
+- **ಲೇಸರ್ ಗಳು ಶತ್ರುಗಳನ್ನು ಹೊಡೆದಾಗ ಘರ್ಷಣೆಗಳನ್ನು ಗಮನಿಸಿ, ನಾಶಗೊಂಡ ಅಂಶಗಳ ತೆಗೆಯಲಾಗುತ್ತದೆ**
+- **ನಾಶವಾದ ಅಂಶಗಳು ಆಟದಿಂದ ಅಳಿತವಾಗುವಂತೆ ಪರಿಶೀಲನೆ ಮಾಡಿ**
+
+ನೀವು ಸ್ಥಿತಿಸ್ಥಾಪಕ ನೌಕಾ ಸಂಚಾರ ಹಾಗೂ ರೋಬೋಟಿಕ್ಸ್ ಮಾರ್ಗದರ್ಶನ ಮಾಡುವ गणಿತಾ ಸಿದ್ಧಾಂತಗಳನ್ನೇ ಬಳಸಿ ಘರ್ಷಣೆ ಪತ್ತೆಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಅನುಷ್ಠಾನಗೊಳಿಸಿದ್ದೀರಿ.
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದು**
+- [ ] ಬ್ರೌಸರ್ ಡೆವ್ಟೂಲ್ಗಳನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ನಿಮ್ಮ ಘರ್ಷಣೆ ಪತ್ತೆ ಕಾರ್ಯದಲ್ಲಿ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ಗಳನ್ನು ಸೆಟ್ ಮಾಡಿ
+- [ ] ಲೇಸರ್ ವೇಗ ಅಥವಾ ಶತ್ರು ಚಲನೆ ಬದಲಾಯಿಸಿ ಘರ್ಷಣೆ ಪರಿಣಾಮಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ
+- [ ] ವಿವಿಧ ಕೂಲ್ಡ್ಆನ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಪ್ರಾಯೋಗಿಕವಾಗಿ ಫೈರಿಂಗ್ ದರಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ
+- [ ] συγκεντρώστε `console.log` δηλώσεις για την παρακολούθηση συμβάντων σύγκρουσης σε πραγματικό χρόνο
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದವುಗಳು**
+- [ ] ಪಾಠದ ನಂತರದ ಕ್ವಿಜ್ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಘರ್ಷಣಾ ಪತ್ತಿಗೊಳಿಸುವ ಆಲ್ಗೋರಿದಮ್ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ಘರ್ಷಣೆಗಳು ಸಂಭವಿಸಿದಾಗ ಸ್ಫೋಟಗಳಂತಹ ವಿಸ್ವಲ್ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ವಿಭಿನ್ನ ಗುಣಗಳಿರುವ ವಿವಿಧ ಬాణಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ತಾತ್ಕಾಲಿಕವಾಗಿ ಆಟಗಾರನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಹೆಚ್ಚಿಸುವ ಫಲಿತಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಘರ್ಷಣೆಗಳು ಹೆಚ್ಚು ತೃಪ್ತಿದಾಯಕವಾಗಲು ಧ್ವನಿ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ದೀರ್ಘ physiccs ಪ್ರೋಗ್ರಾಮಿಂಗ್**
+- [ ] ಮೃದುವಾದ ಘರ್ಷಣೆ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಸ್ಪೇಸ್ ಗೇಮ್ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಆಯತಾಕಾರದ ಹೊರತಾಗಿ ಮುಕುಟ, ಬಹುಭುಜಾಕಾರಗಳಂತಹ ಉನ್ನತ ಘರ್ಷಣೆ ಆಕಾರಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ವಾಸ್ತವ ಸ್ಫೋಟ ಪರಿಣಾಮಗಳಿಗೆ ಕಣಗಳ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಘರ್ಷಣೆ ತಪ್ಪಿಸುವ ಸಂಕೀರ್ಣ ಶತ್ರು ವರ್ತನೆ ರಚಿಸಿ
+- [ ] ಅನೇಕ ವಸ್ತುಗಳೊಂದಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯನ್ನ ಅಧಿಕೃತಗೊಳಿಸಿ
+- [ ] ಭೌತಶಾಸ್ತ್ರದ ಅನುಕರಣೆಗಳನ್ನು ಸಂವೇಗ ಮತ್ತು ವಾಸ್ತವ ಚಲನವಲನದಂತೆ ಸೇರಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ದೀರ್ಘ ಆಟದ ಭೌತಶಾಸ್ತ್ರ ಮಾಸ್ಟರಿ**
+- [ ] ಉನ್ನತ ಭೌತಶಾಸ್ತ್ರ ಎಂಜಿನ್ಗಳು ಮತ್ತು ವಾಸ್ತವ ಅನುಕರಣೆಗಳೊಂದಿಗೆ ಆಟಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] 3D ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ ಮತ್ತು ಆಂತರಿಕ ಭಾಗ ವಿಂಗಡಣಾ ಆಲ್ಗೋರಿದಮ್ಗಳನ್ನು ಕಲಿಯಿರಿ
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ ಭೌತಶಾಸ್ತ್ರ ಗ್ರಂಥಾಲಯಗಳ ಮತ್ತು ಆಟದ ಎಂಜಿನ್ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿರಿ
+- [ ] ಗಷ್ಟಗ್ರಾಫಿಕ್ಸ್-ಸಂಬಂಧಿತ ಅಪ್ಲಿಕೇಶನ್ಗಳ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆಗೆ ಮಾಸ್ಟರಿ
+- [ ] ಆಟದ ಭೌತಶಾಸ್ತ್ರ ಮತ್ತು ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯ ಕುರಿತಾಗಿ ಶೈಕ್ಷಣಿಕ ವಿಷಯವನ್ನು ರಚಿಸಿ
+- [ ] ಉನ್ನತ ಭೌತಶಾಸ್ತ್ರ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಕೌಶಲ್ಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಪೋರ್ಟ್ಫೋಲಿಯೊ ನಿರ್ಮಿಸಿ
+
+## 🎯 ನಿಮ್ಮ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯ ಮಾಸ್ಟರಿ ಟೈಮ್ಲೈನ್
+
+```mermaid
+timeline
+ title ಸಂಘರ್ಷ ಪತ್ತೆ & ಆಟದ ಭೌತಶಾಸ್ತ್ರ ಕಲಿಕೆ ಪ್ರಗತಿ
+
+ section alapbhoota (10 minutes)
+ ಆವತರಣಿಕೆ ಗಣಿತ: ಸಂಯೋಜನೆಯ ವ್ಯವಸ್ಥೆಗಳು
+ : ಗಡಿ ಲೆಕ್ಕಾಚಾರಗಳು
+ : ಸ್ಥಾನ ಟ್ರ್ಯಾಕಿಂಗ್
+ : ಆಯಾಮ ನಿರ್ವಹಣೆ
+
+ section ಅಲ್ಗೋರಿದಮ್ ವಿನ್ಯಾಸ (20 minutes)
+ ಅಂತರಂಗ ಲಾಜಿಕ: ವಿಭಜನೆ ಪರೀಕ್ಷೆ
+ : ಮೇಲ್ದಡ ಪರಿಶೀಲನೆ
+ : ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆ
+ : ಅರೆಗಿನ ಪ್ರಕರಣ ನಿರ್ವಹಣೆ
+
+ section ಆಟದ ಅಳವಡಿಕೆ (30 minutes)
+ ವಸ್ತು ವ್ಯವಸ್ಥೆಗಳು: ಜೀವನಚರಿತ್ರೆ ನಿರ್ವಹಣೆ
+ : ಘಟನೆ ಸಂಯೋಜನೆ
+ : ಸ್ಥಿತಿ ಟ್ರ್ಯಾಕಿಂಗ್
+ : ಮೆಮೊರಿ ಶೋಧನೆ
+
+ section ಸಂವಹನಾತ್ಮಕ ವೈಶಿಷ್ಟ್ಯಗಳು (40 minutes)
+ ಯುದ್ಧ ರಚನೆಗಳು: ಪ್ರಕ್ಷೇಪಣೆ ವ್ಯವಸ್ಥೆಗಳು
+ : ಆಯುಧ ತಂಪಾಗುವಿಕೆ
+ : ಹಾನಿ ಲೆಕ್ಕಾಚಾರ
+ : ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ
+
+ section ಉನ್ನತ ಭೌತಶಾಸ್ತ್ರ (50 minutes)
+ ರಿಯಲ್-ಟೈಮ್ ವ್ಯವಸ್ಥೆಗಳು: ಫ್ರೇಮ್ ದರ ಸುಧಾರಣೆ
+ : ಸ್ಥಳೀಯ ವಿಭಜನೆ
+ : ಸಂಘರ್ಷ ಪ್ರತಿಕ್ರಿಯೆ
+ : ಭೌತಶಾಸ್ತ್ರ ಅನುಕರಣೆ
+
+ section ವೃತ್ತಿಪರ ತಂತ್ರಗಳು (1 week)
+ ಆಟದ ಎಂಜಿನ್ ಕಲ್ಪನೆಗಳು: ഘಟಕ ವ್ಯವಸ್ಥೆಗಳು
+ : ಭೌತಶಾಸ್ತ್ರ ಪೈಪ್ಲೈನ್ಗಳು
+ : ಕಾರ್ಯಕ್ಷಮತೆ ವಿಶ್ಲೇಷಣೆ
+ : ಕ್ರಾಸ್-ಪ್ಲಾಟ್ಫಾರ್ಮ್ ಸುಧಾರಣೆ
+
+ section ಕೈಗಾರಿಕಾ ಅನ್ವಯಿಕೆಗಳು (1 month)
+ ಉತ್ಪಾದನಾ ಕೌಶಲ್ಯಗಳು: ದೊಡ್ಡ ಪ್ರಮಾಣದ ಸುಧಾರಣೆ
+ : ತಂಡ ಸಹಕಾರ
+ : ಎಂಜಿನ್ ಅಭಿವೃದ್ಧಿ
+ : ವೇದಿಕೆ ನಿಯೋಜನೆ
+```
+### 🛠️ ನಿಮ್ಮ ಆಟದ ಭೌತಶಾಸ್ತ್ರ ಕಾರ್ಯಗಳ ಸಂಕ್ಷೇಪ
+
+ಈ ಪಾಠ ಪೂರ್ಣಗೊಳ್ಳಿದ ನಂತರ, ನೀವು ಈಗ ಆಯ್ನಿತಾದಂತಿದ್ದೀರಿ:
+- **ಘರ್ಷಣೆ ಗಣಿತ**: ಆಯತಗಳ ಆಂತರಿಕ್ಷ ಆಲ್ಗೋರಿದಮ್ಗಳು ಮತ್ತು ಸಂಯೋಜನಾ ವ್ಯವಸ್ಥೆಗಳು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆ**: ನೈತಿಕ ಅಪ್ಲಿಕೇಶನ್ಗಳಿಗೆ ಪರಿಣಾಮಕಾರಿ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ
+- **ವಸ್ತುವಿನ ಜೀವನಚಕ್ರ ನಿರ್ವಹಣೆ**: ಸುರಕ್ಷಿತ ಸೃಷ್ಟಿ, ನವೀಕರಣೆ ಮತ್ತು ನಾಶಪಡಿಸುವ ಮಾದರಿಗಳು
+- **ಕಾರ್ಯಕ್ರಮ-ಚಾಲಿತ ವಾಸ್ತುಶಿಲ್ಪ**: ಘರ್ಷಣೆ ಪ್ರತಿಕ್ರಿಯೆಗಾಗಿ ವಿಭಜಿತ ವ್ಯವಸ್ಥೆಗಳು
+- **ಆಟದ ಲೂಪ್ ಸಮ್ಮಿಲನ**: ಫ್ರೇಮ್ ಆಧಾರಿತ ಭೌತಶಾಸ್ತ್ರ ನವೀಕರಣ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಸಂಯೋಜನೆ
+- **ಇನ್ಪುಟ್ ವ್ಯವಸ್ಥೆಗಳು**: ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ನಿಯಂತ್ರಣಗಳು ದರ ಲಿಮಿಟಿಂಗ್ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ
+- **ಮೆಮೊರಿ ನಿರ್ವಹಣೆ**: ಸಮರ್ಥ ವಸ್ತು ಪೂಲಿಂಗ್ ಮತ್ತು ಶುಚಿಗೊಳಿಸುವ ತಂತ್ರಗಳು
+
+**ವಾಸ್ತವಿಕ ಅನ್ವಯಿಕೆಗಳು**: ನಿಮ್ಮ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ ಕೌಶಲ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯವಾಗುತ್ತವೆ:
+- **ಪರಸ್ಪರ ಸಂಘಟಿತ ಅನುಕರಣೆಗಳು**: ವೈಜ್ಞಾನಿಕ ಮಾದರೀಕರಣ ಮತ್ತು ಶೈಕ್ಷಣಿಕ ಸಾಧನಗಳು
+- **ಬಳಕೆದಾರ ಮುಖಪುಟ ವಿನ್ಯಾಸ**: ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡ್ರಾಪ್ ಸಂವಹನಗಳು ಮತ್ತು ಸ್ಪರ್ಶ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ
+- **ದತ್ತಾ ದೃಶ್ಯೀಕರಣ**: ಪರಸ್ಪರ ಸಂವಹನ ಚಾರ್ಟ್ಗಳು ಮತ್ತು ಕ್ಲಿಕ್ಕಬಹುದಾದ ಅಂಶಗಳು
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: ಸ್ಪರ್ಶ ಭಾವ ಸಂವೇದನೆ ಮತ್ತು ಘರ್ಷಣೆ ಕುೖಶಲ್ಯ ನಿರ್ವಹಣೆ
+- **ರೋಬೋಟಿಕ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಮಾರ್ಗ ನಿರ್ವಹಣೆ ಮತ್ತು ಅಡೆತಡೆ ತಪ್ಪಿಸುವಿಕೆ
+- **ಕಂಪ್ಯೂಟರ್ ಗ್ರಾಫಿಕ್ಸ್**: ರೇ ಟ್ರೇಸಿಂಗ್ ಮತ್ತು ಸ್ಥಳ ಆಲ್ಗೋರಿದಮ್ಗಳು
+
+**ವ್ಯವಹಾರ ಕೌಶಲ್ಯಗಳು ಪಡೆದವು**: ನೀವು ಈಗ ಮಾಡಬಹುದು:
+- **ರಚಿಸಿ** ನೈತಿಕ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯ ಸಮರ್ಥ ಆಲ್ಗೋರಿದಮ್ಗಳು
+- **ಅನುಷ್ಠಾನಗೊಳಿಸಿ** ವಸ್ತು ಸಂಕೀರ್ಣತೆಗೂ ಹೊಂದಿಕೊಳ್ಳುವ ಭೌತಶಾಸ್ತ್ರ ವ್ಯವಸ್ಥೆಗಳು
+- **ದೋಷ ನಿವಾರಣಾ** ಗಣಿತೀಯ ತತ್ವಗಳನ್ನು ಬಳಸಿ ನಿಖರ ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ವ್ಯವಸ್ಥೆಗಳನ್ನು
+- **ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಿ** ವಿಭಿನ್ನ ಹಾರ್ಡ್ವೇರ್ ಮತ್ತು ಬ್ರೌಸರ್ ಸಾಮರ್ಥ್ಯಗಳಿಗೆ
+- **ವಾಸ್ತುಶಿಲ್ಪದ** ನಿರ್ವಹಿಸಬಹುದಾದ ಆಟದ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಸಾಬೀತು ಮಾಡಿದ ವಿನ್ಯಾಸ ಮಾದರಿಗಳನ್ನು ಬಳಸಿ
+
+**ಆಟೆಯಲ್ಲಿ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಕಲ್ಪನೆಗಳು**:
+- **ಭೌತಶಾಸ್ತ್ರ ಅನುಕರಣೆ**: ನೈತಿಕ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆ
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಇಂಜೀನಿಯರಿಂಗ್**: ಪರಸ್ಪರ ಸಂವಹನ ಅಪ್ಲಿಕೇಶನ್ಗಳಿಗೆ ತ್ವರಿತ ಆಲ್ಗೋರಿದಮ್ಗಳು
+- **ಕಾರ್ಯಕ್ರಮ ವ್ಯವಸ್ಥೆಗಳು**: ಆಟದ ಘಟಕಗಳ ನಡುವಿನ ವಿಭಜಿತ ಸಂವಹನ
+- **ವಸ್ತು ನಿರ್ವಹಣೆ**: গতಿಶೀಲ ವಿಷಯಗಳ ಸಮರ್ಥ ಜೀವನಚಕ್ರ ಮಾದರಿಗಳು
+- **ಇನ್ಪುಟ್ ನಿರ್ವಹಣೆ**: ಸೂಕ್ತ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ನಿಯಂತ್ರಣಗಳು
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು Matter.js ಮುಂತಾದ ಉನ್ನತ ಭೌತಶಾಸ್ತ್ರ ಎಂಜಿನ್ಗಳನ್ನು ಅನ್ವೇಷಿಸಲು, 3D ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆ ಅಥವಾ ಸಂಕೀರ್ಣ ಕಣ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಿದ್ಧರಿದ್ದೀರಿ!
+
+🌟 **ಸಾಧನೆ ಪ್ರದರ್ಶಿಸಲಾಗಿದೆ**: ನೀವು ವೃತ್ತಿಪರ ಮಟ್ಟದ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯನ್ನು ಹೊಂದಿರುವ ಸಂಪೂರ್ಣ ಭೌತಶಾಸ್ತ್ರ ಆಧಾರದ ಪರಸ್ಪರ ಕ್ರಿಯೆಗಳ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿದ್ದೀರಿ!
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಈ ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ಕೈಮುಗಿಯುವ ಹೀರೋ ಹಡಗಿನಿಂದ ಸಂಗ್ರಹಿಸಿದಾಗ ತಾತ್ಕಾಲಿಕ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಒದಗಿಸುವಂತೆ ಯಾದೃಚ್ಛಿಕವಾಗಿ ಹುಟ್ಟುವ ಫಲಿತಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವ ಮೂಲಕ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವ ವ್ಯವಸ್ಥೆಯನ್ನು ವೃದ್ಧಿಪಡಿಸಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** GameObject ಅನ್ನು ವಿಸ್ತರಿಸುವ PowerUp ವರ್ಗವನ್ನು ರಚಿಸಿ ಮತ್ತು ಹೀರೋ ಮತ್ತು ಫಲಿತಗಳ ನಡುವಿನ ಘರ್ಷಣೆ ಪತ್ತಿಗೊಳಿಸುವಿಕೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ. ಕನಿಷ್ಠ ಎರಡು ವಿಧದ ಫಲಿತಗಳನ್ನು ಸೇರಿಸಿ: ಒಂದು ಫೈರ್ ರೇಟ್ (ಕೂಲ್ಡೌನ್ ಕಡಿಮೆಮಾಡುತ್ತದೆ) ಹೆಚ್ಚಿಸುವುದು, ಮತ್ತೊಂದು ತಾತ್ಕಾಲಿಕ ಷೀಲ್ಡ್ ರಚಿಸುವುದು. ಯಾದೃಚ್ಛಿಕ ಅಂತರ ಮತ್ತು ಸ್ಥಾನಗಳಲ್ಲಿ ಫಲಿತಗಳ ಉತ್ಪತ್ತಿ ತರ್ಕವನ್ನು ಸೇರಿಸಿ.
+
+---
+
+
+
+## 🚀 ಸವಾಲು
+
+ಸ್ಫೋಟವನ್ನು ಸೇರಿಸಿ! [Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt)ದಲ್ಲಿರುವ ಆಟದ ಅದೃಶ್ಯಗಳನ್ನು ನೋಡಿ ಮತ್ತು ಲೇಸರ್ ವಿದೇಶಿ ಮೇಲೆ ಹೊಡೆತ ಹೊಡೆಯಿದಾಗ ಸ್ಫೋಟವನ್ನು ಸೇರಿಸಲು ಪ್ರಯತ್ನಿಸಿ
+
+## ಪಾಠೋತ್ತರ ಕ್ವಿಜ್
+
+[ಪಾಠೋತ್ತರ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/36)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+ನೀವು ಈಗವರೆಗೆ ನಿಮ್ಮ ಆಟದಲ್ಲಿ ಅಂತರಗಳನ್ನು ಪ್ರಯೋಗ ಮಾಡಿ ನೋಡಿ. ಅವು ಬದಲಾಗಿಸಿದಾಗ ಏನಾಗುತ್ತದೆ? [ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಟೈಮಿಂಗ್ ಈವೆಂತ್ಗಳು](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
diff --git a/translations/kn/6-space-game/4-collision-detection/assignment.md b/translations/kn/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 000000000..492be15e3
--- /dev/null
+++ b/translations/kn/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,64 @@
+
+# ಅಪಘಾತಗಳ ಅನ್ವೇಷಣೆ
+
+## ನಿರ್ದೇಶನಗಳು
+
+ವಿಭಿನ್ನ ರೀತಿಯ ವಸ್ತು ಪರಸ್ಪರ ಕ್ರಿಯೆಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಕಸ್ಟಮ್ ಮಿನಿ-ಗೇಮ್ ರಚಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅಪಘಾತ ಪತ್ತೆಮಾಡುವ ಜ್ಞಾನವನ್ನು ಅನ್ವಯಿಸಿ. ಈ ಹುದ್ದೆ ರಚನಾತ್ಮಕ ಅನುಷ್ಠಾನ ಮತ್ತು ಪ್ರಯೋಗಾಮೃತಿಕೆಯಿಂದ ಅಪಘಾತ ಯಾಂತ್ರಿಕತೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
+
+### ಯೋಜನೆ ಅವಶ್ಯಕತೆಗಳು
+
+**ಇವುಗಳನ್ನು ಹೊಂದಿರುವ ಸಣ್ಣ ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ಆಟವನ್ನು ರಚಿಸಿ:**
+- **ಮಲ್ಟಿಪಲ್ ಚಲಿಸುವ ವಸ್ತುಗಳು** ಕೀಬೋರ್ಡ್ ಅಥವಾ ಮೌಸ್ ಇನ್ಪುಟ್ ಮೂಲಕ ನಿಯಂತ್ರಿಸಬಹುದಾಗಿರಬೇಕು
+- ಪಾಠದಿಂದ ಪಡೆದ ಛಲದ ಮಧ್ಯೆ ಹರಡುವದಾರಿತನ ನಿಯಮಗಳನ್ನು ಬಳಸಿ **ಅಪಘಾತ ಪತ್ತೆ ವ್ಯವಸ್ಥೆ**
+- ಅಪಘಾತಗಳು ಸಂಭವಿಸುವಾಗ ಗೋಚರಿಸುವ **ದೃಶ್ಯ ಸ್ಪಂದನೆ** (ವಸ್ತು ನಾಶ, ಬಣ್ಣ ಬದಲಾವಣೆ, ಪರಿಣಾಮಗಳು)
+- ಅಪಘಾತಗಳನ್ನು ಅರ್ಥಪೂರ್ಣ ಮತ್ತು ಮನರಂಜಕ ಮಾಡಿಸುವ **ಆಟ ನಿಯಮಗಳು**
+
+### ಸೃಜನಶೀಲ ಸಲಹೆಗಳು
+
+**ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ ಒಂದನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ:**
+- **ಅಸ್ಟೆರಾಯ್ಡ್ ಫೀಲ್ಡ್**: ಹಾನಿಕರ ಕಡೆಗಿಂತಲೂ ಬಿಗಿಯಾದ ಅಂತರಿಕ್ಷ ನಿರ್ವಹಿಸಲು ಹಡಗು ಸಾಗಿಸು
+- **ಬಂಪರ್ ಕಾರ್ಸ್**: ಭೌತಶಾಸ್ತ್ರ ಆಧಾರಿತ ಅಪಘಾತ ಇನ್ನಿತರರಂಗ ನಿರ್ಮಿಸು
+- **ಮೀಟಿಯೋರ್ ರಕ್ಷಣೆ**: ಭೂಮಿಯನ್ನು ಬರುವ ಅಂತರಿಕ್ಷ ಕಲ್ಲುಗಳಿಂದ ರಕ್ಷಿಸು
+- **ಸಂಗ್ರಹ ಆಟ**: ಅಡೆತಡೆಗಳನ್ನು ದೂರದಿಂದ ವಸ್ತುಗಳನ್ನು ಜನಿಸಿ
+- **ಪ್ರದೇಶ ನಿಯಂತ್ರಣ**: ಸ್ಥಳವನ್ನು ಸ್ವಾಧೀನ ಮಾಡಿಕೊಳ್ಳಲು ಸ್ಪರ್ಧಿಸುವ ವಸ್ತುಗಳು
+
+### ತಾಂತ್ರಿಕ ಅನುಷ್ಠಾನ
+
+**ನಿಮ್ಮ ಪರಿಹಾರವು ಪ್ರದರ್ಶಿಸಬೇಕು:**
+- ಸರಿಯಾದ ಅರ್ಧಶೀಲ ಆಧಾರಿತ ಅಪಘಾತ ಪತ್ತೆಮಾಡುವ ತಂತ್ರವನ್ನು ಬಳಸಿಕೊಳ್ಳುವಿಕೆ
+- ಬಳಕೆದಾರ ಇನ್ಪುಟ್ಗಾಗಿ ಘಟನೆ ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್
+- ವಸ್ತುಗಳ ಆಯುಷ್ಯಚಕ್ರ ನಿರ್ವಹಣೆ (ರಚನೆ ಮತ್ತು ನಾಶ)
+- ಸೂಕ್ತ ವರ್ಗ ರಚನೆಯೊಂದಿಗೆ ಶುದ್ಧ ಕೋಡ್ ಸಂಘಟನೆ
+
+### ಬೋನಸ್ ಸವಾಲುಗಳು
+
+**ಹೆಚ್ಚುವರಿ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಆಟವನ್ನು ಮಾದರಿ ಮಾಡಿರಿ:**
+- ಅಪಘಾತ ಸಂಭವಿಸಿದಾಗ **ಕಣಗಳ ಪರಿಣಾಮಗಳು**
+- ವಿಭಿನ್ನ ಅಪಘಾತ ಪ್ರಕಾರಗಳಿಗೆ **ಧ್ವನಿ ಪರಿಣಾಮಗಳು**
+- ಅಪಘಾತ ಫಲಿತಾಂಶಗಳ ಆಧಾರದಲ್ಲಿ **ಸ್ಕೋರ್ ವ್ಯವಸ್ಥೆ**
+- ವಿಭಿನ್ನ ವರ್ತನೆಗಳೊಂದಿಗೆ **ಬರಹದ ಅಪಘಾತ ಪ್ರಕಾರಗಳು**
+- ಸಮಯಕ್ಕೆ ತಕ್ಕಂತೆ ಹೆಚ್ಚುವ **ಪ್ರಗತಿಶೀಲ ಕಷ್ಟಮಾನಗಳು**
+
+## ಮೌಲ್ಯಮಾಪನ ಕಡತ
+
+| ಕ್ರಮಿಕ ಕಾರ್ಯ | ಮಾದರಿಯಾಗಿರುವುದು | ಸೂಕ್ತ | ಸುಧಾರಣೆ ಅಗತ್ಯವಿದೆ |
+|-------------|-----------------|--------|---------------------|
+| **ಅಪಘಾತ ಪತ್ತೆ** | ಮಲ್ಟಿಪಲ್ ವಸ್ತು ಪ್ರಕಾರಗಳು ಮತ್ತು ಸುಲಭ ಪರಸ್ಪರ ಕ್ರಿಯೆ ನಿಯಮಗಳೊಂದಿಗೆ ನಿಖರ ಅರ್ಧಶೀಲ ಆಧಾರಿತ ಅಪಘಾತ ಪತ್ತೆ | ಸರಳ ವಸ್ತು ಪರಸ್ಪರ ಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಮೂಲ ಅಪಘಾತ ಪತ್ತೆ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ | ಅಪಘಾತ ಪತ್ತೆ ಸಮಸ್ಯೆಗಳಿವೆ ಅಥವಾ ಸತತವಾಗಿ ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಸರಿಯಾಗಿ ವರ್ಗ ರಚನೆಯೊಂದಿಗೆ ಶುದ್ಧ, ಸುಗಮವಾದ ಕೋಡ್, ಅರ್ಥಪೂರ್ಣ ಚರಗಳ ಹೆಸರುಗಳು ಮತ್ತು ಸೂಕ್ತ ಟಿಪ್ಪಣಿಗಳು | ಕೋಡ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಆದರೆ ಉತ್ತಮವಾಗಿ ಸಂಘಟಿಸಲ್ಪಡಬಹುದು ಅಥವಾ ದಾಖಲಾಗಬಹುದಾಗಿರುತ್ತದೆ | ಕೋಡ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟಕರ ಅಥವಾ ದುರ್ಬಳಕೆ ಹೊಂದಿದೆ |
+| **ಬಳಕೆದಾರ ಪರಸ್ಪರ ಕ್ರಿಯೆ** | ಸಪ್ರತಿಕ್ರಿಯಾಶೀಲ ನಿಯಂತ್ರಣಗಳು, ಮೃದುವಾಗಿಯೂ ಗತಿಯಲ್ಲಿಯೂ ಆಟ, ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಸ್ಪಂದನೆ ಮತ್ತು ಮನರಂಜಕ ಯಂತ್ರಗಳು | ಮೂಲ ನಿಯಂತ್ರಣಗಳು ಉತ್ತಮ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ | ನಿಯಂತ್ರಣಗಳು ಪ್ರತಿಕ್ರಿಯಿಸದಿರುವುದು ಅಥವಾ ಗೊಂದಲ ಉಂಟುಮಾಡುವವು |
+| **ಸೃಜನಶೀಲತೆ** | ವಿಶೇಷ ವೈಶಿಷ್ಟ್ಯಗಳು, ದೃಶ್ಯ ಮಳೆ, ನವೀನ ಅಪಘಾತ ವರ್ತನೆಗಳೊಂದಿಗೆ ಮೂಲ ಕಲ್ಪನೆ | ಕೆಲವು ಸೃಜನಶೀಲ ಅಂಶಗಳೊಂದಿಗೆ ಸಾಮಾನ್ಯ ಅನುಷ್ಠಾನ | ಸೃಜನಶೀಲ ವೃದ್ಧಿಯಿಲ್ಲದ ಮೂಲ ಕಾರ್ಯಕ್ಷಮತೆ |
+
+---
+
+
+**ತ್ಯಜ್ಯಕತೆ**:
+ಈ ದಸ್ತಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಾದಕ್ಕಾಗಿ ಪ್ರಯತ್ನಿಸುವುದಾದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರಬಹುದೆಂದು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯ ದಸ್ತಾವೇಜು ಮೂಲ ಮಾದರಿಯಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಲ್ಲಣಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಳನ್ನು ನಾವು ಹೊಣೆ ಹೊರುವುದು ಇಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/4-collision-detection/solution/README.md b/translations/kn/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 000000000..20f8716d0
--- /dev/null
+++ b/translations/kn/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,17 @@
+
+ಇದು ಒಂದು_placeholder_, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ bırakılmıştır
+
+---
+
+
+**ಬಹಿರಂಗೀಕರಣ**:
+ಈ ದಾಖಲೆಯನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯತ್ತ ಪ್ರಯತ್ನಿಸುವಾಗಲೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ದಸ್ತಾವೇಜು ಪ್ರಾಮಾಣಿಕ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಮುಖ್ಯ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉತ್ಪನ್ನವಾದ ಯಾವುದೇ ಗೊಂದಲಗಳು ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರರಾಗುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/4-collision-detection/your-work/README.md b/translations/kn/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 000000000..eff651170
--- /dev/null
+++ b/translations/kn/6-space-game/4-collision-detection/your-work/README.md
@@ -0,0 +1,17 @@
+
+ಇದು ಒಂದು ಸ್ಥಳಾಪಕ, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ laissಲಾಗಿದೆ
+
+---
+
+
+**ತಕ್ಷಣದ ಜಾಹೀರಾತು**:
+ಈ ದಸ್ತಾವೇಜು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯ ಕಡೆ ಗಮನ ಹರಿಸುವಾಗಲೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಸಂಭವಿಸಬಹುದು ಎಂದು ಗಮನದಲ್ಲಿರಲಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅಧಿಕಾರದ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸುವುದರಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ అపಭ್ರಾಂಶಗಳು ಅಥವಾ ತಪ್ಪಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಕಾರಣಗಳಿಂದ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/5-keeping-score/README.md b/translations/kn/6-space-game/5-keeping-score/README.md
new file mode 100644
index 000000000..673175f42
--- /dev/null
+++ b/translations/kn/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,506 @@
+
+# ಸ್ಪೇಸ್ ಗೇಮ್ ನಿರ್ಮಾಣ ಭಾಗ 5: ಅಂಕೆಗಳು ಮತ್ತು ಜೀವಗಳು
+
+```mermaid
+journey
+ title ನಿಮ್ಮ ಆಟ ವಿನ್ಯಾಸ ಪಯಣ
+ section ಆಟಗಾರ ಪ್ರತಿಕ್ರಿಯೆ
+ ಅಂಕ ಗಳಿಕೆ ಮನೋವಿಜ್ಞಾನವನ್ನು ಅರ್ಥಮಾಡು: 3: Student
+ ದೃಶ್ಯ ಸಂವಹನವನ್ನು ಕಲಿತುಕೊಳ್ಳಿ: 4: Student
+ ಬಹುಮಾನ ವ್ಯವಸ್ಥೆಯನ್ನು ವಿನ್ಯಾಸಮಾಡಿ: 4: Student
+ section ತಾಂತ್ರಿಕ ಜಾರಿಗೊಳಿಸುವಿಕೆ
+ ಕ್ಯಾನ್ವಾಸ್ ಪಠ್ಯದ ರೆಂಡರಿಂಗ್: 4: Student
+ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ: 5: Student
+ ಘಟನಾ ಆಧರಿತ ಅಪ್ಡೇಟ್ಗಳು: 5: Student
+ section ಆಟದ ಸೌಲಭ್ಯ
+ ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ: 5: Student
+ ಸವಾಲು ಮತ್ತು ಬಹುಮಾನ ಸಮತೋಲನ: 5: Student
+ ಆಕರ್ಷಕ ಆಟದ ಗುಣಮಟ್ಟವನ್ನು ರಚಿಸಿ: 5: Student
+```
+## ಪೂರ್ವ ಉಪನ್ಯಾಸ ಕ್ವಿಜ್
+
+[ಪೂರ್ವ-ಉಪನ್ಯಾಸ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/37)
+
+ನಿಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮ್ನು ನಿಜವಾದ ಆಟದಂತೆ ಅನುಭವಿಸಲು ಸಿದ್ಧರಾ? ಅಂಕೆಗಳನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಜೀವಗಳನ್ನು ನಿರ್ವಹಿಸಿ - ಪ್ರಾರಂಭಿಕ ಆರ್ಕೇಡ್ ಗೇಮ್ಗಳಾದ ಸ್ಪೇಸ್ ಇನ್ವೇಡರ್ಸ್ಗಳನ್ನು ಸರಳ ಪ್ರಾತ್ಯಕ್ಷಿಕೆಗಳಿಂದ ಅಡಿಕ್ಟಿವ್ ಮನರಂಜನೆಯಾಗಿ ಪರಿವರ್ತಿಸಿದ ಮೂಲ ಯಂತ್ರಶಾಸ್ತ್ರ. ಇಲ್ಲಿದೆ ನಿಮ್ಮ ಆಟ ನಿಜವಾಗಿಯೂ ಆಡಬಹುದಾದದ್ದು ಆಗುವುದು.
+
+```mermaid
+mindmap
+ root((ಆಟ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಗಳು))
+ Visual Communication
+ Text Rendering [ಪಠ್ಯ ಪ್ರದರ್ಶನ]
+ Icon Display [ಐಕಾನ್ ಪ್ರದರ್ಶನ]
+ Color Psychology [ಬಣ್ಣ ಮನೋವಿಜ್ಞಾನ]
+ Layout Design [ಆಕೃತಿ ವಿನ್ಯಾಸ]
+ Scoring Mechanics
+ Point Values [ಪಾಯಿಂಟ್ ಮೌಲ್ಯಗಳು]
+ Reward Timing [ಬಳವರಣೆ ಸಮಯ]
+ Progress Tracking [ಪ್ರಗತಿ ಹಾದಿ]
+ Achievement Systems [ಸಾಧನೆಯ ವ್ಯವಸ್ಥೆಗಳು]
+ Life Management
+ Risk vs Reward [ಸಂಕಟ ವಿರುದ್ದ ಬಹುಮಾನ]
+ Player Agency [ಕ್ರೀಡಾಪಟು ಪ್ರಾಧಿಕಾರ]
+ Difficulty Balance [ಕಷ್ಟತೆಯ ಸಮತೋಲನ]
+ Recovery Mechanics [ಪುನರ್ಪ್ರದಾನ ಯಂತ್ರಗಳು]
+ User Experience
+ Immediate Feedback [ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ]
+ Clear Information [ಸ್ಪಷ್ಟ ಮಾಹಿತಿ]
+ Emotional Response [ಭಾವನಾತ್ಮಕ ಪ್ರತಿಕ್ರಿಯೆ]
+ Engagement Loops [ನೇರಳಿಕೆ ಲೂಪ್ಗಳು]
+ Implementation
+ Canvas API
+ State Management [ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ]
+ Event Systems [ಈವಂಟ್ ವ್ಯವಸ್ಥೆಗಳು]
+ Performance [ಕಾರ್ಯಕ್ಷಮತೆ]
+```
+## ಪರದೆ ಮೇಲೆ ಪಠ್ಯ ಚಿತ್ರಣ - ನಿಮ್ಮ ಆಟದ ಧ್ವನಿ
+
+ನಿಮ್ಮ ಅಂಕೆಯನ್ನು ತೋರಿಸಲು, ಕ್ಯಾನ್ವಾಸ್ ಮೇಲೆ ಪಠ್ಯವನ್ನು ಹೇಗೆ ಚಿತ್ರಿಸಲು ತಿಳಿಯಬೇಕಾಗಿದೆ. `fillText()` ವಿಧಾನ ನಿಮ್ಮ ಮುಖ್ಯ ಸಾಧನ - ಇದು ಕ್ಲಾಸಿಕ್ ಆರ್ಕೇಡ್ಗಳಲ್ಲಿ ಅಂಕೆಗಳು ಮತ್ತು ಸ್ಥಿತಿಗತಿಗಳನ್ನು ತೋರಿಸಲು ಬಳಸಿದ ತಂತ್ರ.
+
+```mermaid
+flowchart LR
+ A["📝 ಪಠ್ಯದ ವಿಷಯ"] --> B["🎨 ಶೈಲಿಶಾಸ್ತ್ರ"]
+ B --> C["📍 орналасಿಕೆ"]
+ C --> D["🖼️ ಕ್ಯಾನ್ವಾಸ್ ಪ್ರದರ್ಶನ"]
+
+ E["ಫಾಂಟ್ ಕುಟುಂಬ"] --> B
+ F["ಫಾಂಟ್ ಗಾತ್ರ"] --> B
+ G["ನಲువు"] --> B
+ H["ಸರಿಹೊಂದಿಸುವಿಕೆ"] --> B
+
+ I["X ಸಂಯೋಜನ"] --> C
+ J["Y ಸಂಯೋಜನ"] --> C
+
+ style A fill:#e3f2fd
+ style B fill:#e8f5e8
+ style C fill:#fff3e0
+ style D fill:#f3e5f5
+```
+ನೀವು ಪಠ್ಯದ ಕಾಣಿಕೆಯನ್ನು ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣಕ್ಕೆ ಹೊಂದಿದ್ದೀರಿ:
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ [ಕ್ಯಾನ್ವಾಸ್ಗೆ ಪಠ್ಯ ಸೇರಿಸುವುದು](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) ಕುರಿತು ಗಾಢವಾದ ಅಧ್ಯಯನ ಮಾಡಿ - ಫಾಂಟ್ಗಳು ಮತ್ತು ಶೈಲಿಯಲ್ಲಿ ನೀವು ಎಷ್ಟು ಸೃಜನಶೀಲರಾಗಬಹುದೆಂದುあなたはびっくりするかもしれません!
+
+## ಜೀವಗಳು - ಕೇವಲ ಸಂಖ್ಯೆಗಿಂತ കൂടുതಲೆ
+
+ಆಟ ವಿನ್ಯಾಸದಲ್ಲಿ, "ಜೀವ" ಅಂದರೆ ಆಟಗಾರನ ತಪ್ಪುಗಳಿಗೆ ಅವಕಾಶ. ಈ ಯೋಚನೆ ಪಿನ್ಬಾಲ್ ಯಂತ್ರಗಳಿಂದ ಬಂದಿದೆ, ಅಲ್ಲಲ್ಲಿ ನೀವು ಹಲವು ಬಾಲ್ಗಳನ್ನು ಬಳಸುವ ಅವಕಾಶ ಸಿಕ್ಕಿತ್ತು. ಆರಂಭಿಕ ವಿಡಿಯೋ ಆಟಗಳಾದ ಆಸ್ಟೆರಾಯ್ಡ್ಸ್ನಲ್ಲಿ, ಜೀವಗಳು ಆಟಗಾರರಿಗೆ ಅಪಾಯವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಮತ್ತು ತಪ್ಪುಗಳಿಂದ ಕಲಿಯಲು ಅವಕಾಶ ನೀಡುತ್ತಿತ್ತು.
+
+```mermaid
+flowchart TD
+ A["🎮 ಆಟಗಾರನ ಕ್ರಿಯೆ"] --> B{"ಪರಿಸ್ಥಿತಿಯ ಅಂದಾಜು"}
+
+ B --> C["ಹೆಚ್ಚಿನ ಅಪಾಯ, ಹೆಚ್ಚಿನ ಬಹುಮಾನ"]
+ B --> D["ಸುರಕ್ಷಿತ ತಂತ್ರ"]
+
+ C --> E{"ಫಲಿತಾಂಶ"}
+ D --> F["ಸ್ಥಿರ ಪ್ರಗತಿ"]
+
+ E -->|ಯಶಸ್ಸು| G["🏆 ದೊಡ್ಡ ಅಂಕಿಗಳು"]
+ E -->|ವिफಲತೆ| H["💔 ಜೀವ ಕಳೆದುಕೊ"]
+
+ H --> I{"ಜೀವಗಳು ಉಳಿದಿವೆಯೆ?"}
+ I -->|ಹೌದು| J["🔄 ಪುನಃ ಪ್ರಯತ್ನಿಸಿ"]
+ I -->|ಇಲ್ಲ| K["💀 ಆಟ ಮುಗಿಯಿತು"]
+
+ J --> B
+ G --> B
+ F --> B
+
+ style C fill:#ffebee
+ style D fill:#e8f5e8
+ style G fill:#e3f2fd
+ style H fill:#fff3e0
+```
+ದೃಶ್ಯಾತ್ಮಕ ಪ್ರದರ್ಶನ ಬಹಳ ಪ್ರಮುಖ - ಕೇವಲ "Lives: 3" ಎಂದು ಹೇಳುವುದಕ್ಕಿಂತ ನೌಕಾ ಚಿಹ್ನೆಗಳನ್ನು ತೋರಿಸುವುದು ತಕ್ಷಣದ ದೃಶ್ಯ ಗುರುತಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ, ಮೊದಲಿನ ಆರ್ಕೇಡ್ ಕ್ಯಾಬಿನೆಟ್ಗಳು ಭಾಷಾ ಅಡ್ಡಿಗಳು ಮೀರಿ ಸಂವಹನ ಮಾಡಲು ಐಕಾನೋಗ್ರಫಿಯನ್ನು ಬಳಸಿದಂತೆ.
+
+## ನಿಮ್ಮ ಆಟದ ಬಹುಮಾನ ವ್ಯವಸ್ಥೆ ನಿರ್ಮಿಸುವುದು
+
+ಇಂದು ನಾವು ಮುಖ್ಯವಾದ ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಜಾರಿಗೆ ತರಲಿದ್ದೇವೆ, ಇದು ಆಟಗಾರರನ್ನು ತಾತ್ಕಾಲಿಕವಾಗಿ ತೊಡಗಿಸಿಕೊಂಡು ಇಡುವುದು:
+
+```mermaid
+sequenceDiagram
+ participant Player
+ participant GameEngine
+ participant ScoreSystem
+ participant LifeSystem
+ participant Display
+
+ Player->>GameEngine: ಶೂಟ್ ಇಂಡ lebyi
+ GameEngine->>ScoreSystem: ಅಂಕಗಳನ್ನು ನೀಡಿ
+ ScoreSystem->>ScoreSystem: +100 ಅಂಕಗಳು
+ ScoreSystem->>Display: ಅಂಕಗಳನ್ನು ನವೀಕರಿಸಿ
+
+ Player->>GameEngine: ಶತ್ರು ಜೊತೆ ಮುಖಾಮುಖಿ
+ GameEngine->>LifeSystem: ಜೀವನ ಕಳೆದುಕೊಳ್ಳಿ
+ LifeSystem->>LifeSystem: -1 ಜೀವನ
+ LifeSystem->>Display: ಜೀವನಗಳನ್ನು ನವೀಕರಿಸಿ
+
+ alt ಜೀವನ > 0
+ LifeSystem->>Player: ಆಟ ಮುಂದುವರೆಸಿ
+ else ಜೀವನ = 0
+ LifeSystem->>GameEngine: ಆಟ ಮುಗಿದಿದೆ
+ end
+```
+- **ಅಂಕೆ ವ್ಯವಸ್ಥೆ**: ಪ್ರತಿ ನಷ್ಟಪಡಿಸಿದ ಶತ್ರು ನೌಕೆಗೆ 100 ಅಂಕೆಗಳು (ಮೂರು ಶಾಸಕರ ಸಂಖ್ಯೆಗಳನ್ನು ذهنದಲ್ಲಿಟ್ಟುಕೊಳ್ಳುವುದು ಸುಲಭ). ಅಂಕೆಯನ್ನು ಕೆಳಗಡೆಯ ಎಡಬದಿಯಲ್ಲಿ ತೋರಿಸಲಾಗುತ್ತದೆ.
+- **ಜೀವಗಳ ಗಣಕ**: ನಿಮ್ಮ ಹೀರೋ 3 ಜೀವಗಳಿಂದ ಆರಂಭವಾಗುತ್ತಾನೆ - ಪ್ರಾರಂಭಿಕ ಆರ್ಕೇಡ್ ಆಟಗಳಿಂದ ಸ್ಥಾಪಿತ ಮಾನದಂಡ, ಇದು ಸವಾಲು ಮತ್ತು ಆಡಲು ಅನುಕೂಲ ಎಂಬ ಸಮತೋಲನವನ್ನು ನೀಡುತ್ತದೆ. ಪ್ರತಿ ಶತ್ರು ಜೊತೆ ಸಂಭವಿಸುವ ಅಧಿಕಾರವು ಒಂದು ಜೀವವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಬಾಕಿ ಜೀವಗಳನ್ನು ನಾವು ಕೆಳಗಡೆಯ ಬಲಭಾಗದಲ್ಲಿ ನೌಕಾ ಐಕಾನ್ಗಳ ಮೂಲಕ ತೋರಿಸುತ್ತೇವೆ .
+
+## ನೀವು ನಿರ್ಮಿಸುವುದು ಪ್ರಾರಂಭಿಸೋಣ!
+
+ಮೊದಲು, ನಿಮ್ಮ ವರ್ಕ್ ಸ್ಪೇಸ್ ಸಿದ್ಧಪಡಿಸಿ. ನಿಮ್ಮ `your-work` ಉಪಫೋಲ್ಡರ್ನಲ್ಲಿರುವ ಕಡತಗಳಿಗೆ ಹೋಗಿ. ನೀವು ಈ ಕಡತಗಳನ್ನು ನೋಡಬಹುದು:
+
+```bash
+-| assets
+ -| enemyShip.png
+ -| player.png
+ -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+ನಿಮ್ಮ ಆಟವನ್ನು ಪರೀಕ್ಷಿಸಲು, `your_work` ಫೋಲ್ಡರ್ನಿಂದ ಡೆವಲಪ್ಮೆಂಟ್ ಸರ್ವರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿ:
+
+```bash
+cd your-work
+npm start
+```
+
+ಇದು `http://localhost:5000` ಎಡ್ರೆಸ್ನಲ್ಲಿ ಸ್ಥಳೀಯ ಸರ್ವರ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ. ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ಈ ವಿಳಾಸವನ್ನು ತೆರೆದು ನಿಮ್ಮ ಆಟವನ್ನು ನೋಡಿ. ಅರೋ ಕೀಲಿಗಳನ್ನು ಬಳಸಿ ನಿಯಂತ್ರಣಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಶತ್ರುಗಳನ್ನು ಗುಂಡಿ ಮಾಡಿ ಎಲ್ಲವೂ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
+
+```mermaid
+flowchart TD
+ A["1. ಆಸ್ತಿ ಲೋಡಿಂಗ್"] --> B["2. ಆಟದ ಚರಗಳು"]
+ B --> C["3. ಮತ್ತು ತಗುಲಿಕೆ ಪತ್ತೆದಾರಿಕೆ"]
+ C --> D["4. ನಾಯಕ ಸುಧಾರಣೆ"]
+ D --> E["5. ಪ್ರದರ್ಶನ ಕಾರ್ಯಗಳು"]
+ E --> F["6. ಘಟನೆ ಹ್ಯಾಂಡ್ಲರ್ಗಳು"]
+
+ G["ಜೀವನ ಚಿತ್ರ ಐಕಾನ್"] --> A
+ H["ಸ್ಕೋರ್ & ಜೀವನಗಳ ಟ್ರ್ಯಾಕಿಂಗ್"] --> B
+ I["ನಾಯಕ-ಶತ್ರು ಸಂಧಿಗಳು"] --> C
+ J["ಪಾಯಿಂಟ್ಗಳು & ಜೀವನ ವಿಧಾನಗಳು"] --> D
+ K["ಲೆಕ್ಕ & ಐಕಾನ್ ರೆಂಡರಿಂಗ್"] --> E
+ L["ಪ್ರಶಸ್ತಿ & ದಂಡ ನಿಯಮವಿಧಾನ"] --> F
+
+ F --> M["🎮 ಪೂರ್ಣ ಆಟ"]
+
+ style A fill:#e3f2fd
+ style B fill:#e8f5e8
+ style C fill:#fff3e0
+ style D fill:#f3e5f5
+ style E fill:#e0f2f1
+ style F fill:#fce4ec
+ style M fill:#e1f5fe
+```
+### ಕೋಡ್ ಮಾಡಲು ಸಮಯ!
+
+1. **ನೀವು ಬೇಕಾಗಿರುವ ದೃಶ್ಯ ಆಸ್ತಿ ಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳಿ**. `solution/assets/` ಫೋಲ್ಡರ್ನಿಂದ `life.png` ಆಸ್ತಿಯನ್ನು ನಿಮ್ಮ `your-work` ಫೋಲ್ಡರ್ಗೆ ನಕಲಿ ಮಾಡಿ. ನಂತರ lifeImg ಅನ್ನು ನಿಮ್ಮ window.onload ಫಂಕ್ಷನ್ಗೆ ಸೇರಿಸಿ:
+
+ ```javascript
+ lifeImg = await loadTexture("assets/life.png");
+ ```
+
+1.Assets ಪಟ್ಟಿಗೆ `lifeImg` ಅನ್ನು ಸೇರಿಸಲು ಮರೆಯಬೇಡಿ:
+
+ ```javascript
+ let heroImg,
+ ...
+ lifeImg,
+ ...
+ eventEmitter = new EventEmitter();
+ ```
+
+2. **ನಿಮ್ಮ ಆಟದ ಚರಗಳನ್ನು ಸಜ್ಜುಗೊಳಿಸಿ**. ನಿಮ್ಮ ಒಟ್ಟು ಅಂಕೆ(0ರಿಂದ ಪ್ರಾರಂಭ) ಮತ್ತು ಉಳಿದ ಜೀವಗಳನ್ನು(3ರಿಂದ ಪ್ರಾರಂಭ) ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಕೆಲವು ಕೋಡ್ ಸೇರಿಸಿ. ನಾವು ಇದನ್ನು ಪರದೆ ಮೇಲೆ ತೋರಿಸುತ್ತೇವೆ, ಆದ್ದರಿಂದ ಆಟಗಾರರು ಯಾವ ಸ್ಥಿತಿಯಲ್ಲಿ ಇದ್ದಾರೆ ಚೆನ್ನಾಗಿ ಗೊತ್ತಾಗುತ್ತದೆ.
+
+3. **ಸಂಘರ್ಷ ಪತ್ತೆ ಮಾಡಲು ವಿಧಾನ ಜಾರಿಗೆ ತರಿರಿ**. ನಿಮ್ಮ `updateGameObjects()` ಫಂಕ್ಷನ್ ಅನ್ನು ಪರಿಷ್ಕರಿಸಿ, ಶತ್ರುಗಳು ನಿಮ್ಮ ಹೀರೋಗೆ ಡಿಕ್ಕಿ ಹೊಡೆತ ಮಾಡಿದಾಗ ಪತ್ತೆ ಮಾಡುತ್ತದೆ:
+
+ ```javascript
+ enemies.forEach(enemy => {
+ const heroRect = hero.rectFromGameObject();
+ if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+ eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+ }
+ })
+ ```
+
+4. **ನಿಮ್ಮ ಹೀರೋಗೆ ಜೀವ ಮತ್ತು ಅಂಕೆ ಟ್ರ್ಯಾಕಿಂಗ್ ಸೇರಿಸಿ**.
+ 1. **ಗಣಕಗಳನ್ನು ಪ್ರಾರಂಭಿಸಿ**. ನಿಮ್ಮ `Hero` ಕ್ಲಾಸಿನಲ್ಲಿನ `this.cooldown = 0` ಅಡಿಯಲ್ಲಿದೆ, ಇಲ್ಲಿ ಜೀವ ಮತ್ತು ಅಂಕೆಯನ್ನು ಸೆಟ್ ಮಾಡಿರಿ:
+
+ ```javascript
+ this.life = 3;
+ this.points = 0;
+ ```
+
+ 1. **ಈ ಮೌಲ್ಯಗಳನ್ನು ಆಟಗಾರರಿಗೆ ತೋರಿಸಿ**. ಈ ಮೌಲ್ಯಗಳನ್ನು ಪರದೆ ಮೇಲೆ ಚಿತ್ರಿಸುವ ಫಂಕ್ಷನ್ಗಳನ್ನು ರಚಿಸಿ:
+
+ ```javascript
+ function drawLife() {
+ // ಮಾಡಲು, 35, 27
+ const START_POS = canvas.width - 180;
+ for(let i=0; i < hero.life; i++ ) {
+ ctx.drawImage(
+ lifeImg,
+ START_POS + (45 * (i+1) ),
+ canvas.height - 37);
+ }
+ }
+
+ function drawPoints() {
+ ctx.font = "30px Arial";
+ ctx.fillStyle = "red";
+ ctx.textAlign = "left";
+ drawText("Points: " + hero.points, 10, canvas.height-20);
+ }
+
+ function drawText(message, x, y) {
+ ctx.fillText(message, x, y);
+ }
+
+ ```
+
+ 1. **ಎಲ್ಲವೂ ನಿಮ್ಮ ಆಟದ ಲೂಪಿಗೆ ಹೂಕ ಮಾಡಿ**. ಈ ಫಂಕ್ಷನ್ಗಳನ್ನು window.onload ಫಂಕ್ಷನ್ನಲ್ಲಿ `updateGameObjects()` ನಂತರ ಸೇರಿಸಿ:
+
+ ```javascript
+ drawPoints();
+ drawLife();
+ ```
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**ಆಟ ವಿನ್ಯಾಸ ತಿಳಿವು**: ಪರಿಣಾಮಗಳನ್ನು ಜಾರಿಗೆ ತರುವ ಮೊದಲು ನಿಮಗೆ ತಿಳಿದುಕೊಳ್ಳಬೇಕು:
+- ✅ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ಆಟಗಾರರಿಗೆ ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಹೇಗೆ ಸಂವಹನ ಮಾಡುತ್ತದೆ
+- ✅ ಯೂಐ ಅಂಶಗಳ ಸತತ ಸ್ಥಾನವನ್ನು ಏಕೆ ಸುಧಾರಿಸುತ್ತದೆ
+- ✅ ಅಂಕೆಗಳ ಮೌಲ್ಯ ಮತ್ತು ಜೀವ ನಿರ್ವಹಣೆ ರೂಢಿಯಾದ ಕಾರಣಗಳು
+- ✅ ಕ್ಯಾನ್ವಾಸ್ ಪಠ್ಯ ಚಿತ್ರಣ ಹೇಗೆ HTML ಪಠ್ಯದಿಂದ ಭಿನ್ನತೆ ಅನುಭವಿಸುತ್ತದೆ
+
+**ವೇಗವಾದ ಸ್ವಯಂ ಪರೀಕ್ಷೆ**: ಆರ್ಕೇಡ್ ಗೇಮ್ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಏಕೆ ಸುತ್ತಲಿನ ಸಂಖ್ಯೆಗಳ ಬಳಕೆಯನ್ನು ಅನುಸರಿಸುತ್ತವೆ?
+*ಉತ್ತರ: ಸುತ್ತಲಿನ ಸಂಖ್ಯೆಗಳನ್ನು ಆಟಗಾರರು ಮನಸ್ಸಿನಲ್ಲಿ ಸುಲಭವಾಗಿ ಲೆಕ್ಕ ಹಾಕಬಹುದು ಮತ್ತು ತೃಪ್ತಿ ನೀಡುವ ಮನೋವೈಜ್ಞಾನಿಕ ಬಹುಮಾನಗಳನ್ನು ಸೃಷ್ಟಿಸು*ತದೆ.
+
+**ಬಳಕೆದಾರ ಅನುಭವ ತತ್ವಗಳು**: ನೀವು ಈಗ ಅನ್ವಯಿಸುತ್ತಿದ್ದೀರಿ:
+- **ದೃಶ್ಯ ಕ್ರಮ**: ಪ್ರಮುಖ ಮಾಹಿತಿಯನ್ನು ಪ್ರಸಿದ್ಧ ಸ್ಥಾನಗಳಲ್ಲಿ ಇಡಲಾಗುತ್ತದೆ
+- **ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ**: ಆಟಗಾರ ಕ್ರಿಯೆಗಳ ತಕ್ಷಣದ ನವೀಕರಣಗಳು
+- **ಜ್ಞಾನ ಭಾರ**: ಸರಳ, ಸ್ಪಷ್ಟ ಮಾಹಿತಿ ಪ್ರಸ್ತುತಪಡಣೆ
+- **ಭಾವನಾತ್ಮಕ ವಿನ್ಯಾಸ**: ಐಕಾನ್ಸ್ ಮತ್ತು ಬಣ್ಣಗಳು ಆಟಗಾರರ ಸಂಪರ್ಕ ಸೃಷ್ಟಿಸುತ್ತದೆ
+
+1. **ಆಟದ ಪರಿಣಾಮಗಳು ಮತ್ತು ಬಹುಮಾನಗಳನ್ನು ಜಾರಿಗೆ ತರಿರಿ**. ಈಗ ನಾವು ಆಟಗಾರದ ಕ್ರಿಯೆಗಳಿಗೆ ಅರ್ಥಪೂರ್ಣತೆಯನ್ನು ನೀಡುವ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಸೇರಿಸುತ್ತೇವೆ:
+
+ 1. **ಡಿಕ್ಕಿಗಳು ಜೀವಗಳನ್ನು ಕುಂದುತ್ತವೆ**. ನಿಮ್ಮ ಹೀರೋ ಪ್ರತಿ ಶತ್ರುವಿನೊಂದಿಗೆ ಡಿಕ್ಕಿಯಾಗುವಾಗ ಒಂದು ಜೀವ ಕಳೆದುಕೊಳ್ಳಬೇಡಿ.
+
+ ಈ ವಿಧಾನವನ್ನು ನಿಮ್ಮ `Hero` ಕ್ಲಾಸಿಗೆ ಸೇರಿಸಿ:
+
+ ```javascript
+ decrementLife() {
+ this.life--;
+ if (this.life === 0) {
+ this.dead = true;
+ }
+ }
+ ```
+
+ 2. **ಶತ್ರುಗಳನ್ನು ಗುಂಡಿ ಮಾಡಿ ಅಂಕೆ ಗಳಿಸಿ**. ಪ್ರತಿ ಯಶಸ್ವಿ ಹಿಟ್ 100 ಅಂಕೆಯನ್ನು ಕೊಡುತ್ತದೆ, ಇದು ಸ್ಪಷ್ಟ ಪಾಸಿಟಿವ್ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ.
+
+ ಹೀರೋ ಕ್ಲಾಸಿಗೆ ಈ ಹೆಚ್ಚಿಸುವ ವಿಧಾನವನ್ನು ವಿಸ್ತರಿಸಿ:
+
+ ```javascript
+ incrementPoints() {
+ this.points += 100;
+ }
+ ```
+
+ ಈಗ ಈ ಫಂಕ್ಷನ್ಗಳನ್ನು ಡಿಕ್ಕಿ ಘಟನೆಗಳಿಗೆ ಸಂಪರ್ಕಿಸಿ:
+
+ ```javascript
+ eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+ first.dead = true;
+ second.dead = true;
+ hero.incrementPoints();
+ })
+
+ eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+ enemy.dead = true;
+ hero.decrementLife();
+ });
+ ```
+
+✅ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಕ್ಯಾನ್ವಾಸ್ ಬಳಸಿ ನಿರ್ಮಿಸಲ್ಪಟ್ಟ ಇತರ ಆಟಗಳ ಬಗ್ಗೆ ಆಸಕ್ತರಾ? ಕೈಗೊಂಡು ಹುಡುಕಿ - ನೀವು ಸಾಧ್ಯವಿರುವುದರಲ್ಲಿ ಆಶ್ಚರ್ಯ ಪಡಬಹುದು!
+
+ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಜಾರಿಗೆ ತಂದ ನಂತರ, ನಿಮ್ಮ ಆಟವನ್ನು ಪರೀಕ್ಷಿಸಿ. ಸಂಪೂರ್ಣ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಯನ್ನು ಕಳೆಯಿರಿ. ಬಲ ಕೆಳಭಾಗದಲ್ಲಿ ಜೀವ ಐಕಾನ್ಗಳು, ಎಡ ಕೆಳಭಾಗದಲ್ಲಿ ನಿಮ್ಮ ಅಂಕೆ ತೋರಣೆಯಾಗುತ್ತದೆ ಮತ್ತು ಡಿಕ್ಕಿಗಳು ಜೀವಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತವೆ ಆದರೆ ಯಶಸ್ವಿ ಗುಂಡಿಗಳು ನಿಮ್ಮ ಅಂಕೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆ ಎಂದು ನೋಡಿ.
+
+ನಿಮ್ಮ ಆಟ ಈಗ ಹಿಂದಿನ ಆರ್ಕೇಡ್ ಆಟಗಳನ್ನು ಅತ್ಯಂತ ಆಕರ್ಷಕ બનાવવા ಕಾರಣವಾದ ಅಗತ್ಯಯುಕ್ತ ಯಂತ್ರಶಾಸ್ತ್ರಗಳನ್ನು ಹೊಂದಿದೆ - ಸ್ಪಷ್ಟ ಗುರಿಗಳು, ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ ಮತ್ತು ಆಟಗಾರಿಯ ಕ್ರಿಯೆಗಳಿಗೆ ಅರ್ಥಪೂರ್ಣ ಪರಿಣಾಮ.
+
+### 🔄 **ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ**
+**ಪೂರ್ಣ ಆಟ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ**: ಆಟಗಾರ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಗಳ ಮೇಲೆ ನಿಮ್ಮ ಪ್ರಾಧಾನ್ಯತೆ ಪರಿಶೀಲಿಸಿ:
+- ✅ ಅಂಕೆ ಯಂತ್ರಶಾಸ್ತ್ರವು ಆಟಗಾರರ ಪ್ರೋತ್ಸಾಹ ಮತ್ತು ತೊಡಗಿಸಿಕೊಳುವುದನ್ನು ಹೇಗೆ ಸೃಷ್ಟಿಸುತ್ತದೆ?
+- ✅ ಯೂಐ ವಿನ್ಯಾಸಕ್ಕೆ ದೃಶ್ಯ ಸತತತೆ ಏಕೆ ಮುಖ್ಯ?
+- ✅ ಜೀವ ವ್ಯವಸ್ಥೆ ಸವಾಲು ಮತ್ತು ಆಟಗಾರ ನಿರ್ವಹಣೆ ನಡುವಣ ಸಮತೋಲನವನ್ನು ಹೇಗೆ ನೀಡುತ್ತದೆ?
+- ✅ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯು ತೃಪ್ತಿಕರ ಆಟವನ್ನು ಸೃಷ್ಟಿಸುವಲ್ಲಿ ಯಾವ ಪಾತ್ರ ವಹಿಸುತ್ತದೆ?
+
+**ವ್ಯವಸ್ಥೆಯ ಏಕೀಕರಣ**: ನಿಮ್ಮ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆ ಈ ಮೂಲಕವನ್ನು ತೋರಿಸುತ್ತದೆ:
+- **ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ**: ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಸಂವಹನ ಮತ್ತು ಮಾಹಿತಿ ಕ್ರಮ
+- **ಘಟನೆ ಚಲಿತ ವಾಸ್ತುಶಿಲ್ಪ**: ಆಟಗಾರ ಕ್ರಿಯೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ನವೀಕರಣಗಳು
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಡೈನಾಮಿಕ್ ಆಟದ ಡೇಟಾ ಟ್ರ್ಯಾಕ್ ಮತ್ತು ಪ್ರದರ್ಶನ
+- **ಕ್ಯಾನ್ವಾಸ್ ಪರಿಣತಿ**: ಪಠ್ಯ ಚಿತ್ರಣ ಮತ್ತು ಸ್ಪ್ರೈಟ್ ಸ್ಥಾನವನ್ನು ನಿರ್ಧರಿಸುವುದು
+- **ಆಟ ಮನೋವಿಜ್ಞಾನ**: ಆಟಗಾರ ಪ್ರೋತ್ಸಾಹ ಮತ್ತು ತೊಡಗಿಸುವಿಕೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು
+
+**ತಜ್ಞ ಮಾದರಿಗಳು ಜಾರಿಗೆ ತಂದಿದ್ದೀರಿ**:
+- **MVC ವಾಸ್ತುಶಿಲ್ಪ**: ಆಟದ ಲಾಜಿಕ್, ಡೇಟಾ ಮತ್ತು ಪ್ರದರ್ಶನ ವಿಂಗಡಣೆ
+- **ತಪಾಸಕ ಮಾದರಿ**: ಆಟದ ಸ್ಥಿತಿ ಬದಲಾವಣೆಗಳಿಗೆ ಘಟನ್ಚಾಲಿತ ನವೀಕರಣಗಳು
+- **ಘಟಕ ವಿನ್ಯಾಸ**: ಪುನರುಪಯೋಗದ ಫಂಕ್ಷನ್ಗಳನ್ನು ರಚನೆ ಮತ್ತು ಲಾಜಿಕ್
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಷ್ಕರಣೆ**: ಆಟದ ಲೂಪ್ಗಳಲ್ಲಿ ಪರಿಣಾಮಕಾರಿ చిత్రಣ
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದವುಗಳು**
+- [ ] ಅಂಕೆ ಪ್ರದರ್ಶನಕ್ಕಾಗಿ ವಿಭಿನ್ನ ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು ಬಣ್ಣಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ
+- [ ] ಅಂಕೆ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಿಸಿ ಮತ್ತು ಆಟದ ಪ್ರಭಾವವನ್ನು ನೋಡಿ
+- [ ] ಅಂಕೆಗಳು ಮತ್ತು ಜೀವಗಳ ಬದಲಾವಣೆಯನ್ನು console.log henkilಗಳು ಸೇರಿಸಿ
+- [ ] ಜೀವಗಳು ಕಡಿಮೆಯಾಗುವ ಅಥವಾ ಹೆಚ್ಚಿನ ಅಂಕೆಗಳು ಸಾಧಿಸುವ ಅತಿದೊಡ್ಡ ಪ್ರಕರಣಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ಸಾಧಿಸಬಹುದಾದವುಗಳು**
+- [ ] ಪಾಠ ಕೊನೆಯ ಕ್ವಿಜ್ ಪೂರ್ಣ ಮಾಡಿ ಮತ್ತು ಆಟ ವಿನ್ಯಾಸ ಮನೋವಿಜ್ಞಾನವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ಅಂಕೆ ಗಳಿಸುವ ಮತ್ತು ಜೀವ ಕಳೆದುಕೊಳ್ಳುವ ಧ್ವನಿ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] localStorage ಉಪಯೋಗಿಸಿ ಹೈ ಸ್ಕೋರ್ ವ್ಯವಸ್ಥೆ ಜಾರಿಗೆ ತರಿರಿ
+- [ ] ವಿಭಿನ್ನ ಶತ್ರು ಪ್ರಕಾರಗಳಿಗೆ ವಿಭಿನ್ನ ಪಾಯಿಂಟ್ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಜೀವ ಕಳೆದುಕೊಳ್ಳುವಾಗ ಪರದೆ ನಡುಗರಿಸುವ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರದ ಆಟ ವಿನ್ಯಾಸ ಪ್ರಯಾಣ**
+- [ ] ಸಂಪೂರ್ಣ ಸ್ಪೇಸ್ ಗೇಮ್ ಅನ್ನು ಬಹುಮಾನ ವ್ಯವಸ್ಥೆಗಳಿಂದ ಸಂಪೂರ್ವವಾಗಿ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಕಂಪೋ ಮಲ್ಟಿಪ್ಲೈಯರ್ ಗಳು ಮತ್ತು ಇತರ ಆಧುನಿಕ ಅಂಕೆ ಯಂತ್ರಶಾಸ್ತ್ರಗಳನ್ನು ಜಾರಿಗೆ ತರ하세요
+- [ ] ಸಾಧನೆ ಮತ್ತು ಅನ್ಲಾಕ್ ಮಾಡಬಹುದಾದ ವಿಷಯಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಕಷ್ಟದ ಏರಿಕೆ ಮತ್ತು ಸಮತೋಲನ ವ್ಯವಸ್ಥೆಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಮೆನುಗಳು ಮತ್ತು ಆಟ ಮುಗಿದ ಪರದೆಗಳಂತೆ ಯೂಐ ವಿನ್ಯಾಸ ಮಾಡಿ
+- [ ] ಮತ್ತೊಂದು ಆಟಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಿ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆಯ ಯಂತ್ರಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ಆಟ ಅಭಿವೃದ್ಧಿ ಪರಿಣತಿತ್ವ**
+- [ ] ಸೂಕ್ಷ್ಮ ಪ್ರಗತಿ ವ್ಯವಸ್ಥೆಳ್ಳದ ಸಂಪೂರ್ಣ ಆಟಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ಆಟ ವಿಶ್ಲೇಷಣೆ ಮತ್ತು ಆಟಗಾರ ವರ್ತನೆ ಮಾಪನ ಕಲಿಯಿರಿ
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ ಆಟ ಅಭಿವೃದ್ಧಿ ಯೋಜನೆಗಳಿಗೆ ಸಹಕರಿಸಿ
+- [ ] ಸುಧಾರಿತ ಆಟ ವಿನ್ಯಾಸ ಮಾದರಿಗಳು ಮತ್ತು ಹಣಕಾಸು ಆಧಾರಿತದ ಬಗ್ಗೆ ಪರಿಣತಿ
+- [ ] ಆಟ ವಿನ್ಯಾಸ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವದ ವಿಷಯಗಳನ್ನು ಶೈಕ್ಷಣಿಕವಾಗಿ ರಚಿಸಿ
+- [ ] ಆಟ ವಿನ್ಯಾಸ ಮತ್ತು ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಪೋರ್ಟ್ಫೋಲಿಯೋ ನಿರ್ಮಿಸಿ
+
+## 🎯 ನಿಮ್ಮ ಆಟ ವಿನ್ಯಾಸ ಪರಿಣತಿ ಕಾಲವರಿ
+
+```mermaid
+timeline
+ title ಆಟ ವಿನ್ಯಾಸ ಮತ್ತು ಆಟಗಾರ ಅಭಿಪ್ರಾಯ ಕಲಿಕೆಯನ್ನು ಪ್ರಗತಿ
+
+ section ಮೂಲ (10 ನಿಮಿಷಗಳು)
+ ದೃಶ್ಯ ಸಂವಹನ: ಪಠ್ಯ ಪ್ರದರ್ಶನ
+ : ಐಕಾನ್ ವಿನ್ಯಾಸ
+ : ವಿನ್ಯಾಸ ತತ್ತ್ವಗಳು
+ : ಬಣ್ಣ ಮನೋವಿಜ್ಞಾನ
+
+ section ಆಟಗಾರ ಮನಶ್ಶಾಸ್ತ್ರ (20 ನಿಮಿಷಗಳು)
+ ಪ್ರೇರಣೆ ವ್ಯವಸ್ಥೆಗಳು: ಅಂಕಿಸಂಖ್ಯೆಗಳು
+ : ಅಪಾಯ ಮತ್ತು ಬಹುಮಾನ
+ : ಪ್ರಗತಿ ಅಭಿಪ್ರಾಯ
+ : ಸಾಧನೆ ವಿನ್ಯಾಸ
+
+ section ತಾಂತ್ರಿಕ ಅನುಷ್ಠಾನ (30 ನಿಮಿಷಗಳು)
+ ಕ್ಯಾನ್ವಾಸ್ ಪರಿಣತಿ: ಪಠ್ಯ ಸ್ಥಾನಮಾನ
+ : ಸ್ಪ್ರೈಟ್ ಪ್ರದರ್ಶನ
+ : ರಾಜ್ಯ ನಿರ್ವಹಣೆ
+ : ಕಾರ್ಯಕ್ಷಮತೆ ಗೋಚರಣೆ
+
+ section ಆಟದ ಸಮತೋಲನ (40 ನಿಮಿಷಗಳು)
+ ಕಷ್ಟದ ವಿನ್ಯಾಸ: ಜೀವನ ನಿರ್ವಹಣೆ
+ : ಅಂಕಗಳ ವಕ್ರತೆಗಳು
+ : ಆಟಗಾರ ಹಿಮ್ಮುಖತೆ
+ : ಪ್ರವೇಶಾರ್ಹತೆ
+
+ section ಬಳಕೆದಾರ ಅನುಭವ (50 ನಿಮಿಷಗಳು)
+ ಮುಖಮುಖಿ ವಿನ್ಯಾಸ: ಮಾಹಿತಿ ಕ್ರಮಾವಳಿ
+ : ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ಅಭಿಪ್ರಾಯ
+ : ಭಾವನಾತ್ಮಕ ವಿನ್ಯಾಸ
+ : ಉಪಯೋಗ ಪ್ರತ್ಯಯ ಒದಗಿಸುವಿಕೆ
+
+ section ಉನ್ನತ ವ್ಯವಸ್ಥೆಗಳು (1 ವಾರ)
+ ಆಟ ಯಂತ್ರಗಳು: ಪ್ರಗತಿ ವ್ಯವಸ್ಥೆಗಳು
+ : ವಿಶ್ಲೇಷಣಾ ಸಂಯೋಜನೆ
+ : ಹಣಕಾಸು ವಿನ್ಯಾಸ
+ : ಸಮುದಾಯ ಲಕ್ಷಣಗಳು
+
+ section ಕೈಗಾರಿಕಾ ಕೌಶಲ್ಯಗಳು (1 ತಿಂಗಳು)
+ ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ: ತಂಡ ಸಹಕಾರ
+ : ವಿನ್ಯಾಸ ದಾಖಲೆ ದಕ್ಷತೆ
+ : ಆಟಗಾರ ಸಂಶೋಧನೆ
+ : ವೇದಿಕೆ ಗೋಚರಣೆ
+```
+### 🛠️ ನಿಮ್ಮ ಆಟ ವಿನ್ಯಾಸ ಉಪಕರಣಗಳ ಸಾರಾಂಶ
+
+ಈ ಪಾಠವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನೀವು ಈಗ ನಿರ್ವಹಿಸಬಹುದು:
+- **ಆಟಗಾರ ಮನೋವಿಜ್ಞಾನ**: ಪ್ರೋತ್ಸಾಹ, ಅಪಾಯ/ಬಹುಮಾನ ಮತ್ತು ತೊಡಗಿಸುವಿಕೆ ಲೂಪುಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+- **ದೃಶ್ಯ ಸಂವಹನ**: ಪಠ್ಯ, ಐಕಾನ್ ಮತ್ತು ವಿನ್ಯಾಸ ಬಳಸಿ ಪರಿಣಾಮಕಾರಿ ಯೂಐ ವಿನ್ಯಾಸ
+- **ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳು**: ಆಟಗಾರ ಕ್ರಿಯೆಗಳ ಮತ್ತು ಆಟದ ಘಟನೆಗಳಿಗೆ ನೇರಪ್ರತಿಕ್ರಿಯೆ
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಡೈನಾಮಿಕ್ ಡೇಟಾವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಟ್ರ್ಯಾಕ್ ಮತ್ತು ಪ್ರದರ್ಶಿಸುವುದು
+- **ಕ್ಯಾನ್ವಾಸ್ ಪಠ್ಯ ಚಿತ್ರಣ**: ಷೈಲಿ ಮತ್ತು ಸ್ಥಾನ ಗೊಳಿಸುವಿಕೆಯೊಂದಿಗೆ ವೃತ್ತಿಪರ ಪಠ್ಯ ಪ್ರದರ್ಶನ
+- **ಘಟನೆ ಏಕೀಕರಣ**: ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳಿಗೆ ಅರ್ಥಪೂರ್ಣ ಆಟ ಪರಿಣಾಮಗಳನ್ನು ಸಂಪರ್ಕಿಸುವುದು
+- **ಆಟ ಸಮತೋಲನ**: ಕಷ್ಟದ ಘಟ್ಟಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡಿ ಆಟಗಾರ ಪ್ರಗತಿಗೆ ಸಮತೋಲನ ನೀಡುವುದು
+
+**ವಾಸ್ತವ ಲೋಕರ ಅನ್ವಯಿಕೆಗಳು**: ನಿಮ್ಮ ಆಟ ವಿನ್ಯಾಸ ನೈಪುಣ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ:
+- **ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ವಿನ್ಯಾಸ**: ಆಕರ್ಷಕ ಮತ್ತು ಸ್ಪಷ್ಟವಾದ ಇಂಟರ್ಫೇಸ್ ರಚನೆ
+- **ಉತ್ಪನ್ನ ಅಭಿವೃದ್ಧಿ**: ಬಳಕೆದಾರ ಪ್ರೋತ್ಸಾಹ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆ ಲೂಪ್ಗಳ ಅರಿವು
+- **ಶೈಕ್ಷಣಿಕ ತಂತ್ರಜ್ಞಾನ**: ಗೇಮಿಫಿಕೇಶನ್ ಮತ್ತು ಕಲಿಕಾ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆ ವ್ಯವಸ್ಥೆಗಳು
+- **ಡೇಟಾ ದೃಶ್ಯೀಕರಣ**: ಸಂಕೀರ್ಣ ಮಾಹಿತಿಯನ್ನು ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ಆಕರ್ಷಕವಾಗಿ ಮಾಡುವುದು
+- **ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್ ಅಭಿವೃದ್ಧಿ**: ಹಿಡಿತ ತಂತ್ರಗಳು ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ
+- **ಮಾರ್ಕೆಟಿಂಗ್ ತಂತ್ರಜ್ಞಾನ**: ಬಳಕೆದಾರ ವರ್ತನೆ ಮತ್ತು ಪರಿವರ್ತನೆ ಸರ್ರೀಕಿ ಕಲಿತಿರಿ
+
+**ತಜ್ಞ ಕೌಶಲ್ಯಗಳು ಪಡೆದಿದ್ದೀರಿ**: ನೀವು ಈಗ:
+- **ವಿನ್ಯಾಸ** ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುವ ಮತ್ತು ತೊಡಗಿಸುವುದಕ್ಕಾಗಿ
+- **ಜಾರಿಗೆ ತರಿರಿ** ಬಳಕೆದಾರ ವರ್ತನೆಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮಾರ್ಗದರ್ಶನ ಮಾಡುವ ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು
+- **ಸಮತೋಲನ** ಸವಾಲು ಮತ್ತು ಪ್ರವೇಶಾರ್ಹತೆಯನ್ನು ಸಂಯೋಜಿಸಿ
+- **ರಚಿಸಿ** ವಿಭಿನ್ನ ಬಳಕೆದಾರ ಸಮುದಾಯಗಳ ಜೋತೆಗೆ ಕೆಲಸ ಮಾಡುವ ದೃಶ್ಯ ಸಂವಹನ
+- **ವಿಶ್ಲೇಷಣೆ** ಬಳಕೆದಾರ ವರ್ತನೆ ಮತ್ತು ವಿನ್ಯಾಸ ಸುಧಾರಣೆಗಳ ಮೇಲೆ ಪುನರಾವೃತ್ತಿ ಮಾಡಿ
+
+**ಆಟ ಅಭಿವೃದ್ಧಿ ಕಲ್ಪನೆಗಳಲ್ಲಿ ಪರಿಣತಿ**:
+- **ಆಟಗಾರ ಪ್ರೋತ್ಸಾಹ**: ತೊಡಗುಮಾಡುವಿಕೆ ಮತ್ತು ಹಿಡಿತಕ್ಕೆ ಚಾಲಕೇಯುವಿಕೆಗಳ ಅರಿವು
+- **ದೃಶ್ಯ ವಿನ್ಯಾಸ**: ಸ್ಪಷ್ಟ, ಆಕರ್ಷಕ ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಣೆಯ ಅರ್ಹತೆಗಳ ರಚನೆ
+- **ವ್ಯವಸ್ಥೆಯ ಏಕೀಕರಣ**: ಸಮಗ್ರ ಅನುಭವಕ್ಕೆ ಅನೇಕ ಆಟ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಸಂಪರ್ಕಿಸುವುದು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಷ್ಕರಣೆ**: ಪರಿಣಾಮಕಾರಿ ಚಿತ್ರಣ ಮತ್ತು ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+- **ಪ್ರವೇಶಾರ್ಹತೆ**: ವಿಭಿನ್ನ ಕೌಶಲ್ಯ ಮಟ್ಟಗಳು ಮತ್ತು ಆಟಗಾರ ಅಗತ್ಯಗಳಿಗೆ ವಿನ್ಯಾಸ
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು ಈಗ ಸುಧಾರಿತ ಆಟ ವಿನ್ಯಾಸ ಮಾದರಿಗಳನ್ನು ಅನ್ವೇಷಿಸಲು, ವಿಶ್ಲೇಷಣೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಜಾರಿಗೆ ತರಲು ಅಥವಾ ಆಟ ಹಣಕಾಸು ಮತ್ತು ಆಟಗಾರ ಹಿಡಿತ ತಂತ್ರಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಲು ಸಿದ್ಧ!
+
+🌟 **ಸಾಧನೆ ಅನ್ಲಾಕ್ ಆಗಿದೆ**: ನೀವು ವೃತ್ತಿಪರ ಆಟ ವಿನ್ಯಾಸ ತತ್ವಗಳೊಂದಿಗೆ ಪೂರ್ಣ ಆಟಗಾರ ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಿ!
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಈ ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ಸ್ಪೇಸ್ ಆಟದ ಅಂಕೆ ವ್ಯವಸ್ಥೆಯನ್ನು ಸುಧಾರಿಸಿ, ಲೊಕಲ್ ಸ್ಟೋರೇಜ್ನಲ್ಲಿ ಕಾಪಿ ಉಳಿಸುವ ಹೈ ಸ್ಕೋರ್ ಸಿಸ್ಟಮ್ ಮತ್ತು ಬೋನಸ್ ಅಂಕೆಗಳು (ಕಾಮ್ಬೋ ಸಿಸ್ಟಮ್) ಜಾರಿಗೆ ತರಲು ಮತ್ತು ಬೇರೆ ಬೇರೆ ಶತ್ರು ಪ್ರಕಾರಗಳಿಗೆ ವಿಭಿನ್ನ ಅಂಕೆ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸಿ. ಆಟಗಾರನು ಹೊಸ ಹೈ ಸ್ಕೋರ್ ಸಾಧಿಸಿದಾಗ ದೃಶ್ಯ ಸೂಚಕವನ್ನು ಕೊಂಡೊಯ್ಯಿ ಮತ್ತು ಗೇಮ್ ಪರದೆ ಮೇಲೆ ಪ್ರಸ್ತುತ ಹೈ ಸ್ಕೋರ್ ಅನ್ನು ತೋರಿಸಿ.
+
+## 🚀 ಸವಾಲು
+
+ನಿಮ್ಮ ಬಳಿ ಈಗ ಅಂಕೆಗಳು ಮತ್ತು ಜೀವಗಳೊಂದಿಗೆ ಕಾರ್ಯಾತ್ಮಕ ಆಟವಿದೆ. ಆಟಗಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ಮತ್ತಷ್ಟು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪರಿಗಣಿಸಿ.
+
+## ಉಪನ್ಯಾಸದ ನಂತರದ ಕ್ವಿಜ್
+
+[ಉಪನ್ಯಾಸದ ನಂತರದ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/38)
+
+## ಪರಿಶೀಲನೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯನ
+
+ಇನ್ನಷ್ಟು ಸಂಶೋಧಿಸಲು ಬಯಸುತ್ತೀರಾ? ತೊಲಗಿನಲ್ಲಿ ಆಟದ ಅಂಕೆ ಮತ್ತು ಜೀವ ವ್ಯವಸ್ಥೆಗಳ ವಿವಿಧ ವಿಧಾನಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಿ. ಅಲ್ಲಿ ಅಂಜನೇಯ ಆಟ ಎಂಜಿನ್ಗಳಿವೆ, ಉದಾಹರಣೆಗೆ [PlayFab](https://playfab.com) ಇದು ಅಂಕೆ, ಲೀಡರ್ಬೋರ್ಡ್ಗಳು ಮತ್ತು ಆಟಗಾರ ಪ್ರಗತಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದನ್ನು ಏಕೆ ನಿಮ್ಮ ಆಟವನ್ನು ಮುಂದಿನ ಹಂತಕ್ಕೆ ತೆಗೆದುಕೊಂಡು ಹೋಗಬಹುದು ಎಂದು ಯೋಚಿಸಿ?
+
+## ನಿಯೋಜನೆ
+
+[ಅಂಕೆ ಆಟವನ್ನು ನಿರ್ಮಿಸಿ](assignment.md)
+
+---
+
+
+**_DISCLAIMER_**:
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಡಾಕ್ಯುಮೆಂಟ್ ಅದರ ಪರಿಸರ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿರುತ್ತದೆ ಎಂದು ಪರಿಗಣಿಸುವುದು ಉತ್ತಮ. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆ سبب ಆಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/5-keeping-score/assignment.md b/translations/kn/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 000000000..1cebc54f2
--- /dev/null
+++ b/translations/kn/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,27 @@
+
+# ಸ್ಕೋರಿಂಗ್ ಆಟವನ್ನು ರಚಿಸು
+
+## ಸೂಚನೆಗಳು
+
+ನೀವು ಜೀವ ಮತ್ತು ಅಂಕೆಗಳನ್ನ ರಚನಾತ್ಮಕ ರೀತಿಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವ ಆಟವನ್ನು ರಚಿಸು. ಜೀವನವನ್ನು ಹೃದಯಗಳಾಗಿ ಮತ್ತು ಅಂಕೆಗಳನ್ನ ಪರದೆತಳ ಮಧ್ಯಭಾಗದಲ್ಲಿ ದೊಡ್ಡ ಸಂಖ್ಯೆಯಾಗಿ ತೋರಿಸುವ ಸಲಹೆ ಇದೆ. ಇಲ್ಲಿ [ಉಚಿತ ಆಟ ಸಂಪನ್ಮೂಲಗಳು](https://www.kenney.nl/) ಅನ್ನು ನೋಡಿ
+
+# ಮೌಲ್ಯಮಾಪನ ಮಾನದಂಡ
+
+| ಮೌಲ್ಯಮಾಪನ ಕ್ರಮಗಳು | ಉತ್ಕೃಷ್ಟ | ತೃಪ್ತಿಕರ | ಸುಧಾರಣೆ ಅಗತ್ಯವಿದೆ |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+| | ಪೂರ್ಣ ಆಟವನ್ನು ನೀಡಲಾಗಿದೆ | ಆಟದ ಕೆಲವು ಭಾಗಗಳನ್ನು ತೋರಿಸಲಾಗಿದೆ | ಭಾಗಶಃ ಆಟದಲ್ಲಿ ದೋಷಗಳಿವೆ |
+
+---
+
+
+**ಅನುಧಾನ**:
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸಮಗ್ರತೆಯನ್ನು ಸಾಧಿಸಲು ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನದಲ್ಲಿ ಇಡಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಾಖಲೆ ಅಧಿಕಾರಿಯ ಉಲ್ಲೇಖವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಸೂಕ್ಷ್ಮ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸುವುದು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆ ಸಹಿತ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೆ ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಾಗುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/5-keeping-score/solution/README.md b/translations/kn/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 000000000..aff0442b5
--- /dev/null
+++ b/translations/kn/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,17 @@
+
+ಇದು ಒಂದು ಸ್ಥಳಧಾರಕ, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಬಿಡಲಾಗಿದೆ
+
+---
+
+
+**ತಪ್ಪು ಜಾಹೀರಾತು**:
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶुद्धತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುವುದರೊಂದಿಗೆ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತಾಂಶಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ಮೂಲ ದಾಖಲೆವೇ ಪ್ರಾಮಾಣಿಕ ಮೂಲವಾಗಿಯೇ ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗೆ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದ ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಗಾಗಿ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥೈಸುವಿಕೆಗಳಿಗೋ ಅಥವಾ ತಪ್ಪು ವ್ಯಾಖ್ಯಾನಗಳಿಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/5-keeping-score/your-work/README.md b/translations/kn/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 000000000..39adbc885
--- /dev/null
+++ b/translations/kn/6-space-game/5-keeping-score/your-work/README.md
@@ -0,0 +1,17 @@
+
+ಇದು ಒಂದು ಸ್ಥಳಾಧಿಕಾರಿ, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ bırakಲಾಗಿದೆ
+
+---
+
+
+**ಅತ್ಯಾವಣಿ**:
+ಈ ದಾಖಲೆ AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ಖಚಿತತೆಯನ್ನು ಒದಗಿಸಲು ಪ್ರಯತ್ನಿಸುವುದಾದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹದು ಎಂಬ ವಿಷಯದ ಜಾಗರೂಕತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಿ. ಮೂಲ ದಾಖಲೆ ಅದರ ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ನಿರ್ದಿಷ್ಟ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅಂಧವಿಶ್ವಾಸಗಳು ಅಥವಾ ತಪ್ಪು ಪರಿಕಲ್ಪನೆಗಳಿಗಾಗಿ ನಾವು ಜವಾಬ್ದಾರಿತರಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/6-end-condition/README.md b/translations/kn/6-space-game/6-end-condition/README.md
new file mode 100644
index 000000000..f8eafff36
--- /dev/null
+++ b/translations/kn/6-space-game/6-end-condition/README.md
@@ -0,0 +1,685 @@
+
+# ಸ್ಪೇಸ್ ಗೇಮ್ ಭಾಗ 6: ಅಂತ್ಯ ಮತ್ತು ಮರುಪ್ರಾರಂಭ
+
+```mermaid
+journey
+ title ನಿಮ್ಮ ಆಟ ಪೂರ್ಣಗೊಳ್ಳುವ ಯಾತ್ರೆ
+ section ಅಂತಿಮ ಪರಿಸ್ಥಿತಿಗಳು
+ ಜಯ/ಹೋಲುವ ಸ್ಥಿತಿಗಳನ್ನುนิ
+ ನಿರ್ವಹಿಸಿ: 3: Student
+ ನಿಯಮ ಪರಿಶೀಲನೆ ಜಾರಿಗೆ ತರಲು: 4: Student
+ ಸ್ಥಿತಿ ಪರಿವರ್ತನೆಗಳನ್ನು ನಿರ್ವಹಿಸಿ: 4: Student
+ section ಆಟಗಾರ ಅನುಭವ
+ ಪ್ರತಿಕ್ರಿಯಾ ವ್ಯವಸ್ಥೆಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡು: 4: Student
+ ಪುನರ್ ಪ್ರಾರಂಭ ಯಂತ್ರಗಳನ್ನು ರಚಿಸಿ: 5: Student
+ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಮೆಕ್ಕೈ: 5: Student
+ section ವ್ಯವಸ್ಥೆ ಏಕೀಕರಣ
+ ಆಟ ಜೀವನಚಕ್ರವನ್ನು ನಿರ್ವಹಿಸಿ: 5: Student
+ ಮೆಮೊರಿ ಶುದ್ಧೀಕರಣ ನಿರ್ವಹಣೆ: 5: Student
+ ಸಂಪೂರ್ಣ ಅನುಭವವನ್ನು ರಚಿಸಿ: 5: Student
+```
+ಪ್ರತಿಯೊಂದು ಅದ್ಭುತ ಗೇಮ್ಗೆ ಸ್ಪಷ್ಟ ಅಂತ್ಯ ನಿಯಮಗಳು ಮತ್ತು ಸುಗಮ ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಯ ಅಗತ್ಯವಿದೆ. ನೀವು ಚಲನೆ, ಯುದ್ಧ ಮತ್ತು ಅಂಕೆಗಳೊಂದಿಗೆ ಒಬ್ಬ ಸುಂದರ ಸ್ಪೇಸ್ ಗೇಮ್ ಅನ್ನು ರಚಿಸಿದ್ದೀರಿ – ಈಗ ಅದು ಸಂಪೂರ್ಣತೆಯೂಂಟುಮಾಡುವ ಅಂತಿಮ ಭಾಗಗಳನ್ನು ಸೇರಿಸುವ ಸಮಯವಾಗಿದೆ.
+
+ನಿಮ್ಮ ಗೇಮ್ ಪ್ರಸ್ತುತ ಅಂತಹ Voyager probes ಮಾದರಿಯಂತೆ ನಿರಂತರವಾಗಿ ನಡೆಯುತ್ತಿದೆ – NASA 1977 ರಲ್ಲಿ ಬಿಡುಗಡೆ ಮಾಡಿದವು ಮತ್ತು ಅನೇಕ ದಶಕಗಳಿಂದ ಜಾಗತಿಕ ಸ್ಥಳಾಂತರವನ್ನು ಮುಂದುವರೆಸಿವೆ. ಇದುಬಾಗಿಲಿಗಾಗಿ ಸೂಕ್ತವಾಗಿದ್ದರೂ, ಗೇಮ್ಗಳು ತೃಪ್ತಿದಾಯಕ ಅನುಭವವನ್ನು ಉಂಟುಮಾಡಲು ನಿರ್ದಿಷ್ಟ ಅಂತ್ಯವರ್ತನೆಗಳನ್ನು ಬೇಕು.
+
+ಇಂದು ನಾವು ಸರಿಯಾದ ಜಯ/ಜೇತೆ ನಿಯಮಗಳು ಮತ್ತು ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಯನ್ನು ಇಂಪ್ಲಿಮೆಂಟ್ ಮಾಡಲಿದ್ದೇವೆ. ಈ ಪಾಠದ ಕೊನೆಗೂ, ನೀವು ಆಟಗಾರರು ಪೂರ್ಣಗೊಳಿಸಿ ಮರುಕಳಿಸಬಹುದಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿದ ಸೊಗಸಾದ ಗೇಮ್ ಅನ್ನು ಹೊಂದಿರುತ್ತೀರಿ, ಆದುದರಿಂದ ವರ್ಚುವಲ್ ಕ್ಲಾಸಿಕ್ ಆರ್ಕೆಡ್ ಗೇಮ್ಗಳಂತೆಯೇ ವಿಷಯ ನಿರ್ಧರಿಸುತ್ತದೆ.
+
+```mermaid
+mindmap
+ root((ಆಟ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆ))
+ End Conditions
+ Victory States
+ Defeat Conditions
+ Progress Tracking
+ State Validation
+ Player Feedback
+ Visual Messages
+ Color Psychology
+ Clear Communication
+ Emotional Response
+ State Management
+ Game Loop Control
+ Memory Cleanup
+ Object Lifecycle
+ Event Handling
+ Restart Systems
+ Input Handling
+ State Reset
+ Fresh Initialization
+ User Experience
+ Polish Elements
+ Message Display
+ Smooth Transitions
+ Error Prevention
+ Accessibility
+```
+## ಪಾಠ ಮುನ್ನ ಪರೀಕ್ಷೆ
+
+[ಪೂರ್ವ ಪಾಠ ಪರೀಕ್ಷೆ](https://ff-quizzes.netlify.app/web/quiz/39)
+
+## ಗೇಮ್ ಅಂತ್ಯ ದಿನಾಂಕಗಳ ತಿಳುವಳಿಕೆ
+
+ನಿಮ್ಮ ಗೇಮ್ ಯಾವಾಗ ಅಂತ್ಯಗೊಳ್ಳಬೇಕು? ಈ ಮೂಲಭೂತ ಪ್ರಶ್ನೆಯು ಆರಂಭಿಕ ಆರ್ಕೆಡ್ ಯುಗದಿಂದಲೂ ಗೇಮ್ ವಿನ್ಯಾಸಕ್ಕೆ ಪ್ರಭಾವ ಬೀರಿದೆ. ಪ್ಯಾಕ್-ಮ್ಯಾನ್ ಭಾವ ಸ್ವಲ್ಪ ಇಲ್ಲದ ಪುತ್ರವಿದ್ದರೆ ಅಥವಾ ಎಲ್ಲ ಡಾಟ್ಗಳನ್ನು ಮುಗಿಸಿದರೆ ಅಂತ್ಯವಾಗುತ್ತದೆ, ಆದರೆ ಸ್ಪೇಸ್ ಇನ್ವೇಡರ್ಸ್ನಲ್ಲಿಯೂ ವೈಜ್ಞಾನಿಕ ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ಕೊಲಿಸುವ ಅಥವಾ ಅಲಿಯನ್ಗಳು ಕೆಳಗೆ ತಲುಪಿಸುವಾಗ ಅಂತ್ಯಗೊಳ್ಳುತ್ತದೆ.
+
+ನೀವು ಗೇಮ್ ರಚಯಿತ, ಜಯ ಮತ್ತು ಸೋಲು ನಿಯಮಗಳನ್ನು ನಿರ್ಧರಿಸುತ್ತೀರಿ. ನಮ್ಮ ಸ್ಪೇಸ್ ಗೇಮ್ಗೆ, ಇಲ್ಲಿ ಆಸಕ್ತಿಕರ ಆಟವನ್ನು ಸೃಷ್ಟಿಸುವ ಸಾಂಪ್ರದಾಯಿತ ವಿಧಾನಗಳಿವೆ:
+
+```mermaid
+flowchart TD
+ A["🎮 ಆಟ ಪ್ರಾರಂಭ"] --> B{"ಶರತ್ತು ಪರಿಶೀಲಿಸಿ"}
+
+ B --> C["ಶತ್ರು ಸಂಖ್ಯೆ"]
+ B --> D["ನಾಯಕನ ಬಾಳುಗಳು"]
+ B --> E["ಸ್ಕೋರ್ ಗಡಿಬಿಡಿ"]
+ B --> F["ಮಟ್ಟ ಪ್ರಗತಿ"]
+
+ C --> C1{"ಶತ್ರುಗಳು = 0?"}
+ D --> D1{"ಬಾಳುಗಳು = 0?"}
+ E --> E1{"ಸ್ಕೋರ್ ≥ ಗುರಿ?"}
+ F --> F1{"ಉದ್ದೇಶಗಳು ಪೂರ್ಣವಾದವೆಯೇ?"}
+
+ C1 -->|ಹೌದು| G["🏆 ವಿಜയം"]
+ D1 -->|ಹೌದು| H["💀 ಸೋಲು"]
+ E1 -->|ಹೌದು| G
+ F1 -->|ಹೌದು| G
+
+ C1 -->|ಇಲ್ಲ| B
+ D1 -->|ಇಲ್ಲ| B
+ E1 -->|ಇಲ್ಲ| B
+ F1 -->|ಇಲ್ಲ| B
+
+ G --> I["🔄 ಪುನರ್ಾರಂಭ ಆಯ್ಕೆ"]
+ H --> I
+
+ style G fill:#e8f5e8
+ style H fill:#ffebee
+ style I fill:#e3f2fd
+```
+- **`N` ಶತ್ರು ಹಡಗುಗಳನ್ನು ನಿರ್ಮುಳುಮಾಡಲಾಗಿದೆ**: ವಿವಿಧ ಹಂತಗಳಾಗಿ ಗೇಮ್ ಅನ್ನು ವಿಭಜಿಸಿದಾಗ, ಹಂತವನ್ನು ಮುಗಿಸಲು `N` ಶತ್ರು ಹಡಗುಗಳನ್ನು ಧ್ವಂಸ ಮಾಡಬೇಕಾಗುತ್ತದೆ, ಇದು ಸಾಮಾನ್ಯ.
+- **ನಿಮ್ಮ ಹಡಗು ನಿರ್ಮುಳುಗೊಂಡಿದೆ**: ಕೆಲ ಗೇಮ್ಗಳಲ್ಲಿ ಹಡಗು ಧ್ವಂಸವಾದರೆ ನೀವು ಗೇಮ್ ಸೋಲುತ್ತೀರಿ. ಇನ್ನೊಂದು ಸಾಮಾನ್ಯ ವಿಧಾನ ಗಾಳಿಯಲ್ಲಿ ಜೀವನ ಪ್ರಮಾಣಗಳ ಕಲ್ಪನೆ ಇದೆ. ಪ್ರತಿ ಬಾರಿ ಹಡಗು ಧ್ವಂಸವಾದಾಗ ಒಂದು ಜೀವ ಕಳೆದುಕೊಳ್ಳುತ್ತದೆ. ಎಲ್ಲಾ ಜೀವಗಳು ಹದಗೆಟ್ಟಾಗ ನೀವು ಗೇಮ್ ಸೋಲುತ್ತೀರಿ.
+- **ನೀವು `N` ಅಂಕೆಗಳನ್ನು ಸಂಗ್ರಹಿಸಿದ್ದೀರಿ**: ಮತ್ತೊಂದು ಸಾಮಾನ್ಯ ಅಂತ್ಯದ ಷರತ್ತು ಅಂಕೆಗಳನ್ನು ಸಂಗ್ರಹಿಸುವುದು. ನೀವು ಅಂಕೆಗಳನ್ನು ಪಡೆಯುವ ವಿಧಾನವು ನಿಮ್ಮ ಮೇರೆಗೆ ಆದರೆ ಸಾಮಾನ್ಯವಾಗಿ ಶತ್ರು ಹಡಗುಗಳನ್ನು ನಾಶ ಮಾಡುವುದನ್ನು ಅಥವಾ ಧ್ವಂಸವಾದಾಗ ಬಿಳಿಗ್ಗುವ ವಸ್ತುಗಳನ್ನು ಸಂಗ್ರಹಿಸುವ ಮೂಲಕ ಅಂಕೆ ನೀಡಲಾಗುತ್ತದೆ.
+- **ಒಂದು ಹಂತ ಪೂರ್ಣಮಾಡುವುದು**: ಇದು ಹಲವು ಷರತ್ತುಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು ಏನೆಂದರೆ `X` ಶತ್ರು ಹಡಗುಗಳು ಧ್ವಂಸವಾಗಿರಬಹುದು, `Y` ಅಂಕೆಗಳ ಸಂಗ್ರಹವಿರಬಹುದು ಅಥವಾ ವಿಶೇಷ ವಸ್ತು ಸಂಗ್ರಹದ ಮೇಲಾಯಿತು.
+
+## ಗೇಮ್ ಮರುಪ್ರಾರಂಭ ಕಾರ್ಯಕ್ಷಮತೆ ಅನುಷ್ಠಾನ
+
+ಸರಿಯಾದ ಮರುಪ್ರಾರಂಭ ಯಂತ್ರವು ಗೇಮ್ಗಳನ್ನು ಮರುಕಳಿಸುವಿಕೆಗೆ ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ. ಆಟಗಾರರು ಗೇಮ್ ಪೂರ್ಣಮಾಡಿದಾಗ (ಅಥವಾ ಸೋಲಿದಾಗ) ಕೂಡ ತಕ್ಷಣ ಮತ್ತೆ ಪ್ರಯತ್ನಿಸಲು ಇಚ್ಛಿಸುತ್ತಾರೆ - ಅಂಕೆಗಳನ್ನು ಮೀರಿಸಲು ಅಥವಾ ಪ್ರದರ್ಶನ ಸುಧಾರಿಸಲು.
+
+```mermaid
+stateDiagram-v2
+ [*] --> Playing: ಆಟ ಪ್ರಾರಂಭ
+ Playing --> Victory: ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ನಾಶಮಾಡಲಾಗಿದೆ
+ Playing --> Defeat: ಜೀವನಗಳು = 0
+
+ Victory --> MessageDisplay: ಗೆಲುವಿನ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ
+ Defeat --> MessageDisplay: ಸೋಲಿನ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ
+
+ MessageDisplay --> WaitingRestart: ಎಂಟರ್ ಒತ್ತಲು ಸೂಚನೆ
+ WaitingRestart --> Resetting: ಎಂಟರ್ ಕೀ ಒತ್ತಲಾಗಿದೆ
+
+ Resetting --> CleanupMemory: ಇಂಟರ್ವಾಲ್ಗಳನ್ನು ಕ್ಲೀನ್ ಮಾಡು
+ CleanupMemory --> ClearEvents: ಶ್ರೋತಾಗಳನ್ನು ತೆಗೆದುಹಾಕು
+ ClearEvents --> InitializeGame: ನವೀನ ಪ್ರಾರಂಭ
+ InitializeGame --> Playing: ಹೊಸ ಆಟ ಆರಂಭ
+
+ note right of MessageDisplay
+ ಬಣ್ಣ-кೋಡ್ ಮಾಡಿದ ಪ್ರತಿಕ್ರಿಯೆ:
+ ಹಸಿರು = ಜಯ
+ ಕೆಂಪು = ಸೋಲು
+ end note
+
+ note right of Resetting
+ ಪೂರ್ಣ ಸ್ಥಿತಿ ಮರುಹೊಂದಿಕೆ
+ ಮೆಮೊರಿ ಲೀಕ್ಸ್ ತಪ್ಪಿಸುತ್ತದೆ
+ end note
+```
+ಟೇಟ್ರಿಸ್ ಇದು ಸ್ಪಷ್ಟವಾಗಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ: ನಿಮ್ಮ ಬ್ಲಾಕ್ ಗಳು ಟಾಪ್ ತಲುಪಿದಾಗ, ನೀವು ಕಠಿಣ ಮೆನುಗಳನ್ನು ನೆಡೆಸದೆ ತಕ್ಷಣ ಹೊಸ ಗೇಮ್ ಪ್ರಾರಂಭಿಸಬಹುದು. ನಾವು ಸರಿಯಾದ ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸುವೆವು, ಇದು ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಸ್ವಚ್ಚವಾಗಿ ಮರುಹೊಂದಿಸಿ ಆಟಗಾರರನ್ನು ತ್ವರಿತವಾಗಿ ಮತ್ತೆ ಆಡಲು ಒದಗಿಸುತ್ತದೆ.
+
+✅ **ಚಿಂತನೆ**: ನೀವು ಆಡಿದ ಗೇಮ್ಗಳ ಬಗ್ಗೆ ಯೋಚಿಸಿ. ಅವು ಯಾವ ಷರತ್ತುಗಳಲ್ಲಿ ಮುಕ್ತಾಯಗೊಳ್ಳುತ್ತವೆ ಮತ್ತು ಮರುಪ್ರಾರಂಭಕ್ಕೆ ನೀವು ಹೇಗೆ ಪ್ರೇರೇಪಿತರಾಗುತ್ತೀರಿ? ಮರುಪ್ರಾರಂಭ ಅನುಭವವನ್ನು ಸುಗಮವೆಂಬುದನ್ನು ಏನು ಮಾಡುತ್ತದೆ ಮತ್ತು ನೆರೆಹೊರೆಯಾಗಿ ಮಾಡಿ?
+
+## ನೀವು ಏನು ರಚಿಸುವಿರಿ
+
+ನೀವು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸಂಪೂರ್ಣ ಆಟ ಅನುಭವವಾಗುವಂತೆ ಪರಿವರ್ತಿಸುವ ಅಂತಿಮ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವಿರಿ. ಈ ಅಂಶಗಳು ಸೋಗಸಾದ ಆಟಗಳನ್ನು ಮೂಲ ಪ್ರೋಟೋಟೈಪ್ಗಳಿಂದ ವಿಭಿನ್ನಗೊಳಿಸುತ್ತವೆ.
+
+**ಇವೆ ಅಂತಿಮವಾಗಿ ನಾವು ಸೇರಿಸುವುದು:**
+
+1. **ಮರೆಯಲಾರದ ಜಯ ಷರತ್ತು**: ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ಸುಳಿವಿನ ಜೊತೆ ನಾಶ ಮಾಡಿ ಮತ್ತು ನಿಜವಾದ ಹಬ್ಬವನ್ನು ಅನುಭವಿಸಿ (ನೀವು ಬಯಸಿದಂತೆ!)
+2. **ಸೋಲಿನ ಷರತ್ತು**: ಜೀವನ ಕಡಿಮೆಯಾದ ಮೇಲೆ ಸೋಲುಗೊಳ್ಳುವ ಪರದೆ ನೋಡಿ
+3. **ಮರುಪ್ರಾರಂಭ ಯಂತ್ರ**: Enter ಒತ್ತಿ ತಕ್ಷಣ ಮತ್ತೆ ಪ್ರಾರಂಭಿಸಿ - ಏಕೆಂದರೆ ಒಂದೇ ಗೇಮ್ ಸಾಕಾಗದು
+4. **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಪ್ರತಿ ಬಾರಿ ಮುಕ್ತ ಮತ್ತು ಸ್ವಚ್ಚ ಸ್ಥಿತಿ - ಯಾವುದೇ ಉಳಿದ ಶತ್ರುಗಳು ಅಥವಾ ಕ್ರೇಜಿ ದೋಷಗಳಿಲ್ಲ
+
+## ಪ್ರಾರಂಭಿಸೋಣ
+
+ನಿಮ್ಮ ಡೆವಲಪ್ಮೆಂಟ್ ಪರಿಸರವನ್ನು ಸಿದ್ಧಪಡಿಸೋಣ. ನೀವು ಹಿಂದಿನ ಪಾಠಗಳಿಂದ ಎಲ್ಲಾ ಸ್ಪೇಸ್ ಗೇಮ್ ಫೈಲನ್ನು ಹೊಂದಿರಬೇಕು.
+
+**ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಹೀಗಿರಬೇಕು:**
+
+```bash
+-| assets
+ -| enemyShip.png
+ -| player.png
+ -| laserRed.png
+ -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+**ನಿಮ್ಮ ಡೆವಲಪ್ಮೆಂಟ್ ಸರ್ವರ್ ಪ್ರಾರಂಭಿಸಿ:**
+
+```bash
+cd your-work
+npm start
+```
+
+**ಈ ಕಮಾಂಡ್:**
+- `http://localhost:5000` ನಲ್ಲಿ ಸ್ಥಳೀಯ ಸರ್ವರ್ ಓಡಿಸುತ್ತದೆ
+- ನಿಮ್ಮ ಫೈಲ್ಗಳನ್ನು ಸರಿಯಾಗಿ ಸರ್ವ್ ಮಾಡುತ್ತದೆ
+- ನೀವು ಬದಲಾವಣೆ ಮಾಡಿದಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರિફ್ರೆಶ್ ಮಾಡುತ್ತದೆ
+
+ಬ್ರೌಸರ್ನಲ್ಲಿ `http://localhost:5000` ತೆರೆಯಿರಿ ಮತ್ತು ನಿಮ್ಮ ಗೇಮ್ ಓಡಿುತಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನೀವು freeely ಚಲಿಸಲು, ಶೂಟ್ ಮಾಡಲು ಮತ್ತು ಶತ್ರುಗಳೊಂದಿಗೆ ಸಂವದಿಸಲು ಸಾಧ್ಯವಾಗಬೇಕು. ದೃಢಿ ಮಾಡಿದ ಬಳಿಕ, ನಾವು ಅನುಷ್ಠಾನಕ್ಕೆ ಮುಂದುವರೆಯಬಹುದು.
+
+> 💡 **ವೃತ್ತಿಪರ ಸಲಹೆ**: Visual Studio Code ನಲ್ಲಿ ಎಚ್ಚರಿಕೆ ತಪ್ಪಿಸಲು, `window.onload` ಫಂಕ್ಷನ್ನಿನೊಳಗೆ `gameLoopId` ಘೋಷಿಸುವ ಬದಲು ಫೈಲಿನ ಮೇಲೇ `let gameLoopId;` ಎಂದು ಘೋಷಿಸಿ. ಇದು ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಘೋಷಣೆಯ ಉತ್ತಮ ಅಭ್ಯಾಸ.
+
+```mermaid
+flowchart TD
+ A["1. ಸ್ಥಿತಿ ಹಾದುಹೋಗುವುದು"] --> B["2. ಘಟನೆ ಹ್ಯಾಂಡ್ಲರ್ಗಳು"]
+ B --> C["3. ಸಂದೇಶ ಸ್ಥಿರಾಂಕಗಳು"]
+ C --> D["4. ಮರುಪ್ರಾರಂಭ ನಿಯಂತ್ರಣಗಳು"]
+ D --> E["5. ಸಂದೇಶ ಪ್ರದರ್ಶನ"]
+ E --> F["6. ವ್ಯವಸ್ಥೆ ಮರುಹೊಂದಿಸುವುದು"]
+
+ G["isHeroDead()\nisEnemiesDead()"] --> A
+ H["اصطಭಾದನೆಯ ಘಟನೆಗಳು\nಆಟ ಅಂತ್ಯ ಘಟನೆಗಳು"] --> B
+ I["GAME_END_WIN\nGAME_END_LOSS"] --> C
+ J["ಪ್ರವೇಶ ಕಡ್ತೆ\nಮರುಪ್ರಾರಂಭ ಟ್ರಿಗರ್"] --> D
+ K["ಜಯ/ಪರಾಜಯ\nಬಣ್ಣ-ಕೋಡಿತ ಪಠ್ಯ"] --> E
+ L["ಸ್ಥಿತಿ ಶುದ್ಧೀಕರಣ\nಹೊಸ ಪ್ರಾರಂಭ"] --> F
+
+ F --> M["🎮 ಪೂರ್ಣ ಆಟ"]
+
+ style A fill:#e3f2fd
+ style B fill:#e8f5e8
+ style C fill:#fff3e0
+ style D fill:#f3e5f5
+ style E fill:#e0f2f1
+ style F fill:#fce4ec
+ style M fill:#e1f5fe
+```
+## ಅನುಷ್ಠಾನ ಹಂತಗಳು
+
+### ಹಂತ 1: ಅಂತ್ಯ ಷರತ್ತುಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಫಂಕ್ಷನ್ಗಳು ರಚನೆ
+
+ಗೇಮ್ ಯಾವಾಗ ಅಂತ್ಯವಾಗಬೇಕು ಎಂಬುದನ್ನು নজರಿಡಲು ಫಂಕ್ಷನ್ಗಳ ಅಗತ್ಯವಿದೆ. ಅಂತಾರಾಷ್ಟ್ರೀಯ ಸ್ಪೇಸ್ ಸ್ಟೇಷನ್ನ ಸենսಾರ್ಗಳು ಪ್ರಮುಖ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರಂತರವಾಗಿ ಪರಿಶೀಲಿಸುವಂತೆಯೇ, ಈ ಫಂಕ್ಷನ್ಗಳು ಗೇಮ್ ಸ್ಥಿತಿಯನ್ನು ನಿರಂತರವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತವೆ.
+
+```javascript
+function isHeroDead() {
+ return hero.life <= 0;
+}
+
+function isEnemiesDead() {
+ const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+ return enemies.length === 0;
+}
+```
+
+**ಇವು ಪಶ್ಚಾತ್ತಲದಲ್ಲಿ ಏನಾಗುತ್ತಿದೆ:**
+- ನಮ್ಮ ಹೀರೋ ಜೀವಗಳಿಂದ ಬಿತ್ತಲಾಗಿದೆಯೇ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ (ಅಯ್ಯೋ!)
+- ಈಟು ಶತ್ರುಗಳು ಇನ್ನೂ ಎಷ್ಟು ಬಾಳಿರುತ್ತಿವೆ ಎಣಿಸುತ್ತದೆ
+- ಶತ್ರುಗಳ ಹರಿತ ಶೂನ್ಯವಾದಾಗ `true` ಮರುಳುಮಾಡುತ್ತದೆ
+- ಸರಳ ಸತ್ಯ/ಅಸತ್ಯ ಲಾಜಿಕ್ ಬಳಸಿ ಸರಳವಾಗಿರುತ್ತದೆ
+- ಎಲ್ಲಾ ಗೇಮ್ ವಸ್ತುಗಳನ್ನೊಳಗೊಂಡು ಬದುಕಿದ್ದವರನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುತ್ತದೆ
+
+### ಹಂತ 2: ಅಂತ್ಯ ಷರತ್ತುಗಳಿಗಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ಗಳನ್ನು ನವೀಕರಿಸಿ
+
+ಈಗ ನಾವು ಈ ಷರತ್ತು ಪರಿಶೀಲನೆಗಳನ್ನು ಗೇಮ್ ಈವೆಂಟ್ ವ್ಯವಸ್ಥೆಗೆ ಸಂಪರ್ಕಿಸುವೆವು. ಪ್ರತೀ ಬಾರಿ ಸಂಕುಲನ ಸಂಭವಿಸಿದಾಗ ಗೇಮ್ ಅಂತ್ಯ ಷರತ್ತು ಸೃಷ್ಟವಾಗುತ್ತದೆಯೆ ಎಂದು ಮೌಲ್ಯಮಾಪನ ಮಾಡುತ್ತದೆ. ಇದರಿಂದ ಪ್ರಮುಖ ಗೇಮ್ ಈವೆಂಟ್ಗಳಿಗೆ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ ಸಿಗುತ್ತದೆ.
+
+```mermaid
+sequenceDiagram
+ participant Collision
+ participant GameLogic
+ participant Conditions
+ participant EventSystem
+ participant Display
+
+ Collision->>GameLogic: ಲೇಸರ್ ಶತ್ರುವನ್ನು ಹೊಡೆತ ಮಾಡುತ್ತದೆ
+ GameLogic->>GameLogic: ವಸ್ತುಗಳನ್ನು ನಾಶಮಾಡಿ
+ GameLogic->>Conditions: isEnemiesDead() ಪರಿಶೀಲಿಸಿ
+
+ alt ಎಲ್ಲಾ ಶತ್ರುಗಳು ಸೋಲಿಹೋಗಿವೆ
+ Conditions->>EventSystem: GAME_END_WIN ಅನ್ನು ಹೊರತುಮಾಡು
+ EventSystem->>Display: ಜಯದ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ
+ else ಶತ್ರುಗಳು ಉಳಿದಿವೆ
+ Conditions->>GameLogic: ಆಟ ಮುಂದುವರಿಸಿ
+ end
+
+ Collision->>GameLogic: ಶತ್ರು ಹೀರೋವನ್ನು ಹೊಡೆತ ಮಾಡುತ್ತದೆ
+ GameLogic->>GameLogic: ಬದುಕುಗಳನ್ನು ಇಳಿಮೆ ಮಾಡು
+ GameLogic->>Conditions: isHeroDead() ಪರಿಶೀಲಿಸಿ
+
+ alt ಜೀವಗಳು = 0
+ Conditions->>EventSystem: GAME_END_LOSS ಅನ್ನು ಹೊರತುಮಾಡು
+ EventSystem->>Display: ಸೋಲಿನ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ
+ else ಜೀವಗಳು ಉಳಿದಿವೆ
+ GameLogic->>Conditions: isEnemiesDead() ಪರಿಶೀಲಿಸಿ
+ alt ಎಲ್ಲಾ ಶತ್ರುಗಳು ಸೋಲಿಹೋಗಿವೆ
+ Conditions->>EventSystem: GAME_END_WIN ಅನ್ನು ಹೊರತುಮಾಡು
+ end
+ end
+```
+```javascript
+eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+ first.dead = true;
+ second.dead = true;
+ hero.incrementPoints();
+
+ if (isEnemiesDead()) {
+ eventEmitter.emit(Messages.GAME_END_WIN);
+ }
+});
+
+eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+ enemy.dead = true;
+ hero.decrementLife();
+ if (isHeroDead()) {
+ eventEmitter.emit(Messages.GAME_END_LOSS);
+ return; // ವಿಜಯದ ಹಿಂದಿನ ನಷ್ಟ
+ }
+ if (isEnemiesDead()) {
+ eventEmitter.emit(Messages.GAME_END_WIN);
+ }
+});
+
+eventEmitter.on(Messages.GAME_END_WIN, () => {
+ endGame(true);
+});
+
+eventEmitter.on(Messages.GAME_END_LOSS, () => {
+ endGame(false);
+});
+```
+
+**ಇಲ್ಲಿ ಏನಾಗುತ್ತಿದೆ:**
+- **ಲೇಸರ್ ಶತ್ರುಗಳಿಗೆ ತಗ್ಗುತ್ತದೆ**: ಇಬ್ಬರೂ ಕಾಣೆಯಾಗುತ್ತಾರೆ, ನೀವು ಅಂಕೆಗಳನ್ನು ಪಡೆಯುತ್ತೀರಿ ಮತ್ತು ನೀವು ಗೆದ್ದಿದ್ದೀರಾ ಎಂದು ಪರಿಶೀಲನೆ ಮಾಡಲಾಗುತ್ತದೆ
+- **ಶತ್ರು ನಿಮಗೆ ತಗ್ಗುತ್ತದೆ**: ನೀವು ಒಂದು ಜೀವ ಕಳೆದುಕೊಳ್ಳುತ್ತೀರಿ ಮತ್ತು ನೀವು ಇನ್ನೂ ಶ್ವಾಸ ಇರುವಿರಾ ಎಂದು ಪರಿಶೀಲಿಸಲಾಗುತ್ತದೆ
+- **ಬುದ್ಧಿವಂತಿಕೆ ಕ్రమಬದ್ಧತೆ**: ಮೊದಲು ಸೋಲು ಪರಿಶೀಲಿಸುತ್ತೇವೆ (ಹಾಗಿಲ್ಲದೆ ನೀವು ಒತ್ತಡದಿಂದ ಗೆಲ್ಲಬೇಕೆಂಬುದು ಇಲ್ಲ!)
+- **ತಕ್ಷಣದ ಕ್ರಿಯೆಗಳು**: ಏನಾದರೂ ಪ್ರಮುಖ ಮೂರು ಸಮಯದಲ್ಲೇ ಗೇಮ್ ತಿಳಿದುಕೊಳ್ಳುತ್ತದೆ
+
+### ಹಂತ 3: ಹೊಸ ಸಂದೇಶ ಸ್ಥಿರಾಂಕಗಳನ್ನು ಸೇರಿಸಿ
+
+ನೀವು ನಿಮ್ಮ `Messages` ಸ್ಥಿರಾಂಕ ವಸ್ತುವಿನಲ್ಲಿ ಹೊಸ ಸಂದೇಶ ಪ್ರಕಾರಗಳನ್ನು ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ. ಈ ಸ್ಥಿರಾಂಕಗಳು ಸರಳತೆ ಮತ್ತು ತಪ್ಪುಗಳನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ.
+
+```javascript
+GAME_END_LOSS: "GAME_END_LOSS",
+GAME_END_WIN: "GAME_END_WIN",
+```
+
+**ಅಗಲಿನಲ್ಲಿ ನಾವು:**
+- ಗೇಮ್ ಅಂತ್ಯ ಈವೆಂಟ್ಗಾಗಿ ಸ್ಥಿರಾಂಕಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ
+- ಸ್ಪಷ್ಟವಾಗಿರುವ ಹೆಸರುಗಳನ್ನು ಬಳಸಿದ್ದೇವೆ, ಈವೆಂಟ್ ಉದ್ದೇಶವನ್ನು ಸಿಗಿಎಂ ಗೊಳಿಸುತ್ತದೆ
+- ಇಂದಿನ ಸಂದೇಶ ಪ್ರಕಾರದ ಹೆಸರು ನಾಮಕರಣದ ಹಾದಿಯನ್ನು ಪಾಲಿಸುತ್ತೇವೆ
+
+### ಹಂತ 4: ಮರುಪ್ರಾರಂಭ ನಿಯಂತ್ರಣಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+
+ಈಗ ನೀವು ಗೇಮ್ ಅನ್ನು ಮರುಪ್ರಾರಂಭಿಸಲು ಕೀಬೋರ್ಡ್ ನಿಯಂತ್ರಣಗಳನ್ನು ಸೇರಿಸಲಿದ್ದೀರಿ. Enter ಕೀವು ಸಾಮಾನ್ಯವಾಗಿ ದೃಢಪಡಿಸಲು ಮತ್ತು ಹೊಸ ಗೇಮ್ ಪ್ರಾರಂಭಿಸಲು ಚಿಕಿತ್ಸೆ ಕಲ್ಪಿಸುವುದರಿಂದ ಪ್ರಾಕೃತಿಕ ಆಯ್ಕೆ.
+
+**ನಿಮ್ಮ ಇತ್ತೀಚಿನ keydown ಈವೆಂಟ್ ಶ್ರೋತಿಗೆ Enter ಕೀ ಗುರುತಿಸುವಿಕೆಯನ್ನು ಸೇರಿಸಿ:**
+
+```javascript
+else if(evt.key === "Enter") {
+ eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+}
+```
+
+**ಹೊಸ ಸಂದೇಶ ಸ್ಥಿರಾಂಕವನ್ನು ಸೇರಿಸಿ:**
+
+```javascript
+KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+```
+
+**ನಿಮಗೆ ತಿಳಿಯಬೇಕಾದುದು:**
+- ನಿಮ್ಮ ಇತ್ತೀಚಿನ ಕೀಬೋರ್ಡ್ ಈವೆಂಟ್ ಕೈಗಾರಿಕೆಯ ವ್ಯವಸ್ಥೆಯನ್ನು ವಿಸ್ತರಿಸುತ್ತದೆ
+- ಪ್ರವೇಶ ಕೀವನ್ನು ಮರುಪ್ರಾರಂಭ ಟ್ರಿಗರ್ ಆಗಿ ಬಳಕೆಗಾಗಿ
+- ನಿಮ್ಮ ಗೇಮ್ನ ಇತರ ಭಾಗಗಳು ಇದನ್ನು ಕೇಳಲು ಕಸ್ಟಮ್ ಈವೆಂಟ್ ಅನ್ನು ನೀಡುತ್ತದೆ
+- ನಿಮ್ಮ ಇತರ ಕೀಬೋರ್ಡ್ ನಿಯಂತ್ರಣಗಳಂತೆ ಇದೇ ಮಾದರಿಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ
+
+### ಹಂತ 5: ಸಂದೇಶ ಪ್ರದರ್ಶನ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿ
+
+ನಿಮ್ಮ ಗೇಮ್ ಫಲಿತಾಂಶಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಆಟಗಾರರಿಗೆ ತಲುಪಿಸಬೇಕಾಗುತ್ತದೆ. ನಾವು ಟರ್ಮಿನಲ್ ಇಂಟರ್ಫೇಸ್ ಮೂರ್ತಿಗಳಂತಹ ಹಸಿರು ಯಶಸ್ಸಿಗೆ ಮತ್ತು ಕೆಂಪು ದೋಷಗಳಿಗೆ ಸೂಚಿಸುವ ಬಣ್ಣದ ಮೂಲಕ ಜಯ ಮತ್ತು ಸೋಲು ಸ್ಥಿತಿಗಳನ್ನು ತೋರಿಸುವ ಸಂದೇಶ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸುವೆವು.
+
+**`displayMessage()` ಫಂಕ್ಷನ್ ರಚಿಸಿ:**
+
+```javascript
+function displayMessage(message, color = "red") {
+ ctx.font = "30px Arial";
+ ctx.fillStyle = color;
+ ctx.textAlign = "center";
+ ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+}
+```
+
+**ಹಂತ ಹಂತವಾಗಿ ಏನಾಗುತ್ತಿದೆ:**
+- ಸ್ಪಷ್ಟ ಮತ್ತು ಓದಲು ಸುಲಭವಾಗಿರುವ ಟೆಕ್ಸ್ಟ್ ಗಾಗಿ ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು ಕುಟುಂಬವನ್ನು ಹೊಂದಿಸುತ್ತದೆ
+- ಎಚ್ಚರಿಕೆಗಾಗಿ ಡೀಫಾಲ್ಟ್ "ಕೆಂಪು" ಬಣ್ಣದ ಪರಿಮಾಣವನ್ನು ವಾಪಸ್ ನೀಡುತ್ತದೆ
+- ಟ್ಯಾಕ್ಟಿಲ್ಗಾಗಿ ಮತ್ತು ಲಂಪಟಕ್ಕಾಗಿ ಕ್ಯಾನ್ವಾಸ್ ಮದ್ಯದಲ್ಲಿ ಪಾಠವನ್ನು ಕೇಂದ್ರಗೊಳಿಸುತ್ತದೆ
+- ಬಣ್ಣ ಆಯ್ಕೆಗೆ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೀಫಾಲ್ಟ್ ಪರಿಮಾಣವನ್ನು ಬಳಸುತ್ತದೆ
+- ನೇರ ಪಠ್ಯ ರೆಂಡರಿಂಗ್ ಗಾಗಿ 2D ಕ್ಯಾನ್ವಾಸ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಬಳಸುತ್ತದೆ
+
+**`endGame()` ಫಂಕ್ಷನ್ ರಚಿಸಿ:**
+
+```javascript
+function endGame(win) {
+ clearInterval(gameLoopId);
+
+ // ಯಾವುದೇ ಬಾಕಿ ಇರುವ ರೆಂಡರ್ಗಳು ಪೂರ್ಣಗೊಳ್ಳುವಂತಹ ವಿಳಂಬವನ್ನು ಸೆಟ್ ಮಾಡಿ
+ setTimeout(() => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ if (win) {
+ displayMessage(
+ "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+ "green"
+ );
+ } else {
+ displayMessage(
+ "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+ );
+ }
+ }, 200)
+}
+```
+
+**ಈ ಫಂಕ್ಷನ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- ಎಲ್ಲ ಹಡಗು ಮತ್ತು ಲೇಸರ್ ಚಲಿಸುವುದೇನೆಂದರೆ ಸ್ಥಗಿತಗೊಳಿಸುತ್ತದೆ
+- ಕೊನೆಯ ಫ್ರೇಮ್ ಚಿತ್ರಣದ ಅವಕಾಶಕ್ಕಾಗಿ 200ms ಕ್ಷಿಪ್ರ ವಿರಾಮವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ
+- ಪರದೆ ಸ್ಯಾಂಬಾಗಿ ಭೂತವಾದ ನಿಶಿವರ್ಣ ಬಣ್ಣದಲ್ಲಿ ಬಣ್ಣಿಸುತ್ತದೆ
+- ಗೆದ್ದವರ ಮತ್ತು ಸೋಲಿಗರಿಗಾಗಿ ವಿಭಿನ್ನ ಸಂದೇಶಗಳನ್ನು ತೋರಿಸುತ್ತದೆ
+- ಸುದ್ದಿಯನ್ನು ಬಣ್ಣ ಸಂಚಾರ ಮಾಡುತ್ತದೆ - ಹಸಿರು ಉತ್ತಮಕ್ಕೆ, ಕೆಂಪು ಅಲ್ಪಶಃ ಉತ್ತಮ ಅಲ್ಲ
+- ಆಟಗಾರರಿಗೆ ಮತ್ತೆ ಪ್ರವೇಶ ಮಾಡಲು ಸೂಚನೆ ನೀಡುತ್ತದೆ
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಗೇಮ್ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಮರುಹೊಂದಿಸುವ ಕಾರ್ಯವನ್ನು ಅನುಷ್ಠಾನ ಮಾಡುವ ಮೊದಲು ಈ ವಿಷಯಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ:
+- ✅ ಅಂತ್ಯ ಷರತ್ತುಗಳು ಸ್ಪಷ್ಟ ಆಟದ ಉದ್ದೇಶಗಳನ್ನು ಹೇಗೆ ಸೃಷ್ಟಿಸುತ್ತವೆ
+- ✅ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ಆಟಗಾರರ ಅರ್ಥಮಾಡಿಕೊಳ್ ತನ್ನ ಈತರದ್ದು
+- ✅ ಸರಿಯಾದ ಕ್ಲೀನ್ಅಪ್ ನ ಭೂಮಕೆಯು ಮೆಮೊರಿ ಲೀಕ್ ತಡೆಯಲು ಅಗತ್ಯವಿದೆ
+- ✅ ಘಟನೆ-ಆಧಾರಿತ ಆರ್ಕಿಟೆಕ್ಚರ್ ಸ್ವಚ್ಛ ಸ್ಥಿತಿ ಪರಿವರ್ತನೆಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ
+
+**ತ್ವರಿತ ಸ್ವ-ಪರೀಕ್ಷೆ**: ಮರುಹೊಂದಿಸುವಾಗ ಈವೆಂಟ್ ಶ್ರೋತಿಗಳನ್ನು ತೆರವುಗೊಳಿಸದಿದ್ದರೆ ಏನಾಗಬಹುದು?
+*ಉತ್ತರ: ಮೆಮೊರಿ ಲೀಕ್ ಮತ್ತು ಸಡಿಲ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ಗಳ ಕಾರಣದಿಂದ ಅನಿರೀಕ್ಷಿತ ವರ್ತನೆ*
+
+**ಗೇಮ್ ವಿನ್ಯಾಸ ತತ್ವಗಳು**: ನೀವು ಈಗ ಅನುಷ್ಠಾನಗೊಳಿಸುತ್ತಿರುವುದು:
+- **ಸ್ಪಷ್ಟ ಗುರಿಗಳು**: ಆಟಗಾರರಿಗೆ ಯಶಸ್ಸು ಮತ್ತು ವಿಫಲತಾ ವ್ಯಾಖ್ಯಾನ ಸ್ಪಷ್ಟವಾಗಿದೆ
+- **ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ**: ಗೇಮ್ ಸ್ಥಿತಿಯಲ್ಲಿ ಬದಲಾವಣೆಗಳು ತಕ್ಷಣ ಸಂವಹನಗೊಳ್ಳುತ್ತವೆ
+- **ಬಳಕೆದಾರ ನಿಯಂತ್ರಣ**: ಆಟಗಾರರು ಸಿದ್ಧರಾದಾಗ ಮರುಪ್ರಾರಂಭ ಮಾಡಬಹುದು
+- **ವ್ಯವಸ್ಥೆಯ ನಂಬಕತೆ**: ಸರಿಯಾದ ಸ್ವಚ್ಛತೆ ದೋಷ ಮತ್ತು ಪ್ರದರ್ಶನ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ
+
+### ಹಂತ 6: ಗೇಮ್ ಮರುಹೊಂದಿಸುವ ಕಾರ್ಯಕ್ಷಮತೆ ಅನುಷ್ಠಾನ
+
+ಮರುಹೊಂದಿಸುವ ವ್ಯವಸ್ಥೆ ಪ್ರಸ್ತುತ ಗೇಮ್ ಸ್ಥಿತಿಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕ್ಲೀನ್ ಮಾಡಬೇಕು ಮತ್ತು ಹೊಸ ಗೇಮ್ ಸೆಷನ್ ಅನ್ನು ಪ್ರಾರಂಭ ಮಾಡಬೇಕು. ಇದು ಆಟಗಾರರಿಗೆ ಹಿಂದಿನ ಗೇಮ್ನ任何 ಅಳವಡಿಕೆಯಿಂದ ಮುಕ್ತವಾಗಿ ಸ್ವಚ್ಛ ಪ್ರಾರಂಭವನ್ನು ಒದಗಿಸುತ್ತದೆ.
+
+**`resetGame()` ಫಂಕ್ಷನ್ ರಚಿಸಿ:**
+
+```javascript
+function resetGame() {
+ if (gameLoopId) {
+ clearInterval(gameLoopId);
+ eventEmitter.clear();
+ initGame();
+ gameLoopId = setInterval(() => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ drawPoints();
+ drawLife();
+ updateGameObjects();
+ drawGameObjects(ctx);
+ }, 100);
+ }
+}
+```
+
+**ಪ್ರತಿ ಭಾಗವನ್ನು ತಿಳಿದುಕೊಳ್ಳೋಣ:**
+- ಮರುಸಂಸ್ಕರಣೆಗೆ ಪೂರ್ವದಲ್ಲಿ ಗೇಮ್ ಲೂಪ್ ಚಾಲಿತವಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ
+- ಗೇಮ್ ಲೂಪ್ನ್ನು ಸ್ಥಗಿತಗೊಳಿಸಿ ಎಲ್ಲ ಪ್ರಸ್ತುತ ಕ್ರಿಯೆಯನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ
+- ಮೆಮೊರಿ ಲೀಕ್ ತಡೆಯಲು ಎಲ್ಲಾ ಈವೆಂಟ್ ಶ್ರೋತಿಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ
+- ಹೊಸ ವಸ್ತುಗಳು ಮತ್ತು ಭೇರಿಗಳು ಹೊಂದಿಕೊಂಡು ಗೇಮ್ ಸ್ಥಿತಿಯನ್ನು ಪುನರಾರಂಭಿಸುತ್ತದೆ
+- ಎಲ್ಲಾ ಪ್ರಮುಖ ಗೇಮ್ ಫಂಕ್ಷನ್ಗಳೊಂದಿಗೆ ಹೊಸ ಗೇಮ್ ಲೂಪ್ನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ
+- ಸ್ಥಿರಗತಿಯ 100ms ಅಂತರವನ್ನು ಬಳಸುತ್ತದೆ
+
+**`initGame()` ಫಂಕ್ಷನಿನೊಳಗೆ Enter ಕೀ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಸೇರಿಸಿ:**
+
+```javascript
+eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+ resetGame();
+});
+```
+
+**EventEmitter ಕ್ಲಾಸಿನಲ್ಲಿ `clear()` ವಿಧಾನ ಸೇರಿಸಿ:**
+
+```javascript
+clear() {
+ this.listeners = {};
+}
+```
+
+**ಮುಖ್ಯ ಅಂಶಗಳು:**
+- Enter ಕೀ ಒತ್ತುವುದು ಮರುಹೊಂದಿಸುವ ಕಾರ್ಯಕ್ಕೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ
+- ಗೇಮ್ ಆರಂಭಿಸುವಾಗ ಈ ಈವೆಂಟ್ ಶ್ರೋತಿಯನ್ನು ನೋಂದಾಯಿಸುತ್ತದೆ
+- ಮರುಹೊಂದಿಸುವಾಗ ಎಲ್ಲಾ ಈವೆಂಟ್ ಶ್ರೋತಿಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಶುದ್ಧ ವಿಧಾನ ಒದಗಿಸುತ್ತದೆ
+- ಮೆಮೊರಿ ಲೀಕ್ ತಡೆಯಲು ಮಧ್ಯೆ ಶ್ರೋತಿಗಳನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ
+- ಹೊಸ ಆರಂಭಕ್ಕೆ ಪರಿಪೂರ್ಣ ಶ್ರೋತಿಗಳ ಆಕಾರವನ್ನು ಶೂನ್ಯಗೊಳಿಸುತ್ತದೆ
+
+## ಅಭಿನಂದನೆಗಳು! 🎉
+
+👽 💥 🚀 ನೀವು ಶೂನ್ಯದಿಂದ ಸಂಪೂರ್ಣ ಗೇಮ್ ಅನ್ನು ಯಶಸ್ವಿಯಾಗಿ ನಿರ್ಮಿಸಿದ್ದೀರಿ. 1970ರ ದಶಕದ ಪ್ರಥಮ ವೀಡಿಯೋ ಗೇಮ್ಗಳನ್ನು ರಚಿಸಿದ ಪ್ರೋಗ್ರಾಮರ್ಗಳಂತೆ, ನೀವು ಲೈನ್ಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ನಿಂದ ಸಮರ್ಪಕ ಗೇಮ್ ಮೆಕಾನಿಕ್ಸ್ ಮತ್ತು ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಪರಸ್ಪರ ಸಂವಾದಾತ್ಮಕ ಅನುಭವವನ್ನು ರೂಪಿಸಿದ್ದೀರಿ. 🚀 💥 👽
+
+**ನೀವು ಸಾಧಿಸಿದ್ದೀರಿ:**
+- ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆ ಜೊತೆಗೆ ಸಂಪೂರ್ಣ ಗೆಲುವು ಮತ್ತು ಸೋಲು ಷರತ್ತುಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಲಾಗಿದೆ
+- ನಿರಂತರ ಆಟಕ್ಕೆ ಸೂಕ್ತ ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಲಾಗಿದೆ
+- ಗೇಮ್ ಸ್ಥಿತಿಗಳ ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಸಂವಹನವನ್ನು ವಿನ್ಯಾಸ ಮಾಡಲಾಗಿದೆ
+- ಸಂಕೀರ್ಣ ಗೇಮ್ ಸ್ಥಿತಿ ಪರಿವರ್ತನೆ ಮತ್ತು ಸ್ವಚ್ಛತೆ ನಿರ್ವಹಣೆ ಮಾಡಲಾಗಿದೆ
+- ಎಲ್ಲಾ ಘಟಕಗಳನ್ನು ಒಂದು ಸಮಗ್ರ, ಆಡಬಹುದಾದ ಗೇಮ್ ಆಗಿ ಜೋಡಿಸಲಾಗಿದೆ
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಸಂಪೂರ್ಣ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ವ್ಯವಸ್ಥೆ**: ಸಂಪೂರ್ಣ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಚಕ್ರದ ನಿಮ್ಮ ಆಟವನ್ನು ಆಚರಿಸಿ:
+- ✅ ಅಂತ್ಯ ಷರತ್ತುಗಳು ఎలా ತೃಪ್ತಿದಾಯಕ ಆಟಗಾರ ಅನುಭವವನ್ನು ಹುಟ್ಟುಹಾಕುತ್ತವೆ?
+- ✅ ಗೇಮ್ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ ಗೇಮ್ ಸ್ಥಿರತೆಯಿಗಾಗಿ ಏಕೆ ಅವಶ್ಯಕ?
+- ✅ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ಆಟಗಾರ ಅರ್ಥಮಾಡಿಕೊಳ್ತಾಳೆಗೆ ಏನು ಒದಗಿಸುತ್ತದೆ?
+- ✅ ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಯ ಪಾತ್ರ ಆಟಗಾರರನ್ನು ಹೇಗೆ ಬಂಧಿಸುತ್ತದೆ?
+
+**ವ್ಯವಸ್ಥೆಯ ನಿಪುಣತೆ**: ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಗೇಮ್ ತೋರಿಸುತ್ತದೆ:
+- **ಫುಲ್-ಸ್ಟಾಕ್ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ**: ಗ್ರಾಫಿಕ್ಸ್, ಇನ್ಪುಟ್, ಮತ್ತು ಸ್ಥಿತಿ ನಿರ್ವಹಣೆಯಿಂದ
+- **ವೃತ್ತಿಪರ ಆರ್ಕಿಟೆಕ್ಚರ್**: ಸರಿಯಾದ ಸ್ವಚ್ಛತೆಯೊಂದಿಗೆ ಈವೆಂಟ್-ಚಾಲಿತ ವ್ಯವಸ್ಥೆಗಳು
+- **ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ**: ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆ ಮತ್ತು ಸೂಕ್ತ ನಿಯಂತ್ರಣೆಗಳು
+- **ಪ್ರದರ್ಶನ ಅನೂಕೂಲನೆ**: ಪರಿಣಾಮಕಾರಿ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಮೆಮೊರಿ ನಿರ್ವಹಣೆ
+- **ಸೊಗಸು ಮತ್ತು ಸಂಪೂರ್ಣತೆ**: ಗೇಮ್ ಶೇಪಿಂಗ್ಗೆ ಬೇಕಾಗುವ ಎಲ್ಲಾ ಸಣ್ಣಾಂಶಗಳು
+
+**ಉದ್ಯಮ-ಸಿದ್ಧ ಕೌಶಲ್ಯಗಳು**: ನೀವು ಅನುಷ್ಠಾನಮಾಡಿದ್ದೀರಿ:
+- **ಗೇಮ್ ಲೂಪ್ ಆರ್ಕಿಟೆಕ್ಚರ್**: ಸತತ ಪ್ರದರ್ಶನ ಹೊಂದಿರುವ ರಿಯಲ್-ಟೈಮ್ ವ್ಯವಸ್ಥೆಗಳು
+- **ಈವೆಂಟ್-ಚಾಲಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ವಿಭಜಿತ ವ್ಯವಸ್ಥೆಗಳು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ವಿಸ್ತರಿಸಲಾಗುತ್ತದೆ
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಸಂಕೀರ್ಣ ಡೇಟಾ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ಲೈಫ್ಸೈಕಲ್ ನಿರ್ವಹಣೆ
+- **ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ವಿನ್ಯಾಸ**: ಸ್ಪಷ್ಟ ಸಂವಹನ ಮತ್ತು ತ್ವರಿತ ಪ್ರತಿಕ್ರಿಯೆಯ ನಿಯಂತ್ರಣೆಗಳು
+- **ಪರೀಕ್ಷೆ ಮತ್ತು ಡೀಬಗಿಂಗ್**: ಅನುವೃತ್ತಿ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಸಮಸ್ಯಾ ಪರಿಹಾರ
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಏನು ಮಾಡಬಹುದೆಂದರೆ**
+- [ ] ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಗೇಮ್ ಆಡಿಕೊಂಡು ಎಲ್ಲಾ ಜಯ ಮತ್ತು ಸೋಲು ಷರತ್ತುಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ
+- [ ] ವಿವಿಧ ಅಂತ್ಯ ಷರತ್ತುಗಳ ಪರಿಮಾಣಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ
+- [ ] ಗೇಮ್ ಸ್ಥಿತಿ ಬದಲಾವಣೆಯ ಕಾರ್ಯವ್ಯೂಹಗಳನ್ನು console.log ಮೂಲಕ ಗಮನಿಸಿ
+- [ ] ನಿಮ್ಮ ಗೇಮ್ ಅನ್ನು ಸ್ನೇಹಿತರೊಂದಿಗೆ ಹಂಚಿಕೊಳ್ಳಿ ಮತ್ತು ಅಭಿಪ್ರಾಯ ಸಂಗ್ರಹಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದುದು**
+- [ ] ಪಾಠದ ನಂತರದ ಪರೀಕ್ಷೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಪ್ರಯಾಣವನ್ನು ಪರಿಗಣಿಸಿ
+- [ ] ಜಯ ಮತ್ತು ಸೋಲು ಸ್ಥಿತಿಗಳಿಗೆ ಧ್ವನಿ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಸಮಯ ಮಿತಿ ಅಥವಾ ಬೋನಸ್ ಗುರಿಗಳಂತಹ ಹೆಚ್ಚುವರಿ ಅಂತ್ಯ ಷರತ್ತುಗಳನ್ನು ಅನುಷ್ಠಾನ ಮಾಡಿ
+- [ ] ವಿಭಿನ್ನ ಶತ್ರು ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ವ್ಯತ್ಯಾಸ ದದ್ದತಿಯ ಹಂತಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಉತ್ತಮ ಫಾಂಟ್ ಮತ್ತು ಬಣ್ಣಗಳೊಂದಿಗೆ ದೃಶ್ಯ ಪ್ರದರ್ಶನವನ್ನು ಸೊಗಸಾಗಿ ಮಾಡಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರ-ದೀರ್ಘ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಪರಿಣತಿಮಾಡಿಕೊಳ್ಳುವುದು**
+- [ ] ಬಹು ಹಂತಗಳು ಮತ್ತು ಪ್ರಗತಿಯನ್ನು ಒಳಗೊಂಡ ಸುಧಾರಿತ ಸ್ಪೇಸ್ ಗೇಮ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಪವರ್-ಅಪ್ಗಳು, ವಿಭಿನ್ನ ಶತ್ರು ಪ್ರಕಾರಗಳು ಮತ್ತು ವಿಶೇಷ ಶಸ್ತ್ರಸಾಮಗ್ರಿಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಸ್ಥಿರ ಸಂಗ್ರಹಣೆ ಹೊಂದಿರುವ ಹೈ ಸ್ಕೋರ್ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಿ
+- [ ] ಮೆನು, ಸೆಟ್ಟಿಂಗ್ಗಳು ಮತ್ತು ಗೇಮ್ ಆಯ್ಕೆಗಳ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ವಿನ್ಯಾಸ ಮಾಡಿ
+- [ ] ವಿಭಿನ್ನ ಸಾಧನಗಳು ಮತ್ತು ಬ್ರೌಸರ್ಗಳಿಗೋಸ್ಕರ ಪ್ರದರ್ಶನವನ್ನು ಅನುಕೂಲಗೊಳಿಸಿ
+- [ ] ನಿಮ್ಮ ಗೇಮ್ ಅನ್ನು ஆன್ಲೈನ್ನಲ್ಲಿ ಪ್ರಕಟಿಸಿ ಮತ್ತು ಸಮುದಾಯದೊಂದಿಗೆ ಹಂಚಿಕೊಳ್ಳಿ
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳಿಗೊಮ್ಮೆ ಗೇಮ್ ಡೆವಲಪ್ಮೆಂಟ್ ಕರಿಯರ್**
+- [ ] ವಿಭಿನ್ನ ಜಾನರ್ಗಳು ಮತ್ತು ಮೆಕ್ಯಾನಿಕ್ಸ್ ಅನ್ನು ಅನ್ವೇಷಿಸುತ್ತ ವಿವಿಧ ಪೂರ್ಣವಾದ ಗೇಮ್ಸ್ ನಿರ್ಮಿಸಿ
+- [ ] Phaser ಅಥವಾ Three.js ಮುಂತಾದ ತಾಂತ್ರಿಕ ಗೇಮ್ ಡೆವಲಪ್ಮೆಂಟ್ ಫ್ರೇಮ್ವರ್ಕ್ಗಳು ಕಲಿಯಿರಿ
+- [ ] ತೆರೆಯಲಾದ ಮೂಲ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿರಿ
+- [ ] ಗೇಮ್ ವಿನ್ಯಾಸವಾದ ನೀತಿ ಮತ್ತು ಆಟಗಾರರ ಮನೋವಿಜ್ಞಾನವನ್ನು ಅಧ್ಯಯನಮಾಡಿ
+- [ ] ನಿಮ್ಮ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಪೋರ್ಟ್ಫೋಲಿಯೊ ಸೃಷ್ಟಿಸಿ
+- [ ] ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಸಮುದಾಯದೊಂದಿಗೆ ಸಂಪರ್ಕ ಬೆಳೆಸಿ ಮತ್ತು ಕಲಿಕೆಯನ್ನು ಮುಂದುವರೆಸಿ
+
+## 🎯 ನಿಮ್ಮ ಪೂರ್ಣ ಗೇಮ್ ಡೆವಲಪ್ಮೆಂಟ್ ಪ್ರಾವೀಣ್ಯ ಸಮಯರೇಖೆ
+
+```mermaid
+timeline
+ title ಸಂಪೂರ್ಣ ಆಟ ಅಭಿವೃದ್ಧಿ ಕಲಿಕೆಯ ಪ್ರಗತಿ
+
+ section ಪೈಪೋಟಿ (ಪಾಠಗಳು 1-2)
+ ಆಟ ವಾಸ್ತುಶಿಲ್ಪ: ಯೋಜನೆ ರಚನೆ
+ : ಆಸ್ತಿ ನಿರ್ವಹಣೆ
+ : ಕැන್ವಾಸ್ ಮೂಲಭೂತಗಳು
+ : ಘಟನೆ ವ್ಯವಸ್ಥೆಗಳು
+
+ section ಪರಸ್ಪರ ಕ್ರಿಯೆಗಳ ವ್ಯವಸ್ಥೆಗಳು (ಪಾಠಗಳು 3-4)
+ ಆಟಗಾರ ನಿಯಂತ್ರಣ: ಇನ್ಪುಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್
+ : ಚಲನೆಯ ಯಂತ್ರ ವಿಧಾನಗಳು
+ : ಘರ್ಷಣೆ ಪತ್ತೆ
+ : ಭೌತಶಾಸ್ತ್ರ ಅನುಕರಣ
+
+ section ಆಟ ಯಂತ್ರಗಳು (ಪಾಠ 5)
+ ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳು: ಅಂಕೆ ಮಂತ್ರಣೆ
+ : ಜೀವನ ನಿರ್ವಹಣೆ
+ : ದೃಶ್ಯ ಸಂವಹನ
+ : ಆಟಗಾರ ಉತ್ತೇಜನ
+
+ section ಆಟ ಪೂರ್ಣಗೊಂಡಿರುವುದು (ಪಾಠ 6)
+ ಪالش್ & ಫ್ಲೋ: ಅಂತ್ಯ ಪರಿಸ್ಥಿತಿಗಳು
+ : ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+ : ಮರುಪ್ರಾರಂಭ ವ್ಯವಸ್ಥೆಗಳು
+ : ಬಳಕೆದಾರ ಅನುಭವ
+
+ section ಉನ್ನತ ವೈಶಿಷ್ಟ್ಯಗಳು (1 ವಾರ)
+ ಸುಧಾರಣೆ ಕೌಶಲ್ಯಗಳು: ಧ್ವನಿ ಸಂಯೋಜನೆ
+ : ದೃಶ್ಯ ಪರಿಣಾಮಗಳು
+ : ಮಟ್ಟ ಪ್ರಗತಿ
+ : ಕಾರ್ಯಕ್ಷಮತೆ ಯುಕ್ತಿ
+
+ section ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿ (1 മാസം)
+ ಕೈಗಾರಿಕಾ ಸಿದ್ಧತೆ: ಫ್ರೇಮ್ವರ್ಕ್ ನಿಪುಣತೆ
+ : ತಂಡ ಸಹಕಾರ
+ : ಇಲ್ಲಿನ ವಿವರಣೆ ಸರಣಿ ಅಭಿವೃದ್ಧಿ
+ : ಸಮುದಾಯ ತೊಡಗಣೆ
+
+ section ವೃತ್ತಿ ಮುನ್ನಡೆಯ (3 ತಿಂಗಳು)
+ ವಿಶೇಷೀಕರಣ: ಅಗ್ರಗಣ್ಯ ಆಟ ಎಂಜಿನ್ಗಳು
+ : ವೇದಿಕೆ ನಿಯೋಜನೆ
+ : ಹಣಕಾಸು ತಂತ್ರಗಳು
+ : ಕೈಗಾರಿಕಾ ನೆಟ್ವರ್ಕಿಂಗ್
+```
+### 🛠️ ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಗೇಮ್ ಡೆವಲಪ್ಮೆಂಟ್ ಟೂಲ್ಕಿಟ್ ಸಾರಾಂಶ
+
+ಈ ಸಂಪೂರ್ಣ ಸ್ಪೇಸ್ ಗೇಮ್ ಸರಣಿಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನೀವು ಇದೀಗ ಅಧೀನರಾಗಿದ್ದಾರೆ:
+- **ಗೇಮ್ ವರ್ಗೀಕರಣ**: ಘಟನೆ-ಚಾಲಿತ ಸಿಸ್ಟಮ್ಗಳು, ಗೇಮ್ ಲೂಪ್ಸ್ ಮತ್ತು ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಣೆ
+- **ಗ್ರಾಫಿಕ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಕ್ಯಾನ್ವಾಸ್ API, ಸ್ಪ್ರೈಟ್ ರೆಂಡರಿಂಗ್ ಮತ್ತು ದೃಶ್ಯ ಪರಿಣಾಮಗಳು
+- **ಇನ್ಪುಟ್ ಸಿಸ್ಟಮ್ಗಳು**: ಕೀಬೋರ್ಡ್ ನಿರ್ವಹಣೆ, ದಾಳಿ ಪತ್ತೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ನಿಯಂತ್ರಣಗಳು
+- **ಗೇಮ್ ವಿನ್ಯಾಸ**: ಆಟಗಾರ ಪ್ರತಿಕ್ರಿಯೆ, ಪ್ರಗತಿ ವ್ಯವಸ್ಥೆಗಳು ಮತ್ತು ತೊಡಗು ತಂತ್ರಗಳು
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಷ್ಕರಣೆ**: ಪರಿಣಾಮಕಾರಿ ರೆಂಡರಿಂಗ್, ಮೆಮರಿ ನಿರ್ವಹಣೆ ಮತ್ತು ಫ್ರೇಮ್ ದರ ನಿಯಂತ್ರಣ
+- **ಬಳಕೆದಾರ ಅನುಭವ**: ಸ್ಪಷ್ಟ ಸಂವಹನ, ಅನುಭಾವನೀಯ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಪುರಸ್ಕಾರ ವಿವರಗಳು
+- **ವೃತ್ತಿಪರ ಮಾದರಿಗಳು**: ಶುಭ್ರ ಕೋಡ್, ದೋಷ ನಿವಾರಣಾ ತಂತ್ರಗಳು ಮತ್ತು ಯೋಜನೆ ಸಂಘಟನೆ
+
+**ವಾಸ್ತವ ಜಗತ್ತಿನ ಅನ್ವಯಿಕೆಗಳು**: ನಿಮ್ಮ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯವಾಗುತ್ತವೆ:
+- **ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: গতಿಶೀಲ ಇಂಟರ್ಫೇಸ್ಗಳು ಮತ್ತು ರಿಯಲ್-ಟೈಮ್ ಸಿಸ್ಟಮ್ಗಳು
+- **ಡೇಟಾ ದೃಶ್ಯೀಕರಣ**: ಅನಿಮೇಟೆಡ್ ಚಾರ್ಟ್ಸ್ ಮತ್ತು ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ಗ್ರಾಫಿಕ್ಸ್
+- **ಶಿಕ್ಷಣ ತಂತ್ರಜ್ಞಾನ**: ಗೇಮೀಕರಣ ಮತ್ತು ಆಕರ್ಷಕ ಕಲಿಕೆಯ ಅನುಭವಗಳು
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: ಸ್ಪರ್ಶಾಧಾರಿತ ಪರಸ್ಪರ ಕ್ರಿಯೆಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಷ್ಕರಣೆ
+- **ಸಿಮ್ಯುಲೇಷನ್ ಸಾಫ್ಟ್ವೇರ್**: ಭೌತಶಾಸ್ತ್ರ ಎಂಜಿನ್ಗಳು ಮತ್ತು ರಿಯಲ್-ಟೈಮ್ ಮಾದರೀಕರಣ
+- **ಸ್ವರ್ಣೋದ್ಯಮಗಳು**: ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ಕಲೆ, ಮನರಂಜನೆ ಮತ್ತು ಡಿಜಿಟಲ್ ಅನುಭವಗಳು
+
+**ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು ಪಡೆದಿವೆ**: ನೀವು ಈಗ:
+- **ಡಿಫಾಲ್ಟ್ನಿಂದ ಕಂಟಕಿತ ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಯೋಜಿಸಬಹುದು**
+- **ವ್ಯವಸ್ಥಿತ ವಿಧಾನಗಳಿಂದ ರಿಯಲ್-ಟೈಮ್ ಅಪ್ಲಿಕೇಶನ್ಗಳ ದೋಷಗಳನ್ನು ತಡೆಯಬಹುದು**
+- **ಸರಾಗ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಬಹುದು**
+- **ಆಕರ್ಷಕ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸು ಹಾಗೂ ಪರಸ್ಪರ ಕ್ರಿಯೆ ಮಾದರಿಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡಬಹುದು**
+- **ತಾಂತ್ರಿಕ ಯೋಜನೆಗಳಲ್ಲಿ ಸೂಕ್ತ ಕೋಡ್ ಸಂಘಟನೆಯೊಂದಿಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಸಹಕರಿಸಬಹುದು**
+
+**ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಧಾರಣೆಗಳಲ್ಲಿ ಪ್ರावीಣ್ಯತೆ**:
+- **ರಿಯಲ್-ಟೈಮ್ ಸಿಸ್ಟಮ್ಗಳು**: ಗೇಮ್ ಲೂಪ್ಗಳು, ಫ್ರೇಮ್ ದರ ನಿರ್ವಹಣೆ ಮತ್ತು ಪ್ರದರ್ಶನ
+- **ಘಟನಾ ಚಾಲಿತ ವರ್ಗೀಕರಣ**: ವಿಭಜಿತ ಸಿಸ್ಟಮ್ಗಳು ಮತ್ತು ಸಂದೇಶ ವಿನಿಮಯ
+- **ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ**: ಸಂಕೀರ್ಣ ದತ್ತಾಂಶ ನಿರ್ವಹಣೆ ಮತ್ತು ಜೀವನಚಕ್ರ ನಿರ್ವಹಣೆ
+- **ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಕ್ಯಾನ್ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ
+- **ಗೇಮ್ ವಿನ್ಯಾಸ ಸಿದ್ಧಾಂತ**: ಆಟಗಾರರ ಮನೋವಿಜ್ಞಾನ ಮತ್ತು ತೊಡಗು ತಂತ್ರಗಳು
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು ಈಗ ವಿಶೇಷ ಗೇಮ್ ಫ್ರೇಮ್ವರ್ಕ್ಗಳು, 3D ಗ್ರಾಫಿಕ್ಸ್, ಬಹು ಆಟಗಾರ ವ್ಯವಸ್ಥೆಗಳು ಅಥವಾ ವೃತ್ತಿಪರ ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಪಾತ್ರಗಳಿಗೆ ತೊಡಗಿಸಲು ಸಿದ್ದರಾಗಿದ್ದೀರಿ!
+
+🌟 **ಸಾಧನೆ ಸಾಧಿಸಿದರು**: ನೀವು ಸಂಪೂರ್ಣ ಗೇಮ್ ಡೆವಲಪ್ಮೆಂಟ್ ಪ್ರಯಾಣವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ ಪ್ರೊಫೆಶನಲ್-ಗುಣಮಟ್ಟದ ಪರಸ್ಪರ ಕ್ರಿಯಾಶೀಲ ಅನುಭವವನ್ನು ನಿರ್ಮಿಸಿದ್ದಾರೆ!
+
+**ಗೇಮ್ ಅಭಿವೃದ್ಧಿ ಸಮುದಾಯಕ್ಕೆ ಸ್ವಾಗತ!** 🎮✨
+
+## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀
+
+ಕೆಳಕಂಡ ಚಾಲೆಂಜ್ ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ:
+
+**ವಿವರಣೆ:** ಸ್ಪೇಸ್ ಗೇಮ್ ಅನ್ನು ವರದ ಗುಂಪು ಪ್ರಗತಿಸು ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ ಸುಧಾರಿಸಿ, ಪ್ರತಿಯೊಂದು ಹಂತದಲ್ಲೂ ಹೆಚ್ಚುವರಿ ಕಷ್ಟ ಮತ್ತು ಬೋನಸ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡಿ.
+
+**ಪ್ರಾಂಪ್ಟ್:** ಹಲವು ಹಂತಗಳ spce ಗೇಮ್ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿ, ಇಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಹಂತದಲ್ಲಿ ಹೆಚ್ಚು ಶತ್ರು ಹಡಗುಗಳು ಹೆಚ್ಚಿದ ವೇಗ ಮತ್ತು ಆರೋಗ್ಯ ಹೊಂದಿರಲಿ. ಪ್ರತಿ ಹಂತದೊಂದಿಗೆ ಹೆಚ್ಚುವರಿ ಸ್ಕೋರ್ ಗುಣಕರವನ್ನು ಸೇರಿಸಿ, ಮತ್ತು ಶತ್ರುಗಳನ್ನು ವಿನಾಶಗೊಳ್ಳುವಾಗ ರಡ್ಡಿ ಅಗ್ನಿ ಅಥವಾ ಶೀಲ್ಡ್ ಮುಂತಾದ ಪವರ್-ಅಪ್ಸ್ ಅನ್ನು ಯಾದೃಚ್ಛಿಕವಾಗಿ ಪಪ್ನ್ಬುಸ್ ಮಾಡಿ. ಹಂತ ಪೂರ್ಣಗೊಳಿಸಿದ ಬೋನಸ್ ಸೇರಿಸಿ ಹಾಗೂ ಪರ屏ೇಲ್ಲಿ ಇದೀಗ ಆಗುವ ಸ್ಕೋರ್, ಜೀವ, ಮತ್ತು ಹಂತವನ್ನು ತೋರಿಸಿ.
+
+ಇಲ್ಲಿ [ಏಜೆಂಟ್ ಮೋಡ್](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿಯನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ.
+
+## 🚀 ಐಚ್ಛಿಕ ಸುಧಾರಣೆಯ ಚಾಲೆಂಜ್
+
+**ನಿಮ್ಮ ಗೇಮ್ಗೆ ಆಡಿಯೋ ಸೇರಿಸಿ**: ಧ್ವನಿ ಪರಿಣಾಮಗಳನ್ನು ಜೋಡಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಆಟದ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಿ! ಕಳ್ಕೊಂಡಿರುವುದು:
+
+- **ಪಟಾಕಿ ಕೈಗೊರೆವಾಗ** ಲೇಸರ್ ಶಾಟ್ಗಳು
+- **ಶತ್ರು ವಿನಾಶವಾಗುವಾಗ** ಧ್ವನಿಗಳು
+- **ಹೀರೋ ಗೆ ಹಾನಿಯಾಗುವಾಗ** ಧ್ವನಿಗಳು
+- **ಜಯವಂತವಾದಾಗ** ಸಂಗೀತ
+- **ತಗ್ಗಿದಾಗ** ಧ್ವನಿ
+
+**ಆಡಿಯೋ ಅನುಷ್ಠಾನ ಉದಾಹರಣೆ:**
+
+```javascript
+// ಧ್ವನಿ ವಸ್ತುಗಳನ್ನು ರಚಿಸಿ
+const laserSound = new Audio('assets/laser.wav');
+const explosionSound = new Audio('assets/explosion.wav');
+
+// ಆಟದ ಘಟನೆಗಳ ಸಂದರ್ಭದಲ್ಲಿ ಧ್ವನಿಗಳನ್ನು ವಾಜಿಸಿ
+function playLaserSound() {
+ laserSound.currentTime = 0; // ಆರಂಭಕ್ಕೆ ಮರುಹೊಂದಿಸಿ
+ laserSound.play();
+}
+```
+
+**ನೀವು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದದು:**
+- ವ್ಯಾಪಕ ಧ್ವನಿ ಪರಿಣಾಮಗಳಿಗೆ ಆಡಿಯೋ ವಸ್ತುಗಳನ್ನು ರಚಿಸುತ್ತದೆ
+- ‘currentTime’ ಅನ್ನು ಮರುಹೊಂದಿಸಲು ಅವಕಾಶಮಾಡುತ್ತದೆ, ವೇಗದ ಸಿಡಿಲು ಧ್ವನಿಕೆಯನ್ನು ಮಾಡುತ್ತದೆ
+- ಬ್ರೌಸರ್ ಸ್ವಯಂಪ್ರಾರಂಭ ನೀತಿಗಳನ್ನು ಬಳಕೆದಾರರ ಪರಸ್ಪರ ಕ್ರಿಯೆಯಿಂದ ಧ್ವನಿಗಳನ್ನು ಪ್ರಚೋದಿಸಿ ನಿಭಾಯಿಸುತ್ತದೆ
+- ಉತ್ತಮ ಗೇಮ್ ಅನುಭವಕ್ಕೆ ಧ್ವನಿ ವಾಲ್ಯೂಮ್ ಮತ್ತು ಸಮಯ ನಿರ್ವಹಿಸುತ್ತದೆ
+
+> 💡 **ಕಲಿಕೆ ಸಂಪನ್ಮೂಲ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗೇಮ್ಗಳಲ್ಲಿ ಆಡಿಯೋ ಜೋಡಿಸುವ ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳಲು ಈ [ಆಡಿಯೋ ಸ್ಯಾಂಡ್ಬಾಕ್ಸ್](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) ಅನ್ನು ಪರಿಶೀಲಿಸಿ.
+
+## ಪಠ್ಯೋತ್ತರ ಕೂವಿಡ್
+
+[ಪಠ್ಯೋತ್ತರ ಕೂವಿಡ್](https://ff-quizzes.netlify.app/web/quiz/40)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವ-ಅಧ್ಯಯನ
+
+ನಿಮ್ಮ ಹಿನ್ನಡೆಗೆ ಹೊಸ ಮಾದರಿ ಗೇಮ್ ಸೃಷ್ಟಿಸುವುದು, ಅಗತ್ಯವಿರುವ ಕಂಡು ಹಿಡಿದ ನೀವು ಹೇಗೆ ಗೇಮ್ ನಿರ್ಮಿಸಬಹುದು ಎಂಬುದನ್ನು ಅನ್ವೇಷಿಸಿ ನೋಡಿ.
+
+## ನಿಯುಕ್ತಿ
+
+[ಮಾದರಿ ಗೇಮ್ ನಿರ್ಮಿಸಿ](assignment.md)
+
+---
+
+
+**ನಿರಾಕರಣೆ**:
+ಈ ದಾಖಲೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಭಾಷಾಂತರ ಸೇವೆಯನ್ನು ఉపయోగಿಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯ ಮೇಲೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ತ್ವರಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದಾಗಿದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ದಾಖಲೆ ಅದರ ಸ್ವದೇಶಿ ಭಾಷೆಯಲ್ಲಿ ಪ್ರಾಮಾಣಿಕ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಮುಖ್ಯ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಭ್ರಮೆ ಅಥವಾ ತಪ್ಪು ವಿವರಣೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರರಾಗುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/6-end-condition/assignment.md b/translations/kn/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 000000000..0a6907bf6
--- /dev/null
+++ b/translations/kn/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,174 @@
+
+# ಒಂದು ಮಾದರಿ ಆಟವನ್ನು ನಿರ್ಮಿಸಿ
+
+## ಹುದ್ದೆಯ ಅವಲೋಕನ
+
+ನೀವು ಈಗಾಗಲೇ ನಿಮ್ಮ ಅಂತರಿಕ್ಷ ಆಟದಲ್ಲಿ ಆಟದ ಅಂತ್ಯದ ಶರತ್ತುಗಳು ಮತ್ತು ಪುನರಾರಂಭ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದೀರ, ಈಗ ಈ ತತ್ವಗಳನ್ನು ಸಂಪೂರ್ಣ ಹೊಸ ಆಟದ ಅನುಭವಕ್ಕೆ ಅನ್ವಯಿಸಲು ಸಮಯವಾಗಿದೆ. ನೀವು ಬಗೆಬಗೆಯ ಅಂತ್ಯದ ಶರತ್ತು ಮಾದರಿಗಳು ಮತ್ತು ಪುನರಾರಂಭ ಯಂತ್ರಾಂಗಗಳನ್ನು ತೋರಿಸುವ ನಿಮ್ಮ ಸ್ವಂತ ಆಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ ನಿರ್ಮಿಸುತ್ತೀರಿ.
+
+ಈ ವ್ಯಾಯಾಮವು ನಿಮಗೆ ಆಟ ವಿನ್ಯಾಸದ ಬಗ್ಗೆ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಯೋಚಿಸಲು ಸವಾಲು ನೀಡುತ್ತದೆ, ಮತ್ತು ನೀವು ಕಲಿತ ತಾಂತ್ರಿಕ ನಿಪುಣತೆಯನ್ನು ಅಭ್ಯಾಸ ಮಾಡಿಸುತ್ತದೆ. ನೀವು ಬಗೆಬಗೆಯ ಜಯ ಮತ್ತು ಸೋಲು ಘಟನಾವಳಿಗಳನ್ನು ಅನ್ವೇಷಿಸಿ, ಆಟಗಾರರ ಪ್ರಗತಿ ಕಾರ್ಯಗತಗೊಳಿಸಿ, ಮತ್ತು ಆಕರ್ಷಕ ಪುನರಾರಂಭ ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತೀರಿ.
+
+## ಯೋಜನೆಯ ಅಗತ್ಯತೆಗಳು
+
+### ಮೂಲ ಆಟದ ವೈಶಿಷ್ಟ್ಯಗಳು
+
+ನಿಮ್ಮ ಆಟದಲ್ಲಿ ಕೆಳಕಂಡ ಅಗತ್ಯ ಅಂಶಗಳಿವೆ:
+
+**ಅಂತ್ಯದ ಶರತ್ತು ವೈವಿಧ್ಯತೆ**: ಆಟವು ನಿಂತಿರುವ ಕನಿಷ್ಠ ಎರಡು ವಿಧಾನಗಳನ್ನು ಜಾರಿಗೊಳಿಸಿ:
+- **ಗುಣಾಂಕ ಆಧಾರಿತ ಜಯ**: ಆಟಗಾರ ಗುರಿ ಸ್ಕೋರ್ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ವಸ್ತುಗಳನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ
+- **ಜೀವ ಇಳಿಕೆ ಆಧಾರಿತ ಸೋಲು**: ಆಟಗಾರ ಎಲ್ಲಾ ಲಭ್ಯವಿರುವ ಜೀವಗಳು ಅಥವಾ ಆರೋಗ್ಯ ಬಿಂದುಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತಾನೆ
+- **ಉದ್ದೇಶ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆ**: ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ಸೋಲಿಸುವುದು, ನಿರ್ದಿಷ್ಟ ವಸ್ತುಗಳನ್ನು ಸಂಗ್ರಹಿಸುವುದು ಅಥವಾ ಗುರಿಗಳನ್ನು ಸಾಧಿಸುವುದು
+- **ಕಾಲ ಆಧಾರಿತ**: ನಿಗದಿತ ಅವಧಿ ನಂತರ ಅಥವಾ ಕನಿಷ್ಠ ಸಮಯ ಮುಗಿದಾಗ ಆಟ ನಿಂತುಹೋಗುವುದು
+
+**ಪುನರಾರಂಭ ಕಾರ್ಯಕ್ಷಮತೆ**:
+- **ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ**: ಹಳೆಯ ಎಲ್ಲಾ ಆಟ ವಸ್ತುಗಳನ್ನು ತೆಗೆದುಹಾಕಿ, ಚರಗಳು ಪುನಃನಿರ್ದೇಶಿಸಿ
+- **ವ್ಯವಸ್ಥೆಗಳ ಪುನರ್ಆರಂಭ**: ಹೊಸ ಆಟಗಾರ ಅಂಕೆಗಳು, ಶತ್ರುಗಳು, ಮತ್ತು ಗುರಿಗಳೊಂದಿಗೆ ಹೊಸದಾಗಿ ಪ್ರಾರಂಭಿಸಿ
+- **ಬಳಕೆದಾರ-ಸುಹೃತ್ ನಿಯಂತ್ರಣೆಗಳು**: ಆಟವನ್ನು ಪುನರ್ಆರಂಭಿಸುವ ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳನ್ನು ಒದಗಿಸಿ
+
+**ಆಟಗಾರ ಪ್ರತಿಕ್ರಿಯೆ**:
+- **ಜಯ ಸಂದೇಶಗಳು**: ಆಟಗಾರ ಸಾಧನೆಗಳನ್ನೆ ಉತ್ತಮ ಪ್ರತಿಕ್ರಿಯೆಯಿಂದ ಆಚರಿಸಿ
+- **ಸೋಲು ಸಂದೇಶಗಳು**: ಆಟ ಪುನಃಆಟ ಮಾಡಲು ಪ್ರೇರೇಪಿಸುವ ಪ್ರೋತ್ಸಾಹಕಾರಿಯಾದ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸಿ
+- **ಪ್ರಗತಿ ಸೂಚಕಗಳು**: ಪ್ರಸ್ತುತ ಸ್ಕೋರ್, ಜೀವಗಳು, ಅಥವಾ ಗುರಿ ಸ್ಥಿತಿಯನ್ನು ತೋರಿಸಿ
+
+### ಆಟದ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಪ್ರೇರಣೆ
+
+ಕೆಳಕಂಡ ಆಟ ಪರಿಕಲ್ಪನೆಗಳಿಂದ ಒಂದು ಆಯ್ದುಕೊಳ್ಳಿ ಅಥವಾ ನಿಮ್ಮದೇ ಆದ ಆಟವನ್ನು ರಚಿಸಿ:
+
+#### 1. ಕಾನ್ಸೋಲ್ ಸಾಹಸ ಆಟ
+ಯುದ್ಧ ತಂತ್ರಗಳೊಂದಿಗೆ ಪಠ್ಯ ಆಧಾರಿತ ಸಾಹಸವನ್ನು ರಚನೆ ಮಾಡಿ:
+
+```
+Hero> Strikes with broadsword - orc takes 3p damage
+Orc> Hits with club - hero takes 2p damage
+Hero> Kicks - orc takes 1p damage
+Game> Orc is defeated - Hero collects 2 coins
+Game> ****No more monsters, you have conquered the evil fortress****
+```
+
+**ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕಾದ ಪ್ರಮುಖ ಲಕ್ಷಣಗಳು:**
+- **ತಿರುವು ಆಧಾರಿತ ಯುದ್ಧ** ವಿವಿಧ ದಾಳಿ ಆಯ್ಕೆಗಳು
+- **ಆರೋಗ್ಯ ಬಿಂದುಗಳು** ಆಟಗಾರ ಹಾಗೂ ಶತ್ರುಗಳಿಗೆ
+- **ಸಂಗ್ರಹಣ ಸಿಸ್ಟಮ್** ನಾಣ್ಯಗಳು ಅಥವಾ ವಸ್ತುಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು
+- **ಬೋರ್ಡ್ ಶತ್ರು ಪ್ರಕಾರಗಳು** ವಿವಿಧ ಕಠಿಣತೆ ಇರುವ
+- **ಜಯ ಶರತ್ತು** ಎಲ್ಲಾ ಶತ್ರುಗಳನ್ನು ಸೋಲಿಸಿದಾಗ
+
+#### 2. ಸಂಗ್ರಹಣೆ ಆಟ
+- **ಉದ್ದೇಶ**: ಅಡ್ಡಿಪಡಿಸುವುವನ್ನು ಕರೆದೋಡದೆ ನಿರ್ದಿಷ್ಟ ವಸ್ತುಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ
+- **ಅಂತ್ಯದ ಶರತ್ತುಗಳು**: ಗುರಿ ಸಂಗ್ರಹಣೆಗೆ ತಲುಪುವುದು ಅಥವಾ ಎಲ್ಲಾ ಜೀವಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳುವುದು
+- **ಪ್ರಗತಿ**: ಆಟ ಮುಂದುವರಿದಂತೆ ವಸ್ತುಗಳ ತಲುಪಲು ಕಠಿಣತೆ ಹೆಚ್ಚಾಗುವುದು
+
+#### 3. ಹಳೆಯು ಆಟ
+- **ಉದ್ದೇಶ**: ಹಂದುರಿದಂತೆ ಕಷ್ಟಕರವಾಗುತ್ತಿರುವ ಹಳೆಯುಗಳನ್ನು ಬಗೆಹರಿಸುವುದು
+- **ಅಂತ್ಯದ ಶರತ್ತುಗಳು**: ಎಲ್ಲಾ ಮಟ್ಟಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸುವುದು ಅಥವಾ ಎಲ್ಲಾ ಸಂಚಲನಗಳು/ಸಮಯ ಮುಗಿಯುವುದು
+- **ಪುನರ್ಆರಂಭ**: ಮೊದಲ ಮಟ್ಟದಲ್ಲಿ ಪ್ರಗತಿಯಿಲ್ಲದೆ ಪುನಃ ಆರಂಭಿಸಿ
+
+#### 4. ರಕ್ಷಣಾ ಆಟ
+- **ಉದ್ದೇಶ**: ಶತ್ರುಗಳ ಸರಣಿಯಿಂದ ನಿಮ್ಮ ಕೇಂದ್ರವನ್ನು ರಕ್ಷಿಸುವುದು
+- **ಅಂತ್ಯದ ಶರತ್ತುಗಳು**: ಎಲ್ಲಾ ಸರಣಿಗಳನ್ನು ತಲುಪಿದಾಗ (ಜಯ) ಅಥವಾ ಕೇಂದ್ರವು ನಾಶವಾದಾಗ (ಸೋಲು)
+- **ಪ್ರಗತಿ**: ಶತ್ರು ಸರಣಿಗಳ ಕಠಿಣತೆ ಮತ್ತು ಸಂಖ್ಯೆ ಹೆಚ್ಚಾಗುತ್ತದೆ
+
+## ಜಾರಿಗೊಳ್ಳುವ ಮಾರ್ಗದರ್ಶಿಗಳು
+
+### ಪ್ರಾರಂಭಿಸುವುದು
+
+1. **ನಿಮ್ಮ ಆಟದ ವಿನ್ಯಾಸವನ್ನು ಯೋಜಿಸಿ**:
+ - ಮೂಲ ಆಟದ ಲೂಪ್ ಅನ್ನು ರೇಖಾಚಿತ್ರಿಸಿ
+ - ನಿಮ್ಮ ಅಂತ್ಯದ ಶರತ್ತುಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ನಿಶ್ಚಯಿಸಿ
+ - ಪುನರಾರಂಭದಾಗ ಯಾವ ಡೇಟಾವನ್ನು ಮರುಹೊಂದಿಸುವುದು ಎಂದು ಗುರುತಿಸಿ
+
+2. **ನಿಮ್ಮ ಯೋಜನೆಯ ರಚನೆಯನ್ನು ಸ್ಥಾಪಿಸಿ**:
+ ```
+ my-game/
+ ├── index.html
+ ├── style.css
+ ├── game.js
+ └── README.md
+ ```
+
+3. **ನಿಮ್ಮ ಮೂಲ ಆಟದ ಲೂಪ್ ರಚಿಸಿ**:
+ - ಆಟದ ಸ್ಥಿತಿಯನ್ನು ಪ್ರಾರಂಭಿಸಿ
+ - ಬಳಕೆದಾರ ಇನ್ಪುಟ್ ಹ್ಯಾಂಡಲ್ ಮಾಡಿ
+ - ಆಟದ ಲಾಜಿಕ್ ಅನ್ನು ನವೀಕರಿಸಿ
+ - ಅಂತ್ಯದ ಶರತ್ತುಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
+ - ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯನ್ನು ಪ್ರದರ್ಶಿಸಿ
+
+### ತಾಂತ್ರಿಕ ಅಗತ್ಯತೆಗಳು
+
+**ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ**:
+- ಚರಗಳ ಘೋಷಣೆಗೆ `const` ಮತ್ತು `let` ಉಪಯೋಗಿಸಿ
+- ಅನುವಾಗ್ಕಾರಕಗಳನ್ನು (arrow functions) ಅಗತ್ಯ ಇದ್ದಲ್ಲಿ ಉಪಯೋಗಿಸಿ
+- ES6+ ವೈಶಿಷ್ಟ್ಯಗಳಾದ ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಸ್ ಮತ್ತು ವಿನ್ಯಾಸ ವಿನ್ಯಾಸಕಗಳನ್ನು ಬಳಸಿ
+
+**ಈವೆಂಟ್ ಚಾಲಿತ ವಿನ್ಯಾಸ**:
+- ಬಳಕೆದಾರ ಸಂವಹನಕ್ಕಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ಗಳನ್ನು ರಚಿಸಿ
+- ಈವೆಂಟ್ಗಳ ಮೂಲಕ ಆಟದ ಸ್ಥಿತಿಯ ಬದಲಾವಣೆಗಳನ್ನು ಜಾರಿಗೊಳಿಸಿ
+- ಪುನರ್ಆರಂಭ ಕಾರ್ಯಕ್ಕಾಗಿ ಈವೆಂಟ್ ಲಿಸನರ್ಗಳನ್ನು ಬಳಸಿ
+
+**ಸ್ವಚ್ಛ ಕೋಡ್ ಅಭ್ಯಾಸ**:
+- ಏಕ ದಾಯಿತ್ವಗಳೊಂದಿಗೆ ಫಂಕ್ಷನ್ಗಳನ್ನು ಬರೆಯಿರಿ
+- ವರ್ಣನಾತ್ಮಕ ಚರ ಮತ್ತು ಫಂಕ್ಷನ್ ಹೆಸರುಗಳನ್ನು ಉಪಯೋಗಿಸಿ
+- ಆಟದ ಲಾಜಿಕ್ ಮತ್ತು ನಿಯಮಗಳನ್ನು ವಿವರಿಸುವ ಟಿಪ್ಪಣಿಗಳನ್ನು ಸೇರಿಸಿ
+- ಕೋಡ್ ಅನ್ನು ತರ್ಕಬದ್ಧ ವಿಭಾಗಗಳಾಗಿ ಏಕಕಾಲೀನಗೊಳಿಸಿ
+
+## ಸಲ್ಲಿಸುವ ಅಗತ್ಯತೆಗಳು
+
+### ಹಸ್ತಾಂತರಗಳನ್ನು ನವೀನಗೊಳಿಸಿ
+
+1. **ಪೂರ್ಣ ಆಟದ ಫೈಲ್ಗಳು**: ನಿಮ್ಮ ಆಟವನ್ನು ನಡೆಯಿಸಲು ಅಗತ್ಯವಿರುವ ಎಲ್ಲಾ HTML, CSS ಮತ್ತು JavaScript ಫೈಲ್ಗಳು
+2. **README.md**: ಕೆಳಗಿನ ವಿಷಯಗಳನ್ನು ವಿವರಿಸುವ ದಾಖಲಾತಿ:
+ - ನಿಮ್ಮ ಆಟವನ್ನು ಹೇಗೆ ಆಡಬೇಕು
+ - ನೀವು ಜಾರಿಗೊಳಿಸಿದ ಅಂತ್ಯದ ಶರತ್ತುಗಳು ಯಾವುವು
+ - ಪುನರ್ಆರಂಭಕ್ಕಾಗಿ ಸೂಚನೆಗಳು
+ - ಯಾವುದೇ ವಿಶೇಷ ಲಕ್ಷಣಗಳು ಅಥವಾ ಕಾರ್ಯವಿಧಾನಗಳು
+3. **ಕೋಡ್ ಟಿಪ್ಪಣಿಗಳು**: ನಿಮ್ಮ ಆಟದ ಲಾಜಿಕ್ ಮತ್ತು ಸಂವೇದಿ ನ್ಯಾಯಾಂಶಗಳ ಸ್ಪಷ್ಟ ವಿವರಣೆ
+
+### ಪರೀಕ್ಷಾ ಪರಿಶೀಲನೆ ಪಟ್ಟಿ
+
+ಸಲ್ಲಿಸಲು ಮೊದಲು, ನಿಮ್ಮ ಆಟವನ್ನು ಪರಿಶೀಲಿಸಿ:
+
+- [ ] **ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್ನಲ್ಲಿ ದೋಷರಹಿತವಾಗಿ ચાલುತ್ತದೆ**
+- [ ] **ಬಹು ಅಂತ್ಯದ ಶರತ್ತುಗಳನ್ನು ಜಾರಿಗೊಳಿಸಿದೆ**
+- [ ] **ಶುದ್ಧ ಸ್ಥಿತಿಯನ್ನು ಮರುಹೊಂದಿಸಿ ಪುನರ್ಆರಂಭ ಮಾಡುತ್ತದೆ**
+- [ ] **ಆಟದ ಸ್ಥಿತಿಯ ಬಗ್ಗೆ ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ**
+- [ ] **ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವ್ಯಾಕರಣ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಬಳಕೆ ಮಾಡಿದೆ**
+- [ ] **README.md ನಲ್ಲಿ ಸಮಗ್ರ ದಾಖಲೆಗಳಿವೆ**
+
+## ಬೆಲೆಮಾಪನ ಮಾನದಂಡ
+
+| ಮಾನದಂಡಗಳು | ಅತ್ಯುತ್ತಮ (4) | ಪ್ರೌಢ (3) | ಅಭಿವೃದ್ಧಿಗೊಳ್ಳುತ್ತಿರುವ (2) | ಪ್ರಾರಂಭಿಕ (1) |
+|----------|---------------|----------------|----------------|--------------|
+| **ಆಟ ಕಾರ್ಯಕ್ಷಮತೆ** | ಬಹು ಅಂತ್ಯದ ಶರತ್ತುಗಳೊಂದಿಗೆ ಪೂರ್ಣ ಆಟ, ಸುಗಮ ಪುನರ್ಆರಂಭ ಮತ್ತು ಹೊಳೆಯುತ್ತಿರುವ ಆಟದ ಅನಭವ | ಮೂಲ ಅಂತ್ಯದ ಶರತ್ತುಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಆಟ ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಪುನರ್ಆರಂಭ ಕ್ರಮ | ಕೆಲವು ಅಂತ್ಯದ ಶರತ್ತುಗಳ ಜಾರಿಗೊಳಿಸಿದ್ದು ಪೂರ್ತಿ ಅಲ್ಲದ ಆಟ, ಪುನರ್ಆರಂಭದಲ್ಲಿ ಸಣ್ಣ ಸಮಸ್ಯೆಗಳು ಇರಬಹುದು | ನಿರ್ದಿಷ್ಟ ಕಾರ್ಯಕ್ಷಮತೆ ಇಲ್ಲದ ಅಪೂರ್ಣ ಆಟ ಮತ್ತು ಪ್ರಮುಖ ದೋಷಗಳು ಬರುವುದಾಗಿದೆ |
+| **ಕೋಡ್ ಗುಣಮಟ್ಟ** | ಸ್ವಚ್ಛ, ಚೆನ್ನಾಗಿ ಸಂಘಟಿತ ಕೋಡ್, ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಭ್ಯಾಸಗಳು, ಸಮಗ್ರ ಟಿಪ್ಪಣಿಗಳು ಮತ್ತು ಅತ್ಯುತ್ತಮ ರಚನೆ | ಉತ್ತಮ ಕೋಡ್ ಸಂಘಟನೆ, ಆಧುನಿಕ ವ್ಯಾಕರಣ, ಯುಕ್ತಿಯುತ ಟಿಪ್ಪಣಿಗಳು ಮತ್ತು ಸ್ಪಷ್ಟ ರಚನೆ | ಮೂಲಭೂತ ಕೋಡ್ ಸಂಘಟನೆ, ಕೆಲವು ಆಧುನಿಕ ಅಭ್ಯಾಸಗಳು, ಕಡಿಮೆ ಟಿಪ್ಪಣಿಗಳು | ಖರಾಬ್ ಕೋಡ್ ಸಂಘಟನೆ, ಹಳೆಯ ವ್ಯಾಕರಣ, ಟಿಪ್ಪಣಿಗಳ ಕೊರತೆ ಮತ್ತು ರಚನೆ ಇಲ್ಲದಂತೆ |
+| **ಬಳಕೆದಾರ ಅನುಭವ** | ಸರಳ ಆಟವಾಡು, ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳು, ಉತ್ತಮ ಪ್ರತಿಕ್ರಿಯೆಗಳು, ಮನರಂಜಕ ಅಂತ್ಯ/ಪುನರ್ಆರಂಭ ಅನುಭವ | ಉತ್ತಮ ಆಟವಾಡು, ಸಮರ್ಥ ಸೂಚನೆಗಳು ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಗಳು, ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಅಂತ್ಯ/ಪುನರ್ಆರಂಭ | ಮೂಲಭೂತ ಆಟವಾಡು, ಕಡಿಮೆ ಸೂಚನೆಗಳು, ಆಟದ ಸ್ಥಿತಿಯಲ್ಲಿ ಕನಿಷ್ಠ ಸ್ಪಷ್ಟತೆ | ಗೊಂದಲಕಾರಿಯಾದ ಆಟವಾಡು, ಸ್ಪಷ್ಟವಾಗದ ಸೂಚನೆಗಳು ಮತ್ತು ಕಡಿಮೆ ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಗಳು |
+| **ತಾಂತ್ರಿಕ ಜಾರಿಗೊಳಿಕೆ** | ಆಟ ಅಭಿವೃದ್ಧಿ ತತ್ವಗಳು, ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ಸ್ಥಿತಿ ನಿರ್ವಹಣದಲ್ಲಿ ನಿಪುಣತೆ ತೋರಿಸುವುದು | ಆಟ ತತ್ವಗಳನ್ನು ಒಳ್ಳೆಯ ರೀತಿಯಲ್ಲಿ ಅರ್ಥ ಮಾಡಿಕೊಂಡು ಜಾರಿಗೊಳಿಸುವಿಕೆ | ಮೂಲಭೂತ ಅರ್ಥ ಮತ್ತು ಅಂದಾಜು ಜಾರಿಗೊಳಿಸುವಿಕೆ | ಕಡಿಮೆ ಅರ್ಥ ಮತ್ತು ಕಠಿಣ ಜಾರಿಗೊಳಿಕೆ |
+| **ದಾಖಲೆಗಳಲ್ಲಿ** | ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳುಳ್ಳ ಸಮಗ್ರ README, ಉತ್ತಮವಾಗಿ ದಾಖಲಾತಿಯುಳ್ಳ ಕೋಡ್ ಮತ್ತು ವಿಶದ ಪರೀಕ್ಷಾ ಪ್ರমাণಗಳು | ಉತ್ತಮ ದಾಖಲಾತಿ, ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳು ಮತ್ತು ಯೋಗ್ಯ ಟಿಪ್ಪಣಿಗಳು | ಮೂಲಬೂತ ದಾಖಲೆ ಮತ್ತು ಕಡಿಮೆ ಸೂಚನೆಗಳು | ದಾಖಲೆಗಳ ಕೊರತೆ ಅಥವಾ ಇಲ್ಲದಂತಹ ಸ್ಥಿತಿ |
+
+### ಮೌಲ್ಯಮಾಪನ ಮಾಪನ
+
+- **ಅತ್ಯುತ್ತಮ (16-20 ಅಂಕೆಗಳು)**: ಸೃಜನಶೀಲ ಲಕ್ಷಣಗಳು ಮತ್ತು ಹೊಳೆಯುವ ಜಾರಿಗೊಳಿಕೆಯೊಂದಿಗೆ ನಿರೀಕ್ಷೆಗಳನ್ನು ಮೀರಿದೆ
+- **ಪ್ರೌಢ (12-15 ಅಂಕೆಗಳು)**: ಎಲ್ಲಾ ಅಗತ್ಯತೆಗಳನ್ನು ಪೂರೈಸಿ ಉತ್ತಮ ಜಾರಿಗೊಳಿಕೆ
+- **ಅಭಿವೃದ್ಧಿ (8-11 ಅಂಕೆಗಳು)**: ಹೆಚ್ಚಿನ ಅಗತ್ಯತೆಗಳನ್ನು ಪೂರೈಸಿದೆಯಾದರೂ ಸಣ್ಣ ಸಮಸ್ಯೆಗಳಿರಬಹುದು
+- **ಪ್ರಾರಂಭಿಕ (4-7 ಅಂಕೆಗಳು)**: ಕೆಲವು ಅಗತ್ಯತೆಗಳನ್ನು ಪೂರೈಸಿ, ಆದರೆ ಪ್ರಮುಖ ಸುಧಾರಣೆಗಳನ್ನು ಅಗತ್ಯವಿದೆ
+
+## ಹೆಚ್ಚುವರಿ ಅಧ್ಯಯನ ಸಂಪನ್ಮೂಲಗಳು
+
+- [MDN ಆಟ ಅಭಿವೃದ್ಧಿ ಮಾರ್ಗದರ್ಶಿ](https://developer.mozilla.org/en-US/docs/Games)
+- [ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಟ ಅಭಿವೃದ್ಧಿ ಪ್ರಾಥಮಿಕ ಪಾಠಗಳು](https://developer.mozilla.org/en-US/docs/Games/Tutorials)
+- [ಕ್ಯಾನ್ವಾಸ್ API ದಸ್ತಾವೇಜು](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
+- [ಆಟ ವಿನ್ಯಾಸ ಸಿದ್ಧಾಂತಗಳು](https://www.gamasutra.com/blogs/)
+
+> 💡 **ಪ್ರೋ ಟಿಪ್**: ಸರಳವಾಗಿ ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ಹಂತ ಹಂತವಾಗಿ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಿ. ಒಳ್ಳೆಯ ಮುಚ್ಚಳೆಯಾದ ಸರಳ ಆಟವು ದೋಷಗಳಿದ್ದ ಸಂಕೀರ್ಣ ಆಟಕ್ಕಿಂತ ಉತ್ತಮ!
+
+---
+
+
+**ಅಸೀಮಾ**:
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ಸತ್ಯತೆಯತ್ತ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅನಿಖಂಡತೆಯಿರಬಹುದು ಎಂಬುದನ್ನು ಗಮನದಲ್ಲಿಡಿ. ಮೂಲ ಭಾಷೆಯ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಪ್ರಾಧಿಕಾರಾತ್ಮಕ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅರ್ಥಬಾಧೆ ಅಥವಾ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ಲುವಿಕೆಗೆ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/6-end-condition/solution/README.md b/translations/kn/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 000000000..ab32bcb06
--- /dev/null
+++ b/translations/kn/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,17 @@
+
+ಇದು ಒಂದು ಪ್ಲೇಸ್ಹೋಲ್ಡ್, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಇಡಲಾಗಿದೆ
+
+---
+
+
+**ವಿವರಣೆ**:
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಾದಕ್ಕಾಗಿ ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದದಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇದ್ದಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಡಾಕ್ಯುಮೆಂಟ್ ಅದರ ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕಾರಪೂರ್ಣ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಗಳು ಅಥವಾ ದೋಷಾಸ್ಪದ interpretations ಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಾಗುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/6-end-condition/your-work/README.md b/translations/kn/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 000000000..afba34f40
--- /dev/null
+++ b/translations/kn/6-space-game/6-end-condition/your-work/README.md
@@ -0,0 +1,17 @@
+
+ಇದು ಒಂದು ಪ್ಲೇಸ್ಹೋಲ್ಡರ್, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಇರಿಸಲಾಗಿದೆ
+
+---
+
+
+**ತ್ಯಜ್ಯಾಂಶ**:
+ಈ ਦਸਤಾವೇಜನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ಅನುವಿತ್ತಿಗಾಗಿ ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತಳಿವುಗಳಿರಬಹುದು. ಮೂಲ ದಸ್ತಾವೇಜನ್ನು ಅದರ ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿಯೇ ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಅಗತ್ಯ ಮಾಹಿತಿಗೆ ವ್ಯಕ್ತಿಗತ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದ ಸೇವೆಯನ್ನು ಪಡೆಯುವುದು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ದೋಷ ಅರ್ಥಗುಳುಮೆಯ ಅಥವಾ ದೋಷ ವಿವರಣೆಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/README.md b/translations/kn/6-space-game/README.md
new file mode 100644
index 000000000..e928a9924
--- /dev/null
+++ b/translations/kn/6-space-game/README.md
@@ -0,0 +1,47 @@
+
+# ಬಾವುಳುವಂತಹ ಒಂದು ಬಾಹ್ಯಾಕಾಶ ಆಟವನ್ನು ನಿರ್ಮಿಸಿ
+
+ಮೆಚ್ಚುಗೆಯಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಭೂತಗಳನ್ನು ಕಲಿಸಲು ಒಂದು ಬಾಹ್ಯಾಕಾಶ ಆಟ
+
+ಈ ಪಾಠದಲ್ಲಿ ನೀವು ನಿಮ್ಮದೇ ಬಾಹ್ಯಾಕಾಶ ಆಟವನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಿಕೊಳ್ಳಬೇಕೆಂದನ್ನು ಕಲಿಯಲಿದ್ದೀರಿ. ನೀವು "Space Invaders" ಎಂಬ ಆಟವನ್ನು ಎಂದಾದರೂ ಆಡಿದ್ದರೆ, ಈ ಆಟದಲ್ಲಿ ಅದೇ ಧಾರಣೆ ಇದೆ: ಒಂದು ಬಾಹ್ಯಾಕಾಶ ನಾವಿಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಿ ಮತ್ತು ಮೇಲಿನಿಂದ ಬರುವ ರಾಕ್ಷಸರ ಮೇಲೆ ಬೆಂಕಿ ಹಾಯಿಸುವುದು. ಅಂತಿಮ ಆಟ ಹೇಗಿರುತ್ತದೆ ನೋಡಿರಿ:
+
+
+
+ಈ ಆರು ಪಾಠಗಳಲ್ಲಿ ನೀವು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಕಲಿಯಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ:
+
+- **ಇಂಟರಾಗ್** ಮಾಡುವುದು Canvas ಅಂಶದೊಂದಿಗೆ ಸ್ಕ್ರೀನಿನಲ್ಲಿ ಅಳೆಯಲು
+- **ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು** ಕಾರ್ಟಿಶಿಯನ್ ಸಂಯೋಜನೆ ವ್ಯವಸ್ಥೆಯನ್ನು
+- **ಕಲಿಯುವುದು** Pub-Sub ಮಾದರಿಯನ್ನು ಧ್ವನಿಸಂಪನ್ಮೂಲ ಆಟಗಳಿಗೆ ಸರಳವಾಗಿ ನಿರ್ವಹಿಸಲು ಮತ್ತು ವಿಸ್ತರಿಸಲು
+- **ಉಪಯೋಗಿಸುವುದು** Async/Await ಮೂಲಕ ಆಟದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು
+- **ನಿಯಂತ್ರಿಸುವುದು** ಕೀಬೋರ್ಡ್ ಘಟನೆಗಳು
+
+## ಅವಲೋಕನ
+
+- ಸಿದ್ಧಾಂತ
+ - [ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಆಟಗಳನ್ನು ನಿರ್ಮಿಸುವ ಪರಿಚಯ](1-introduction/README.md)
+- ಅಭ್ಯಾಸ
+ - [ಕ್ಯಾನ್ವಾಸ್ಗೆ ಚಿತ್ರಣ ಮಾಡಿ](2-drawing-to-canvas/README.md)
+ - [ಸ್ಕ್ರೀನಿನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಚಲಿಸುವುದು](3-moving-elements-around/README.md)
+ - [ಘರ್ಷಣೆ ಪರಿಶೀಲನೆ](4-collision-detection/README.md)
+ - [ಸ್ಕೋರ್ ನೊಳಗೆ ಇಡುವುದು](5-keeping-score/README.md)
+ - [ಆಟ ಮುಗಿಸುವುದು ಮತ್ತು ಪುನರಾರಂಭಿಸುವುದು](6-end-condition/README.md)
+
+## ಕೃಪೆಗಳು
+
+ಈ ಆಟದ ಪೈಕಿ ಉಪಯೋಗಿಸಿದ ಸಂಪನ್ಮೂಲಗಳು https://www.kenney.nl/ ನಿಂದ ಬರುತ್ತವೆ.
+ನೀವು ಗೇಮ್ ನಿರ್ಮಾಣದಲ್ಲಿ ಆಸಕ್ತಿ ಇದ್ದರೆ, ಇವು ಕೆಲವು ಅತ್ಯುತ್ತಮ ಸಂಪನ್ಮೂಲಗಳು, ಬಹಳಷ್ಟು ಉಚಿತವಾಗಿವೆ ಮತ್ತು ಕೆಲವು ಪಾವತಿಸಲಾಗಿವೆ.
+
+---
+
+
+**ನಿರಾಕರಣೆ**:
+ಈ ದಸ್ತಾವೇಜು [Co-op Translator](https://github.com/Azure/co-op-translator) ಎಂಬ AI ಅನುವಾದ ಸೇವೆಯನ್ನು ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಸತೀಕತೆಯಿಗಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯಾಂಶಗಳಿರುವ ಸಾಧ್ಯತೆ ಇದೆ ಎಂಬುದನ್ನು ಗಮನದಲ್ಲಿರಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿ ಇರುವ ದಸ್ತಾವೇಜು authoritative ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಗಂಭೀರ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ಈ ಅನುವಾದದ ಉಪಯೋಗದಿಂದ ಆಗಬಹುದಾದ ಯಾವುದೇ ತಪ್ಪ فهمಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಮಾಡಿಕೊಳ್ ಲಿಕೆಗಾಗಿ ನಾವು ಜವಾಬ್ದಾರಿಯಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/6-space-game/solution/README.md b/translations/kn/6-space-game/solution/README.md
new file mode 100644
index 000000000..3cafad863
--- /dev/null
+++ b/translations/kn/6-space-game/solution/README.md
@@ -0,0 +1,17 @@
+
+ಇದು ಪ್ಲೇಸ್ಹೋಲ್ಡರ್ ಆಗಿದ್ದು, ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಬಿಡಲಾಗಿದೆ
+
+---
+
+
+**ಎಚ್ಚರಿಕೆ**:
+ಈ ದಾಖಲೆವು AI ಅನುವಾದ ಸೇವಾ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯನ್ನು ಗುರಿಯಾಗಿಟ್ಟಿದ್ದರೂ, ಸ್ವಯಂಕ್ರಮಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸಮಗ್ರತೆಗಳಿರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲಭಾಷೆಯಲ್ಲಿನ ಮೂಲದocuಮೆಂಟ್ ಅನ್ನು ಅಧಿಕೃತ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವನ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದವನ್ನು ಬಳಸುವ ವೇಳೆ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಸಮಜಿಕೆಗಳು ಅಥವಾ ಅರ್ಥರೂಪಾಂತರಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರನಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/7-bank-project/1-template-route/README.md b/translations/kn/7-bank-project/1-template-route/README.md
new file mode 100644
index 000000000..91a9ed284
--- /dev/null
+++ b/translations/kn/7-bank-project/1-template-route/README.md
@@ -0,0 +1,832 @@
+
+# ಬ್ಯಾಂಕಿಂಗ್ ಆ್ಯಪ್ ಭಾಗ 1: ವೆಬ್ ಆ್ಯಪ್ನಲ್ಲಿ HTML ಟೆಂಪ್ಲೇಟ್ಗಳು ಮತ್ತು ಮಾರ್ಗಗಳು
+
+```mermaid
+journey
+ title ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಆಪ್ ಅಭಿವೃದ್ಧಿ ಯಾತ್ರೆ
+ section SPA ಮೂಲಭೂತಗಳು
+ ಒಪ್ಪಿಕೊಳ್ಳಿ ಸಿಂಗಲ್-ಪೇಜ್ ಆಪ್ಸ್: 3: Student
+ ಟೆಂಪ್ಲೇಟ್ ಸಂ概念 ಕಲಿಯಿರಿ: 4: Student
+ DOM манಿಪ್ಯುಲೇಶನ್ ಮಾ스터 ಮಾಡಿ: 4: Student
+ section ಮಾರ್ಗದರ್ಶನ ವ್ಯವಸ್ಥೆಗಳು
+ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮಾರ್ಗದರ್ಶನ ಅನುಷ್ಠಾನಗೊಳಿಸಿ: 4: Student
+ ಬ್ರೌಸರ್ ಇತಿಹಾಸ ನಿರ್ವಹಿಸಿ: 5: Student
+ ನಳೆಯದ ಯಂತ್ರಗಳನ್ನು ಸೃಷ್ಟಿಸಿ: 5: Student
+ section ವೃತ್ತಿಪರ ಮಾದರಿಗಳು
+ ಮಡ್ಯುಲರ್ ವಿನ್ಯಾಸ ನಿರ್ಮಿಸಿ: 5: Student
+ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನ್ವಯಿಸಿ: 5: Student
+ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸಿ: 5: Student
+```
+1969 ರಲ್ಲಿ Apollo 11 ಗೈಡ್ ಕಂಪ್ಯೂಟರ್ ಚಂದ್ರನ ಕಡೆಗೆ ನವಿಗೇಟ್ ಆದಾಗ, ಸಂಪೂರ್ಣ ಸಿಸ್ಟಮ್ ಮರುಪ್ರಾರಂಭಿಸದೆ ವಿಭಿನ್ನ ಕಾರ್ಯಕ್ರಮಗಳ ಮಧ್ಯೆ ಸ್ವಿಚ್ ಮಾಡಬೇಕಾಯಿತು. ಆಧುನಿಕ ವೆಬ್ ಆ್ಯಪ್ಗಳು ಕೂಡ ಇದೇ ರೀತಿಯಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ – ಅವು ನಿಮ್ಮೇ ಕಾಣುವ ವಸ್ತುಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಮರುಲೋಡ್ ಮಾಡದೆ ಬದಲಿಸುತ್ತವೆ. ಇದು ಬಳಕೆದಾರರು ಇಂದಿನ ದಿನಗಳು ನಿರೀಕ್ಷಿಸುವ ಸ್ಮೂತ್, ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಅನುಭವವನ್ನು ರಚಿಸುತ್ತದೆ.
+
+ಪ್ರತಿ ಸಂವಹನಕ್ಕಾಗಿ ಸಂಪೂರ್ಣ ಪುಟಗಳನ್ನು ಮರುಲೋಡ್ ಮಾಡುವ ಪರಿಕಲ್ಪನೆ ಇರುವ ಸಾಂಪ್ರದಾಯಿಕ ವೆಬ್ಸೈಟ್ಗಳಿಗೆ ಬದಲಾಗಿ, ಆಧುನಿಕ ವೆಬ್ ಆ್ಯಪ್ಗಳು ಬದಲಾವಣೆಗೆ ಅಗತ್ಯವಿರುವ ಭಾಗಗಳನ್ನು ಮಾತ್ರ నవೀನೀಕರಿಸುತ್ತವೆ. ಇದು ಮಿಷನ್ ಕಮೊಂಟ್ರೋಲ್ ವಿಭಿನ್ನ ಪ್ರದರ್ಶನಗಳ ಮಧ್ಯೆ ಸ್ವಿಚ್ ಮಾಡಿಕೊಳ್ಳುವ ಹಾಗೆ, ನಿರಂತರ ಸಂವಹನವನ್ನು ಕಾಪಾಡಿಕೊಂಡು, ದ್ರವ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
+
+ಇದಲ್ಲದೆ ಈ ಅನ್ನುವುದು ಬಹಳ drಬ್ರವವಾಗಿ ಏಕೆ ಡ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿದೆ ಎಂಬುದನ್ನು ನೋಡೋಣ:
+
+| ಸಾಂಪ್ರದಾಯಿಕ ಬಹು ಪುಟ ಆ್ಯಪ್ಸ್ | ಆಧುನಿಕ ಏಕ ಪುಟ ಆ್ಯಪ್ಸ್ |
+|----------------------------|-------------------------|
+| **ನವಿಗೇಶನ್** | ಪ್ರತಿಯೊಂದು ಪರದೆಯೂ ಸಂಪೂರ್ಣ ಪುಟ ಮರುಲೋಡ್ | ಕ್ಷಣಿಕ ವಿಷಯ ಸ್ವಿಚ್ |
+| **ಕಾರ್ಯಕ್ಷಮತೆ** | ಸಂಪೂರ್ಣ HTML ಡೌನ್ಲೋಡ್ನಿಂದ ನಿಧಾನ | ಭಾಗಶಃ ನವೀಕರಣಗಳಿಂದ ವೇಗವಾಗಿ |
+| **ಬಳಕೆದಾರ ಅನುಭವ** | ಜಾರ్గಿಂಗ್ ಪುಟ ಗಾಳಿಸುವಿಕೆಗಳು | ನಿಘಂಟಾಗಿಯೂ ಆ್ಯಪ್ ಹೋಲಿದ ಟ್ರಾನ್ಸಿಷನ್ಗಳು |
+| **ಡೇಟಾ ಹಂಚಿಕೆ** | ಪುಟಗಳ ಮಧ್ಯೆ ಕಠಿಣ | ಸುಲಭ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ |
+| ** ಅಭಿವೃದ್ಧಿ ** | ಬಹು HTML ಕಡತೆಗಳನ್ನು ನಿರ್ವಹಣೆ | ಡೈನಾಮಿಕ್ ಟೆಂಪ್ಲೇಟ್ಗಳೊಂದಿಗೆ ಒಂಟಿ HTML |
+
+**ರೂಪಾಂತರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+- **ಸಾಂಪ್ರದಾಯಿಕ ಆ್ಯಪ್ಗಳು** ಪ್ರತಿಯೊಂದು ನವಿಗೇಶನ್ ಕ್ರಿಯೆಗೆ ಸರ್ವರ್ ವಿನಂತಿಗಳನ್ನು ಅಗತ್ಯವಿರುತ್ತವೆ
+- **ಆಧುನಿಕ SPAs** ಒಂದು ಬಾರಿ ಲೋಡ್ ಆಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ವಿಷಯವನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ನವೀಕರಿಸುತ್ತವೆ
+- **ಬಳಕೆದಾರರ ನಿರೀಕ್ಷೆಗಳು** ಈಗ ತಕ್ಷಣದ, ನಿರಂತರ ಸಂವಹನಗಳಿಗೆ ಮೆಚ್ಚುಗೆ ನೀಡುತ್ತವೆ
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರಯೋಜನಗಳು** ಬ್ಯಾಂಡ್ವಿಡ್ತ್ ಕಡಿತ ಹಾಗೂ ವೇಗದ ಪ್ರತಿಕ್ರಿಯೆಗಳು
+
+ಈ ಪಾಠದಲ್ಲಿ, ನಮ್ಮು ಬಹು ಪರದೆಗಳೊಂದಿಗೆ ಒಂದೇ ಕಾಂಟಿನ್ಯೂಸ್ ಫ್ಲೋ ಹೊಂದಿರುವ ಬ್ಯಾಂಕಿಂಗ್ ಆ್ಯಪ್ ಹತೋಟಿ ಮಾಡೋಣ. ವೈಜ್ಞಾನಿಕರು ವಿವಿಧ ಪ್ರಯೋಗಗಳಿಗೆ ಮರುರಚಿಸಲು ಸಾಧ್ಯವಾದ ಮಾಯಾ ಸಾಧನಗಳನ್ನು ಬಳಸುವ ಹಾಗೆ, ನಾವು HTML ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ನಿರ್ಬಂಧಿತ ಘಟಕಗಳಾಗಿ ಬಳಸಿಕೊಂಡು ಅವುಗಳನ್ನು ನಾವು ಬೇಕಾದಂತೆ ಪ್ರದರ್ಶಿಸೋಣ.
+
+ನೀವು HTML ಟೆಂಪ್ಲೇಟ್ಗಳೊಂದಿಗೆ (ಸೇರಿಸಬಹುದಾದ ಬ್ಲೂಪ್ರಿಂಟ್ಗಳು), ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾರ್ಗಸೂಚಿ (ಪರದೆಗಳ ನಡುವೆ ಸ್ವಿಚ್ ಮಾಡುವ ವ್ಯವಸ್ಥೆ), ಮತ್ತು ಬ್ರೌಸರ್ ಇತಿಹಾಸ API (ಹಿಂದಿನ ಬಟನ್ ಅಭಿವೃದ್ದಿಯಾಗುತ್ತದೆ) ಸಹಿತ ಕೆಲಸ ಮಾಡುತ್ತೀರಿ. ಇವು React, Vue, Angular ಮತ್ತಿತರ ಫ್ರೇಮ್ವರ್ಕ್ಗಳಲ್ಲಿಯೇ ಬಳಸುವ ಮೂಲತತ್ವ ತಿಳಿಯುವ ವಿಧಾನಗಳಾಗಿವೆ.
+
+ಕೊನೆಯಿಗೆ, ನೀವು ವೃತ್ತಿಪರ ಏಕ ಪುಟ ಆ್ಯಪ್ ತತ್ವಗಳನ್ನು ತೋರಿಸುವ ಕಾರ್ಯನಿರತ ಬ್ಯಾಂಕಿಂಗ್ ಆ್ಯಪ್ ಹೊಂದಿರುತ್ತೀರಿ.
+
+```mermaid
+mindmap
+ root((Single-Page Applications))
+ Architecture
+ Template System
+ Client-side Routing
+ State Management
+ Event Handling
+ Templates
+ ಮರುಬಳಕೆಗೊಡಬಹುದಾದ ಘಟಕಗಳು
+ ಗತಿಶೀಲ ವಿಷಯ
+ DOM ಅನುಷ್ಠಾನ
+ ವಿಷಯ ಬದಲಾವಣೆ
+ Routing
+ URL ನಿರ್ವಹಣೆ
+ ಇತಿಹಾಸ API
+ ನ್ಯಾವಿಗೇಶನ್ ಲಾಜಿಕ್
+ ಬ್ರೌಸರ್ ಇಂಟಿಗ್ರೇಶನ್
+ User Experience
+ ವೇಗದ ನ್ಯಾವಿಗೇಶನ್
+ ಸೊಗಸಾದ ಪರಿವರ್ತನೆಗಳು
+ ಸಕಲ ಸ್ಥಿತಿ
+ ಆಧುನಿಕ ಸಂವಹನಗಳು
+ Performance
+ ಕಡಿತಗೊಂಡ ಸರ್ವರ್ ವಿನಂತಿಗಳು
+ ವೇಗವಾದ ಪುಟ ಪರಿವರ್ತನೆಗಳು
+ ಸಮರ್ಥ ಸಂಪನ್ಮೂಲ ಬಳಕೆ
+ ಉತ್ತಮ ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆ
+```
+## ಮುಂಚಿನ ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಮುಂಚಿನ ಪಾಠ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/41)
+
+### ನೀವು ಹೊಂದಬೇಕಾದವುಗಳೇನು
+
+ನಮಗೆ ನಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಆ್ಯಪ್ ಪರೀಕ್ಷಿಸಲು ಒಂದು ಸ್ಥಳೀಯ ವೆಬ್ ಸರ್ವರ್ ಬೇಕಾಗುತ್ತದೆ – ಬೆದರಿಸಿಕೊಳ್ಳಬೇಡಿ, ಇದು ಬಲ್ಲುದಕ್ಕಿಂತ ಸುಲಭ! ನೀವು ಇದನ್ನು ಹೊಂದಿರದಿದ್ದರೆ, [Node.js](https://nodejs.org) ಅನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್ನಿಂದ `npx lite-server` ನಡಹಿಸಿ. ಈ ಸರಳ ಕಮಾಂಡ್ ಸ್ಥಳೀಯ ಸರ್ವರ್ ಸ್ಥಾಪಿಸಿ ನಿಮ್ಮ ಆ್ಯಪ್ ಅನ್ನು ಬ್ರೌಸರ್ನಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ತೆರೆದಿಡುತ್ತದೆ.
+
+### ತಯಾರಿ
+
+ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ನಲ್ಲಿ `bank` ಎಂಬ ಫೋಲ್ಡರ್ ಮತ್ತು ಅದರೊಳಗೆ `index.html` ಎಂಬ ಫೈಲ್ ರಚಿಸಿ. ನಾವು ಈ HTML [ಬಾಯ್ಲರ್ಪ್ಲೇಟ್](https://en.wikipedia.org/wiki/Boilerplate_code) ಇಂದ ಆರಂಭಿಸೋಣ:
+
+```html
+
+
+
+ Bank App
+
+
+
+
+
+```
+
+**ಇದು ಬಾಯ್ಲರ್ ಪ್ಲೇಟ್ ಕೊಡುವದು:**
+- ಸೂಕ್ತ DOCTYPE ಸೂಚನೆಯೊಂದಿಗೆ HTML5 ಡಾಕ್ಯುಮೆಂಟ್ ರಚನೆ ಮಾಡುತ್ತದೆ
+- ಅಂತರರಾಷ್ಟ್ರೀಯ ಪಠ್ಯ ಬೆಂಬಲಕ್ಕಾಗಿ UTF-8 ಅಕ್ಷರ ಎನ್ಕೋಡಿಂಗ್ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ
+- ಮೊಬೈಲ್ ಹೊಂದಾಣಿಕೆಯViewport ಮेटಾ ಟ್ಯಾಗ್ ಬಳಸಿ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಡಿಸೈನ್ ಅನುಮತಿಸುತ್ತದೆ
+- ಬ್ರೌಸರ್ ಟ್ಯಾಬಿನಲ್ಲಿ ಕಾಣಿಸುವ ವಿವರಣಾತ್ಮಕ ಶೀರ್ಷಿಕೆ ಸೃಷ್ಟಿಸುತ್ತದೆ
+- ನಮ್ಮ ಆ್ಯಪ್ ನಿರ್ಮಿಸಲು ಸ್ವಚ್ಛವಾದ ಬಾಡಿ ವಿಭಾಗವನ್ನು ರಚಿಸುತ್ತದೆ
+
+> 📁 **ಪ್ರಾಜೆಕ್ಟ್ ಕ್ಕೆ ಕೆಳಗಿನ ಸಂರಚನೆ ಇದೆ preview**
+>
+> **ಈ ಪಾಠದ ಕೊನೆಯಲ್ಲಿ, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಒಳಗೊಂಡಿರಲಿದೆ:**
+> ```
+> bank/
+> ├── index.html
+> ├── app.js
+> └── style.css
+> ```
+>
+> **ಫೈಲ್ ಜವಾಬ್ದಾರಿಗಳು:**
+> - **index.html**: ಎಲ್ಲಾ ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ಒಳಗೊಂಡಿದ್ದು ಆ್ಯಪ್ ರಚನೆ ನೀಡುತ್ತದೆ
+> - **app.js**: ಮಾರ್ಗಸೂಚಿ, ನವಿಗೇಶನ್, ಮತ್ತು ಟೆಂಪ್ಲೇಟು ನಿರ್ವಹಣೆಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ
+> - **ಟೆಂಪ್ಲೇಟ್ಗಳು**: ಲಾಗಿನ್, ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಮತ್ತು ಇತರೆ ಪರದೆಗಳಿಗೆ UI ವಿನ್ಯಾಸವನ್ನು ಸೂಚಿಸುತ್ತವೆ
+
+---
+
+## HTML ಟೆಂಪ್ಲೇಟ್ಗಳು
+
+ಟೆಂಪ್ಲೇಟ್ಗಳು ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಮೂಲಭೂತ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತವೆ. ಗುಟೆನ್ಬರ್ಗ್ 1440 ರಲ್ಲಿ ಚಲಿಸಲು ಸಾಧ್ಯವಾದ ಪ್ರಿಂಟಿಂಗ್ ಆವಿಷ್ಕರಿಸಿದ್ದಾಗ, ಸಂಪೂರ್ಣ ಪುಟಗಳನ್ನು ತೆಗೆಯುವ ಬದಲು ಮತ್ತೆಬಾರ್ನಾಗಿ ಬಳಸಬಹುದಾದ ಅಕ್ಷರ ಬ್ಲಾಕ್ಗಳನ್ನು ರಚಿಸಲು ಕಂಡುಹಿಡಿದು ಅದನ್ನು ಅಗತ್ಯವಾಗಿ ಅಳವಡಿಸತಕ್ಕಂತೆ ವ್ಯವಸ್ಥೆ ಮಾಡಿದರು. HTML ಟೆಂಪ್ಲೇಟ್ಗಳೂ ಇದೇ ತತ್ವದ ಮೇಲೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ – ಪ್ರತಿ ಪರದೆಗೆ পৃথक HTML ಫೈಲ್ ರಚಿಸುವ ಬದಲಾಗಿ, ಅವು ಬಳಸಲು ಆಗುವ ರಚನೆಗಳನ್ನು ಪರಿಗಣಿಸಿ ಬೇಕಾದಾಗ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
+
+```mermaid
+flowchart TD
+ A["📋 ಟೆಂಪ್ಲೇಟ್ ವ್ಯಾಖ್ಯಾನ"] --> B["💬 ಡಿಒಎಂನಲ್ಲಿ ಮರೆಮಚಿವೆ"]
+ B --> C["🔍 ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಟೆಂಪ್ಲೇಟ್ ಹುಡುಕುತ್ತದೆ"]
+ C --> D["📋 ಟೆಂಪ್ಲೇಟ್ ವಿಷಯವನ್ನು ನಕಲಿಸಿ"]
+ D --> E["🔗 ದೃಶ್ಯಮಾನದ ಡಿಒಎಂಗಳಿಗೆ ಜೋಡಿಸಿ"]
+ E --> F["👁️ ಬಳಕೆದಾರ ವೀಕ್ಷಿಸುತ್ತಾನೆ ವಿಷಯ"]
+
+ G["ಲಾಗಿನ್ ಟೆಂಪ್ಲೇಟ್"] --> A
+ H["ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಟೆಂಪ್ಲೇಟ್"] --> A
+ I["ಭವಿಷ್ಯ ಟೆಂಪ್ಲೇಟುಗಳು"] --> A
+
+ style A fill:#e3f2fd
+ style D fill:#e8f5e8
+ style F fill:#fff3e0
+ style B fill:#f3e5f5
+```
+ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ನಿಮ್ಮ ಆ್ಯಪ್ನ ವಿಭಿನ್ನ ಭಾಗಗಳ ಬ್ಲೂಪ್ರಿಂಟ್ಗಳಾಗಿ ಗ್ರೀತಿಯ ಬಗ್ಗೆ ಯೋಚಿಸಿ. ನಿರ್ಮಾಪಕರು ಒಂದು ಯೋಜನೆಯನ್ನು ಸೃಷ್ಟಿಸಿ ಅದನ್ನು ಹಲವಾರು ಬಾರಿ ಬಳಸುವಂತೆ, ನಾವು ಕೂಡ ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ಒಮ್ಮೆ ರಚಿಸಿ ಅವುಗಳನ್ನು ಆಗಾಗ್ಗೆ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತೇವೆ. ಬ್ರೌಸರ್ ಈ ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ಸ್ಕ್ರೀನ್ನಲ್ಲಿ ತೋರಿಸುತ್ತಿಲ್ಲ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಕ್ರಿಯೆಯ ವೇಳೆ ಅವು ಸಕ್ರಿಯಗೊಳ್ಳುತ್ತವೆ.
+
+ಒಂದು ವೆಬ್ ಪುಟಕ್ಕೆ ಬಹು ಸ್ಕ್ರೀನ್ ಗಳು ಬೇಕಾದರೆ, ಪ್ರತಿಯೊಂದು ಪರದೆಗಾಗಿ ಒಂದು HTML ಫೈಲ್ ರಚಿಸುವ ಒಂದು ಪರಿಹಾರ ಇರಬಹುದು. ಆದರೆ ಇದರಿಂದ ಕೆಲವು ಅಸೌಕರ್ಯಗಳು ಇವೆ:
+
+- ಸ್ಕ್ರೀನ್ ಬದಲಿಸುವಾಗ ಸಂಪೂರ್ಣ HTML ನವೀಕರಿಸಬೇಕಾಗುವದು, ಇದು ನಿಧಾನವಾಗಬಹುದು.
+- ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ಗಳ ನಡುವಿನ ಡೇಟಾ ಹಂಚಿಕೊಳ್ಳುವುದು ಕಷ್ಟ.
+
+ಮತ್ತೊಂದು ವಿಧಾನವೆಂದರೆ ಒಂದೇ HTML ಫೈಲ್ ಇರಿಸುವುದು, ಮತ್ತು ಒಂದাধিক [HTML ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು](https://developer.mozilla.org/docs/Web/HTML/Element/template) `` ಅಂಶ ಬಳಸಿ ನಿರ್ಧರಿಸುವುದು. ಟೆಂಪ್ಲೇಟು ಎಂದರೆ ಬ್ರೌಸರ್ ತೋರಿಸುವುದಿಲ್ಲದ, ಆದರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಸಮಯದಲ್ಲಿ ಜೀವಂತವಾಗಿ ತೋರಿಸಬಹುದಾದ ಪುನಃಬಳಕೆಗೊಳ್ಳಬಹುದಾದ HTML ಬ್ಲಾಕ್.
+
+### ಮಾಡೋಣ
+
+ನಾವು ಎರಡು ಪ್ರಮುಖ ಪರದೆಗಳೊಂದಿಗೆ ಬ್ಯಾಂಕ್ ಆ್ಯಪ್ ಹೆಟ್ಟು ಮಾಡೋಣ: ಲಾಗಿನ್ ಪುಟ ಮತ್ತು ಡ್ಯಾಶ್ಬೋರ್ಡ್. ಮೊದಲಿಗೆ, ನಮ್ಮ HTML ಬಾಡಿಗೆ ಒಂದು ಪ್ಲೇಸ್ಹೋಲ್ಡರ್ ಅಂಶ ಸೇರಿಸೋಣ – ಇಲ್ಲಿ ನಮ್ಮ ಎಲ್ಲಾ ವಿಭಿನ್ನ ಪರದೆಗಳು ಪ್ರದರ್ಶಿಸಲ್ಪಡುವವು:
+
+```html
+Loading...
+```
+
+**ಈ ಪ್ಲೇಸ್ಹೋಲ್ಡರ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳೋಣ:**
+- "app" ಎಂಬ ಐಡಿ ಸಹಿತ ಕನ್ಟೇನರ್ ರಚಿಸುತ್ತದೆ, ಎಲ್ಲ ಪರದೆಗಳು ಇಲ್ಲಿ ತೋರಿಸಲಾಗುತ್ತವೆ
+- ಮೊದಲ ಪರದೆ ಆರಂಭಿಸುವವರೆಗೆ ಲೋಡ್ ಆಗುತ್ತಿರುವ ಸಂದೇಶವನ್ನು ತೋರಿಸುತ್ತದೆ
+- ಡೈನಾಮಿಕ್ ವಿಷಯಕ್ಕಾಗಿ ಒಬ್ಬ mounting point ಒದಗಿಸುತ್ತದೆ
+- `document.getElementById()` ಬಳಸಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಿಂದ ತಲುಪಲು ಸುಲಭವಾದದ್ದು
+
+> 💡 **ಪರಿಪಾಕ ಸಲಹೆ**: ಈ ಅಂಶದ ವಿಷಯ ಬದಲಾಯಿಸಲಾಗುವ್ದರಿಂದ, ಆ್ಯಪ್ ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ತೋರಿಸಲು ಲೋಡ್ ಸಂದೇಶ ಅಥವಾ ಸೂಚಕ ಹಾಕಬಹುದು.
+
+ಬಂದ ಮೇಲೆ, ಅಥ್ವಾ ಲಾಗಿನ್ ಪುಟಕ್ಕೆ HTML ಟೆಂಪ್ಲೇಟನ್ನು ಕೆಳಗೆ ಸೇರಿಸೋಣ. ಪ್ರಸ್ತುತ, ನಮಗೆ ಅಲ್ಲಿ ಶೀರ್ಷಿಕೆ ಮತ್ತು ನವಿಗೇಶನ್ ಮಾಡಲು ಬಳಸುವ ಲಿಂಕ್ ಇರುವ ವಿಭಾಗ ಮಾತ್ರ ಇರಲಿದೆ:
+
+```html
+
+ Bank App
+
+
+```
+
+**ಈ ಲಾಗಿನ್ ಟೆಂಪ್ಲೇಟು ವಿವರಣೆ:**
+- "login" ಎಂಬ ವಿಶಿಷ್ಟ ಗುರುತಿನೊಂದಿಗೆ ಟೆಂಪ್ಲೇಟು ವಿವರಣೆ ಮಾಡುತ್ತದೆ, ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗಾಗಿ ಟಾರ್ಗೆಟ್ ಆಗುತ್ತದೆ
+- ಆ್ಯಪ್ಬ್ರಾಂಡಿಂಗ್ ಸ್ಥಾಪಿಸುವ ಮುಖ್ಯ ಶೀರ್ಷಿಕೆಯೊಂದಿಗೆ ಒಳಗೊಂಡಿದೆ
+- ಸಂಬಂಧಿತ ವಿಷಯಗಳನ್ನು ಗುಂಪಾಗಿಡಲು ಅರ್ಥಪೂರ್ಣ `` ಅಂಶ ಹೊಂದಿದೆ
+- ಬಳಕೆದಾರರನ್ನು ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗೆ ಮಾರ್ಗದರ್ಶನ ಮಾಡುವ ನವಿಗೇಶನ್ ಲಿಂಕ್ ಒದಗಿಸುತ್ತದೆ
+
+ನಂತರ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಪುಟಕ್ಕೆ ಇನ್ನೊಂದು HTML ಟೆಂಪ್ಲೇಟು ಸೇರಿಸಲಿದ್ದೇವೆ. ಈ ಪುಟದಲ್ಲಿ ವಿಭಿನ್ನ ವಿಭಾಗಗಳು ಇರುತ್ತವೆ:
+
+- ಶೀರ್ಷಿಕೆ, ಶೀರ್ಷಿಕೆ ಮತ್ತು ಲಾಗ್ಅೌಟ್ ಲಿಂಕ್ ನೊಂದಿಗೆ
+- ಬ್ಯಾಂಕ್ ಖಾತೆಯ ಪ್ರಸ್ತುತ ಬಾಕಿ
+- ವ್ಯವಹಾರಗಳ ಪಟ್ಟಿ, ಟೇಬಲ್ನಲ್ಲಿ ಪ್ರದರ್ಶನಗೊಳ್ಳುತ್ತದೆ
+
+```html
+
+
+
+
+ Transactions
+
+
+
+ Date
+ Object
+ Amount
+
+
+
+
+
+```
+
+**ಈ ಡ್ಯಾಶ್ಬೋರ್ಡ್ನ ಪ್ರತಿ ಭಾಗದ ಅರ್ಥ:**
+- ನವಿಗೇಶನ್ ಒಳಗೊಂಡ ಅರ್ಥಪೂರ್ಣ `` ಅಂಶದಿಂದ ಪುಟದ ರಚನೆ
+- ಬ್ರ್ಯಾಂಡಿಂಗ್ ಕಾಪಾಡಲು ಎಲ್ಲಾ ಪರದೆಗಳಲ್ಲಿ ಆ್ಯಪ್ ಶೀರ್ಷಿಕೆ ಪ್ರದರ್ಶನೆ
+- ಲಾಗ್ಅೌಟ್ ಲಿಂಕ್ ನೀಡುವುದರಿಂದ ಲಾಗಿನ್ ಪರದೆಗೆ ಮರಳುವ ಮಾರ್ಗವು ಇದೆ
+- ಬಾಕಿ ವಿಶೇಷ ಸೆಕ್ಷನ್ನಲ್ಲಿ ತೋರಿಸಲಾಗುತ್ತದೆ
+- ವ್ಯವಹಾರ ಡೇಟಾ ಸರಿಯಾದ HTML ಟೇಬಲ್ ಬಳಸಿ ಒಕೆಯಾಗಿದೆ
+- ಡೇಟು, ಆಬ್ಜೆಕ್ಟ್ ಮತ್ತು ಮೊತ್ತ ಕಾಲಮ್ಗಳಿಗಾಗಿ ಟೇಬಲ್ ಶಿರೋನಾಮೆಗಳು
+- ಡೈನಾಮಿಕ್ ವಿಷಯ ಸೇರಿಸುವುದಕ್ಕೆ ಟೇಬಲ್ ಬಾಡಿ ಖಾಲಿ ಇಟ್ಟುಕೊಳ್ಳಲಾಗಿದೆ
+
+> 💡 **ಪರಿಪಾಕ ಸಲಹೆ**: HTML ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ರಚಿಸುವಾಗ, ಅವು ಹೇಗಿರಬಹುದು ಎಂದು ನೋಡಲು, `` ಮತ್ತು ` ` ಸಾಲುಗಳನ್ನು `` ಒಳಗೊಂಡು ಕಾಮೆಂಟ್ ಮಾಡಬಹುದು.
+
+### 🔄 **Pedagogical Check-in**
+**ಟೆಂಪ್ಲೇಟು ವ್ಯವಸ್ಥೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ವಯಿಸುವ ಮೊದಲು ಈ ವಿಷಯಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳಿ:
+- ✅ ಟೆಂಪ್ಲೇಟುಗಳು ಸಾಮಾನ್ಯ HTML ಅಂಶಗಳಿಂದ ಹೇಗೆ ಭಿನ್ನವಾಗಿವೆ
+- ✅ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಕ್ರಿಯಗೊಳಿಸುವ ತನಕ ಟೆಂಪ್ಲೇಟುಗಳು ದೃಶ್ಯಮಾನವಾಗದೆ ಇರುತ್ತವೆ
+- ✅ ಟೆಂಪ್ಲೇಟುಗಳಲ್ಲಿ ಅರ್ಥಪೂರ್ಣ HTML ರಚನೆಯ ಮಹತ್ವ
+- ✅ ಟೆಂಪ್ಲೇಟುಗಳು ಪುನಃಬಳಕೆಗೊಳ್ಳುವ UI ಘಟಕಗಳನ್ನು ಹೇಗೆ ಸಾಧ್ಯಮಾಡುತ್ತವೆ
+
+**ತಕ್ಷಣ ಸ್ವಯಂ ಪರೀಕ್ಷೆ**: ನಿಮ್ಮ HTMLನೊಳಗಿನ `` ಟ್ಯಾಗ್ಗಳನ್ನು ತೆಗೆದುಹಾಕಿದರೆ ಏನಾಗುತ್ತದೆ?
+*ಉತ್ತರ: ವಿಷಯ ಲಭ್ಯವಾಗುತ್ತದೆ ಮತ್ತು ಅದು ಟೆಂಪ್ಲೇಟು ಕಾರ್ಯಕ್ಷಮತೆ ಕಳೆದುಕೊಂಡು ಸಾದಾ HTML ಆಗುತ್ತದೆ*
+
+**ವಾಸ್ತುಶಿಲ್ಪ ಪ್ರಯೋಜನಗಳು**: ಟೆಂಪ್ಲೇಟುಗಳು ಒದಗಿಸುವುದು:
+- **ಪುನಃಬಳಕೆ**: ಒಬ್ಬ ವಿವರಣೆ, ಬಹಳ ಸರಬರಾಜುಗಳು
+- **ಕಾರ್ಯಕ್ಷಮತೆ**: ಅನವಶ್ಯಕ HTML ಪಾರ್ಸಿಂಗ್ ಇಲ್ಲ
+- **ನಿರ್ವಹಣೆ ಅನುಕೂಲತೆ**: ಕೇಂದ್ರಗೊಳ್ಳುವ UI ರಚನೆ
+- **ಲಚೀಲತೆ**: ಡೈನಾಮಿಕ್ ವಿಷಯ ಸ್ವಿಚ್
+
+✅ ನಾವು ಟೆಂಪ್ಲೇಟುಗಳಲ್ಲಿ `id` ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುವುದಕ್ಕೆ ಕಾರಣವೇನು? ನಾವು ಕ್ಲಾಸ್ಲೆಗಳಂತೆ ಇನ್ನೇನು ಬಳಸಬಹುದೇ?
+
+## ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಟೆಂಪ್ಲೇಟ್ಗಳಿಗೆ ಜೀವ ತುಂಬೋಣ
+
+ ಈಗ ನಮ್ಮ ಟೆಂಪ್ಲೇಟುಗಳನ್ನು ಕಾರ್ಯನಿರತಗೊಳಿಸಬೇಕು. 3D ಪ್ರಿಂಟರ್ ಡಿಜಿಟಲ್ ಬ್ಲೂಪ್ರಿಂಟ್ ತೆಗೆದುಕೊಂಡು ಭೌತಿಕ ವಸ್ತುವನ್ನಾಗಿ ಮಾಡೋಂತೆಯೇ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಮ್ಮ ಅಸ್ಪಷ್ಟ ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ಗಮನಿಸಬಹುದಾದ, ಕ್ರಿಯಾಶೀಲ ಅಂಶಗಳಾಗಿ ರೂಪಿಸಿಕೊಳ್ಳುತ್ತದೆ.
+
+ಈ ಪ್ರಕ್ರಿಯೆ ಮೂರನೇ ಹಂತಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ, ಇದು ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಮೂಲ ತಳತಟ್ಟಿಗೆ ಸೇರಿದೆ. ನೀವು ಈ ಮಾದರಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡ ಮೇಲೆ, ನಿಮಗೆ ಹಲವು ಫ್ರೇಮ್ವರ್ಕ್ಗಳಲ್ಲೂ ಇದನ್ನು ಗುರುತಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.
+
+ನೀವು ನಿಮ್ಮ ಪ್ರಸ್ತುತ HTML ಫೈಲ್ ಅನ್ನು ಬ್ರೌಸರ್ ನಲ್ಲಿ ಪ್ರಯತ್ನಿಸಿದರೆ, ಅದು `Loading...` ಎಂದು ತೋರಿಸಿಕೊಂಡೇ ತಂಗಿರುತ್ತದೆ. ಇದಕ್ಕಿತ್ತೆ ಕಾರಣ, ಟೆಂಪ್ಲೇಟುಗಳನ್ನು ಸೃಷ್ಟಿಸಿ ಪ್ರದರ್ಶಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ.
+
+ಟೆಂಪ್ಲೇಟುinstantiate ಮಾಡುವುದು ಸಾಮಾನ್ಯವಾಗಿ 3 ಹಂತಗಳಲ್ಲಿ ಆಗುತ್ತದೆ:
+
+1. DOMನಲ್ಲಿ ಟೆಂಪ್ಲೇಟು ಅಂಶವನ್ನು ಪಡೆದುಕೊಳ್ಳಿ, ಉದಾಹರಣೆಗೆ [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) ಬಳಸಿ.
+2. ಟೆಂಪ್ಲೇಟು ಅಂಶವನ್ನು ನಕಲುಮಾಡಿ, [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) ಬಳಸಿ.
+3. ಅದನ್ನು ದೃಷ್ಯಮಾನ ಅಂಶಕ್ಕೆ DOMಲಿ ಲಗತ್ತಿಸಿ, ಉದಾಹರಣೆಗೆ [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) ಬಳಸಿ.
+
+```mermaid
+flowchart TD
+ A[🔍 ಹಂತ 1: ಟೆಂಪ್ಲೇಟನ್ನು ಕಂಡುಹಿಡಿ] --> B[📋 ಹಂತ 2: ಟೆಂಪ್ಲೇಟನ್ನು ಕ್ಲೋನ್ ಮಾಡು]
+ B --> C[🔗 ಹಂತ 3: DOM ಗೆ ಜೋಡಿಸಿ]
+
+ A1["document.getElementById('login')"] --> A
+ B1["template.content.cloneNode(true)"] --> B
+ C1["app.appendChild(view)"] --> C
+
+ C --> D[👁️ ಬಳಕೆದಾರನಿಗೆ 템್ಪ್ಲೇಟ್ ಗೋಚರಿಸುತ್ತದೆ]
+
+ style A fill:#e1f5fe
+ style B fill:#f3e5f5
+ style C fill:#e8f5e8
+ style D fill:#fff3e0
+```
+**ಪ್ರಕ್ರಿಯೆಯ ದೃಶ್ಯ ವಿವರ:**
+- **ಹಂತ 1** : DOM ರಚನೆ ಒಳಗಿನ ಅಸ್ಪಷ್ಟ ಟೆಂಪ್ಲೇಟು ಸ್ಥಳ ಪತ್ತೆಮಾಡುತ್ತದೆ
+- **ಹಂತ 2** : ಸುರಕ್ಷಿತವಾಗಿ ಬದಲಾಯಿಸಬಹುದಾದ ಕಾರ್ಯಾನ್ವಿತ ನಕಲನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ
+- **ಹಂತ 3** : ಪ್ರತಿಯನ್ನು ದೃಶ್ಯಮಾನ ಪುಟ ಪ್ರದೇಶಕ್ಕೆ ಸೇರಿಸುತ್ತದೆ
+- **ಫಲಿತಾಂಶ**: ಬಳಕೆದಾರರು ಸಂಪರ್ಕ ಮಾಡಬಹುದಾದ ಕಾರ್ಯನಿರತ ಸ್ಕ್ರೀನ್
+
+✅ ನಾವು ಟೆಂಪ್ಲೇಟು ನಕಲುಮಾಡಬೇಕಾಗಿರುವುದು ಯಾಕೆ? ಈ ಹಂತ ತಪ್ಪಿಸಿದರೆ ಏನಾಗಬಹುದು?
+
+### ಕಾರ್ಯ
+
+ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್ನಲ್ಲಿ `app.js` ಎಂಬ ಹೊಸ ಫೈಲ್ ರಚಿಸಿ ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ HTML `` ವಿಭಾಗದಲ್ಲಿ ಆಮದುಮಾಡಿ:
+
+```html
+
+```
+
+**ಈ ಸ್ಕ್ರಿಪ್ಟ್ ಇಂಪೋರ್ಟ್ ಅರ್ಥ:**
+- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಅನ್ನು ನಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ಲಿಂಕ್ ಮಾಡುತ್ತದೆ
+- HTML ಪಾರ್ಸಿಂಗ್ ನಂತರ ಸ್ಕ್ರಿಪ್ಟ್ ನಡಿಸಲು `defer` ಗುಣಲಕ್ಷಣ ಬಳಸು ತಾನೆ
+- ಎಲ್ಲಾ DOM ಅಂಶಗಳು ಪೂರ್ಣವಾಗಿದಿಂದ ಸ್ಕ್ರಿಪ್ಟ್ ಅವುಗಳಿಗೆ ಪ್ರವೇಶ ಕೊಡುತ್ತದೆ
+- ಸ್ಕ್ರಿಪ್ಟ್ ಲೋಡ್ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸುಧಾರಿತ ಪ್ರಸಿದ್ಧ ಪದ್ಧತಿ ಅನುಸರಿಸುತ್ತವೆ
+
+ಈಗ `app.js` ನಲ್ಲಿ `updateRoute` ಎಂಬ ಹೊಸ ಫಂಕ್ಷನ್ ರಚಿಸೋಣ:
+
+```js
+function updateRoute(templateId) {
+ const template = document.getElementById(templateId);
+ const view = template.content.cloneNode(true);
+ const app = document.getElementById('app');
+ app.innerHTML = '';
+ app.appendChild(view);
+}
+```
+
+**ಹಂತ ಹಂತವಾಗಿ ಆಗುತ್ತಿರುವ ಸಂಗತಿಗಳು:**
+- ವಿಶಿಷ್ಟ ಐಡಿ ಬಳಸಿ ಟೆಂಪ್ಲೇಟು ಅಂಶ ಪತ್ತೆಮಾಡುತ್ತದೆ
+- `cloneNode(true)` ಬಳಸಿ ಟೆಂಪ್ಲೇಟು ವಿಷಯ ಗಹನ ನಕಲನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ
+- ವಿಷಯ ತೋರಿಸಲಾಗುವ ಆ್ಯಪ್ ಕನ್ಟೇನರ್ ಪತ್ತೆಮಾಡುತ್ತದೆ
+- ಆ್ಯಪ್ ಕನ್ಟೇನರ್ನ ಯಾವುದೇ ಇರಾದಾದ ವಿಷಯವನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ
+- ನಕಲಿಸಿದ ಟೆಂಪ್ಲೇಟು ವಿಷಯವನ್ನು ದೃಶ್ಯ DOMಗೆ ಸೇರಿಸುತ್ತದೆ
+
+ಈ ಫಂಕ್ಷನ್ ಅನ್ನು ಟೆಂಪ್ಲೇಟುಗಳಲ್ಲಿ ಒಂದರೊಂದಿಗೆ ಕರೆಸಿ ಫಲಿತಾಂಶ ವೀಕ್ಷಿಸಿ.
+
+```js
+updateRoute('login');
+```
+
+**ಈ ಫಂಕ್ಷನ್ ಕರೆ ಏನು ಸಾಧಿಸುತ್ತದೆ:**
+- ಐಡಿ ಯನ್ನು ಪ್ಯಾರಾಮೀಟರ್ ಆಗಿ ಪಾಸ್ಸ್ ಮಾಡಿ ಲಾಗಿನ್ ಟೆಂಪ್ಲೇಟು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ
+- ಬೇರಿ ಬೇರಿ ವಿಭಿನ್ನ ಆ್ಯಪ್ ಪರದೆಗಳ ನಡುವೆ ಸ್ವಿಚ್ ಮಾಡುವ ವಿಧಾನ ತೋರಿಸುತ್ತದೆ
+- "Loading..." ಸಂದೇಶ ಬದಲಾಗಿ ಲಾಗಿನ್ ಪರದೆ ತೋರಿಸುತ್ತದೆ
+
+✅ `app.innerHTML = '';` ಈ ಕೋಡ್ನ ಉದ್ದೇಶವೇನು? ಇದಿಲ್ಲದೆ ಏನಾಗಬಹುದು?
+
+## ಮಾರ್ಗಗಳು ರಚಿಸುವುದು
+
+ಮಾರ್ಗ ಹಾಗೂ URL ಗಳು ಸರಿಯಾದ ವಿಷಯಕ್ಕೆ ಸಂಪರ್ಕಿಸುವರೆಂದು ಅಂತರ್ಜಾಲ ಆ್ಯಪ್ನಲ್ಲಿ ಅತ್ಯವಶ್ಯ. ಪ್ರಾಚೀನ ದೂರವಾಣಿ ಆಪರೇಟರ್ಗಳು ಕಾಲ್ಗಳನ್ನು ಸರಿಯಾದ ಸ್ಥಳಕ್ಕೆ ಸಂಪರ್ಕಿಸುವಂತೆ, ಎಲ್ಲ ಈ URL ವಿನಂತಿಯನ್ನು ಸಂಬಂಧಿತ ಪರದೆಗೆ ತಲುಪಿಸುವುದು Routing.
+
+```mermaid
+flowchart LR
+ A["🌐 URL ಪಥ`](https://developer.mozilla.org/docs/Web/HTML/Element/a) ಅನ್ನು ಸ್ವತಃ ಬಳಸಿಕೊಂಡು ವಿಭಿನ್ನ URL ಗಳಿಗೆ ಹೈಪರ್ಲಿಂಕ್ಗಳು ಸೃಷ್ಟಿಸಬಹುದು, ಆದರೆ ಇದು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಬ್ರೌಸರ್ HTML ಅನ್ನು ಮರುಲೋಡ್ ಮಾಡುತ್ತದೆ. ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ರೌಟಿಂಗ್ ನಡೆಸುವಾಗ, ಈ ವರ್ತನೆಯನ್ನು ತಡೆಗಟ್ಟಲು ಕ್ಲಿಕ್ ಈವೆಂಟ್ನಲ್ಲಿ preventDefault() ಫಂಕ್ಷನ್ ಬಳಸುವುದು ಅಗತ್ಯ.
+
+### ಕಾರ್ಯ
+
+ನಾವು ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಬಳಸಬಹುದಾದ ಹೊಸ ಫಂಕ್ಷನ್ ರಚಿಸೋಣ:
+
+```js
+function navigate(path) {
+ window.history.pushState({}, path, path);
+ updateRoute();
+}
+```
+
+**ಈ ನ್ಯಾವಿಗೇಶನ್ ಫಂಕ್ಷನ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+- `history.pushState` ಬಳಸಿ ಬ್ರೌಸರ್ URL ನವೀಕರಿಸುತ್ತದೆ
+- ತಕ್ಕ ಹಿಂದಿನ/ಮುಂದಿನ ಬಟನ್ ಬೆಂಬಲಕ್ಕೂ ಬ್ರೌಸರ್ ಇತಿಹಾಸ ಸ್ಟ್ಯಾಕ್ಗೆ ಹೊಸ ಐಟಂ ಸೇರಿಸುತ್ತದೆ
+- `updateRoute()` ಕರೆ ಮಾಡಿ ತಕ್ಕ ಟೆಂಪ್ಲೇಟ್ ತೋರಿಸುತ್ತದೆ
+- ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡದೆ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ಅನುಭವವನ್ನು ಕಾಪಾಡುತ್ತದೆ
+
+ಈ ವಿಧಾನವು ಮೊದಲಿಗೆ ನೀಡಲಾದ ಮಾರ್ಗ ಆಧಾರವಾಗಿ ಪ್ರಸ್ತುತ URL ನನ್ನು ನವೀಕರಿಸಿ ನಂತರ ಟೆಂಪ್ಲೇಟ್ ನವೀಕರಿಸುತ್ತದೆ. `window.location.origin` ಪ್ರಾಪರ್ಟಿ URL ಮೂಲವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಇದರಿಂದ ನಮಗೆ ನೀಡಲಾದ ಮಾರ್ಗದಿಂದ ಸಂಪೂರ್ಣ URL ಮರುನಿರ್ಮಾಣ ಮಾಡಲು ಸಾಧ್ಯ.
+
+ಈ ಫಂಕ್ಷನ್ ಶುರು ಮಾಡಿದ ಮೇಲೆ, ನಾವು ಯಾವುದೇ ಹೆಸರಾಗದ ಮಾರ್ಗ ಬಂದರೆ ನಮ್ಮ `updateRoute` ಫಂಕ್ಷನ್ನಲ್ಲಿ ಮರುನಿರ್ದೇಶನವನ್ನು ಸೇರಿಸೋಣ.
+
+```js
+function updateRoute() {
+ const path = window.location.pathname;
+ const route = routes[path];
+
+ if (!route) {
+ return navigate('/login');
+ }
+
+ const template = document.getElementById(route.templateId);
+ const view = template.content.cloneNode(true);
+ const app = document.getElementById('app');
+ app.innerHTML = '';
+ app.appendChild(view);
+}
+```
+
+**ಪ್ರಮುಖ ಅಂಶಗಳು:**
+- ಪ್ರಸ್ತುತ ಮಾರ್ಗಕ್ಕೆ ತಕ್ಕ ಮಾರ್ಗವಿದ್ಯೆ ಇದ್ದೇ ಇದೆಯೇ ಎಂದು **ಪರಿಶೀಲನೆ**
+- ಅಮಾನ್ಯ ಮಾರ್ಗ ಪ್ರವೇಶಿಸಿದಾಗ ಲಾಗಿನ್ ಪುಟಕ್ಕೆ **ಮರುನಿರ್ದೇಶನ**
+- ಒಡೆಯದ ನ್ಯಾವಿಗೇಶನನ್ನು ತಡೆಯುವ ಫಾಲ್ಬ್ಯಾಕ್ ಮೆಕ್ಯಾನಿಸಂ **ನೀಡುತ್ತದೆ**
+- ಬಳಕೆದಾರರಿಗೆ ತಪ್ಪಾದ URL ಗಳಿದ್ದರೂ ಮಾನ್ಯ ಸ್ಕ್ರೀನ್ **ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ**
+
+ಮಾರ್ಗ ಕಂಡುಬಂದಿಲ್ಲದಿದ್ದರೆ ಈಗ ಇತ್ತೀಚೆಗೆ `login` ಪುಟಕ್ಕೆ ತಿರುಗಿಸುತ್ತೇವೆ.
+
+ಇಗೋ ಲಿಂಕ್ ಕ್ಲಿಕ್ ಆಗುವಾಗ URL ಅನ್ನು ಪಡೆಯುವ ಹಾಗೂ ಬ್ರೌಸರ್ ನ ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ವರ್ತನೆಯನ್ನು ತಡೆಗಿಡುವ ಫಂಕ್ಷನ್ ರಚಿಸೋಣ:
+
+```js
+function onLinkClick(event) {
+ event.preventDefault();
+ navigate(event.target.href);
+}
+```
+
+**ಈ ಕ್ಲಿಕ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ವಿವರಿಸುವುದು:**
+- ಬ್ರೌಸರ್ ನ ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ವರ್ತನೆಯನ್ನು `preventDefault()` ಬಳಸಿ **ತಡೆದುಕೊಳ್ಳುತ್ತದೆ**
+- ಕ್ಲಿಕ್ ಮಾಡಿದ ಲಿಂಕ್ ಅಂಶದಿಂದ ಗಮ್ಯಸ್ಥಾನ URL ಅನ್ನು **ಎತ್ತುತ್ತದೆ**
+- ಪುಟ ತೆರೆಯದೆ ನಮ್ಮ ಕಸ್ಟಮ್ ನ್ಯಾವಿಗೇಟು ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯುತ್ತದೆ
+- ಮೃದುವಾದ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ಅನುಭವವನ್ನು **ಉಳಿಸುತ್ತದೆ**
+
+```html
+ Login
+...
+Logout
+```
+
+**ಈ `onclick` ಬಿಗಿತ ಏನು ಸಾಧಿಸುತ್ತದೆ:**
+- ಪ್ರತಿಯೊಂದು ಲಿಂಕ್ ಅನ್ನು ನಮ್ಮ ಕಸ್ಟಮ್ ನ್ಯಾವಿಗೇಶನ್ ವ್ಯವಸ್ಥೆಗೆ **ಸಂಬಂಧಿಸುತ್ತದೆ**
+- ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೆ `onLinkClick` ಫಂಕ್ಷನ್ಗೆ **ಹಸ್ತಾಂತರಿಸುತ್ತದೆ**
+- ಪುಟ ರೀಲೋಡ್ ಇಲ್ಲದೆ ಸ್ಮೂತ್ ನ್ಯಾವಿಗೇಶನ್ **ಸೌಲಭ್ಯ ಒದಗಿಸುತ್ತದೆ**
+- ಬಳಕೆದಾರರು ಬುಕ್ಮಾರ್ಕ್ ಅಥವಾ ಹಂಚಿಕೊಳ್ಳಬಹುದಾದ ಸರಿಯಾದ URL ರಚನೆಯನ್ನು **ಕಾಪಾಡುತ್ತದೆ**
+
+[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ಗುಣಲಕ್ಷಣವು ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಅನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ಗೆ ಬಿಗಿತ ಮಾಡುತ್ತದೆ, ಇಲ್ಲಿ `navigate()` ಫಂಕ್ಷನ್ ಕರೆ.
+
+ಈ ಲಿಂಕ್ಗಳ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ, ಈಗ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನ ವಿವಿಧ ಸ್ಕ್ರೀನ್ಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬಹುದು.
+
+✅ `history.pushState` ವಿಧಾನವು HTML5 ನಿಯಮಾವಳಿಯಲ್ಲಿ ಭಾಗವಾಗಿದೆ ಮತ್ತು [ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ](https://caniuse.com/?search=pushState) ಜಾರಿಗೊಳಿಸಲಾಗಿದೆ. ಹಳೆಯ ಬ್ರೌಸರ್ಗಳಿಗೆ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, ಈ API ನ ಬದಲು ಒಂದು ತಂತ್ರವನ್ನು ಉಪಯೋಗಿಸಬಹುದು: ಮಾರ್ಗದ ಮುನ್ನ [ಹ್ಯಾಶ್ (`#`)](https://en.wikipedia.org/wiki/URI_fragment) ಬಳಸಿ ಸಾಮಾನ್ಯ ಅಂಕರ್ ನ್ಯಾವಿಗೇಶನ್ಗಾಗಿ ರೌಟಿಂಗ್ ಜಾರಿಗೊಳಿಸಬಹುದು ಮತ್ತು ಪುಟ ರೀಲೋಡ್ ಆಗುವುದಿಲ್ಲ.
+
+## ಹಿಂಬದಿಗೆ ಮತ್ತು ಮುಂದಕ್ಕೆ ಬಟನ್ಗಳ ಕಾರ್ಯಕ್ಷಮತೆ
+
+ಹಿಂಬದಿ ಮತ್ತು ಮುಂದಿನ ಬಟನ್ಗಳು ವೆಬ್ ಬ್ರೌಸಿಂಗ್ಗೆ ಅತಿ ಮುಖ್ಯ, ಹಾಗಾಗಿ NASA ಮಿಷನ್ ನಿಯಂತ್ರಕರಂತೆ ಬಳಕೆದಾರರು ಹಿಂದಿನ ವ್ಯವಸ್ಥೆ ಸ್ಥಿತಿಗಳನ್ನು ಪರಿಶೀಲಿಸಬಹುದು. ಬಳಕೆದಾರರು ಈ ಬಟನ್ಗಳು ಕೆಲಸ ಮಾಡಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸುವರು, ಆದರೆ ಈ ಬಟನ್ಗಳು ಕೆಲಸ ಮಾಡದಿದ್ದರೆ, ನಿರೀಕ್ಷಿತ ಬ್ರೌಸಿಂಗ್ ಅನುಭವ ಮುರಿಯುತ್ತದೆ.
+
+ನಮ್ಮ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ಗೆ ಇದರ ಬೆಂಬಲಕ್ಕಾಗಿ ಹೆಚ್ಚುವರಿ ವ್ಯವಸ್ಥೆ ಬೇಕಾಗಿದೆ. ಬ್ರೌಸರ್ ಒಂದು ಇತಿಹಾಸ ಸ್ಟ್ಯಾಕ್ (ನಾವು `history.pushState` ಬಳಸಿ ಸೇರಿಸುತ್ತಿದ್ದೇವೆ) ನಿರ್ವಹಿಸುತ್ತದೆ, ಆದರೆ ಬಳಕೆದಾರರು ಈ ಇತಿಹಾಸದಿಂದ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುತ್ತಿರುವಾಗ, ನಮ್ಮ ಅಪ್ ಬಳಸಿದ್ದು ತಕ್ಕಂತೆ ಪ್ರದರ್ಶಿತ ವಿಷಯವನ್ನು ನವೀಕರಿಸಬಲ್ಲದು.
+
+```mermaid
+sequenceDiagram
+ participant User
+ participant Browser
+ participant App
+ participant Template
+
+ User->>Browser: ಕ್ಲಿಕ್ "ಲಾಗಿನ್" ಲಿಂಕ್
+ Browser->>App:.onclick ಈವೆಂಟ್ ಪ್ರಾರಂಭಗೊಂಡಿತು
+ App->>App: preventDefault() & navigate('/dashboard')
+ App->>Browser: history.pushState('/dashboard')
+ Browser->>Browser: URL ಅಪ್ಡೇಟ್ ಆಗಿದೆ /dashboard ಗೆ
+ App->>App: updateRoute() ಕರೆ ಮಾಡಿತು
+ App->>Template: ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಟೆಂಪ್ಲೇಟು ಹುಡುಕಿ & ಕ್ಲೋನ್ ಮಾಡಿ
+ Template->>App: ಕ್ಲೋನ್ ಮಾಡಿದ ವಿಷಯವನ್ನು ಹಿಂತಿರುಗಿಸಿ
+ App->>Browser: ಆಪ್ ವಿಷಯವನ್ನು ಟೆಂಪ್ಲೇಟಿನಿಂದ ಬದಲಾಯಿಸಿ
+ Browser->>User: ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಪರದೆಯನ್ನು ತೋರಿಸಿ
+
+ Note over User,Template: ಬಳಕೆದಾರ ಬ್ರೌಸರ್ ಬ್ಯಾಕ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುತ್ತಾನೆ
+
+ User->>Browser: ಬ್ಯಾಕ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದನು
+ Browser->>Browser: ಇತಿಹಾಸವು /login ಗೆ ಹಿಂದಕ್ಕೆ ಸರಿದಿದೆ
+ Browser->>App: popstate ಈವೆಂಟ್ ಹೊಡೆಯಿತು
+ App->>App: updateRoute() ಸ್ವತಃ ಕರೆ ಮಾಡಿತು
+ App->>Template: ಲಾಗಿನ್ ಟೆಂಪ್ಲೇಟು ಹುಡುಕಿ & ಕ್ಲೋನ್ ಮಾಡಿ
+ Template->>App: ಕ್ಲೋನ್ ಮಾಡಿದ ವಿಷಯವನ್ನು ಹಿಂತಿರುಗಿಸಿ
+ App->>Browser: ಆಪ್ ವಿಷಯವನ್ನು ಟೆಂಪ್ಲೇಟಿನಿಂದ ಬದಲಾಯಿಸಿ
+ Browser->>User: ಲಾಗಿನ್ ಪರದೆಯನ್ನು ತೋರಿಸಿ
+```
+**ಪ್ರಮುಖ ಸಂವಹನ ಬಿಂದುಗಳು:**
+- ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳು (ಕ್ಲಿಕ್ಗಳು, ಬ್ರೌಸರ್ ಬಟನ್ಗಳು) ನ್ಯಾವಿಗೇಶನ್ ಪ್ರಚೋದಿಸುತ್ತವೆ
+- ಅಪ್ಲಿಕೇಶನ್ ಪುಟ ಮರುಲೋಡ್ ತಡೆಗಟ್ಟಲು ಲಿಂಕ್ ಕ್ಲಿಕ್ಗಳನ್ನು ತಡೆಯುತ್ತದೆ
+- ಹಿಸ್ಟರಿ API URL ಬದಲಾವಣೆಯನ್ನು ಮತ್ತು ಬ್ರೌಸರ್ ಇತಿಹಾಸ ಸ್ಟ್ಯಾಕ್ ನಿರ್ವಹಿಸುತ್ತದೆ
+- ಟೆಂಪ್ಲೇಟ್ಗಳು ಪ್ರತಿಯೊಂದು ಸ್ಕ್ರೀನ್ಗೆ ವಿಷಯ ರಚನೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ
+- ಈವೆಂಟ್ ಶ್ರವಣಕರ್ತರು ಎಲ್ಲಾ ನ್ಯಾವಿಗೇಶನ್ ವಿಧಗಳಿಗೆ ಅಪ್ಲಿಕೇಶನ್ ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ನೋಡಿಕೊಳ್ಳುತ್ತಾರೆ
+
+`history.pushState` ಬಳಕೆ ಬ್ರೌಸರ್ ನ ನ್ಯಾವಿಗೇಶನ್ ಇತಿಹಾಸದಲ್ಲಿ ಹೊಸ ದಾಖಲೆಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ನೀವು ಇದನ್ನು ಪರೀಕ್ಷಿಸಲು ಬ್ರೌಸರ್ನ ಹಿಂಬದಿ ಬಟನ್ ಒತ್ತಿ ಹಿಡಿದುಕೊಳ್ಳಬಹುದು, ಇದರಲ್ಲಿ ಹೀಗೆ ಕಾಣಬಹುದು:
+
+
+
+ಹಿಂಬದಿ ಬಟನ್ ಮೇಲೆ ಕೆಲವೊಮ್ಮೆ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ, ಪ್ರಸ್ತುತ URL ಬದಲಾಗುತ್ತದೆ ಮತ್ತು ಇತಿಹಾಸ ನವೀಕರಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ಅದೇ ಟೆಂಪ್ಲೇಟ್ ಪ್ರದರ್ಶನವಾಗುತ್ತಿರುತ್ತದೆ.
+
+ಕಾರಣವೇನೆಂದರೆ ಅಪ್ಲಿಕೇಶನ್ `updateRoute()` ಅನ್ನು ನಿರಂತರವಾಗಿ ಕರೆಸಬೇಕು ಎಂದು ತಿಳಿದಿಲ್ಲ. [`history.pushState` ಡಾಕ್ಯುಮೆಂಟೇಷನ್](https://developer.mozilla.org/docs/Web/API/History/pushState) ನೋಡಿದರೆ, ಸ್ಥಿತಿಯಿಂದ ಬದಲಾಗಿದಾಗ - ಅಂದರೆ ನಾವು ಬೇರೆ URL ಗೆ ಚಲಿಸಿದಾಗ - [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) ಈವೆಂಟ್ ಸಕ್ರಿಯವಾಗುತ್ತದೆ. ಈ ಸಮಸ್ಯೆಯನ್ನು ಸರಿಪಡಿಸಲು ನಾವು ಅದನ್ನು ಉಪಯೋಗಿಸುತ್ತೇವೆ.
+
+### ಕಾರ್ಯ
+
+ಬ್ರೌಸರ್ ಇತಿಹಾಸ ಬದಲಾದಾಗ ಪ್ರದರ್ಶಿತ ಟೆಂಪ್ಲೇಟ್ ನವೀಕರಿಸಲು ನಾವು `updateRoute()` ಅನ್ನು ಕರೆಸುವ ಹೊಸ ಫಂಕ್ಷನ್ ಅನ್ನು ಸೇರಿಸೋಣ. ಇದನ್ನು ನಮ್ಮ `app.js` ಫೈಲ್ ಕೊನೆಯಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+**ಈ ಹಿಸ್ಟರಿ ಸಂಯೋಜನೆಯ ಅರ್ಥ:**
+- ಬಳಕೆದಾರರು ಬ್ರೌಸರ್ ಬಟನ್ಗಳ ಮೂಲಕ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ ಆಗುವ `popstate` ಈವೆಂಟ್ಗಳಿಗೆ **ಶ್ರವಣ** ಮಾಡುತ್ತದೆ
+- ಸಣ್ಣದಾಗಿರುವ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್文ಕ್ಕೆ ಆರ್ೋ ಫಂಕ್ಷನ್ ಉಪಯೋಗಿಸಿದೆ
+- ಇತಿಹಾಸ ಸ್ಥಿತಿ ಬದಲಾಗಿದಾಗ `updateRoute()` ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕರೆಯಲ್ಪಡುತ್ತದೆ
+- ಪುಟ ಮೊದಲ ಬಾರಿಗೆ ಲೋಡ್ ಆದಾಗ ಅಪ್ಲಿಕೇಶನ್ ಪ್ರಾರಂಭಿಸಲು `updateRoute()` ಕರೆಯುತ್ತದೆ
+- ಬಳಕೆದಾರರು ಹೇಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದ್ರೂ ಸರಿಯಾದ ಟೆಂಪ್ಲೇಟ್ ಪ್ರದರ್ಶನ **ಖಾತ್ರಿ ಮಾಡುತ್ತದೆ**
+
+> 💡 **ಪ್ರೊ ಟಿಪ್**: conciseness ಗಾಗಿ ನಾವು ಇಲ್ಲಿ [ಆರ್ೋ ಫಂಕ್ಷನ್](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ಬಳಸಿದ್ದೇವೆ, ಆದರೆ ಸಾಮಾನ್ಯ ಫಂಕ್ಷನ್ ಸಹ ಅದೇ ರೀತಿಯಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
+
+ಇಲ್ಲಿ ಆರ್ೋ ಫಂಕ್ಷನ್ ಗಾಗಿ ಪುನರಾವೃತ್ತಿ ವಿಡಿಯೋ ಇದೆ:
+
+[](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
+
+> 🎥 ಆರ್ೋ ಫಂಕ್ಷನ್ಗಳ ಕುರಿತ ವಿಡಿಯೋಕ್ಕಾಗಿ ಮೇಲಿನ ಚಿತ್ರ ಒತ್ತಿ.
+
+ನೀವು ಈಗ ನಿಮ್ಮ ಬ್ರೌಸರ್ನ ಹಿಂಬದಿ ಮತ್ತು ಮುಂದಿನ ಬಟನ್ಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ, ಈ ಬಾರಿ ಪ್ರದರ್ಶಿತ ಮಾರ್ಗ ಸರಿಯಾಗಿ ನವೀಕರಿಸಲಾಗುತ್ತಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ಏನು ಮಾಡಬಹುದು**
+- [ ] ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಬ್ರೌಸರ್ ಹಿಂಬದಿ/ಮುಂದಿನ ಬಟನ್ಗಳಿಂದ ಪರೀಕ್ಷಿಸಿ
+- [ ] ವಿಳಾಸ ಬಾರ್ನಲ್ಲಿ ವಿಭಿನ್ನ URL ಗಳನ್ನು ಕೈಯಿಂದ ಟೈಪ್ ಮಾಡಿ ರೌಟಿಂಗ್ ತಪಾಸಿಸಿ
+- [ ] ಬ್ರೌಸರ್ ಡೆವ್ ಟೂಲ್ಗಳನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಟೆಂಪ್ಲೇಟ್ಗಳು ಹೇಗೆ DOM ನಲ್ಲಿ ಕ್ಲೋನ್ ಆಗುತ್ತವೆ ನೋಡಿ
+- [ ] ರೌಟಿಂಗ್ ಪ್ರವಾಹವನ್ನು ಗಮನಿಸಲು console.log ಹೇಳಿಕೆ ಸೇರಿಸುವ ಪ್ರಯೋಗ ಮಾಡಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ಸಾಧಿಸಬಹುದಾದವು**
+- [ ] ಪಾಠದ ಬಳಿಕದ ಕ್ವಿಜ್ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು SPA ವಾಸ್ತುಶಿಲ್ಪ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಟೆಂಪ್ಲೇಟ್ಗಳಿಗೆ CSS ಶೈಲಿ ಸೇರಿಸಿ ತಾನು ವೃತ್ತಿ ದೃಷ್ಟಿಯಿಂದ ಗೋಚರಿಸಲು
+- [ ] ಸರಿಯಾದ ದೋಷ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ 404 ದೋಷ ಪುಟ ಸವಾಲು ಜಾರಿಗೆ ತರಿರಿ
+- [ ] ಹೆಚ್ಚುವರಿ ರೌಟಿಂಗ್ ಕಾರ್ಯಾಚರಣೆಯೊಡನೆ ಕ್ರೆಡಿಟ್ ಪುಟ ಸವಾಲು ರಚಿಸಿ
+- [ ] ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಟೆಂಪ್ಲೇಟ್ ಬದಲಾವಣೆಗಳ ನಡುವೆ ಬದಲಾವಣೆಗಳನ್ನು ಸೇರಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರಪೂರ್ತಿ SPA ಅಭಿವೃದ್ಧಿ ಪ್ರವಾಸ**
+- [ ] ಫಾರ್ಮ್ಗಳು, ಡೇಟಾ ನಿರ್ವಹಣೆ ಮತ್ತು ನಿರಂತರತೆ ಇರುವ ಸಂಪೂರ್ಣ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಮಾರ್ಗ ಪರಿಮಾಣಗಳು ಮತ್ತು ನೆಸ್ಟೆಡ್ ಮಾರ್ಗಗಳು ಸೇರಿದಂತೆ ಉನ್ನತ ರೌಟಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ನ್ಯಾವಿಗೇಶನ್ ಗಾರ್ಡ್ಸ್ ಮತ್ತು ಪ್ರಮಾಣೀಕರಣ ಆಧಾರಿತ ರೌಟಿಂಗ್ ಜಾರಿಗೆ ತರಿರಿ
+- [ ] ಪುನಃಬಳಕೆ ಆಗಬಹುದಾದ ಟೆಂಪ್ಲೇಟ್ ಘಟಕಗಳು ಮತ್ತು ಘಟಕ ಗ್ರಂಥಾಲಯ ರಚಿಸಿ
+- [ ] ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಆನಿಮೇಶನ್ ಮತ್ತು ಟ್ರಾಂಸಿಶನ್ಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ನಿಮ್ಮ SPA ಅನ್ನು ಹೋಸ್ಟಿಂಗ್ ವೇದಿಕೆಗಳಿಗೆ ನಿಯೋಜಿಸಿ ಮತ್ತು ರೌಟಿಂಗ್ ಸರಿಯಾಗಿ ಸಂರಚಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳೋತ್ತರ ಫ್ರಂಟ್ಎಂಡ್ ವಾಸ್ತುಶಿಲ್ಪ ತಜ್ಞತೆ**
+- [ ] React, Vue ಅಥವಾ Angular ಮಾದರಿಗಳ ಆಧುನಿಕ ಫ್ರೇಮ್ವರ್ಕ್ಗಳ ಬಳಕೆದೊಂದಿಗೆ ಸಂಕೀರ್ಣ SPA ಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ಉನ್ನತ ಸ್ಥಿತಿ ನಿರ್ವಹಣಾ ಮಾದರಿಗಳು ಮತ್ತು ಗ್ರಂಥಾಲಯಗಳನ್ನು ಕಲಿಯಿರಿ
+- [ ] SPA ಅಭಿವೃದ್ಧಿಗಾಗಿ ಬಿಲ್ಡ್ ಉಪಕರಣಗಳು ಮತ್ತು ಡೆವಲಪ್ಮೆಂಟ್ ಕಾರ್ಯಪ್ರವಾಹ mastered ಮಾಡಿ
+- [ ] ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಆಫ್ಲೈನ್ ಕಾರ್ಯಸಾಧ್ಯತೆ ಜಾರಿಗೆ ತರಿರಿ
+- [ ] ಸಹಜವಾದ SPA ಗಳಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣಾ ತಂತ್ರಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಿ
+- [ ] ಓಪನ್ ಸೋರ್ಸ್ SPA ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ ಮತ್ತು ನಿಮ್ಮ ಜ್ಞಾನವನ್ನು ಹಂಚಿಕೊಳ್ಳಿ
+
+## 🎯 ನಿಮ್ಮ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ಪರಿಣತಿ ಟೈಮ್ಲೈನ್
+
+```mermaid
+timeline
+ title SPA ಅಭಿವೃದ್ಧಿ & ಆಧುನಿಕ ವೆಬ್ ವಾಸ್ತುಶಿಲ್ಪ ಕಲಿಕೆ ಪ್ರಗತಿ
+
+ section ಬೆಂಬಲ (20 ನಿಮಿಷಗಳು)
+ ಟೆಂಪ್ಲೇಟ್ ವ್ಯವಸ್ಥೆಗಳು: HTML ಟೆಂಪ್ಲೇಟ್ ಅಂಶಗಳು
+ : DOM ವಿನ್ಯಾಸ
+ : ವಿಷಯ ನಕಲುಮಾಡುವುದು
+ : ಡೈನಾಮಿಕ್ ರೆಂಡರಿಂಗ್
+
+ section ರೌಟಿಂಗ್ ಮೂಲಭೂತಗಳು (30 ನಿಮಿಷಗಳು)
+ ಕ್ಲೈಂಟ್-ಸೈಡ್ ನಾವಿಗೇಶನ್: URL ನಿರ್ವಹಣೆ
+ : ಇತಿಹಾಸ API
+ : ಮಾರ್ಗ ನಕ್ಷೆ
+ : ಇವೆಂಟ್ ನಿರ್ವಹಣೆ
+
+ section ಬಳಕೆದಾರ ಅನುಭವ (40 ನಿಮಿಷಗಳು)
+ ನಾವಿಗೇಶನ್ ತಿದ್ದೆ: ಬ್ರೌಸರ್ ಸಂಯೋಜನೆ
+ : ಹಿಂದೆ ಬಟನ್ ಬೆಂಬಲ
+ : ದೋಷ ನಿರ್ವಹಣೆ
+ : ಸಿಲುಕಿದ ವರ್ಗಾವಣೆಗಳು
+
+ section ವಾಸ್ತುಶಿಲ್ಪ ಮಾದರಿಗಳು (50 ನಿಮಿಷಗಳು)
+ ವೃತ್ತಿಪರ SPA ಗಳು: ಘಟಕ ವ್ಯವಸ್ಥೆಗಳು
+ : ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ
+ : ಕಾರ್ಯಕ್ಷಮತೆಯ_OPT_
+ : ದೋಷ ಗಡிகள்
+
+ section ನಿರ್ಧಿಷ್ಟ ತಂತ್ರಗಳು (1 ವಾರ)
+ ಫ್ರೇಮ್ವರ್ಕ್ ಸಂಯೋಜನೆ: ರಿಯಾಕ್ಟ್ ರೌಟರ್
+ : ವ್ಯೂ ರೌಟರ್
+ : ಆಂಗುಲರ್ ರೌಟರ್
+ : ಸ್ಥಿತಿ ಗ್ರಂಥಾಲಯಗಳು
+
+ section ಉತ್ಪಾದನೆ ಕೌಶಲ್ಯಗಳು (1 ತಿಂಗಳು)
+ ಉದ್ಯಮ ಅಭಿವೃದ್ಧಿ: ಬಿಲ್ಟ್ ವ್ಯವಸ್ಥೆಗಳು
+ : ಪರೀಕ್ಷೆ ತಂತ್ರಗಳು
+ : ವಿನ್ಯಾಸದ ಕಛೇರಿ
+ : ಕಾರ್ಯಕ್ಷಮತೆ ನಿಗಾ
+```
+### 🛠️ ನಿಮ್ಮ SPA ಅಭಿವೃದ್ಧಿ ಉಪಕರಣ ಸಂಗ್ರಹ
+
+ಈ ಪಾಠವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ಬಳಿಕ, ನೀವು ಈಗ ಪರಿಣತಿಗೊಂಡಿದ್ದು:
+- **ಟೆಂಪ್ಲೇಟ್ ವಾಸ್ತುಶಿಲ್ಪ**: ಡೈನಾಮಿಕ್ ವಿಷಯ ಹೊಂದಿರುವ ಪುನಃಬಳಕೆ ಆರ್ಹ HTML ಘಟಕಗಳು
+- **ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೌಟಿಂಗ್**: ಪುಟ ರೀಲೋಡ್ ಇಲ್ಲದೆ URL ನಿರ್ವಹಣೆ ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್
+- **ಬ್ರೌಸರ್ ಸಂಯೋಜನೆ**: ಹಿಸ್ಟರಿ API ಬಳಕೆ ಮತ್ತು ಹಿಂಬದಿ/ಮುಂದಿನ ಬಟನ್ ಬೆಂಬಲ
+- **ಈವೆಂಟ್ ಚಾಲಿತ ವ್ಯವಸ್ಥೆಗಳು**: ನ್ಯಾವಿಗೇಶನ್ ಮತ್ತು ಬಳಕೆದಾರ ಸಂವಹನ ನಿರ್ವಹಣೆ
+- **DOM ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್**: ಟೆಂಪ್ಲೇಟ್ ಕ್ಲೋನಿಂಗ್, ವಿಷಯ ಬದಲಾವಣೆ ಮತ್ತು ಅಂಶ ನಿರ್ವಹಣೆ
+- **ದೋಷ ನಿರ್ವಹಣೆ**: ತಪ್ಪು ಮಾರ್ಗಗಳ ಹಾಗೂ ಕಾಣೆಯಾದ ವಿಷಯಗಳಿಗೆ ಒಳ್ಳೆಯ ಪರಿಹಾರ
+- **ಕಾರ್ಯಕ್ಷಮತಾ ಮಾದರಿಗಳು**: ದ್ರುತ ವಿಷಯ ಲೋಡ್ ಮತ್ತು ರೆಂಡರಿಂಗ್ ತಂತ್ರಗಳು
+
+**ನೈಜ ಜಗತ್ತಿನ ಅನ್ವಯಗಳು**: ನಿಮ್ಮ SPA ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳ ನೇರ ಅನ್ವಯ:
+- **ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: React, Vue, Angular ಮತ್ತು ಇತರ ಫ್ರೇಮ್ವರ್ಕ್ ಅಭಿವೃದ್ಧಿ
+- **ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ಆಫ್ಲೈನ್ ಸಾಮರ್ಥ್ಯವುಳ್ಳ ಆಪ್-ಮಾದರಿ ಅನುಭವಗಳು
+- **ಎಂಟರ್ಪ್ರೈಸ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳು**: ವಿವಿಧ ದೃಶ್ಯಗಳಂತಹ ಸಂಕೀರ್ಣ ವ್ಯವಹಾರ ಅಪ್ಲಿಕೇಶನ್ಗಳು
+- **ಇ-ಕಾಮರ್ಸ್ ವೇದಿಕೆಗಳು**: ಉತ್ಪನ್ನ ಕ್ಯಾಟಲಾಗ್ಗಳು, ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ಗಳು ಮತ್ತು ಚೆಕ್ಔಟ್ ಪ್ರಕ್ರಿಯೆಗಳು
+- **ವಿಷಯ ನಿರ್ವಹಣೆ**: ಡೈನಾಮಿಕ್ ವಿಷಯ ಸೃಷ್ಟಿ ಮತ್ತು ಸಂಪಾದನೆ ಇಂಟರ್ಫೇಸ್ಗಳು
+- **ಮೊಬೈಲ್ ಅಭಿವೃದ್ಧಿ**: ವೆಬ್ ತಂತ್ರಜ್ಞಾನದೊಂದಿಗೆ ಹೈಬ್ರಿಡ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು
+
+**ನೀವು ಪಡೆಯುತ್ತಿರುವ ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು**: ನೀವು ಸಾಧ್ಯಮಾಡಬಹುದು:
+- **ವಾಸ್ತುಶಿಲ್ಪ** ತಟಸ್ಥತೆಗಳನ್ನು ಸರಿಯಾಗಿ ವಿಭಜಿಸುವ ಮೂಲಕ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ರೂಪಿಸು
+- **ಅಮಲ್ಗೊಳಿಸಿ** ಅಪ್ಲಿಕೇಶನ್ ಸಂಕೀರ್ಣತೆಯೊಂದಿಗೆ ವಿಸ್ತರಿಸಬಹುದಾದ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೂಟಿಂಗ್ ವ್ಯವಸ್ಥೆಗಳನ್ನು
+- **ದೊರೆತಿಹಾಕು** ಬ್ರೌಸರಿನ ಡೆವಲಪರ್ ಸಾಧನಗಳ ಬಳಕೆ ಮೂಲಕ ಸಂಕೀರ್ಣ ನ್ಯಾವಿಗೇಶನ್ ಪ್ರಕ್ರಿಯೆಗಳ ದೋಷಗಳನ್ನು
+- **ಕಾರ್ಯಕ್ಷಮಗೊಳಿಸು** ಪರಿಣಾಮಕಾರಿ ಟೆಂಪ್ಲೇಟ್ ನಿರ್ವಹಣೆಯ ಮೂಲಕ ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು
+- **ನಿರ್ಮಿಸಿ** ಸ್ಥಳೀಯ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಅನುಭವವðsೊಳ್ಳುವ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು
+
+**ಮುಖ್ಯ ಮುಂಭಾಗ ಅಭಿವೃದ್ಧಿ ಕಲಿತ ಸಂकल्पನೆಗಳು**:
+- **ಘಟಕ ವಾಸ್ತುಶಿಲ್ಪ**: ಪುನಃಬಳಕೆ ಮಾಡಬಹುದಾದ UI ಮಾದರಿಗಳು ಮತ್ತು ಟೆಂಪ್ಲೇಟ್ ವ್ಯವಸ್ಥೆಗಳು
+- **ಸ್ಥಿತಿ ಸಂ ಸಮನ್ವಯ**: URL ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ ಮತ್ತು ಬ್ರೌಸರ್ ಇತಿಹಾಸ
+- **ಕಾರ್ಯಾಚರಣೆ ಪ್ರೇರಿತ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಬಳಕೆದಾರ ಸಂವಹನ ನಿರ್ವಹಣೆ ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್
+- **ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್**: ಪರಿಣಾಮಕಾರಿ DOM ಪರಿಷ್ಕರಣೆ ಮತ್ತು ವಿಷಯ ಲೋಡಿಂಗ್
+- **ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ**: ಸ್ಮೂತ್ ಬದಲಾವಣೆಗಳು ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್ ಸೌಂದರ್ಯ
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವೇ ಸಿದ್ಧರಾಗಿದ್ದೀರಿ ಆಧುನಿಕ ಮುಂಭಾಗ ಫ್ರೆ임್ವರ್ಕ್ಗಳ ಅವಲೋಕನ ಮಾಡಲು, ಸುಧಾರಿತ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ ಅಥವಾ ಸಂಕೀರ್ಣ ಎಂಟರ್ಪ್ರೈಸ್ ಅಪ್ಲಿಕೇಶನ್ಗಳ ನಿರ್ಮಾಣಕ್ಕೆ!
+
+🌟 **ಸಾಧನೆ ಅನ್ಲಾಕ್**: ನೀವು ಆಧುನಿಕ ವೆಬ್ ವಾಸ್ತುಶಿಲ್ಪ ಮಾದರಿಗಳೊಂದಿಗೆ ವೃತ್ತಿಪರ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ಮೂಲವನ್ನು ನಿರ್ಮಿಸಿಕೊಂಡಿದ್ದೀರಿ!
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀
+
+ನಿಮ್ಮ ಕ್ಯಾರೆಕ್ಟರ್ ಓಪನ್ ಮೂಲಕ ಈ ಚಾಲೆಂಜ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ:
+
+**ವಿವರಣೆ:** ನಿಷಿದ್ಧ ಮಾರ್ಗಗಳಿಗೆ ಹಾದುಹೋಗುವಾಗ ಬಳಕೆದಾರ ಹಿತಕರ 404 ದೋಷ ಪುಟ ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆ ಅನುಷ್ಠಾನಗೊಳಿಸುವ ಮೂಲಕ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನನ್ನು ಸುಧಾರಣೆ ಮಾಡು.
+
+**ಪ್ರಾಂಪ್ಟ್:** "not-found" ಎಂಬ ಗುರುತುಳ್ಳ ಹೂಟು HTML ಟೆಂಪ್ಲೇಟ್ ಸೃಷ್ಟಿಸಿ, ಇದು ಬಳಕೆದಾರ ಸ್ನೇಹಿ 404 ದೋಷ ಪುಟವನ್ನು ಶೈಲಿಬದ್ಧವಾಗಿಸಿರುತ್ತದೆಯೆಂದು ತೋರಿಸಲಿ. ನಂತರ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ರೂಟಿಂಗ್ ತರ್ಕವನ್ನು ಬದಲಿಸಿ, ಬಳಕೆದಾರರು ಅನುಚಿತ URLಗಳಿಗೆ ಹೋದಾಗ ಈ ಟೆಂಪ್ಲೇಟ್ ಪ್ರದರ್ಶಿಸಲಾಗುವಂತೆ ಮಾಡು, ಜೊತೆಗೆ "Go Home" ಬಟನ್ ಸೇರಿಸಿ ಅದು ಲಾಗಿನ್ ಪುಟಕ್ಕೆ ಮರಳುವಂತೆ ಮಾಡಲಿ.
+
+ಇಲ್ಲಿ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಪಡೆದುಕೊಳ್ಳಿ.
+
+## 🚀 ಚಾಲೆಂಜ್
+
+ಈ ಅಪ್ಲಿಕೇಶನ್ಗಾಗಿ ಕ್ರೆಡಿಟ್ಸ್ ತೋರಿಸುವ ಮೂರನೇ ಪುಟವನ್ನೋಳ್ಳ ಟೆಂಪ್ಲೇಟ್ ಹಾಗೂ ರೂಟ್ ಅನ್ನು ಸೇರಿಸಿ.
+
+**ಚಾಲೆಂಜ್ ಗುರಿಗಳು:**
+- **ಸೃಷ್ಟಿಸಿ** ಸೂಕ್ತ ವಿಷಯ ರಚನೆಯೊಂದಿಗೆ ಹೊಸ HTML ಟೆಂಪ್ಲೇಟ್
+- **ಸೆೇರಿಸಿ** ನಿಮ್ಮ ರೂಟ್ ಸಂರಚನಾ ವಸ್ತುವಿಗೆ ಹೊಸ ರೂಟ್
+- **ಸೇರಿಸಿ** ಕ್ರೆಡಿಟ್ಸ್ ಪುಟಕ್ಕೆ ಮತ್ತು ಅದರ ತಿರುಗು ನ್ಯಾವಿಗೇಶನ್ ಲಿಂಕ್ಗಳು
+- **ಪರೀಕ್ಷಿಸಿ** ಎಲ್ಲ ನ್ಯಾವಿಗೇಶನ್ ಬ್ರೌಸರ್ ಇತಿಹಾಸದೊಂದಿಗೆ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ ಎಂದು
+
+## ಉಪನ್ಯಾಸ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ
+
+[ಉಪನ್ಯಾಸ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ](https://ff-quizzes.netlify.app/web/quiz/42)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂಅಧ್ಯಯನ
+
+ರೂಟಿಂಗ್ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯೊಂದಿಗಿನ ಅಚ್ಚರಿಕಾರಿ ಜಟಿಲ ಭಾಗಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ವೆಬ್ ಪುಟ ರಿಫ್ರೆಶ್ಗಳಿಂದ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ಪುಟ ರಿಫ್ರೆಶ್ಗೆ ಬದಲಾವಣೆಯಾಗಿ. [Azure Static Web App ಸೇವೆ](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) ರೂಟಿಂಗ್ ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಸ್ವಲ್ಪ ಓದಿ. ಆ ದಾಖಲೆಯಲ್ಲಿ ವಿವರಣೆಗೊಳ್ಳಲಾದ ಕೆಲವು ನಿರ್ಧಾರಗಳು ಏಕೆ ಅವಶ್ಯಕವೆಂದು ನೀವು ವಿವರಿಸಬಹುದೇ?
+
+**ಹೆಚ್ಚಿನ ಕಲಿಕೆಯ ಸಂಪನ್ಮೂಲಗಳು:**
+- **ಅನ್ವೇಷಿಸಿ** React Router ಮತ್ತು Vue Router ಮುಂತಾದ ಜನಪ್ರಿಯ ಫ್ರೆ임್ವರ್ಕ್ಗಳು ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೂಟಿಂಗ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತವೆ
+- **ಶೋಧಿಸಿ** ಹ್ಯಾಷ್ ಆಧಾರಿತ ರೂಟಿಂಗ್ ಮತ್ತು ಇತಿಹಾಸ API ರೂಟಿಂಗ್ ನಡುವಿನ ವ್ಯತ್ಯಾಸಗಳು
+- **ಶಿಕ್ಷಣ** ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಮತ್ತು ಅದು ರೂಟಿಂಗ್ ತಂತ್ರಗಳಿಗೆ ಹೇಗೆ ಪ್ರಭಾವಿಸುತ್ತದೆ
+- **ವಿಚಾರಿಸಿ** ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು (PWAs) ಹೇಗೆ ರೂಟಿಂಗ್ ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್ ನಿರ್ವಹಿಸುತ್ತವೆ
+
+## ಅಸೈನ್ಮೆಂಟ್
+
+[ರೂಟಿಂಗ್ উন্নতಮಾಡಿ](assignment.md)
+
+---
+
+
+**ವಿಜ್ಞಾನ ಸೂಚನೆ**:
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಯಿಂದ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯ ಮೇಲ್ಭಾಗದಲ್ಲಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪು ಸೇರಿದಂತೆ ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನದಲ್ಲಿ ಇಡಿ. ಮೂಲ ಡಾಕ್ಯುಮೆಂಟ್ ಅದರ ಸ್ವದೇಶಿ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿರುತ್ತದೆ. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ತಿಳಿವಳಿಕೆಗಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಾಗಿರುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/7-bank-project/1-template-route/assignment.md b/translations/kn/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 000000000..4fd483bfe
--- /dev/null
+++ b/translations/kn/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,60 @@
+
+# ಮಾರ್ಗದರ್ಶನವನ್ನು ಸುಧಾರಿಸಿ
+
+## ನಿರ್ದೇಶನಗಳು
+
+ನೀವು ಪ್ರಾಥಮಿಕ ಮಾರ್ಗದರ್ಶನ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿರುವ ಈಗಾಗ, ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುವ ಮತ್ತು ಉತ್ತಮ ಡೆವಲಪರ್ ಉಪಕರಣಗಳನ್ನು ಒದಗಿಸುವ ವೃತ್ತಿಪರ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಅದನ್ನು ಹೆಚ್ಚಿಸಲು ಸಮಯವಾಗಿದೆ. ವಾಸ್ತವ ಜಗತ್ತಿನ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಕೇವಲ ಟೆಂಪ್ಲೇಟ್ ಸ್ವಿಚಿಂಗ್ ಅಲ್ಲದೆ ಹೆಚ್ಚು ಬೇಕಾಗುತ್ತದೆ – ಅವುಗಳಿಗೆ ಗತಿಶೀಲ ಪುಟ ಶೀರ್ಷಿಕೆಗಳು, ಜೀವನಚಕ್ರ ಹೂಕ್ಗಳು ಮತ್ತು ವಿಸ್ತಾರಗೊಳ್ಳಬಹುದಾದ ವಾಸ್ತುಶಿಲ್ಪಗಳನ್ನು ಬೇಕಾಗುತ್ತದೆ.
+
+ಈ ಅಭ್ಯಾಸದಲ್ಲಿ, ನೀವು ಉತ್ಪಾದನಾ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ಕಂಡುಬರುವ ಎರಡು ಅನಿವಾರ್ಯ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಮಾರ್ಗದರ್ಶನ ಜಾರಿಗೆಕೊಳ್ಳುವಿಕೆ ಅನ್ನು ವಿಸ್ತರಿಸುವಿರಿ. ಈ ಸುಧಾರಣೆಗಳು ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ ಅನ್ನು ಇನ್ನಷ್ಟು ಸುತ್ತುವರಿದಂತೆ ಮಾಡುತ್ತವೆ ಮತ್ತು ಭವಿಷ್ಯದ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಮೂಲಭೂತವನ್ನು ಒದಗಿಸುತ್ತವೆ.
+
+ಮಾರ್ಗಗಳು ಘೋಷಣೆ ಪ್ರಸ್ತುತ ಬಳಸಬೇಕಾದ ಟೆಂಪ್ಲೇಟ್ ID ಮಾತ್ರವನ್ನು ಒಳಗೊಂಡಿದೆ. ಆದರೆ ಹೊಸ ಪುಟವನ್ನು ಪ್ರದರ್ಶಿಸುವಾಗ, ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಅಗತ್ಯವಿರುತ್ತದೆ. ನಮ್ಮ ಮಾರ್ಗದರ್ಶನ ಜಾರಿಗೆಕೊಳ್ಳುವಿಕೆಯನ್ನು ಎರಡು ಹೆಚ್ಚುವರಿ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳೊಂದಿಗೆ ಸುಧಾರಿಸೋಣ:
+
+### ವೈಶಿಷ್ಟ್ಯ 1: ಗತಿಶೀಲ ಪುಟ ಶೀರ್ಷಿಕೆಗಳು
+**ಉದ್ದೇಶ:** ಪ್ರತಿ ಟೆಂಪ್ಲೇಟ್ಗೆ ಶೀರ್ಷಿಕೆಗಳನ್ನು ನೀಡುವುದು ಮತ್ತು ಟೆಂಪ್ಲೇಟ್ ಬದಲಾಗುವಾಗ ವಿಂಡೋ ಶೀರ್ಷಿಕೆಯನ್ನು ಈ ಹೊಸ ಶೀರ್ಷಿಕೆಗೆ ತ್ವರಿತಗೊಳಿಸುವುದು.
+
+**ಈದಕ್ಕಾಗಿ ಮುಖ್ಯಾಂಶಗಳು:**
+- ವಿವರಣೆ ಹೊಂದಿದ ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ ಶೀರ್ಷಿಕೆಗಳನ್ನು ತೋರಿಸುವ ಮೂಲಕ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ
+- ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗಳು ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಪ್ರವೇಶಾರ್ಹತೆಯನ್ನು ಬಲಪಡಿಸುತ್ತದೆ
+- ಉತ್ತಮ ಬುಕ್ರಾಮಿಂಗ್ ಮತ್ತು ಬ್ರೌಸರ್ ಇತಿಹಾಸ ಹಿನ್ನೆಲೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ
+- ವೃತ್ತಿಪರ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ
+
+**ಕ್ರಿಯಾನ್ವಯ್ ವಿಧಾನ:**
+- ಪ್ರತಿ ಮಾರ್ಗಕ್ಕೆ ಶೀರ್ಷಿಕೆ ಮಾಹಿತಿ ಸೇರಿಸಲು `routes` ವಸ್ತುವನ್ನು ವಿಸ್ತರಿಸಿ
+- `updateRoute()` ಫಂಕ್ಷನ್ ಅನ್ನು ತಿದ್ದುಪಡಿ ಮಾಡಿ `document.title` ಅನ್ನು ಗತಿಶೀಲವಾಗಿ ನವೀಕರಿಸಿ
+- ಪರದೆಗಳ ನಡುವೆ ಸಾಗಿಸುತ್ತಾ ಶೀರ್ಷಿಕೆಗಳು ಸರಿಯಾಗಿ ಬದಲಾಗುತ್ತಿರುವುದನ್ನು ಪರೀಕ್ಷಿಸಿ
+
+### ವೈಶಿಷ್ಟ್ಯ 2: ಮಾರ್ಗ ಜೀವನಚಕ್ರ ಹೂಕ್ಗಳು
+**ಉದ್ದೇಶ:** ಟೆಂಪ್ಲೇಟ್ ಬದಲಾಗಿರುವ ನಂತರ ಕೆಲವು ಕೋಡ್ ಅನ್ನು ಕಾರ್ಯರೂಪ给ಬಗೆಹರಿಸುವ ಆಯ್ಕೆಯನ್ನು ಸೇರಿಸುವುದು. ಪ್ರತಿಬಾರಿಗೆ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಪುಟ ಪ್ರದರ್ಶಿಸುವಾಗ `'Dashboard is shown'` ಎಂಬ ಸಂದೇಶವನ್ನು ಡೆವಲಪರ್ ಕಾನ್ಸೋಲ್ನಲ್ಲಿ ಮುದ್ರಿಸಬೇಕಾಗಿದೆ.
+
+**ಈದಕ್ಕಾಗಿ ಮುಖ್ಯಾಂಶಗಳು:**
+- ನಿರ್ದಿಷ್ಟ ಮಾರ್ಗಗಳು ಲೋಡ್ ಆದಾಗ ಕಸ್ಟಮ್ ಲಾಜಿಕ್ ನಿರ್ವಹಣೆಯನ್ನು ಸಾದ್ಯಮಾಡುತ್ತದೆ
+- ವಿಶ್ಲೇಷಣೆ, ನೋಂದಣಿ ಅಥವಾ ಆರ್ಭಿಕರಣ ಕೋಡ್ಗಾಗಿ ಹೂಕ್ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ
+- ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮಾರ್ಗ ವರ್ತನೆಗಳಿಗಾಗಿ ಪರಿಕಲ್ಪನೆಯ ಅಡಿಪಾಯವನ್ನು ರಚಿಸುತ್ತದೆ
+- ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಆಬ್ಜರ್ವರ್ ಆಲೋಚನೆಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ
+
+**ಕ್ರಿಯಾನ್ವಯ್ ವಿಧಾನ:**
+- ಮಾರ್ಗ ಸಂರಚನೆಗಳಿಗೆ ಆಯ್ಕೆಮಾಡಬಹುದಾದ ಬ್ಯಾಕ್ಅಪ್ ಫಂಕ್ಷನ್ ಗುಣಮಟ್ಟವನ್ನು ಸೇರಿಸಿ
+- ಟೆಂಪ್ಲೇಟ್ ರೆಂಡರಿಂಗ್ ಪೂರ್ಣವಾದ ನಂತರ ಬ್ಯಾಕ್ಅಪ್ ಫಂಕ್ಷನ್ ಅನ್ನು (ಇದೆ ಇದ್ದಲ್ಲಿ) ಕಾರ್ಯಗತಗೊಳಿಸಿ
+- ಯಾವುದೇ ಮಾರ್ಗದ ಈಗDefined ಬ್ಯಾಕ್ಅಪ್ ಮೂಲಕ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಖಾತ್ರಿಪಡಿಸಿ
+- ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಗೆ ಭೇಟಿ ನೀಡುವಾಗ ಕಾನ್ಸೋಲ್ ಸಂದೇಶವು ಕಾಣಿಸುತ್ತದೆ ಎಂದು ಪರೀಕ್ಷಿಸಿ
+
+## ಮೌಲ್ಯಮಾಪನ ಮ್ಯಾಗಣಿ
+
+| ಮಾನದಂಡ | ಉದಾತ್ತ | ತಕ್ಕಮಟ್ಟಿಗೆ | ಸುಧಾರಣೆಯ ಅಗತ್ಯವೇ |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+| | ಎರಡು ವೈಶಿಷ್ಟ್ಯಗಳೂ ಜಾರಿಗೆ ಬಂದಿದೆ ಮತ್ತು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆ. ಶೀರ್ಷಿಕೆ ಮತ್ತು ಕೋಡ್ ಸೇರಿಸುವುದು `routes` ಘೋಷಣೆಯಲ್ಲಿ ಹೊಸ ಮಾರ್ಗ ಸೇರಿಸಿದಾಗಲೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. | ಎರಡು ವೈಶಿಷ್ಟ್ಯಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಆದರೆ ಆಚಾರವಿಧಾನ ಕಠಿಣಗೊಳಿಸಲ್ಪಟ್ಟಿದೆ ಮತ್ತು `routes` ಘೋಷಣೆಯಿಂದ ಸಂರಚಿಸಲಾಗುವುದಿಲ್ಲ. ಶೀರ್ಷಿಕೆ ಮತ್ತು ಕೋಡ್ ಸೇರಿಸುವ ಮೂರನೇ ಮಾರ್ಗ ಸೇರಿಸುವುದು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ ಅಥವಾ ಭಾಗಶಃ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. | ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಒಂದೋ ಕಾಣಿಸುವುದಿಲ್ಲ ಅಥವಾ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿಲ್ಲ. |
+
+---
+
+
+**ಬೆಳಗ್ಗೆ ಮಾಹಿತಿ**:
+ಈ ದಾಖಲೆಯನ್ನು ಏಐ ಅನುವಾದ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಅನುವದಿಸಲಾಗಿದೆ. ನಾವು ನಿಖರತೆಯನ್ನು ಹೊಲಪಡಲು ಪ್ರಯತ್ನಿಸುತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಾಖಲೆ ಅನ್ನು ಅಧಿಕೃತ ಹಾಗೂ ನಿಖರ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕಾಗುತ್ತದೆ. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಅಸಮಜ್ಜಿನತೆಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಳನ್ನು ನಾವು ಹೊಣೆಗಾರರಾಗಿರುವುದಿಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/7-bank-project/2-forms/README.md b/translations/kn/7-bank-project/2-forms/README.md
new file mode 100644
index 000000000..063eb4232
--- /dev/null
+++ b/translations/kn/7-bank-project/2-forms/README.md
@@ -0,0 +1,965 @@
+
+# ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಾಣ ಭಾಗ 2: ಲಾಗಿನ್ ಮತ್ತು ನೋಂದಣಿ ಫಾರಂ ನಿರ್ಮಿಸಿ
+
+```mermaid
+journey
+ title ನಿಮ್ಮ ಫಾರ್ಮ್ ಅಭಿವೃದ್ಧಿ ಪ್ರಯಾಣ
+ section HTML ಮೂಲಭೂತ
+ ಫಾರ್ಮ್ ಅಂಶಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: 3: Student
+ ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳನ್ನು ಕಲಿಯಿರಿ: 4: Student
+ ಪ್ರವೇಶುತರತೆಯನ್ನು ಪರಿಣತಿ ಮಾಡಿ: 4: Student
+ section ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಂಯೋಜನೆ
+ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯನ್ನು.Handle: 4: Student
+ AJAX ಸಂವಹನವನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ: 5: Student
+ ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಪ್ರಕ್ರಿಯೆ ಮಾಡಿ: 5: Student
+ section ಪರಿಶೀಲನೆ ವ್ಯವಸ್ಥೆಗಳು
+ ಬಹು-ಮಟ್ಟದ ಪರಿಶೀಲನೆ ರಚನೆ ಮಾಡಿ: 5: Student
+ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಿ: 5: Student
+ ಡೇಟಾ ಅಖಂಡತೆಯನ್ನು ಖಚಿತಪಡಿಸಿ: 5: Student
+```
+## ಪೂರ್ವ-ವಕ್ತृत्व ಕ್ವಿಜ್
+
+[ಪೂರ್ವ-ವಕ್ತृत्व ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/43)
+
+ನೀವು ಅಾನ್ಲೈನ್లో ಫಾರಂ ಪೂರೈಸಿರುವಾಗ ನಿಮ್ಮ ಇಮೇಲ್ ಸ್ವರೂಪ ತಳ್ಳಿಹೋಗಿದೆಯಾ? ಅಥವಾ ಸಬ್ಮಿಟ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ನಿಮ್ಮ ಎಲ್ಲಾ ಮಾಹಿತಿಯನ್ನು ಕಳೆದುಕೊಂಡಿದ್ದೀರಾ? ಇಂತಹ ತೊಂದರೆಕಾರಿ ಅನುಭವಗಳನ್ನು ನಾವು ಎಲ್ಲರೂ ಎದುರಿಸಿದ್ದೇವೆ.
+
+ಫಾರಂಗಳು ನಿಮ್ಮ ಬಳಕೆದಾರರು ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆಗಳ ನಡುವೆ ಸೇತುವೆಯಾಗಿವೆ. ವಿಮಾನಗಳ ಸುರಕ್ಷಿತ ಗಮ್ಯಸ್ಥಾನಕ್ಕೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುವ ವಿಮಾನ ಸಂಚಾರ ನಿಯಂತ್ರಕರ ಸರಳ ನಿಯಮಗಳಂತೆ, ಚೆನ್ನಾಗಿ ವಿನ್ಯಾಸಗೊಳ್ಳದ ಫಾರಂಗಳು ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುತ್ತದೆ ಮತ್ತು ದುಬಾರಿಯಾದ ದೋಷಗಳನ್ನು ತಡೆಯುತ್ತವೆ. ಕೀಳಾದ ಫಾರಂಗಳು, ಮತ್ತೊಂದೆಡೆ, ಬಳಕೆದಾರರನ್ನು ತುಂಬಾ ವೇಗವಾಗಿ ದೂರ ಮಾಡಬಹುದು, ಹೊರಗಡೆ ಗೊಂದಲಗಳಿಗೆ ಕಾರಣವಾಗುವ ವಿಮಾನ ನಿಲ್ದಾಣದ ಅನುಮಾನಗಳಂತೆ.
+
+ಈ ಪಾಠದಲ್ಲಿ, ನಿಮ್ಮ ಸ್ಥಿರ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಬಲವಾದ ಇಂಟರಾಕ್ಟಿವ್ ಅಪ್ಲಿಕೇಶನ್ನಾಗಿ ಪರಿವರ್ತಿಸುವುದನ್ನು ಕಲಿಯೋಣ. ನೀವು ಬಳಕೆದಾರರ ಒಳಪಡಿಸುವ ಮಾಹಿತಿಯನ್ನು ಪರಿಶೀಲಿಸುವ, ಸರ್ವರ್ಗಳ ಜೊತೆ ಸಂವಹನ ಮಾಡುವ, ಮತ್ತು ಉಪಕಾರೀಯ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುವ ಫಾರಂಗಳನ್ನು ನಿರ್ಮಿಸುವುದನ್ನು ಕಲಿಯುತ್ತೀರಿ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸ್ಥಿರವಾಗಿ ಕಡೆಗಣಿಸದೆ ಬಳಕೆದಾರರು ನಿರ್ವಹಿಸಲು ಅವಕಾಶ ನೀಡುವ ನಿಯಂತ್ರಣ ಮುಖಪಟವನ್ನು ನಿರ್ಮಿಸುವಂತೆ.
+
+ಅಂತ್ಯದಲ್ಲಿ, ನೀವೇ ಸಂಪೂರ್ಣ ಲಾಗಿನ್ ಮತ್ತು ನೋಂದಣಿ ವ್ಯವಸ್ಥೆಯನ್ನು ಹೊಂದಿರುವಿರಿ, ಇದು ಬಳಕೆದಾರರನ್ನು ನಿರಾಶೆಯಿಂದ ಬಿಟ್ಟು ಯಶಸ್ಸಿನತ್ತ ದಾರಿತೋರುತ್ತದೆ.
+
+```mermaid
+mindmap
+ root((Form Development))
+ HTML Foundation
+ Semantic Elements
+ Input Types
+ Accessibility
+ Label Association
+ User Experience
+ ಮಾನ್ಯತಾ ಪ್ರತಿಕ್ರಿಯೆ
+ ದೋಷ ತಡೆ
+ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು
+ ಯಶಸ್ಸಿನ ಸಂದೇಶ
+ JavaScript Integration
+ ಘಟನೆ ನಿರ್ವಹಣೆ
+ AJAX ಸಂವಹನ
+ ಡೇಟಾ ಸಂಸ್ಕರಣೆ
+ ದೋಷ ನಿರ್ವಹಣೆ
+ Validation Layers
+ HTML5 ಮಾನ್ಯತೆ
+ ಕ್ಲೈಂಟ್-ಪಾರ್ಶ್ವ ಲಾಜಿಕ್ಸ್
+ ಸರ್ವರ್-ಪಾರ್ಶ್ವ ಭದ್ರತೆ
+ ಪ್ರಗತಿಶೀಲ ಸುಧಾರಣೆ
+ Modern Patterns
+ Fetch API
+ Async/Await
+ Form Data API
+ Promise Handling
+```
+## ಪೂರ್ವಾಪೇಕ್ಷಿತಗಳು
+
+ನಾವು ಫಾರಂಗಳನ್ನು ನಿರ್ಮಿಸಲು ಆರಂಭಿಸುವ ಮೊದಲು, ನೀವು ಎಲ್ಲವನ್ನೂ ಸರಿಯಾಗಿ ಸಿದ್ಧಪಡಿಸಿರುವುದನ್ನು ಖಾತ್ರಿಪಡಿಸೋಣ. ಈ ಪಾಠವು ಮುಂಚಿನ ಪಾಠದಿಂದಲೇ ಮುಂದುವರಿಯುತ್ತಾ ಇದೆ, ಆದ್ದರಿಂದ ನೀವು ಮುಂದಕ್ಕೆ ಜಿಗಿಯಿದ್ದರೆ, ಮೊದಲಿಗೆ ಮೂಲಗಳನ್ನು ಸರಿಯಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಿಕೊಳ್ಳೋಣ.
+
+### ಅಗತ್ಯ ಸ್ವರೂಪ
+
+| ಘಟಕ | ಸ್ಥಿತಿ | ವಿವರಣೆ |
+|-----------|--------|-------------|
+| [HTML ಟೆಂಪ್ಲೇಟ್ಗಳು](../1-template-route/README.md) | ✅ ಅಗತ್ಯ | ನಿಮ್ಮ ಮೂಲ ಬ್ಯಾಂಕಿಂಗ್ ಆಪ್ ರಚನೆ |
+| [Node.js](https://nodejs.org) | ✅ ಅಗತ್ಯ | ಸರ್ವರ್ ನಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ರನ್ ಟೈಮ್ |
+| [ಬ್ಯಾಂಕ್ API ಸರ್ವರ್](../api/README.md) | ✅ ಅಗತ್ಯ | ಡೇಟಾ ಸಂಗ್ರಹಕ್ಕಾಗಿ ಬ್ಯಾಕೆಂಡ್ ಸರ್ವೀಸ್ |
+
+> 💡 **ವಿಕಸನ ಸಲಹೆ**: ನೀವು ಎರಡು ಪ್ರತ್ಯೇಕ ಸರ್ವರ್ಗಳನ್ನು ಒಂದೇ ಸಮಯದಲ್ಲಿ ಓಡಿಸುತ್ತಿದ್ದೀರಿ – ನಿಮ್ಮ ಫ್ರಂಟ್ ಎಂಡ್ ಬ್ಯಾಂಕಿಂಗ್ ಆಪ್ ಗೆ ಒಂದು ಮತ್ತು ಬ್ಯಾಕೆಂಡ್ API ಗೆ ಮತ್ತೊಂದು. ಈ ವ್ಯವಸ್ಥೆ ವಾಸ್ತವಿಕ ಅಭಿವೃದ್ಧಿಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಅಲ್ಲಿ ಫ್ರಂಟ್ ಎಂಡ್ ಮತ್ತು ಬೆಕ್ ಎಂಡ್ ಸೇವೆಗಳು ಸ್ವತಂತ್ರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ.
+
+### ಸರ್ವರ್ ಸಂರಚನೆ
+
+**ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಪರಿಸರದಲ್ಲಿ ಒಳಗೊಳ್ಳುವುದಾದುದು:**
+- **ಫ್ರಂಟ್ ಎಂಡ್ ಸರ್ವರ್**: ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಆಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸರಬರಾಜು ಮಾಡುತ್ತದೆ (ಸಾಮಾನ್ಯವಾಗಿ ಪೋರ್ಟ್ `3000`)
+- **ಬ್ಯಾಕೆಂಡ್ API ಸರ್ವರ್**: ಡೇಟಾ ಸಂಗ್ರಹ ಮತ್ತು ಪಡೆದುಕೊಳ್ಳುವಿಕೆಗೆ (ಪೋರ್ಟ್ `5000`)
+- **ಎರಡು ಸರ್ವರ್ಗಳು** ಸಮಕಾಲೀನವಾಗಿ ಯಾವುದೇ ಘರ್ಷಣೆ ಇಲ್ಲದೆ ಓಡಬಹುದು
+
+**ನಿಮ್ಮ API ಸಂಪರ್ಕವನ್ನು ಪರೀಕ್ಷಿಸುವುದು:**
+```bash
+curl http://localhost:5000/api
+# ನಿರೀಕ್ಷಿತ ಪ್ರತಿಕ್ರಿಯೆ: "ಬ್ಯಾಂಕ್ API v1.0.0"
+```
+
+**ನೀವು API ಆವೃತ್ತಿ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೋಡಿದರೆ, ನೀವು ಮುಂದುವರೆಯಲು ಸಿದ್ಧರಿದ್ದೀರಿ!**
+
+---
+
+## HTML ಫಾರಂಗಳು ಮತ್ತು ನಿಯಂತ್ರಣೆಗಳ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
+
+HTML ಫಾರಂಗಳು ಬಳಕೆದಾರರು ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಜೊತೆಗೆ ಮಾಹಿತಿ ಹಂಚಿಕೊಳ್ಳುವ ಮಾರ್ಗ. ಅವುಗಳನ್ನು 19ನೇ ಶತಮಾನದಲ್ಲಿ ದೂರದ ಸ್ಥಿರಗಳಿಗೆ ಸಂಪರ್ಕಿಸುವ ಟೆಲಿಗ್ರಾಫ್ ವ್ಯವಸ್ಥೆಯಂತೆ ಪರಿಗಣಿಸಿ – ಬಳಕೆದಾರರ ಉದ್ದೇಶ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಪ್ರತಿಕ್ರಿಯೆಯ ಮಧ್ಯದ ಸಂವಹನ ಪ್ರೋಟೋಕಾಲ್. ಜಾಗೃತಿಯಿಂದ ವಿನ್ಯಾಸ ಮಾಡಿದ್ದಾರೆರೆ, ಅವು ದೋಷಗಳನ್ನು ಹಿಡಿದಿಡುತ್ತವೆ, ನಮೂನೆಯ ಕೈಪಿಡಿಗಳನ್ನು ಮಾರ್ಗದರ್ಶಿಸುತ್ತವೆ, ಮತ್ತು ಸಹಾಯಕ ಸಲಹೆಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.
+
+ಆಧುನಿಕ ಫಾರಂಗಳು ಸರಳ ಪಠ್ಯ ಇನ್ಪುಟ್ಗಳಿಗಿಂತ ಬಹು ಸುಧಾರಿತವಾಗಿವೆ. HTML5 ವಿಶೇಷ ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳನ್ನು ಪರಿಚಯಿಸಿತು, ಇದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಇಮೇಲ್ ಪರಿಶೀಲನೆ, ಸಂಖ್ಯೆ ಸ್ವರೂಪ ಮತ್ತು ದಿನಾಂಕ ಆಯ್ಕೆಕ್ಷಮತೆಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಈ ಸುಧಾರಣೆಗಳು ಪ್ರವೇಶಾರ್ಹತೆ ಹಾಗೂ ಮೊಬೈಲ್ ಬಳಕೆದಾರರ ಅನುಭವಗಳಿಗೂ ಸಹ ಸಹಾಯ ಮಾಡುತ್ತವೆ.
+
+### ಅವಶ್ಯಕ ಫಾರಂ ಅಂಶಗಳು
+
+**ಪ್ರತಿ ಫಾರಂಗೆ ಬೇಕಾದ ಕಟ್ಟಡಕರು:**
+
+```html
+
+
+```
+
+**ಈ ಕೋಡ್ ಏನು ಮಾಡುತ್ತದೆ:**
+- **ಫಾರಂ ಕಾಂಟೈನರ್** ಅನ್ನು ವಿಶೇಷ ಗುರುತಿಸುವ ಗುರುತಿನೊಂದಿಗೆ ರಚಿಸುತ್ತದೆ
+- **ಡೇಟಾ ಸಬ್ಮಿಷನ್ಗಾಗಿ** HTTP ವಿಧಾನವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ
+- **ಪ್ರವೇಶಾರ್ಹತೆಗಾಗಿ** ಲೆಬಲ್ಗಳನ್ನು ಇನ್ಪುಟ್ಗಳ ಜೊತೆ ಜೋಡಿಸುತ್ತದೆ
+- **ಫಾರಂ ಪ್ರಕ್ರಿಯೆಗಾಗಿ** ಸಬ್ಮಿಟ್ ಬಟನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ
+
+### ಆಧುನಿಕ ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳು ಮತ್ತು ಲಕ್ಷಣಗಳು
+
+| ಇನ್ಪುಟ್ ಪ್ರಕಾರ | ಉದ್ದೇಶ | ಉದಾಹರಣಾ ಬಳಕೆ |
+|------------|---------|---------------|
+| `text` | ಸಾಮಾನ್ಯ ಪಠ್ಯ ಇನ್ಪುಟ್ | `Save Data
+Clear Form
+Custom Action
+```
+
+**ಪ್ರತಿ ಬಟನ್ ಪ್ರಕಾರವು ಎಷ್ಟು ಕಾರ್ಯವೈಖರಿ:**
+- **ಸಬ್ಮಿಟ್ ಬಟನ್ಗಳು**: ಫಾರಂ ಸಲ್ಲಿಸುವುದನ್ನು ಪ್ರೇರೇಪಿಸಿ ಡೇಟಾವನ್ನು ನಿಗದಿತ ಅಂತಿಮ ಬಿಂದುವಿಗೆ ಕಳುಹಿಸುತ್ತವೆ
+- **ರಿಸೆಟ್ ಬಟನ್ಗಳು**: ಎಲ್ಲಾ ಫಾರಂ ಕ್ಷೇತ್ರಗಳನ್ನು ಆರಂಭಿಕ ಸ್ಥಿತಿಗೆ ಹಿಂಪಡುವಿಕೆ ಮಾಡುತ್ತವೆ
+- **ನಿಯಮಿತ ಬಟನ್ಗಳು**: ಯಾವುದೇ ಡೀಫಾಲ್ಟ್ ವ್ಯವಹಾರ ಇಲ್ಲ, ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯ
+
+> ⚠️ **ಪ್ರಮುಖ ಟಿಪ್ಪಣಿ**: `
+ Bank App
+
+
+```
+
+**ಇಲ್ಲಿ ಆಗುವ ಪ್ರಮುಖ ಸಂಗತಿಗಳು:**
+- **ಫಾರಂವನ್ನು ಸಾಂಕೇತಿಕ HTML5 ಅಂಶಗಳೊಂದಿಗೆ ರಚಿಸುತ್ತದೆ**
+- **ಸಂಬಂಧಿತ ಅಂಶಗಳನ್ನು ಅರ್ಥಪೂರ್ಣ ವರ್ಗಗಳುಳ್ಳ `div` ಕಾಂಟೈನರ್ಗಳ ಮೂಲಕ ಗುಂಪು ಮಾಡುತ್ತದೆ**
+- **`for` ಮತ್ತು `id` ಗುಣಲಕ್ಷಣಗಳಿಂದ ಲೇಬಲ್ಸ್ ಮತ್ತು ಇನ್ಪುಟ್ಗಳನ್ನು ಜೋಡಿಸುತ್ತದೆ**
+- **ಉತ್ತಮ ಉಪಯೋಗದ ಅನುಭವಕ್ಕೆ `autocomplete` ಮತ್ತು `placeholder` ಸಾಮ್ರಾಜ್ಯಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ**
+- **ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಬದಲಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಪರಿಶೀಲನೆ ನಡೆಸಲು `novalidate` ಅನ್ನು ಸೇರಿಸುತ್ತದೆ**
+
+### ಸೂಕ್ತ ಲೇಬಲ್ಸ್ ಶಕ್ತಿಯು
+
+**ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಲೇಬಲ್ಸ್ ಮುಂಬರುವ ಕಾರಣಗಳು:**
+
+```mermaid
+graph TD
+ A[ಲೇಬಲ್ ಘಟಕ] --> B[ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬೆಂಬಲ]
+ A --> C[ಕ್ಲಿಕ್ ಗುರಿ ವಿಸ್ತರಣೆ]
+ A --> D[ಫಾರ್ಮ್ ಮಾನ್ಯತೆ]
+ A --> E[ಎಸ್ಇಒ ಲಾಭಗಳು]
+
+ B --> F[ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಲು ಸಾಧ್ಯ]
+ C --> G[ಮೆಚ್ಚಿನ ಮೊಬೈಲ್ ಅನುಭವ]
+ D --> H[ಸ್ಪಷ್ಟ ದೋಷ ಸಂದೇಶ]
+ E --> I[ಮೆಚ್ಚಿನ ಹುಡುಕಾಟ ಶ್ರೇಣಿ]
+```
+**ಸೂಕ್ತ ಲೇಬಲ್ಗಳು ನೀಡುವ ಚಟುವಟಿಕೆಗಳು:**
+- **ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗಳು ಸ್ಪಷ್ಟವಾಗಿ ಫಾರಂ ಕ್ಷೇತ್ರಗಳನ್ನು ಘೋಷಿಸುವಂತೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ**
+- **ಕ್ಲಿಕ್ ಮಾಡುವ ವಿಸ್ತೀರ್ಣವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ (ಲೇಬಲ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ ಇನ್ಪುಟ್ಗೆ ಫೋಕಸ್ ಆಗುತ್ತದೆ)**
+- **ಮೋಬೈಲ್ ಬಳಕೆಗೆ ದೊಡ್ಡ ಟಚ್ ಗುರಿಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ**
+- **ಭರತನಿರ್ವಾಹಕ ದೋಷ ಸಂದೇಶಗಳೊಂದಿಗೆ ಫಾರಂ ಪರಿಶೀಲನೆಯನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ**
+- **ಫಾರಂ ಅಂಶಗಳಿಗೆ ಅರ್ಥಮಯ ಅರ್ಥವನ್ನು ಕೊಡುತ್ತಿರುವುದರಿಂದ SEO ಉತ್ತಮವಾಗುತ್ತದೆ**
+
+> 🎯 **ಪ್ರವೇಶಾರ್ಹತೆ ಗುರಿ**: ಪ್ರತಿಯೊಬ್ಬ ಫಾರಂ ಇನ್ಪುಟ್ಗೆ ಸಂಬಂಧಪಟ್ಟ ಲೇಬಲ್ ಇರಬೇಕು. ಈ ಸರಳ ಅಭ್ಯಾಸವು ನಿಮ್ಮ ಫಾರಂಗಳನ್ನು ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೂ ಉಪಯುಕ್ತವಾಗಿಸುತ್ತದೆ, ಅಂಗವಿಕಲರು ಸೇರಿದಂತೆ, ಮತ್ತು ಎಲ್ಲಾ ಬಳಕೆದಾರರ ಅನುಭವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
+
+### ನೋಂದಣಿ ಫಾರಂ ನಿರ್ಮಾಣ
+
+ನೋಂದಣಿ ಫಾರಂ ಸಂಪೂರ್ಣ ಬಳಕೆದಾರ ಖಾತೆಯನ್ನು ರಚಿಸಲು ಹೆಚ್ಚಿನ ವಿವರಗಳನ್ನು ಬಯಸುತ್ತದೆ. ಅದನ್ನು ಆಧುನಿಕ HTML5 ಮತ್ತು ಉತ್ತಮ ಪ್ರವೇಶಾರ್ಹತೆಯೊಂದಿಗೆ ನಿರ್ಮಿಸೋಣ.
+
+```html
+Register
+
+```
+
+**ಮೇಲಿನಲ್ಲಿದ್ದವು:**
+- **ಪ್ರತಿ ಕ್ಷೇತ್ರವನ್ನು ಉತ್ತಮ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಕಂಟೈನರ್ ಡಿವ್ಗಳಲ್ಲಿ ಸಂಘಟಿಸಿದ್ದು**
+- **ಬ್ರೌಸರ್ ಆಫ್ಟೊಫಿಲ್ ಬೆಂಬಲಕ್ಕಾಗಿ ಸೂಕ್ತ `autocomplete` ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸೇರಿಸಿದ್ದು**
+- **ಬಳಕೆದಾರರ ಒಳಪಡಿಸುವಿಕೆಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುವ ಸಹಾಯಕ ಪ್ಲೇಸ್ಹೋಲ್ಡರ್ ಪಠ್ಯವನ್ನು ಸೇರಿಸಿದ್ದು**
+- **`value` ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಸೂಕ್ತ ಡೀಫಾಲ್ಟ್ ಮೂಲ್ಯಗಳನ್ನು ಹೊಂದಿಸಿದ್ದು**
+- **`required`, `maxlength`, ಮತ್ತು `min`ಂತಹ ಪರಿಶೀಲನಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಉಪಯೋಗಿಸಿದ್ದು**
+- **ಬ್ಯಾಲೆನ್ಸ್ ಕ್ಷೇತ್ರಕ್ಕೆ ದಶಮಲವ ಸಹಿತ `type="number"` ಬಳಕೆ ಮಾಡಲಾಗಿದೆ**
+
+### ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳು ಮತ್ತು ಚಟುವಟಿಕೆಗಳ ಪರಿಗಣನೆ
+
+**ಆಧುನಿಕ ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳು ಹೆಚ್ಚಿದ ಕಾರ್ಯಕ್ಷಮತೆ ನೀಡುತ್ತವೆ:**
+
+| ವೈಶಿಷ್ಟ್ಯ | ಲಾಭ | ಉದಾಹರಣೆ |
+|---------|---------|----------|
+| `type="number"` | ಮೊಬೈಲ್ನಲ್ಲಿ ಸಂಖ್ಯಾತ್ಮಕ ಕೀಪ್ಯಾಡ್ | ಸುಲಭ ಬ್ಯಾಲೆನ್ಸ್ ನಮೂದಿಕೆ |
+| `step="0.01"` | ದಶಮಲವ ನಿಖರ ನಿಯಂತ್ರಣ | ಕರೆನ್ಸಿಯಲ್ಲಿ ಸೆಂಸೆಗಳ ಅನುಮತಿ |
+| `autocomplete` | ಬ್ರೌಸರ್ ಆಫ್ಟೊಫಿಲ್ | ಫಾರಂ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆಯ ವೇಗ |
+| `placeholder` | ಸಂಬಂಧಿತ ಸೂಚನೆಗಳು | ಬಳಕೆದಾರ ನಿರೀಕ್ಷೆಯನ್ನು ಮಾರ್ಗದರ್ಶನ |
+
+> 🎯 **ಪ್ರವೇಶಾರ್ಹತೆ ಸವಾಲು**: ನಿಮ್ಮ ಕೀಬೋರ್ಡ್ ಅನ್ನು ಮಾತ್ರ ಬಳಸಿಕೊಂಡು ಫಾರಂಗಳನ್ನು ನಾವಿಗೇಟ್ ಮಾಡುವ ಪ್ರಯತ್ನ ಮಾಡಿ! ಕ್ಷೇತ್ರಗಳ ನಡುವೆ ಸರಕುವಕ್ಕಾಗಿ `Tab`, ಬಾಕ್ಸ್ ಅನ್ನು ತಪಾಸಣೆಗೆ `Space`, ಮತ್ತು ಸಲ್ಲಿಸಲು `Enter` ಬಳಸಿ. ಈ ಅನುಭವವು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಕೆದಾರರು ನಿಮ್ಮ ಫಾರಂಗಳೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹನ ಮಾಡುತ್ತಾರೆ ಎಂಬುದನ್ನು ನಿಮಗೆ ಹೇಳುತ್ತದೆ.
+
+### 🔄 **ಶಿಕ್ಷಣಾತ್ಮಕ ಪರಿಶೀಲನೆ**
+**ಫಾರಂ ಭಿತ್ತಿಯ ಗ್ರಹಿಕೆ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಜೋಡಿಸುವ ಮೊದಲು, ನಿಮಗೆ ತಿಳಿದಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
+- ✅ ಹೇಗೆ ಸಾಂಕೇತಿಕ HTML ಪ್ರವೇಶಾರ್ಹ ಫಾರಂ ರಚನೆಗಳನ್ನು ಸೃಷ್ಠಿಸುತ್ತದೆ
+- ✅ ಮೊಬೈಲ್ ಕೀಬೋರ್ಡ್ಗಳಿಗೆ ಮತ್ತು ಪರಿಶೀಲನೆಗೆ ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳು ಏಕೆ ಮುಖ್ಯ
+- ✅ ಲೇಬಲ್ಸ್ ಮತ್ತು ಫಾರಂ ನಿಯಂತ್ರಣಗಳ ಸಂಬಂಧವೇನು
+- ✅ ಫಾರಂ ಗುಣಲಕ್ಷಣಗಳು ಬ್ರೌಸರ್ ನ ಡೀಫಾಲ್ಟ್ ವರಹಹೋಗುವಿಕೆಗಳಿಗೆ ಹೇಗೆ ಪ್ರಭಾವ ಬೀರುತ್ತವೆ
+
+**ತ್ವರಿತ ಸ್ವಯಂ ಪರೀಕ್ಷೆ**: ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿರ್ವಹಣೆ ಇಲ್ಲದೆ ಫಾರಂ ಸಲ್ಲಿಸಿದರೆ ಏನಾಗುತ್ತದೆ?
+*ಉತ್ತರ: ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಸಲ್ಲಿಕೆಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ, ಸಾಮಾನ್ಯವಾಗಿ ಆಕ್ಷನ್ URL ಗೆ ಪುನರ್ನಿರ್ದೇಶನ ಮಾಡುತ್ತದೆ*
+
+**HTML5 ಫಾರಂಗಳ ಲಾಭಗಳು**: ಆಧುನಿಕ ಫಾರಂಗಳು ನೀಡುತ್ತವೆ:
+- **ನಿರ್ಮಿತ ಪರಿಶೀಲನೆ**: ಸ್ವಯಂಚಾಲಿತ ಇಮೇಲ್ ಮತ್ತು ಸಂಖ್ಯೆ ಸ್ವರೂಪ ಪರಿಶೀಲನೆ
+- **ಮೊಬೈಲ್ ಪರಿಪೂರ್ಣತೆ**: ವಿಭಿನ್ನ ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳಿಗೆ ಸೂಕ್ತ ಕೀಬೋರ್ಡ್ಗಳು
+- **ಪ್ರವೇಶಾರ್ಹತೆ**: ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬೆಂಬಲ ಮತ್ತು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಶನ್
+- **ಪ್ರಗತಿಶೀಲ ಸುಧಾರಣೆ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯ ಇದ್ದಾಗಲೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
+
+## ಫಾರಂ ಸಲ್ಲಿಸುವ ವಿಧಾನಗಳ ಅರ್ಥ
+
+ಯಾರೋ ಒಂದು ಫಾರಂ ತುಂಬಿ ಸಲ್ಲಿಸಿದಾಗ, ಆ ಡೇಟಾ ಯಾವುದೋ ಜಾಗಕ್ಕೆ ಹೋಗಬೇಕು – ಸಾಮಾನ್ಯವಾಗಿ ಅದನ್ನು ಉಳಿಸುವ ಸರ್ವರ್ಗೆ. ಇದಕ್ಕೆ ಕೆಲವು ವಿವಿಧ ವಿಧಾನಗಳಿರುತ್ತವೆ, ಮತ್ತು ಯಾವದನ್ನು ಬಳಸಬೇಕೆಂದು ತಿಳಿದಿರುವುದು ನಂತರ ನಿಮ್ಮ ತಲೆನೋವನ್ನು ಉಳಿಸುತ್ತದೆ.
+
+ಸಬ್ಮಿಟ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವಾಗ ಏನಾಗುತ್ತದೆ ನೋಡೋಣ.
+
+### ಡೀಫಾಲ್ಟ್ ಫಾರಂ ವರಹಹೋಗುವಿಕೆ
+
+ಮೊದಲಿಗೆ, ಸರಳ ಫಾರಂ ಸಲ್ಲಿಸುವಿಕೆಯೊಂದಿಗೆ ಏನಾಗುತ್ತದೆ ಎನ್ನುವುದನ್ನು ಗಮನಿಸೋಣ:
+
+**ನೀವೆಲ್ಲಾ ಫಾರಂಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ:**
+1. ನಿಮ್ಮ ಫಾರಂನಲ್ಲಿ *ನೋಂದಣಿ* ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ
+2. ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಳಾಸ ಪಟ್ಟಿಯಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಗಮನಿಸಿ
+3. ಪುಟ ಮರುಭರ್ತಿ ಆಗುವುದು ಮತ್ತು URL ನಲ್ಲಿ ಡೇಟಾ ಕಾಣಿಸುವುದು ಗಮನಿಸಿ
+
+
+
+### HTTP ವಿಧಾನಗಳ ಹೋಲಿಕೆ
+
+```mermaid
+graph TD
+ A[ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ] --> B{HTTP ವಿಧಾನ}
+ B -->|GET| C[URL ನಲ್ಲಿ ಡೇಟಾ]
+ B -->|POST| D[ವಿನಂತಿ גוף ಡೇಟಾ]
+
+ C --> E[ನಿರ್ದೇಶನ ಬಾರ್ನಲ್ಲಿ ಕಾಣಿಸುವುದು]
+ C --> F[ಸೀಮಿತ ಡೇಟಾ ಗಾತ್ರ]
+ C --> G[ಬುಕ್ಮಾರ್ಕ್ ಮಾಡಬಹುದಾಗಿದೆ]
+
+ D --> H[URL ರಿಂದ ಅಡಗಿಸಿದ್ದ]
+ D --> I[ಬೃಹತ್ ಡೇಟಾ ಸಾಮರ್ಥ್ಯ]
+ D --> J[ಹೆಚ್ಚು ಸುರಕ್ಷಿತ]
+```
+**ವೈವಿಧ್ಯಗಳ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು:**
+
+| ವಿಧಾನ | ಉಪಯೋಗ | ಡೇಟಾ ಸ್ಥಳ | ಭದ್ರತಾ ಮಟ್ಟ | ಗಾತ್ರ ಮಿತಿ |
+|--------|----------|---------------|----------------|-------------|
+| `GET` | ಹುಡುಕು ಪ್ರಶ್ನೆಗಳು, ಫಿಲ್ಟರ್ಗಳು | URL ಪರಿಮಾಣಗಳು | ಕಡಿಮೆ (ಗೋಚರ) | ~2000 ಅಕ್ಷರಗಳು |
+| `POST` | ಬಳಕೆದಾರ ಖಾತೆಗಳು, ಸಂವೇದನಶೀಲ ಡೇಟಾ | ವಿನಂತಿ ದೇಹ | ಹೆಚ್ಚು (ಗोप್ಯ) | ಕಾರ್ಯನಿರ್ವಹಣಾ ಮಿತಿ ಇಲ್ಲ |
+
+**ಮೂಲಭೂತ ವ್ಯತ್ಯಾಸಗಳ ಅರ್ಥ:**
+- **GET**: ಫಾರಂ ಡೇಟಾವನ್ನು ವಿನಂತಿ URL ಗೆ ಪ್ರಶ್ನಾ ಪರಿಮಾಣಗಳಾಗಿ ಸೇರ್ಪಡೆ ಮಾಡುತ್ತದೆ (ಹುಡುಕಿಗಾಗಿ ಸೂಕ್ತ)
+- **POST**: ವಿನಂತಿ ದೇಹದಲ್ಲಿ ಡೇಟಾವನ್ನು ಸೇರಿಸುತ್ತದೆ (ಸಂವೇದನಶೀಲ ಮಾಹಿತಿಗಾಗಿ ಅವಶ್ಯ)
+- **GET ಮಿತಿ ಗಳು**: ಗಾತ್ರ ಮಿತಿ, ಗೋಚರ ಡೇಟಾಂಶ, ಬ್ರೌಸರ್ ಇತಿಹಾಸದಲ್ಲಿ ಸ್ಥಿರತೆ
+- **POST ಪ್ರಯೋಜನಗಳು**: ದೊಡ್ಡ ಡೇಟಾ ಸಾಮರ್ಥ್ಯ, ಗೌಪ್ಯತೆ ರಕ್ಷಣೆ, ಫೈಲ್ ಅಪ್ ಲೋಡ್ ಬೆಂಬಲ
+
+> 💡 **ಉತ್ತಮ ಅಭ್ಯಾಸ**: ಹುಡುಕಾಟ ಹಾಗೂ ಫಿಲ್ಟರ್ ಫಾರಂಗಳಿಗೆ `GET` ಬಳಸಿರಿ (ಡೇಟಾ ಪಡೆಯಲು), ಬಳಕೆದಾರ ನೋಂದಣಿ ಹಾಗೂ ಲಾಗಿನ್, ಮತ್ತು ಡೇಟಾ ಸೃಷ್ಟಿಗಾಗಿ `POST` ಬಳಸಿ.
+
+### ಫಾರಂ ಸಲ್ಲಿಸುವಿಕೆಯನ್ನು ಸಂರಚಿಸುವುದು
+
+ನಿಮ್ಮ ನೋಂದಣಿ ಫಾರಂ ಅನ್ನು ಬ್ಯಾಕೆಂಡ್ API ಜೊತೆ ಸರಿಯಾಗಿ ಸಂವಹನ ಮಾಡಲು POST ವಿಧಾನ ಬಳಸಿ ಸಂರಚಿಸೋಣ:
+
+```html
+
+```
+
+**ಸುಧಾರಿತ ಮಾನ್ಯತೆಯ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿಕೆ:**
+- **ಅಗತ್ಯ ಕ್ಷೇತ್ರ ಸೂಚನೆಗಳನ್ನು** ಸಹಿತವಾಗಿ ಸಂಯೋಜಿಸುತ್ತದೆ
+- **ಫಾರ್ಮ್ಯಾಟ್ ಮಾನ್ಯತೆಗಾಗಿ** `pattern` ಗುಣಲಕ್ಷಣಗಳನ್ನೂ ಒಳಗೊಂಡಿದೆ
+- **ಸೌಲಭ್ಯ ಮತ್ತು ಟೂಲ್ಟಿಪ್ಗಾಗಿ** `title` ಗುಣಲಕ್ಷಣಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ
+- **ಬಳಕೆದಾರ ಕರೆತರುವಿಕೆಗಾಗಿ** ಸಹಾಯಕರ ಪಠ್ಯವನ್ನು ಸೇರಿಸುತ್ತದೆ
+- **ಉತ್ತಮ ಸೌಲಭ್ಯಕ್ಕಾಗಿ** ಸೆಮ್ಯಾಂಟಿಕ್ HTML ರಚನೆಯನ್ನು ಬಳಸುತ್ತದೆ
+
+### ಆಧುನಿಕ ಮಾನ್ಯತಾ ನಿಯಮಗಳು
+
+**ಪ್ರತಿ ಮಾನ್ಯತಾ ನಿಯಮ ನೀಡುವ ಲಾಭ:**
+
+| ಕ್ಷೇತ್ರ | ಮಾನ್ಯತಾ ನಿಯಮಗಳು | ಬಳಕೆದಾರ ಲಾಭ |
+|-------|------------------|--------------|
+| ಬಳಕೆದಾರನಾಮ | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | ಮಾನ್ಯ, ವಿಶಿಷ್ಟ ಗುರುತುಗಳನ್ನು ಖಾತ್ರಿ ಮಾಡುತ್ತದೆ |
+| ಕರೆನ್ಸಿ | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | ಸಾಮಾನ್ಯ ಕರೆನ್ಸಿ ಚಿಹ್ನೆಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ |
+| ಬ್ಯಾಲೆನ್ಸ್ | `min="0"`, `step="0.01"`, `type="number"` | ಋಣಾತ್ಮಕ ಬಾಕಿ ಕಡಿತ ಮಾಡುತ್ತದೆ |
+| ವಿವರಣೆ | `maxlength="100"` | ಸೂಕ್ತ ಉದ್ದ ಮಿತಿಯನ್ನು ಹೊಂದಿದೆ |
+
+### ಮಾನ್ಯತಾ ವರ್ತನೆ ಪರೀಕ್ಷೆ
+
+**ಈ ಮಾನ್ಯತಾ ಸನ್ನಿವೇಶಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ:**
+1. **ಅಗತ್ಯ ಕ್ಷೇತ್ರಗಳನ್ನು ಖಾಲಿಯಾಗಿ** ಫಾರ್ಮ್ ಸಲ್ಲಿಸಿ
+2. **3 ಅಕ್ಷರಕ್ಕಿಂತ ಕಡಿಮೆ ಉದ್ದದ ಬಳಕೆದಾರನಾಮ ನಮೂದಿಸಿ**
+3. **ಬಳಕೆದಾರನಾಮ ಕ್ಷೇತ್ರದಲ್ಲಿ ವಿಶೇಷ ಅಕ್ಷರಗಳನ್ನು ಬಳಸಿ ಬಾರಿ ಮಾಡಿ**
+4. **ಋಣಾತ್ಮಕ ಬ್ಯಾಲೆನ್ಸ್ ಮೊತ್ತ ನಮೂದಿಸಿ**
+
+
+
+**ನೀವು ಗಮನಿಸುವುದು:**
+- **ಬ್ರೌಸರ್ ಮೂಲ ಮಾನ್ಯತಾ ಸಂದೇಶಗಳನ್ನು ತೋರಿಸುತ್ತದೆ**
+- **`:valid` ಮತ್ತು `:invalid` ಸ್ಥಿತಿಗಳಿಗನುಗುಣವಾಗಿ ಶೈಲಿ ಬದಲಾಗುತ್ತದೆ**
+- **ಎಲ್ಲಾ ಮಾನ್ಯತೆಗಳು ಪಾಸ್ ಆಗುವವರೆಗೆ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ತಡೆಯಲಾಗುತ್ತದೆ**
+- **ಮೊದಲ ದೋಷಗೊಳಗೊಂಡ ಕ್ಷೇತ್ರಕ್ಕೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಫೋಕ್ಸು ಮರುಹೊಂದುತ್ತದೆ**
+
+### ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮತ್ತು ಸರ್ವರ್-ಸೈಡ್ ಮಾನ್ಯತೆ
+
+```mermaid
+graph LR
+ A[ಕ್ಲೈಂಟ್-ಪಕ್ಷದ ಮಾನ್ಯತೆ] --> B[ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ]
+ A --> C[ಮೆಚ್ಚುಗೆಯ ಉತ್ಫಲನುಭವ]
+ A --> D[ಸರ್ವರ್ ಭಾರವನ್ನು ಕಡಿಮೆಮಾಡಿದೆ]
+
+ E[ಸರ್ವರ್-ಪಕ್ಷದ ಮಾನ್ಯತೆ] --> F[ಭದ್ರತೆ]
+ E --> G[ಡೇಟಾ ಒಪ್ಪಂದತೆ]
+ E --> H[ವ್ಯಾಪಾರ ನಿಯಮಗಳು]
+
+ A -.-> I[ಎರಡೂ ಅಗತ್ಯವಿದೆ]
+ E -.-> I
+```
+**ನೀವು ಎರಡೂ ಪದರಗಳನ್ನು ಏಕೆ ಬೇಕು:**
+- **ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮಾನ್ಯತೆ**: ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸಿ ಬಳಕೆದಾರ ಅನುಭವ ಸುಧಾರಣೆಯು
+- **ಸರ್ವರ್-ಸೈಡ್ ಮಾನ್ಯತೆ**: ಭದ್ರತೆ ಖಚಿತಪಡಿಸಿ ಮತ್ತು ಸಂಕೀರ್ಣ ವ್ಯವಹಾರ ನಿಯಮಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ
+- **ಸಂಯೋಜಿತ ವಿಧಾನ**: ಬಲವಾದ, ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಮತ್ತು ಭದ್ರ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ರಚಿಸುತ್ತದೆ
+- **ಗ್ರಹಣೀಯ ಸುಧಾರಣೆ**: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯ ಆಗಿರುವಾಗಲೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
+
+> 🛡️ **ಭದ್ರತಾ ನೆನಪಿನಂತೆ**: ಮಾತ್ರ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮಾನ್ಯತೆಯನ್ನು ನಂಬಬೇಡಿ! ದುರ್ಬಲ ಬಳಕೆದಾರರು ಕ್ಲೈಂಟ್-ಪರಿಶೀಲನೆಗಳನ್ನು ತಪ್ಪಿಸುವ ಸಾಧ್ಯತೆ ಇರುತ್ತದೆ, ಹಾಗಾಗಿ ಭದ್ರತೆ ಮತ್ತು ಡೇಟಾ ಸಮಗ್ರತೆಗೆ ಸರ್ವರ್-ಪರಿಶೀಲನೆ ಅಗತ್ಯ.
+
+### ⚡ **ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದುದು**
+- [ ] ವಾಲಿಡೇಶನ್ ಸಂದೇಶಗಳನ್ನು ನೋಡಲು ಅಮಾನ್ಯ ಡೇಟಾ ಬಳಸಿ ನಿಮ್ಮ ಫಾರ್ಮ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಿ
+- [ ] ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ ಫಾರ್ಮ್ ಸಲ್ಲಿಸುವುದನ್ನು ಪ್ರಯತ್ನಿಸಿ ಮತ್ತು HTML5 ಮಾನ್ಯತೆಯನ್ನು ನೋಡಿ
+- [ ] ಬ್ರೌಸರ್ ಡೆವ್ಟೂಲ್ಗಳನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಸರ್ವರ್ಗೆ ಕಳುಹಿಸಲಾಗುತ್ತಿರುವ ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ಪರಿಶೀಲಿಸಿ
+- [ ] ವಿಭಿನ್ನ ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳನ್ನು ಪ್ರಯೋಗಿಸಿ ಮೊಬೈಲ್ ಕೀಬೋರ್ಡ್ ಬದಲೆಗಳನ್ನು ಗಮನಿಸಿ
+
+### 🎯 **ಈ ಗಂಟೆಯಲ್ಲಿ ಸಾಧಿಸಬಹುದಾದುದು**
+- [ ] ಪಾಠೋತ್ತರ ಕ್ವಿಜ್ ಮುಗಿಸಿ ಮತ್ತು ಫಾರ್ಮ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ
+- [ ] ನೈಜ-ಸಮಯ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ವ್ಯಾಪಕ ಮಾನ್ಯತಾ ಸವಾಲು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ವೃತ್ತಿಪರ ನೋಟದ ಫಾರ್ಮ್ಗಳಿಗೆ CSS ಶೈಲಿಯನ್ನು ಸೇರಿಸಿ
+- [ ] ಪ್ರತಿಯೊಬ್ಬ ಬಳಕೆದಾರನಾಮಕ್ಕಾಗಿಯೂ ದ್ವಿಪರ್ಯಾಯ ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಸರ್ವರ್ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ರಚಿಸಿ
+- [ ] ಪಾಸ್ವರ್ಡ್ ದೃಢೀಕರಣ ಕ್ಷೇತ್ರಗಳನ್ನು ಹೊಂದಿಸಿ ಮತ್ತು ಹೊಂದಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸಿ
+
+### 📅 **ನಿಮ್ಮ ವಾರ ಮಟ್ಟದ ಫಾರ್ಮ್ ಪರಿಣತಿ ಪ್ರಯಾಣ**
+- [ ] ಸುಧಾರಿತ ಫಾರ್ಮ್ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಪೂರ್ಣಗೊಳಿಸಿ
+- [ ] ಪ್ರೊಫೈಲ್ ಚಿತ್ರಗಳು ಅಥವಾ ದಾಖಲೆಗಳಿಗಾಗಿ ಫೈಲ್ ಅಪ್ಲೋಡ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಪ್ರಗತಿಯ ಸೂಚಕಗಳು ಮತ್ತು ಸ್ಥಿತಿ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಬಹು ಹಂತದ ಫಾರ್ಮ್ಗಳನ್ನು ಸೇರಿಸಿ
+- [ ] ಬಳಕೆದಾರ ಆಯ್ಕೆಯ ಆಧಾರಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಬಲ್ಲ ಡೈನಾಮಿಕ್ ಫಾರ್ಮ್ಗಳನ್ನು ಸೃಷ್ಟಿಸಿ
+- [ ] ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಫಾರ್ಮ್ ಆಟೋಸೇವ್ ಮತ್ತು ಪುನರುಜ್ಜೀವನವನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ಇಮೇಲ್ ಪರಿಶೀಲನೆ ಮತ್ತು ಫೋನ್ ನಂಬರಿನ ಮಾದರೀಕರಣದಂತಹ ಸುಧಾರಿತ ಮಾನ್ಯತೆಯನ್ನು ಸೇರಿಸಿ
+
+### 🌟 **ನಿಮ್ಮ ತಿಂಗಳ ಮಟ್ಟದ ಫ್ರಂಟ್ಎಂಡ್ ಡೆವಲಪ್ಮೆಂಟ್ ಪರಿಣತಿ**
+- [ ] ಶರ್ತಾತ್ಮಕ ತರ್ಕ ಮತ್ತು ಕಾರ್ಯಪಟುಗಳೊಂದಿಗೆ ಐತಿಹಾಸಿಕ ಫಾರ್ಮ್ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ನಿರ್ಮಿಸಿ
+- [ ] ವೇಗದ ಅಭಿವೃದ್ಧಿಗಾಗಿ ಫಾರ್ಮ್ ಗ್ರಂಥಾಲಯಗಳು ಮತ್ತು ಫ್ರೇಮ್ವರ್ಕ್ಗಳನ್ನು ಕಲಿಯಿರಿ
+- [ ] ಪ್ರವೇಶಕ್ಷಮತೆ ಮಾರ್ಗಸೂಚಿಗಳು ಮತ್ತು ಸಮಾವೇಶಾತ್ಮಕ ವಿನ್ಯಾಸ ತತ್ವಗಳನ್ನು ನಿಭಾಯಿಸಿ
+- [ ] ಜಾಗತಿಕ ಫಾರ್ಮ್ಗಳಿಗಾಗಿ ಅಂತರರಾಷ್ಟ್ರೀಯೀಕರಣ ಮತ್ತು ಲೋಕಲೀಕರಣವನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಿ
+- [ ] ಮರುಬಳಕೆಗೆ ಸಾಧ್ಯವಾದ ಫಾರ್ಮ್ ಘಟಕ ಗ್ರಂಥಾಲಯಗಳು ಮತ್ತು ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳನ್ನು ರಚಿಸಿ
+- [ ] ಫಾರ್ಮ್ ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಿ
+
+## 🎯 ನಿಮ್ಮ ಫಾರ್ಮ್ ಡೆವಲಪ್ಮೆಂಟ್ ಪರಿಣತಿ ಟೈಮ್ಲೈನ್
+
+```mermaid
+timeline
+ title ಫಾರ್ಮ್ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವ ಕಲಿಕೆ ಪ್ರಗತಿ
+
+ section HTML ಆಧಾರ (15 ನಿಮಿಷಗಳು)
+ ಅರ್ಥಪೂರ್ಣ ಫಾರ್ಮ್ಗಳು: ಫಾರ್ಮ್ ಅಂಶಗಳು
+ : ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳು
+ : ಲೇಬಲ್ಗಳು ಮತ್ತು ಪ್ರವೇಶযোগ্যತೆ
+ : ಪ್ರಗತಿಶೀಲ ಸುಧಾರಣೆ
+
+ section ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಏಕರೂಪತೆ (25 ನಿಮಿಷಗಳು)
+ ಘಟನೆ ನಿರ್ವಹಣೆ: ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ
+ : ಡೇಟಾ ಸಂಗ್ರಹಣೆ
+ : AJAX ಸಂವಹನ
+ : ಅಸಿಂಕ್/ಅವೈಟ್ ಮಾದರಿಗಳು
+
+ section ಮಾನ್ಯತೆ ವ್ಯವಸ್ಥೆಗಳು (35 ನಿಮಿಷಗಳು)
+ ಬಹು-ಪಟ್ಟಣದ ಭದ್ರತೆ: HTML5 ಮಾನ್ಯತೆ
+ : ಕ್ಲೈಂಟ್-ಸೈಡ್ ಲಾಜಿಕ್
+ : ಸರ್ವರ್-ಸೈಡ್ ಪರಿಶೀಲನೆ
+ : ದೋಷ ನಿರ್ವಹಣೆ
+
+ section ಬಳಕೆದಾರ ಅನುಭವ (45 ನಿಮಿಷಗಳು)
+ ಇಂಟರ್ಫೇಸ್ ಹ್ಯಾಯಗೆ: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು
+ : ಯಶಸ್ಸಿನ ಸಂದೇಶಗಳು
+ : ದೋಷ ಮರುಪಡೆಯುವಿಕೆ
+ : ಪ್ರವೇಶಗೊಳಿಸುವಿಕೆ ವೈಶಿಷ್ಟ್ಯಗಳು
+
+ section ಸುಧರಿಸಿದ ಮಾದರಿಗಳು (1 ವಾರ)
+ ವೃತ್ತಿಪರ ಫಾರ್ಮ್ಗಳು: ಡೈನಾಮಿಕ್ ಮಾನ್ಯತೆ
+ : ಬಹು-ಹಂತ ಕಾರ್ಯವಿಹಿತಿಗಳು
+ : ಫೈಲ್ ಅಪ್ಲೋಡ್ಗಳು
+ : ನೈಜ-ಸಮಯ ಪ್ರತಿಕ್ರಿಯೆ
+
+ section ಎಂಟರ್ಪ್ರೈಸ್ ಕೌಶಲ್ಯಗಳು (1 ತಿಂಗಳು)
+ ಉತ್ಪಾದನಾ ಅನ್ವಯಿಕೆಗಳು: ಫಾರ್ಮ್ ಗ್ರಂಥಾಲಯಗಳು
+ : ಪರೀಕ್ಷಾ ತಂತ್ರಗಳು
+ : ಕಾರ್ಯಕ್ಷಮತೆ ಸೂಕ್ತೀಕರಣ
+ : ಭದ್ರತಾ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
+```
+### 🛠️ ನಿಮ್ಮ ಫಾರ್ಮ್ ಡೆವಲಪ್ಮೆಂಟ್ ಟೂಲ್ಕಿಟ್ ಸಾರಾಂಶ
+
+ಈ ಪಾಠವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ ನೀವು ಈಗ ಎರಡನ್ನು ನಿಭಾಯಿಸುತ್ತೀರಿ:
+- **HTML5 ಫಾರ್ಮ್ಗಳು**: ಸೆಮ್ಯಾಂಟಿಕ್ ರಚನೆ, ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳು ಮತ್ತು ಪ್ರವೇಶಕ್ಷಮತೆ ವೈಶಿಷ್ಟ್ಯಗಳು
+- **ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಾರ್ಮ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್**: ಈವೆಂಟ್ ನಿರ್ವಹಣೆ, ಡೇಟಾ ಸಂಗ್ರಹಣೆ ಮತ್ತು AJAX ಸಂವಹನ
+- **ಮಾನ್ಯತಾ ವಾಸ್ತುಶಿಲ್ಪ**: ಭದ್ರತೆ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಬಹುನಿರ್ವಾಹಕ ಮಾನ್ಯತೆ
+- **ಅಸಿಂಕ್ರೋನಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ನವೀನ fetch API ಮತ್ತು async/await ಪ್ಯಾಟರ್ನ್ಗಳು
+- **ದೋಷ ನಿರ್ವಹಣೆ**: ಸಮಗ್ರ ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆ ವ್ಯವಸ್ಥೆಗಳು
+- **ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ**: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು, ಯಶಸ್ಸು ಸಂದೇಶಗಳು ಮತ್ತು ದೋಷ ಪುನರುಜ್ಜೀವನ
+- **ಗ್ರಹಣೀಯ ಸುಧಾರಣೆ**: ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳು ಮತ್ತು ಸಾಮರ್ಥ್ಯಗಳಲ್ಲಿ ಕೆಲಸಮಾಡುವ ಫಾರ್ಮ್ಗಳು
+
+**ವಾಸ್ತವಿಕ ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ನಿಮ್ಮ ಫಾರ್ಮ್ ಡೆವಲಪ್ಮೆಂಟ್ ಕೌಶಲ್ಯಗಳು ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ:
+- **ಇ-ಕಾಮರ್ಸ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ಚೆಕ್ಔಟ್ ಪ್ರಕ್ರಿಯೆಗಳು, ಖಾತೆ ನೋಂದಣಿ ಮತ್ತು ಪಾವತಿ ಫಾರ್ಮ್ಗಳು
+- **ಉದ್ಯಮ ಸ್ಟೊರ್ಗಳು**: ಡೇಟಾ ಎನ್ಟ್ರಿ ವ್ಯವಸ್ಥೆಗಳು, ವರದಿ ಇಂಟರ್ಫೇಸ್ಗಳು ಮತ್ತು ಕಾರ್ಯಪ್ರವಾಹ ಅಪ್ಲಿಕೇಶನ್ಗಳು
+- **ವಿಷಯ ನಿರ್ವಹಣೆ**: ಪ್ರಕಟಣೆ ವೇದಿಕೆಗಳು, ಬಳಕೆದಾರ ರಚಿಸಿದ ವಿಷಯ ಮತ್ತು ಆಡಳಿತಾತ್ಮಕ ಇಂಟರ್ಫೇಸ್ಗಳು
+- **ಆರ್ಥಿಕ ಅಪ್ಲಿಕೇಶನ್ಗಳು**: ಬ್ಯಾಂಕಿಂಗ್ ಇಂಟರ್ಫೇಸ್ಗಳು, ಹೂಡಿಕೆ ವೇದಿಕೆಗಳು ಮತ್ತು ವಹಿವಾಟು ವ್ಯವಸ್ಥೆಗಳು
+- **ಆರೋಗ್ಯ ಸೇவை ವ್ಯವಸ್ಥೆಗಳು**: ರೋಗಿ ಪೋರ್ಟಲ್ಗಳು, ನಿಯೋಜನೆ ಶೆಡ್ಯೂಲಿಂಗ್ ಮತ್ತು ವೈದ್ಯಕೀಯ ದಾಖಲೆ ಫಾರ್ಮ್ಗಳು
+- **ಶೈಕ್ಷಣಿಕ ವೇದಿಕೆಗಳು**: ಕೋರ್ಸ್ ನೋಂದಣಿ, ಮೌಲ್ಯಮಾಪನ ಸಾಧನಗಳು ಮತ್ತು ಕಲಿಕಾ ನಿರ್ವಹಣೆ
+
+**ವೃತ್ತಿಪರ ಕೌಶಲ್ಯಗಳು ಪಡೆದೀರಿ**: ನೀವು ಈಗ:
+- **ಪ್ರವೇಶಿಸಬಹುದಾದ** ಫಾರ್ಮ್ಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡಬಹುದು, ವಿಶೇಷ ಅಗತ್ಯಗಳ ಬಳಕೆದಾರರಿಗೂ ಅನ್ವಯಿಸುತ್ತದೆ
+- **ಭದ್ರತೆ ಮತ್ತು ಡೇಟಾ ಧ್ವಂಶ ರಹಿತವಾಗಿ ತಡೆಯುವ** ಭದ್ರ ಫಾರ್ಮ್ ಮಾನ್ಯತೆಯನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಬಹುದು
+- **ದೃಷ್ಟಾಂತ ಫೀಡ್ಬ್ಯಾಕ್ ಮತ್ತು ಮಾರ್ಗದರ್ಶನ ನೀಡುವ ಸ್ಪಂದನಶೀಲ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್** ರಚಿಸಬಹುದು
+- **ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಉಪಕರಣಗಳು ಮತ್ತು ನೆಟ್ವರ್ಕ್ ವಿಶ್ಲೇಷಣೆ ಬಳಸಿಕೋ ಫಾರ್ಮ್ ಸಂವಹನ ಸಮಸ್ಯೆಗಳನ್ನು ಡಿಬಗ್ ಮಾಡಬಹುದು
+- **ದಕ್ಷ ಡೇಟಾ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ಮಾನ್ಯತಾ ತಂತ್ರಗಳ ಮೂಲಕ ಫಾರ್ಮ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು
+
+**ಫ್ರಂಟ್ಎಂಡ್ ಡೆವಲಪ್ಮೆಂಟ್ ಕಲ್ಪನೆಗಳು ನಿಭಾಯಿಸಲಾಗಿದೆ**:
+- **ಈವೆಂಟ್ ಚಾಲಿತ ವಾಸ್ತುಶಿಲ್ಪ**: ಬಳಕೆದಾರ ಕ್ರಿಯೆ ನಿರ್ವಹಣೆ ಮತ್ತು ಸ್ಪಂದನೆ ವ್ಯವಸ್ಥೆಗಳು
+- **ಅಸಿಂಕ್ರೋನಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್**: ಅಡೆತಡೆ ಇಲ್ಲದ ಸರ್ವರ್ ಸಂವಹನ ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆ
+- **ಡೇಟಾ ಮಾನ್ಯತೆ**: ಕ್ಲೈಂಟ್ ಮತ್ತು ಸರ್ವರ್-ಮಟ್ಟದ ಭದ್ರತೆ ಮತ್ತು ಸಮಗ್ರತೆ ಪರಿಶೀಲನೆ
+- **ಬಳಕೆದಾರ ಅನುಭವ ವಿನ್ಯಾಸ**: ಬಳಕೆದಾರರನ್ನು ಯಶಸ್ಸಿನತ್ತ ಮುನ್ನಡೆಯುವ ಬೌದ್ಧಿಕ ಇಂಟರ್ಫೇಸ್
+- **ಪ್ರವೇಶಕ್ಷಮತೆ ಎಂಜಿನಿಯರಿಂಗ್**: ವಿಭಿನ್ನ ಬಳಕೆದಾರ ಅಗತ್ಯಗಳಿಗೆ ಹೊಂದುವ ಸಮಾವೇಶಾತ್ಮಕ ವಿನ್ಯಾಸ
+
+**ಮುಂದಿನ ಹಂತ**: ನೀವು ಆಧುನಿಕ ಫಾರ್ಮ್ ಗ್ರಂಥಾಲಯಗಳನ್ನು ಅನ್ವೇಷಿಸಬಹುದು, ಸಂಕೀರ್ಣ ಮಾನ್ಯತಾ ನಿಯಮಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಬಹುದು, ಅಥವಾ ಉದ್ಯಮಮಟ್ಟದ ಡೇಟಾ ಸಂಗ್ರಹಣಾ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು!
+
+🌟 **ಸಾಧನೆಯ ಸ್ವೀಕೃತಿ**: ನೀವು ವೃತ್ತಿಪರ ಮಾನ್ಯತೆ, ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವ ಮಾದರಿಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಫಾರ್ಮ್ ಹೊಂದಾಣಿಕೆ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿದ್ದೀರಿ!
+
+---
+
+
+
+---
+
+## GitHub Copilot ಏಜೆಂಟ್ ಸವಾಲು 🚀
+
+ಈಗ ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ ಕೆಳಗಿನ ಸವಾಲನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ:
+
+**ವಿವರಣೆ:** ವ್ಯಾಪಕ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮಾನ್ಯತೆ ಮತ್ತು ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ನೋಂದಣಿ ಫಾರ್ಮ್ ಅನ್ನು ಸುಧಾರಿಸಿ. ಈ ಸವಾಲು ಫಾರ್ಮ್ ಮಾನ್ಯತೆ, ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಇಂಟೆರಾಕ್ಟಿವ್ ಪ್ರತಿಕ್ರಿಯೆಯಲ್ಲಿ ಉತ್ತಮತೆ ತರಲಿದ್ದಾರೆ.
+**ಪ್ರಾಂಪ್ಟ್:** ನೋಂದಣಿ ಫಾರ್ಮ್ಗೆ ಪೂರ್ಣ ಫಲಿತಾಂಶದ ವ್ಯಾಲಿಡೇಶನ್ ಸಿಸ್ಟಮ್ ರಚಿಸಿ, ಇದರಲ್ಲಿ ಮುಂದೆ ಕರಾವಳಿ ಪಾಕ್ಷಿಕ ವ್ಯಾಲಿಡೇಶನ್ ಪ್ರತಿಕ್ರಿಯೆ ಪ್ರತಿಯೊಂದು ಕ್ಷೇತ್ರಕ್ಕಾಗಿ ಯುಸರ್ ಟೈಪ್ ಮಾಡುವಾಗ, 2) ಕಸ್ಟಮ್ ವ್ಯಾಲಿಡೇಶನ್ ಸಂದೇಶಗಳು ಪ್ರತಿಯೊಂದು ಇನ್ಪುಟ್ ಫೀಲ್ಡ್ ಕೆಳಗೆ ತೋರಿಸಲಾಗುತ್ತದೆ, 3) ಪಾಸ್ವರ್ಡ್ ದೃಢೀಕರಣ ಕ್ಷೇತ್ರವು ಹೊಂದಾಣಿಕೆಯ ವ್ಯಾಲಿಡೇಶನ್ಗೆ, 4) ದೃಶ್ಯ ಸೂಚಕಗಳು (ಹಸಿರು ಚೆಕ್ಮಾರ್ಕ್ಗಳು ಮಾನ್ಯ ಕ್ಷೇತ್ರಗಳಿಗೆ ಮತ್ತು ಕೆಂಪು ಎಚ್ಚರಿಕೆಗಳು ಅಮಾನ್ಯಗಳಿಗೆ), 5) ಎಲ್ಲಾ ವ್ಯಾಲಿಡೇಶನ್ಗಳು ಉತ್ತೀರ್ಣರಾದಾಗ ಮಾತ್ರ ಸಬ್ಮಿಟ್ ಬಟನ್ ಸಕ್ರಿಯವಾಗುತ್ತದೆ. HTML5 ವ್ಯಾಲಿಡೇಶನ್ ಗುಣೆಗಳನ್ನು, CSS ಅನ್ನು ವ್ಯಾಲಿಡೇಶನ್ ಸ್ಥಿತಿಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು, ಮತ್ತು ಇಂಟರಾಕ್ಟಿವ್ ವರ್ತನೆ ಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ.
+
+[ಎಜೆಂಟ್ ಮೋಡ್](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ಬಗ್ಗೆ ಹೆಚ್ಚುಗೂ ತಿಳಿದುಕೊಳ್ಳಿ.
+
+## 🚀 ಚಾಲೆಂಜ್
+
+ಯುಸರ್ ಈಗಾಗಲೇ ಇದ್ದರೆ HTML ನಲ್ಲಿ ದೋಷ ಸಂದೇಶ ತೋರಿಸಿ.
+
+ಕೊನೆಗಿನ ಲಾಗಿನ್ ಪುಟವು ಕೆಲವು ಸ್ಟೈಲಿಂಗ್ ನಂತರ ಹೇಗಿರಬಹುದು ಎಂಬ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
+
+
+
+## ಪೋಷ್ಟ್-ಲೆಕ್ಚರ್ ಕ್ವಿಜ್
+
+[ಪೋಸ್ಟ್-ಲೆಕ್ಚರ್ ಕ್ವಿಜ್](https://ff-quizzes.netlify.app/web/quiz/44)
+
+## ವಿಮರ್ಶೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ
+
+ಡೆವಲಪರ್ಸ್ ತಮ್ಮ ಫಾರ್ಮ್ ನಿರ್ಮಾಣ ಪ್ರಯತ್ನಗಳಲ್ಲಿ ಬಹಳ ಸೃಜನಶೀಲರಾಗಿದ್ದಾರೆ, ವಿಶೇಷವಾಗಿ ವ್ಯಾಲಿಡೇಶನ್ ತಂತ್ರಗಳಲ್ಲಿ. ವಿಭಿನ್ನ ಫಾರ್ಮ್ ಪ್ರಕ್ರಿಯೆಗಳ ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳಲು [CodePen](https://codepen.com) ಅನ್ನು ಪರಿಶೀಲಿಸಿ; ನೀವು ಕೆಲವು ಆಸಕ್ತಿದಾಯಕ ಮತ್ತು ಪ್ರೇರಣೆಯ ಫಾರ್ಮ್ಗಳನ್ನು ಕಂಡುಹಿಡಿಯಿಸಬಹುದೇ?
+
+## ಅದೇಶ
+
+[ನಿಮ್ಮ ಬ್ಯಾಂಕ್ ಆಪ್ ಸ್ಟೈಲ್ ಮಾಡಿ](assignment.md)
+
+---
+
+
+**ತ್ಯಾಗಪತ್ರ**:
+ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಎಐ ಭಾಷಾಂತರ ಸೇವೆ [Co-op Translator](https://github.com/Azure/co-op-translator) ಬಳಸಿ ಭಾಷಾಂತರಿಸಲಾಗಿದೆ. ನಾವು ಸರಿಯಾದ ತನಿಖೆಗೆ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೂ, ಸ್ವಯಂಚಾಲಿತ ಭಾಷಾಂತರಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪುತೆಗಳು ಇರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಮೂಲ ಭಾಷೆಯ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಅಧಿಕೃತ ಮೂಲ ಎಂದು ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವದ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಭಾಷಾಂತರವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಭಾಷಾಂತರ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪುಮತಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗರ್ಭಪಟ್ಟಿಗಳಿಗೆ ನಾವು ಜವಾಬ್ದಾರಿಯಲ್ಲ.
+
\ No newline at end of file
diff --git a/translations/kn/7-bank-project/2-forms/assignment.md b/translations/kn/7-bank-project/2-forms/assignment.md
new file mode 100644
index 000000000..c74a5b893
--- /dev/null
+++ b/translations/kn/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,166 @@
+
+# ನಿಮ್ಮ ಬ್ಯಾಂಕ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಆಧುನಿಕ CSS ನೊಂದಿಗೆ ಶೈಲಿ ಮಾಡಿರಿ
+
+## ಪ್ರಾಜೆಕ್ಟ್ ಅವಲೋಕನ
+
+ನಿಮ್ಮ ಕಾರ್ಯಾತ್ಮಕ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವ್ಯಕ್ತಿಗತವಾಗಿ ಆಕರ್ಷಕ, ವೃತ್ತಿಪರವಾದ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ನಾಗಿ ಪರಿವರ್ತಿಸಿ ಆಧುನಿಕ CSS ತಂತ್ರಗಳನ್ನು ಬಳಸಿ. ನೀವು ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಉತ್ತಮಗೊಳಿಸುವ ಸಮನ್ವಿತ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಯತ್ನಿಸುವಿರಿ ಅದರ ಜೊತೆಗೆ ಸುದೃಢ ಪ್ರವೇಶಯೋಗ್ಯತೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ ತತ್ವಗಳನ್ನು ಕಾಪಾಡುತ್ತಿರುತ್ತೀರಿ.
+
+ಈ ನಿಯೋಜನೆ ನವೀನ ವೆಬ್ ವಿನ್ಯಾಸ ಮಾದರಿಗಳನ್ನು ಅನ್ವಯಿಸಲು, ಸಂಯಮಿತ ದೃಶ್ಯ ಗುರುತುಗಳನ್ನು ಜವಾಬ್ದಾರಿಯಾಗಿ ಅನುಷ್ಠಾನಗೊಳಿಸಲು ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ಆಕರ್ಷಕ ಮತ್ತು ಸುಲಭವಾಗಿ ಸಂಚರಿಸಲು ಸಾಧ್ಯವಿರುವ ಅಂತರ್ಗತವನ್ನು ಸೃಷ್ಟಿಸಲು ಸವಾಲು ಹಾಕುತ್ತದೆ.
+
+## ಸೂಚನೆಗಳು
+
+### ಹಂತ 1: ನಿಮ್ಮ ಶೈಲಿಪುಸ್ತಕವನ್ನು ಸಿದ್ಧಗೊಳಿಸಿರಿ
+
+**ನಿಮ್ಮ CSS ಆಧಾರವನ್ನು ರಚಿಸಿ:**
+
+1. **ಸೃಷ್ಟಿಸಿ** ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ರೂಟ್ನಲ್ಲಿ `styles.css` ಎಂಬ ಹೊಸ ಫೈಲ್
+2. **ಲಿಂಕ್ ಮಾಡಿ** ಸ್ಟೈಲಿಶೀಟ್ ಅನ್ನು ನಿಮ್ಮ `index.html` ಫೈಲಿನಲ್ಲಿ:
+ ```html
+