ನೀವು ನಿಯಂತ್ರಕವನ್ನು ಪ್ಲಗ್ ಮಾಡಿದಾಗ, ನೀವು ಗುಂಡಿಗಳನ್ನು ಮ್ಯಾಶ್ ಮಾಡಿ, ಸ್ಟಿಕ್ಗಳನ್ನು ಸರಿಸಿ, ಟ್ರಿಗ್ಗರ್ಗಳನ್ನು ಎಳೆಯಿರಿ... ಮತ್ತು ಡೆವಲಪರ್ ಆಗಿ, ನೀವು ಯಾವುದನ್ನೂ ನೋಡುವುದಿಲ್ಲ. ಬ್ರೌಸರ್ ಅದನ್ನು ಎತ್ತಿಕೊಳ್ಳುತ್ತಿದೆ, ಖಚಿತವಾಗಿ, ಆದರೆ ನೀವು ಕನ್ಸೋಲ್ನಲ್ಲಿ ಸಂಖ್ಯೆಗಳನ್ನು ಲಾಗ್ ಮಾಡದಿದ್ದರೆ, ಅದು ಅಗೋಚರವಾಗಿರುತ್ತದೆ. ಗೇಮ್ಪ್ಯಾಡ್ API ಯೊಂದಿಗಿನ ತಲೆನೋವು ಅದು. ಇದು ವರ್ಷಗಳಿಂದಲೂ ಇದೆ, ಮತ್ತು ಇದು ನಿಜವಾಗಿಯೂ ಸಾಕಷ್ಟು ಶಕ್ತಿಶಾಲಿಯಾಗಿದೆ. ನೀವು ಬಟನ್ಗಳು, ಸ್ಟಿಕ್ಗಳು, ಟ್ರಿಗ್ಗರ್ಗಳು, ಕೃತಿಗಳನ್ನು ಓದಬಹುದು. ಆದರೆ ಹೆಚ್ಚಿನವರು ಅದನ್ನು ಮುಟ್ಟುವುದಿಲ್ಲ. ಏಕೆ? ಏಕೆಂದರೆ ಯಾವುದೇ ಪ್ರತಿಕ್ರಿಯೆ ಇಲ್ಲ. ಡೆವಲಪರ್ ಪರಿಕರಗಳಲ್ಲಿ ಯಾವುದೇ ಫಲಕವಿಲ್ಲ. ನಿಯಂತ್ರಕ ನಿಮ್ಮ ಅನಿಸಿಕೆಯನ್ನು ಸಹ ಮಾಡುತ್ತಿದೆಯೇ ಎಂದು ತಿಳಿಯಲು ಯಾವುದೇ ಸ್ಪಷ್ಟ ಮಾರ್ಗವಿಲ್ಲ. ಕುರುಡಾಗಿ ಹಾರುತ್ತಿರುವಂತೆ ಭಾಸವಾಗುತ್ತದೆ. ಸ್ವಲ್ಪ ಉಪಕರಣವನ್ನು ನಿರ್ಮಿಸಲು ಅದು ನನಗೆ ಸಾಕಷ್ಟು ದೋಷವನ್ನುಂಟುಮಾಡಿದೆ: ಗೇಮ್ಪ್ಯಾಡ್ ಕ್ಯಾಸ್ಕೇಡ್ ಡೀಬಗರ್. ಕನ್ಸೋಲ್ ಔಟ್ಪುಟ್ ಅನ್ನು ನೋಡುವ ಬದಲು, ನೀವು ನಿಯಂತ್ರಕದ ನೇರ, ಸಂವಾದಾತ್ಮಕ ನೋಟವನ್ನು ಪಡೆಯುತ್ತೀರಿ. ಏನನ್ನಾದರೂ ಒತ್ತಿ ಮತ್ತು ಅದು ಪರದೆಯ ಮೇಲೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ. ಮತ್ತು CSS ಕ್ಯಾಸ್ಕೇಡ್ ಲೇಯರ್ಗಳೊಂದಿಗೆ, ಶೈಲಿಗಳು ಸಂಘಟಿತವಾಗಿರುತ್ತವೆ, ಆದ್ದರಿಂದ ಡೀಬಗ್ ಮಾಡಲು ಇದು ಸ್ವಚ್ಛವಾಗಿದೆ. ಈ ಪೋಸ್ಟ್ನಲ್ಲಿ, ಡೀಬಗ್ ಮಾಡುವಿಕೆ ನಿಯಂತ್ರಕಗಳು ಏಕೆ ಅಂತಹ ನೋವು, CSS ಅದನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಲು ಹೇಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಸ್ವಂತ ಯೋಜನೆಗಳಿಗಾಗಿ ನೀವು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ದೃಶ್ಯ ಡೀಬಗರ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಬಹುದು ಎಂಬುದನ್ನು ನಾನು ನಿಮಗೆ ತೋರಿಸುತ್ತೇನೆ.
ನೀವು ಎಲ್ಲವನ್ನೂ ಲಾಗ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗಿದ್ದರೂ ಸಹ, ನೀವು ತ್ವರಿತವಾಗಿ ಓದಲಾಗದ ಕನ್ಸೋಲ್ ಸ್ಪ್ಯಾಮ್ನೊಂದಿಗೆ ಕೊನೆಗೊಳ್ಳುತ್ತೀರಿ. ಉದಾಹರಣೆಗೆ: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
ಯಾವ ಬಟನ್ ಒತ್ತಲಾಗಿದೆ ಎಂದು ಹೇಳಬಲ್ಲಿರಾ? ಬಹುಶಃ, ಆದರೆ ನಿಮ್ಮ ಕಣ್ಣುಗಳನ್ನು ತಗ್ಗಿಸಿದ ನಂತರ ಮತ್ತು ಕೆಲವು ಒಳಹರಿವುಗಳನ್ನು ಕಳೆದುಕೊಂಡ ನಂತರ ಮಾತ್ರ. ಆದ್ದರಿಂದ, ಇಲ್ಲ, ಇನ್ಪುಟ್ಗಳನ್ನು ಓದಲು ಬಂದಾಗ ಡೀಬಗ್ ಮಾಡುವುದು ಸುಲಭವಾಗಿ ಬರುವುದಿಲ್ಲ. ಸಮಸ್ಯೆ 3: ರಚನೆಯ ಕೊರತೆ ನೀವು ತ್ವರಿತ ದೃಶ್ಯೀಕರಣವನ್ನು ಒಟ್ಟಿಗೆ ಎಸೆದರೂ ಸಹ, ಶೈಲಿಗಳು ತ್ವರಿತವಾಗಿ ಗೊಂದಲಕ್ಕೊಳಗಾಗಬಹುದು. ಡೀಫಾಲ್ಟ್, ಸಕ್ರಿಯ ಮತ್ತು ಡೀಬಗ್ ಸ್ಥಿತಿಗಳು ಅತಿಕ್ರಮಿಸಬಹುದು ಮತ್ತು ಸ್ಪಷ್ಟ ರಚನೆಯಿಲ್ಲದೆ, ನಿಮ್ಮ CSS ಸುಲಭವಾಗಿ ಮತ್ತು ವಿಸ್ತರಿಸಲು ಕಷ್ಟವಾಗುತ್ತದೆ. CSS ಕ್ಯಾಸ್ಕೇಡ್ ಲೇಯರ್ಗಳು ಸಹಾಯ ಮಾಡಬಹುದು. ಅವರು ಆದ್ಯತೆಯ ಪ್ರಕಾರ "ಲೇಯರ್ಗಳು" ಆಗಿ ಶೈಲಿಗಳನ್ನು ಗುಂಪು ಮಾಡುತ್ತಾರೆ, ಆದ್ದರಿಂದ ನೀವು ನಿರ್ದಿಷ್ಟತೆಯ ವಿರುದ್ಧ ಹೋರಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ ಮತ್ತು "ನನ್ನ ಡೀಬಗ್ ಶೈಲಿಯನ್ನು ಏಕೆ ತೋರಿಸುತ್ತಿಲ್ಲ?" ಬದಲಾಗಿ, ನೀವು ಪ್ರತ್ಯೇಕ ಕಾಳಜಿಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತೀರಿ:
ಆಧಾರ: ನಿಯಂತ್ರಕದ ಪ್ರಮಾಣಿತ, ಆರಂಭಿಕ ನೋಟ. ಸಕ್ರಿಯ: ಒತ್ತಿದ ಬಟನ್ಗಳು ಮತ್ತು ಚಲಿಸಿದ ಸ್ಟಿಕ್ಗಳಿಗೆ ಮುಖ್ಯಾಂಶಗಳು. ಡೀಬಗ್: ಡೆವಲಪರ್ಗಳಿಗಾಗಿ ಓವರ್ಲೇಗಳು (ಉದಾ., ಸಂಖ್ಯಾತ್ಮಕ ಓದುವಿಕೆಗಳು, ಮಾರ್ಗದರ್ಶಿಗಳು, ಮತ್ತು ಹೀಗೆ).
ನಾವು ಇದರ ಪ್ರಕಾರ CSS ನಲ್ಲಿ ಲೇಯರ್ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕಾದರೆ, ನಾವು ಹೊಂದಿರುತ್ತೇವೆ: /* ಕಡಿಮೆಯಿಂದ ಹೆಚ್ಚಿನ ಆದ್ಯತೆ */ @ಲೇಯರ್ ಬೇಸ್, ಸಕ್ರಿಯ, ಡೀಬಗ್;
@ಲೇಯರ್ ಬೇಸ್ { /* ... */ }
@layer ಸಕ್ರಿಯ { /* ... */ }
@ಲೇಯರ್ ಡೀಬಗ್ { /* ... */ }
ಪ್ರತಿಯೊಂದು ಪದರವು ನಿರೀಕ್ಷಿತವಾಗಿ ಜೋಡಿಸಲ್ಪಟ್ಟಿರುವುದರಿಂದ, ಯಾವ ನಿಯಮಗಳು ಗೆಲ್ಲುತ್ತವೆ ಎಂದು ನಿಮಗೆ ಯಾವಾಗಲೂ ತಿಳಿದಿರುತ್ತದೆ. ಆ ಊಹೆಯು ಡೀಬಗ್ ಮಾಡುವುದನ್ನು ಸುಲಭವಲ್ಲ, ಆದರೆ ವಾಸ್ತವವಾಗಿ ನಿರ್ವಹಿಸಬಲ್ಲದು. ನಾವು ಸಮಸ್ಯೆಯನ್ನು (ಅದೃಶ್ಯ, ಗೊಂದಲಮಯ ಇನ್ಪುಟ್) ಮತ್ತು ವಿಧಾನ (ಕ್ಯಾಸ್ಕೇಡ್ ಲೇಯರ್ಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ದೃಶ್ಯ ದೋಷಸೂಚಕ) ಅನ್ನು ನಾವು ಕವರ್ ಮಾಡಿದ್ದೇವೆ. ಈಗ ನಾವು ಡೀಬಗರ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಹಂತ-ಹಂತದ ಪ್ರಕ್ರಿಯೆಯ ಮೂಲಕ ನಡೆಯುತ್ತೇವೆ. ಡೀಬಗರ್ ಪರಿಕಲ್ಪನೆ ಗುಪ್ತ ಇನ್ಪುಟ್ ಅನ್ನು ಗೋಚರಿಸುವಂತೆ ಮಾಡಲು ಸುಲಭವಾದ ಮಾರ್ಗವೆಂದರೆ ಅದನ್ನು ಪರದೆಯ ಮೇಲೆ ಸೆಳೆಯುವುದು. ಈ ಡೀಬಗರ್ ಏನು ಮಾಡುತ್ತದೆ. ಬಟನ್ಗಳು, ಟ್ರಿಗ್ಗರ್ಗಳು ಮತ್ತು ಜಾಯ್ಸ್ಟಿಕ್ಗಳು ಎಲ್ಲಾ ದೃಶ್ಯವನ್ನು ಪಡೆಯುತ್ತವೆ.
ಎ ಒತ್ತಿರಿ: ವೃತ್ತವು ಬೆಳಗುತ್ತದೆ. ಕೋಲನ್ನು ತಳ್ಳಿರಿ: ವೃತ್ತವು ಸುತ್ತಲೂ ಜಾರುತ್ತದೆ. ಪ್ರಚೋದಕವನ್ನು ಅರ್ಧದಾರಿಯಲ್ಲೇ ಎಳೆಯಿರಿ: ಬಾರ್ ಅರ್ಧದಷ್ಟು ತುಂಬುತ್ತದೆ.
ಈಗ ನೀವು 0 ಸೆ ಮತ್ತು 1 ಸೆಕೆಂಡ್ಗಳನ್ನು ನೋಡುತ್ತಿಲ್ಲ, ಆದರೆ ನಿಯಂತ್ರಕವು ನೇರ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ವೀಕ್ಷಿಸುತ್ತಿದೆ. ಸಹಜವಾಗಿ, ಒಮ್ಮೆ ನೀವು ಡೀಫಾಲ್ಟ್, ಒತ್ತಿದರೆ, ಡೀಬಗ್ ಮಾಹಿತಿ, ಬಹುಶಃ ರೆಕಾರ್ಡಿಂಗ್ ಮೋಡ್ನಂತಹ ಸ್ಥಿತಿಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಪ್ರಾರಂಭಿಸಿದರೆ, CSS ದೊಡ್ಡದಾಗಿ ಮತ್ತು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಅಲ್ಲಿ ಕ್ಯಾಸ್ಕೇಡ್ ಪದರಗಳು ಸೂಕ್ತವಾಗಿ ಬರುತ್ತವೆ. ತೆಗೆದ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ: @ಲೇಯರ್ ಬೇಸ್ { .ಬಟನ್ { ಹಿನ್ನೆಲೆ: #222; ಗಡಿ-ತ್ರಿಜ್ಯ: 50%; ಅಗಲ: 40px; ಎತ್ತರ: 40px; } }
@layer ಸಕ್ರಿಯ { .button.ಒತ್ತಲಾಗಿದೆ { ಹಿನ್ನೆಲೆ: #0f0; /* ಪ್ರಕಾಶಮಾನವಾದ ಹಸಿರು */ } }
@ಲೇಯರ್ ಡೀಬಗ್ { .ಬಟನ್::ನಂತರ { ವಿಷಯ: attr(ಡೇಟಾ-ಮೌಲ್ಯ); ಫಾಂಟ್ ಗಾತ್ರ: 12px; ಬಣ್ಣ: #fff; } }
ಲೇಯರ್ ಆರ್ಡರ್ ವಿಷಯಗಳು: ಬೇಸ್ → ಸಕ್ರಿಯ → ಡೀಬಗ್.
ಬೇಸ್ ನಿಯಂತ್ರಕವನ್ನು ಸೆಳೆಯುತ್ತದೆ. ಸಕ್ರಿಯ ಹಿಡಿಕೆಗಳು ಒತ್ತಿದ ರಾಜ್ಯಗಳು. ಡೀಬಗ್ ಓವರ್ಲೇಗಳ ಮೇಲೆ ಎಸೆಯುತ್ತದೆ.
ಇದನ್ನು ಈ ರೀತಿ ಒಡೆಯುವುದು ಎಂದರೆ ನೀವು ವಿಲಕ್ಷಣವಾದ ನಿರ್ದಿಷ್ಟತೆಯ ಯುದ್ಧಗಳನ್ನು ಮಾಡುತ್ತಿಲ್ಲ ಎಂದರ್ಥ. ಪ್ರತಿಯೊಂದು ಪದರವು ತನ್ನದೇ ಆದ ಸ್ಥಾನವನ್ನು ಹೊಂದಿದೆ, ಮತ್ತು ಏನು ಗೆಲ್ಲುತ್ತದೆ ಎಂದು ನಿಮಗೆ ಯಾವಾಗಲೂ ತಿಳಿದಿರುತ್ತದೆ. ಬಿಲ್ಡಿಂಗ್ ಇಟ್ ಔಟ್ ಮೊದಲು ಪರದೆಯ ಮೇಲೆ ಏನನ್ನಾದರೂ ಪಡೆಯೋಣ. ಇದು ಉತ್ತಮವಾಗಿ ಕಾಣುವ ಅಗತ್ಯವಿಲ್ಲ - ಕೇವಲ ಅಸ್ತಿತ್ವದಲ್ಲಿರಬೇಕು ಆದ್ದರಿಂದ ನಮಗೆ ಕೆಲಸ ಮಾಡಲು ಏನಾದರೂ ಇದೆ.
ಗೇಮ್ಪ್ಯಾಡ್ ಕ್ಯಾಸ್ಕೇಡ್ ಡೀಬಗರ್
ಅದು ಅಕ್ಷರಶಃ ಕೇವಲ ಪೆಟ್ಟಿಗೆಗಳು. ಇನ್ನೂ ಅತ್ಯಾಕರ್ಷಕವಾಗಿಲ್ಲ, ಆದರೆ ಇದು CSS ಮತ್ತು JavaScript ನೊಂದಿಗೆ ನಂತರ ಪಡೆದುಕೊಳ್ಳಲು ನಮಗೆ ಹ್ಯಾಂಡಲ್ಗಳನ್ನು ನೀಡುತ್ತದೆ. ಸರಿ, ನಾನು ಇಲ್ಲಿ ಕ್ಯಾಸ್ಕೇಡ್ ಲೇಯರ್ಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದೇನೆ ಏಕೆಂದರೆ ನೀವು ಹೆಚ್ಚಿನ ರಾಜ್ಯಗಳನ್ನು ಸೇರಿಸಿದ ನಂತರ ಅದು ವಿಷಯವನ್ನು ವ್ಯವಸ್ಥಿತವಾಗಿ ಇರಿಸುತ್ತದೆ. ಒರಟು ಪಾಸ್ ಇಲ್ಲಿದೆ:
/* ===================================== ಕ್ಯಾಸ್ಕೇಡ್ ಲೇಯರ್ಗಳ ಸೆಟಪ್ ಆರ್ಡರ್ ವಿಷಯಗಳು: ಬೇಸ್ → ಸಕ್ರಿಯ → ಡೀಬಗ್ ===================================*/
/* ಲೇಯರ್ ಆರ್ಡರ್ ಅನ್ನು ಮುಂಗಡವಾಗಿ ವಿವರಿಸಿ */ @ಲೇಯರ್ ಬೇಸ್, ಸಕ್ರಿಯ, ಡೀಬಗ್;
/* ಲೇಯರ್ 1: ಮೂಲ ಶೈಲಿಗಳು - ಡೀಫಾಲ್ಟ್ ನೋಟ */ @ಲೇಯರ್ ಬೇಸ್ { .ಬಟನ್ { ಹಿನ್ನೆಲೆ: #333; ಗಡಿ-ತ್ರಿಜ್ಯ: 50%; ಅಗಲ: 70px; ಎತ್ತರ: 70px; ಪ್ರದರ್ಶನ: ಬಾಗಿಸು; ಸಮರ್ಥನೆ-ವಿಷಯ: ಕೇಂದ್ರ; ಜೋಡಿಸು-ಐಟಂಗಳು: ಕೇಂದ್ರ; }
.ವಿರಾಮ { ಅಗಲ: 20px; ಎತ್ತರ: 70px; ಹಿನ್ನೆಲೆ: #333; ಪ್ರದರ್ಶನ: ಇನ್ಲೈನ್-ಬ್ಲಾಕ್; } }
/* ಲೇಯರ್ 2: ಸಕ್ರಿಯ ಸ್ಥಿತಿಗಳು - ಒತ್ತಿದ ಗುಂಡಿಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ */ @layer ಸಕ್ರಿಯ { .button.active { ಹಿನ್ನೆಲೆ: #0f0; /* ಒತ್ತಿದಾಗ ಹೊಳೆಯುವ ಹಸಿರು */ ರೂಪಾಂತರ: ಪ್ರಮಾಣದ (1.1); /* ಬಟನ್ ಅನ್ನು ಸ್ವಲ್ಪ ಹಿಗ್ಗಿಸುತ್ತದೆ */ }
.pause.active { ಹಿನ್ನೆಲೆ: #0f0; ರೂಪಾಂತರ: ಸ್ಕೇಲ್ವೈ (1.1); /* ಒತ್ತಿದಾಗ ಲಂಬವಾಗಿ ವಿಸ್ತರಿಸುತ್ತದೆ */ } }
/* ಲೇಯರ್ 3: ಡೀಬಗ್ ಓವರ್ಲೇಗಳು - ಡೆವಲಪರ್ ಮಾಹಿತಿ */ @ಲೇಯರ್ ಡೀಬಗ್ { .ಬಟನ್::ನಂತರ { ವಿಷಯ: attr(ಡೇಟಾ-ಮೌಲ್ಯ); /* ಸಂಖ್ಯಾ ಮೌಲ್ಯವನ್ನು ತೋರಿಸುತ್ತದೆ */ ಫಾಂಟ್ ಗಾತ್ರ: 12px; ಬಣ್ಣ: #fff; } }
ಈ ವಿಧಾನದ ಸೌಂದರ್ಯವೆಂದರೆ ಪ್ರತಿ ಪದರವು ಸ್ಪಷ್ಟ ಉದ್ದೇಶವನ್ನು ಹೊಂದಿದೆ. ಮೂಲ ಪದರವು ಎಂದಿಗೂ ಸಕ್ರಿಯವನ್ನು ಅತಿಕ್ರಮಿಸುವುದಿಲ್ಲ ಮತ್ತು ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಲೆಕ್ಕಿಸದೆಯೇ ಸಕ್ರಿಯವು ಎಂದಿಗೂ ಡೀಬಗ್ ಅನ್ನು ಅತಿಕ್ರಮಿಸುವುದಿಲ್ಲ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಡೀಬಗ್ ಮಾಡುವ ಸಾಧನಗಳನ್ನು ಪೀಡಿಸುವ CSS ನಿರ್ದಿಷ್ಟತೆಯ ಯುದ್ಧಗಳನ್ನು ನಿವಾರಿಸುತ್ತದೆ. ಈಗ ಕೆಲವು ಸಮೂಹಗಳು ಕತ್ತಲೆಯ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಕುಳಿತಿರುವಂತೆ ತೋರುತ್ತಿದೆ. ಪ್ರಾಮಾಣಿಕವಾಗಿ, ತುಂಬಾ ಕೆಟ್ಟದ್ದಲ್ಲ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸೇರಿಸಲಾಗುತ್ತಿದೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಮಯ. ಇಲ್ಲಿ ನಿಯಂತ್ರಕವು ವಾಸ್ತವವಾಗಿ ಏನನ್ನಾದರೂ ಮಾಡುತ್ತದೆ. ನಾವು ಇದನ್ನು ಹಂತ ಹಂತವಾಗಿ ನಿರ್ಮಿಸುತ್ತೇವೆ. ಹಂತ 1: ರಾಜ್ಯ ನಿರ್ವಹಣೆಯನ್ನು ಹೊಂದಿಸಿ ಮೊದಲಿಗೆ, ಡೀಬಗರ್ನ ಸ್ಥಿತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ನಮಗೆ ವೇರಿಯಬಲ್ಗಳು ಬೇಕಾಗುತ್ತವೆ: // ======================================= // ರಾಜ್ಯ ನಿರ್ವಹಣೆ // =======================================
ಓಡಲಿ = ತಪ್ಪು; // ಡೀಬಗರ್ ಸಕ್ರಿಯವಾಗಿದೆಯೇ ಎಂಬುದನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ rafId ಅನ್ನು ಬಿಡಿ; // ರದ್ದತಿಗಾಗಿ ವಿನಂತಿ ಅನಿಮೇಷನ್ಫ್ರೇಮ್ ಐಡಿಯನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ
ಗೇಮ್ಪ್ಯಾಡ್ ಇನ್ಪುಟ್ ಅನ್ನು ನಿರಂತರವಾಗಿ ಓದುವ ಅನಿಮೇಷನ್ ಲೂಪ್ ಅನ್ನು ಈ ಅಸ್ಥಿರಗಳು ನಿಯಂತ್ರಿಸುತ್ತವೆ. ಹಂತ 2: DOM ಉಲ್ಲೇಖಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳಿ ಮುಂದೆ, ನಾವು ನವೀಕರಿಸುವ ಎಲ್ಲಾ HTML ಅಂಶಗಳಿಗೆ ನಾವು ಉಲ್ಲೇಖಗಳನ್ನು ಪಡೆಯುತ್ತೇವೆ: // ======================================= // ಡೊಮ್ ಎಲಿಮೆಂಟ್ ಉಲ್ಲೇಖಗಳು // =======================================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const pause1 = document.getElementById("pause1"); const pause2 = document.getElementById("pause2"); ಸ್ಥಿರ ಸ್ಥಿತಿ = document.getElementById("ಸ್ಥಿತಿ");
ಈ ಉಲ್ಲೇಖಗಳನ್ನು ಮುಂದೆ ಸಂಗ್ರಹಿಸುವುದು DOM ಅನ್ನು ಪದೇ ಪದೇ ಪ್ರಶ್ನಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿರುತ್ತದೆ. ಹಂತ 3: ಕೀಬೋರ್ಡ್ ಫಾಲ್ಬ್ಯಾಕ್ ಸೇರಿಸಿ ಭೌತಿಕ ನಿಯಂತ್ರಕವಿಲ್ಲದೆ ಪರೀಕ್ಷೆಗಾಗಿ, ನಾವು ಕೀಬೋರ್ಡ್ ಕೀಗಳನ್ನು ಬಟನ್ಗಳಿಗೆ ಮ್ಯಾಪ್ ಮಾಡುತ್ತೇವೆ: // ======================================= // ಕೀಬೋರ್ಡ್ ಫಾಲ್ಬ್ಯಾಕ್ (ನಿಯಂತ್ರಕವಿಲ್ಲದೆ ಪರೀಕ್ಷೆಗಾಗಿ) // =======================================
ಕಾನ್ಸ್ಟ್ ಕೀಮ್ಯಾಪ್ = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' ಕೀ ಎರಡೂ ವಿರಾಮ ಬಾರ್ಗಳನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ };
ಕೀಬೋರ್ಡ್ನಲ್ಲಿ ಕೀಗಳನ್ನು ಒತ್ತುವ ಮೂಲಕ UI ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ಇದು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಹಂತ 4: ಮುಖ್ಯ ನವೀಕರಣ ಲೂಪ್ ಅನ್ನು ರಚಿಸಿ ಇಲ್ಲಿ ಮ್ಯಾಜಿಕ್ ನಡೆಯುತ್ತದೆ. ಈ ಕಾರ್ಯವು ನಿರಂತರವಾಗಿ ಚಲಿಸುತ್ತದೆ ಮತ್ತು ಗೇಮ್ಪ್ಯಾಡ್ ಸ್ಥಿತಿಯನ್ನು ಓದುತ್ತದೆ: // ======================================= // ಮುಖ್ಯ ಗೇಮ್ಪ್ಯಾಡ್ ಅಪ್ಡೇಟ್ ಲೂಪ್ // =======================================
ಫಂಕ್ಷನ್ ಅಪ್ಡೇಟ್ ಗೇಮ್ಪ್ಯಾಡ್() { // ಎಲ್ಲಾ ಸಂಪರ್ಕಿತ ಗೇಮ್ಪ್ಯಾಡ್ಗಳನ್ನು ಪಡೆಯಿರಿ const gamepads = navigator.getGamepads(); (!ಗೇಮ್ಪ್ಯಾಡ್ಗಳು) ಹಿಂತಿರುಗಿದರೆ;
// ಮೊದಲ ಸಂಪರ್ಕಿತ ಗೇಮ್ಪ್ಯಾಡ್ ಬಳಸಿ ಕಾನ್ಸ್ಟ್ ಜಿಪಿ = ಗೇಮ್ಪ್ಯಾಡ್ಗಳು[0];
ಒಂದು ವೇಳೆ (ಜಿಪಿ) { // "ಸಕ್ರಿಯ" ವರ್ಗವನ್ನು ಟಾಗಲ್ ಮಾಡುವ ಮೂಲಕ ಅಪ್ಡೇಟ್ ಬಟನ್ ಹೇಳುತ್ತದೆ btnA.classList.toggle("ಸಕ್ರಿಯ", gp.buttons[0].ಒತ್ತಲಾಗಿದೆ); btnB.classList.toggle("ಸಕ್ರಿಯ", gp.buttons[1].ಒತ್ತಲಾಗಿದೆ); btnX.classList.toggle("ಸಕ್ರಿಯ", gp.buttons[2].ಒತ್ತಲಾಗಿದೆ);
// ಹ್ಯಾಂಡಲ್ ವಿರಾಮ ಬಟನ್ (ಬಟನ್ ಇಂಡೆಕ್ಸ್ 9 ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಕಗಳಲ್ಲಿ) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("ಸಕ್ರಿಯ", pausePressed); pause2.classList.toggle("ಸಕ್ರಿಯ", pausePressed);
// ಸ್ಥಿತಿ ಪ್ರದರ್ಶನಕ್ಕಾಗಿ ಪ್ರಸ್ತುತ ಒತ್ತಿದರೆ ಬಟನ್ಗಳ ಪಟ್ಟಿಯನ್ನು ನಿರ್ಮಿಸಿ ಒತ್ತಿದರೆ ಅವಕಾಶ = []; gp.buttons.forEach((btn, i) => { ಒಂದು ವೇಳೆ (btn. ಒತ್ತಿದರೆ)pressed.push("ಬಟನ್" + i); });
// ಯಾವುದೇ ಬಟನ್ಗಳನ್ನು ಒತ್ತಿದರೆ ಸ್ಥಿತಿ ಪಠ್ಯವನ್ನು ನವೀಕರಿಸಿ ವೇಳೆ (pressed.length > 0) { status.textContent = "ಒತ್ತಲಾಗಿದೆ: " + pressed.join(", "); } }
// ಡೀಬಗರ್ ಚಾಲನೆಯಲ್ಲಿದ್ದರೆ ಲೂಪ್ ಅನ್ನು ಮುಂದುವರಿಸಿ (ಓಡುತ್ತಿದ್ದರೆ) { rafId = requestAnimationFrame(updateGamepad); } }
classList.toggle() ವಿಧಾನವು ಬಟನ್ ಅನ್ನು ಒತ್ತಿದರೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಸಕ್ರಿಯ ವರ್ಗವನ್ನು ಸೇರಿಸುತ್ತದೆ ಅಥವಾ ತೆಗೆದುಹಾಕುತ್ತದೆ, ಇದು ನಮ್ಮ CSS ಲೇಯರ್ ಶೈಲಿಗಳನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ. ಹಂತ 5: ಕೀಬೋರ್ಡ್ ಈವೆಂಟ್ಗಳನ್ನು ನಿರ್ವಹಿಸಿ ಈ ಈವೆಂಟ್ ಕೇಳುಗರು ಕೀಬೋರ್ಡ್ ಫಾಲ್ಬ್ಯಾಕ್ ಕೆಲಸ ಮಾಡುತ್ತಾರೆ: // ======================================= // ಕೀಬೋರ್ಡ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ಗಳು // =======================================
document.addEventListener("ಕೀಡೌನ್", (ಇ) => { ವೇಳೆ (ಕೀಮ್ಯಾಪ್[ಇ.ಕೀ]) { // ಏಕ ಅಥವಾ ಬಹು ಅಂಶಗಳನ್ನು ನಿರ್ವಹಿಸಿ ವೇಳೆ (Array.isArray(keyMap[e.key])) { ಕೀಮ್ಯಾಪ್[e.key].forEach(el => el.classList.add("ಸಕ್ರಿಯ")); } ಬೇರೆ { ಕೀಮ್ಯಾಪ್[e.key].classList.add("ಸಕ್ರಿಯ"); } status.textContent = "ಕೀ ಒತ್ತಿದರೆ: " + e.key.toUpperCase(); } });
document.addEventListener("ಕೀಅಪ್", (ಇ) => { ವೇಳೆ (ಕೀಮ್ಯಾಪ್[ಇ.ಕೀ]) { // ಕೀಲಿಯನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿದಾಗ ಸಕ್ರಿಯ ಸ್ಥಿತಿಯನ್ನು ತೆಗೆದುಹಾಕಿ ವೇಳೆ (Array.isArray(keyMap[e.key])) { ಕೀಮ್ಯಾಪ್[e.key].forEach(el => el.classList.remove("ಸಕ್ರಿಯ")); } ಬೇರೆ { ಕೀಮ್ಯಾಪ್[e.key].classList.remove("ಸಕ್ರಿಯ"); } status.textContent = "ಕೀಲಿಯನ್ನು ಬಿಡುಗಡೆ ಮಾಡಲಾಗಿದೆ:" + e.key.toUpperCase(); } });
ಹಂತ 6: ಪ್ರಾರಂಭ/ನಿಲುಗಡೆ ನಿಯಂತ್ರಣವನ್ನು ಸೇರಿಸಿ ಅಂತಿಮವಾಗಿ, ಡೀಬಗರ್ ಅನ್ನು ಆನ್ ಮತ್ತು ಆಫ್ ಮಾಡಲು ನಮಗೆ ಒಂದು ಮಾರ್ಗ ಬೇಕು: // ======================================= // ಡೀಬಗ್ಗರ್ ಅನ್ನು ಟಾಗಲ್ ಆನ್/ಆಫ್ ಮಾಡಿ // =======================================
document.getElementById("ಟಾಗಲ್").addEventListener("ಕ್ಲಿಕ್", () => { ಓಡುವುದು = !ಓಡುವುದು; // ಚಾಲನೆಯಲ್ಲಿರುವ ಸ್ಥಿತಿಯನ್ನು ಫ್ಲಿಪ್ ಮಾಡಿ
(ಓಡುತ್ತಿದ್ದರೆ) { status.textContent = "ಡಿಬಗ್ಗರ್ ಚಾಲನೆಯಲ್ಲಿದೆ..."; ಅಪ್ಡೇಟ್ ಗೇಮ್ಪ್ಯಾಡ್ (); // ಅಪ್ಡೇಟ್ ಲೂಪ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿ } ಬೇರೆ { status.textContent = "ಡೀಬಗ್ಗರ್ ನಿಷ್ಕ್ರಿಯ"; ರದ್ದು ಅನಿಮೇಷನ್ ಫ್ರೇಮ್ (rafId); // ಲೂಪ್ ಅನ್ನು ನಿಲ್ಲಿಸಿ } });
ಆದ್ದರಿಂದ ಹೌದು, ಒಂದು ಗುಂಡಿಯನ್ನು ಒತ್ತಿ ಮತ್ತು ಅದು ಹೊಳೆಯುತ್ತದೆ. ಸ್ಟಿಕ್ ಅನ್ನು ತಳ್ಳುತ್ತದೆ ಮತ್ತು ಅದು ಚಲಿಸುತ್ತದೆ. ಅಷ್ಟೆ. ಇನ್ನೊಂದು ವಿಷಯ: ಕಚ್ಚಾ ಮೌಲ್ಯಗಳು. ಕೆಲವೊಮ್ಮೆ ನೀವು ಸಂಖ್ಯೆಗಳನ್ನು ನೋಡಲು ಬಯಸುತ್ತೀರಿ, ದೀಪಗಳಲ್ಲ.
ಈ ಹಂತದಲ್ಲಿ, ನೀವು ನೋಡಬೇಕು:
ಸರಳ ಆನ್-ಸ್ಕ್ರೀನ್ ನಿಯಂತ್ರಕ, ನೀವು ಅವರೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವಾಗ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಬಟನ್ಗಳು ಮತ್ತು ಒತ್ತಿದ ಬಟನ್ ಸೂಚ್ಯಂಕಗಳನ್ನು ತೋರಿಸುವ ಐಚ್ಛಿಕ ಡೀಬಗ್ ಓದುವಿಕೆ.
ಇದನ್ನು ಕಡಿಮೆ ಅಮೂರ್ತಗೊಳಿಸಲು, ಆನ್-ಸ್ಕ್ರೀನ್ ನಿಯಂತ್ರಕ ನೈಜ ಸಮಯದಲ್ಲಿ ಪ್ರತಿಕ್ರಿಯಿಸುವ ತ್ವರಿತ ಡೆಮೊ ಇಲ್ಲಿದೆ:
ಈಗ, ಸ್ಟಾರ್ಟ್ ರೆಕಾರ್ಡಿಂಗ್ ಅನ್ನು ಒತ್ತುವುದರಿಂದ ನೀವು ರೆಕಾರ್ಡಿಂಗ್ ನಿಲ್ಲಿಸು ಅನ್ನು ಹೊಡೆಯುವವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಲಾಗ್ ಮಾಡುತ್ತದೆ. 2. CSV/JSON ಗೆ ಡೇಟಾವನ್ನು ರಫ್ತು ಮಾಡಲಾಗುತ್ತಿದೆ ಒಮ್ಮೆ ನಾವು ಲಾಗ್ ಅನ್ನು ಹೊಂದಿದ್ದರೆ, ನಾವು ಅದನ್ನು ಉಳಿಸಲು ಬಯಸುತ್ತೇವೆ.
ಹಂತ 1: ಡೌನ್ಲೋಡ್ ಸಹಾಯಕವನ್ನು ರಚಿಸಿ ಮೊದಲಿಗೆ, ನಮಗೆ ಬ್ರೌಸರ್ನಲ್ಲಿ ಫೈಲ್ ಡೌನ್ಲೋಡ್ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಸಹಾಯಕ ಕಾರ್ಯದ ಅಗತ್ಯವಿದೆ: // ======================================= // ಫೈಲ್ ಡೌನ್ಲೋಡ್ ಸಹಾಯಕ // =======================================
ಫಂಕ್ಷನ್ ಡೌನ್ಲೋಡ್ ಫೈಲ್ (ಫೈಲ್ ಹೆಸರು, ವಿಷಯ, ಪ್ರಕಾರ = "ಪಠ್ಯ/ಸರಳ") { // ವಿಷಯದಿಂದ ಬ್ಲಬ್ ಅನ್ನು ರಚಿಸಿ const blob = ಹೊಸ ಬ್ಲಾಬ್([ವಿಷಯ], {ಟೈಪ್}); const url = URL.createObjectURL(blob);
// ತಾತ್ಕಾಲಿಕ ಡೌನ್ಲೋಡ್ ಲಿಂಕ್ ಅನ್ನು ರಚಿಸಿ ಮತ್ತು ಅದನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ const a = document.createElement("a"); a.href = url; a.download = ಕಡತದ ಹೆಸರು; a.click();
// ಡೌನ್ಲೋಡ್ ಮಾಡಿದ ನಂತರ ಆಬ್ಜೆಕ್ಟ್ URL ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ setTimeout(() => URL.revokeObjectURL(url), 100); }
ಈ ಕಾರ್ಯವು ನಿಮ್ಮ ಡೇಟಾದಿಂದ ಬ್ಲಾಬ್ (ಬೈನರಿ ದೊಡ್ಡ ವಸ್ತು) ರಚಿಸುವ ಮೂಲಕ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಅದಕ್ಕಾಗಿ ತಾತ್ಕಾಲಿಕ URL ಅನ್ನು ರಚಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಡೌನ್ಲೋಡ್ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುತ್ತದೆ. ಸ್ವಚ್ಛಗೊಳಿಸುವಿಕೆಯು ನಾವು ಮೆಮೊರಿಯನ್ನು ಸೋರಿಕೆ ಮಾಡುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಹಂತ 2: JSON ರಫ್ತು ನಿರ್ವಹಿಸಿ ಸಂಪೂರ್ಣ ಡೇಟಾ ರಚನೆಯನ್ನು ಸಂರಕ್ಷಿಸಲು JSON ಪರಿಪೂರ್ಣವಾಗಿದೆ:
// ======================================= // JSON ಆಗಿ ರಫ್ತು ಮಾಡಿ // =======================================
document.getElementById("export-json").addEventListener("ಕ್ಲಿಕ್", () => { // ರಫ್ತು ಮಾಡಲು ಏನಾದರೂ ಇದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ ಒಂದು ವೇಳೆ (!frames.length) { console.warn("ರಫ್ತು ಮಾಡಲು ಯಾವುದೇ ರೆಕಾರ್ಡಿಂಗ್ ಲಭ್ಯವಿಲ್ಲ."); ಹಿಂತಿರುಗಿ; }
// ಮೆಟಾಡೇಟಾ ಮತ್ತು ಫ್ರೇಮ್ಗಳೊಂದಿಗೆ ಪೇಲೋಡ್ ಅನ್ನು ರಚಿಸಿ ಸ್ಥಿರ ಪೇಲೋಡ್ = { ರಚಿಸಲಾಗಿದೆ: ಹೊಸ ದಿನಾಂಕ().toISOSstring(), ಚೌಕಟ್ಟುಗಳು };
// ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾದ JSON ನಂತೆ ಡೌನ್ಲೋಡ್ ಮಾಡಿ ಡೌನ್ಲೋಡ್ ಫೈಲ್( "gamepad-log.json", JSON.stringify(ಪೇಲೋಡ್, ಶೂನ್ಯ, 2), "ಅಪ್ಲಿಕೇಶನ್/json" ); });
JSON ಸ್ವರೂಪವು ಎಲ್ಲವನ್ನೂ ರಚನಾತ್ಮಕವಾಗಿ ಇರಿಸುತ್ತದೆ ಮತ್ತು ಸುಲಭವಾಗಿ ಪಾರ್ಸ್ ಮಾಡಬಹುದಾಗಿದೆ, ಇದು ದೇವ್ ಪರಿಕರಗಳಿಗೆ ಮರಳಿ ಲೋಡ್ ಮಾಡಲು ಅಥವಾ ತಂಡದ ಸದಸ್ಯರೊಂದಿಗೆ ಹಂಚಿಕೊಳ್ಳಲು ಸೂಕ್ತವಾಗಿದೆ. ಹಂತ 3: CSV ರಫ್ತು ನಿರ್ವಹಿಸಿ CSV ರಫ್ತುಗಳಿಗಾಗಿ, ನಾವು ಕ್ರಮಾನುಗತ ಡೇಟಾವನ್ನು ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್ಗಳಾಗಿ ಚಪ್ಪಟೆಗೊಳಿಸಬೇಕಾಗಿದೆ:
//===================================== // CSV ನಂತೆ ರಫ್ತು ಮಾಡಿ // =======================================
document.getElementById("export-csv").addEventListener("ಕ್ಲಿಕ್", () => { // ರಫ್ತು ಮಾಡಲು ಏನಾದರೂ ಇದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ ಒಂದು ವೇಳೆ (!frames.length) { console.warn("ರಫ್ತು ಮಾಡಲು ಯಾವುದೇ ರೆಕಾರ್ಡಿಂಗ್ ಲಭ್ಯವಿಲ್ಲ."); ಹಿಂತಿರುಗಿ; }
// CSV ಹೆಡರ್ ಸಾಲನ್ನು ನಿರ್ಮಿಸಿ (ಟೈಮ್ಸ್ಟ್ಯಾಂಪ್ಗಾಗಿ ಕಾಲಮ್ಗಳು, ಎಲ್ಲಾ ಬಟನ್ಗಳು, ಎಲ್ಲಾ ಅಕ್ಷಗಳು) const headerButtons = ಚೌಕಟ್ಟುಗಳು[0].buttons.map((_, i) => btn${i}); const headerAxes = ಚೌಕಟ್ಟುಗಳು[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// CSV ಡೇಟಾ ಸಾಲುಗಳನ್ನು ನಿರ್ಮಿಸಿ const row = frames.map(f => { const btnVals = f.buttons.map(b => b.value); ಹಿಂತಿರುಗಿ [f.t, ...btnVals, ...f.axes].ಸೇರಿ(","); }).ಸೇರಿ ("\n");
// CSV ನಂತೆ ಡೌನ್ಲೋಡ್ ಮಾಡಿ ಡೌನ್ಲೋಡ್ ಫೈಲ್ ("ಗೇಮ್ಪ್ಯಾಡ್-ಲಾಗ್.ಸಿಎಸ್ವಿ", ಹೆಡರ್ + ಸಾಲುಗಳು, "ಪಠ್ಯ/ಸಿಎಸ್ವಿ"); });
ಡೇಟಾ ವಿಶ್ಲೇಷಣೆಗೆ CSV ಅದ್ಭುತವಾಗಿದೆ ಏಕೆಂದರೆ ಇದು ನೇರವಾಗಿ ಎಕ್ಸೆಲ್ ಅಥವಾ Google ಶೀಟ್ಗಳಲ್ಲಿ ತೆರೆಯುತ್ತದೆ, ಚಾರ್ಟ್ಗಳನ್ನು ರಚಿಸಲು, ಡೇಟಾವನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಲು ಅಥವಾ ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಮಾದರಿಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈಗ ರಫ್ತು ಬಟನ್ಗಳು ಇವೆ, ನೀವು ಪ್ಯಾನೆಲ್ನಲ್ಲಿ ಎರಡು ಹೊಸ ಆಯ್ಕೆಗಳನ್ನು ನೋಡುತ್ತೀರಿ: JSON ರಫ್ತು ಮತ್ತು CSV ರಫ್ತು ಮಾಡಿ. ನೀವು ಕಚ್ಚಾ ಲಾಗ್ ಅನ್ನು ನಿಮ್ಮ ಡೆವ್ ಟೂಲ್ಗಳಿಗೆ ಹಿಂತಿರುಗಿಸಲು ಅಥವಾ ರಚನೆಯ ಸುತ್ತಲೂ ಇರಿಯಲು ಬಯಸಿದರೆ JSON ಉತ್ತಮವಾಗಿರುತ್ತದೆ. ಮತ್ತೊಂದೆಡೆ, CSV ನೇರವಾಗಿ ಎಕ್ಸೆಲ್ ಅಥವಾ Google ಶೀಟ್ಗಳಲ್ಲಿ ತೆರೆಯುತ್ತದೆ ಆದ್ದರಿಂದ ನೀವು ಇನ್ಪುಟ್ಗಳನ್ನು ಚಾರ್ಟ್ ಮಾಡಬಹುದು, ಫಿಲ್ಟರ್ ಮಾಡಬಹುದು ಅಥವಾ ಹೋಲಿಸಬಹುದು. ಹೆಚ್ಚುವರಿ ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ ಫಲಕವು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದನ್ನು ಕೆಳಗಿನ ಅಂಕಿ ತೋರಿಸುತ್ತದೆ.
3. ಸ್ನ್ಯಾಪ್ಶಾಟ್ ಸಿಸ್ಟಮ್ ಕೆಲವೊಮ್ಮೆ ನಿಮಗೆ ಪೂರ್ಣ ರೆಕಾರ್ಡಿಂಗ್ ಅಗತ್ಯವಿಲ್ಲ, ಇನ್ಪುಟ್ ಸ್ಥಿತಿಗಳ ತ್ವರಿತ "ಸ್ಕ್ರೀನ್ಶಾಟ್". ಅಲ್ಲಿ ಟೇಕ್ ಸ್ನ್ಯಾಪ್ಶಾಟ್ ಬಟನ್ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್:
// ======================================= // ಸ್ನ್ಯಾಪ್ಶಾಟ್ ತೆಗೆದುಕೊಳ್ಳಿ // =======================================
document.getElementById("snapshot").addEventListener("ಕ್ಲಿಕ್", () => { // ಎಲ್ಲಾ ಸಂಪರ್ಕಿತ ಗೇಮ್ಪ್ಯಾಡ್ಗಳನ್ನು ಪಡೆಯಿರಿ const ಪ್ಯಾಡ್ಗಳು = navigator.getGamepads(); const activePads = [];
// ಪ್ರತಿ ಸಂಪರ್ಕಿತ ಗೇಮ್ಪ್ಯಾಡ್ನ ಸ್ಥಿತಿಯನ್ನು ಲೂಪ್ ಮಾಡಿ ಮತ್ತು ಸೆರೆಹಿಡಿಯಿರಿ ಗಾಗಿ (const GP ಆಫ್ ಪ್ಯಾಡ್ಗಳು) { (!gp) ಮುಂದುವರಿದರೆ; // ಖಾಲಿ ಸ್ಲಾಟ್ಗಳನ್ನು ಬಿಟ್ಟುಬಿಡಿ
activePads.push({ ಐಡಿ: gp.id, // ನಿಯಂತ್ರಕ ಹೆಸರು/ಮಾದರಿ ಟೈಮ್ಸ್ಟ್ಯಾಂಪ್: performance.now(), ಗುಂಡಿಗಳು: gp.buttons.map(b => ({ ಒತ್ತಿದರೆ: b. ಒತ್ತಿದರೆ, ಮೌಲ್ಯ: b.value })), ಅಕ್ಷಗಳು: [...gp.axes] }); }
// ಯಾವುದೇ ಗೇಮ್ಪ್ಯಾಡ್ಗಳು ಕಂಡುಬಂದಿವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ ಒಂದು ವೇಳೆ (!activePads.length) { console.warn("ಸ್ನ್ಯಾಪ್ಶಾಟ್ಗಾಗಿ ಯಾವುದೇ ಗೇಮ್ಪ್ಯಾಡ್ಗಳನ್ನು ಸಂಪರ್ಕಿಸಲಾಗಿಲ್ಲ."); ಎಚ್ಚರಿಕೆ ("ಯಾವುದೇ ನಿಯಂತ್ರಕ ಪತ್ತೆಯಾಗಿಲ್ಲ!"); ಹಿಂತಿರುಗಿ; }
// ಲಾಗ್ ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ಸೂಚಿಸಿ console.log("ಸ್ನ್ಯಾಪ್ಶಾಟ್:", ಆಕ್ಟಿವ್ಪ್ಯಾಡ್ಗಳು); ಎಚ್ಚರಿಕೆ(ಸ್ನ್ಯಾಪ್ಶಾಟ್ ತೆಗೆದುಕೊಳ್ಳಲಾಗಿದೆ! ${activePads.length} ನಿಯಂತ್ರಕ(ಗಳು) ಸೆರೆಹಿಡಿಯಲಾಗಿದೆ); });
ಸ್ನ್ಯಾಪ್ಶಾಟ್ಗಳು ನಿಮ್ಮ ನಿಯಂತ್ರಕದ ನಿಖರ ಸ್ಥಿತಿಯನ್ನು ಒಂದು ಕ್ಷಣದಲ್ಲಿ ಫ್ರೀಜ್ ಮಾಡುತ್ತವೆ. 4. ಘೋಸ್ಟ್ ಇನ್ಪುಟ್ ರಿಪ್ಲೇ ಈಗ ಮೋಜಿಗಾಗಿ: ಪ್ರೇತ ಇನ್ಪುಟ್ ಮರುಪಂದ್ಯ. ಇದು ಲಾಗ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಫ್ಯಾಂಟಮ್ ಪ್ಲೇಯರ್ ನಿಯಂತ್ರಕವನ್ನು ಬಳಸುತ್ತಿರುವಂತೆ ಅದನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಪ್ಲೇ ಮಾಡುತ್ತದೆ.
ಮರುಪಂದ್ಯಕ್ಕಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್: // ======================================= // ಘೋಸ್ಟ್ ರಿಪ್ಲೇ // =======================================
document.getElementById("replay").addEventListener("ಕ್ಲಿಕ್", () => { // ನಾವು ರಿಪ್ಲೇ ಮಾಡಲು ರೆಕಾರ್ಡಿಂಗ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ ಒಂದು ವೇಳೆ (!frames.length) { ಎಚ್ಚರಿಕೆ ("ಮರುಪ್ಲೇ ಮಾಡಲು ಯಾವುದೇ ರೆಕಾರ್ಡಿಂಗ್ ಇಲ್ಲ!"); ಹಿಂತಿರುಗಿ; }
console.log("ಪ್ರೇತ ಮರುಪಂದ್ಯವನ್ನು ಪ್ರಾರಂಭಿಸಲಾಗುತ್ತಿದೆ...");
// ಸಿಂಕ್ ಮಾಡಲಾದ ಪ್ಲೇಬ್ಯಾಕ್ಗಾಗಿ ಸಮಯವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ startTime = performance.now(); ಫ್ರೇಮ್ ಇಂಡೆಕ್ಸ್ = 0;
// ರಿಪ್ಲೇ ಅನಿಮೇಷನ್ ಲೂಪ್ ಕಾರ್ಯ ಹಂತ() { const now = performance. now(); const elapsed = ಈಗ - startTime;
// ಈಗ ಸಂಭವಿಸಬೇಕಾದ ಎಲ್ಲಾ ಫ್ರೇಮ್ಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿ ಯಾವಾಗ (frameIndex < frames.length && frames[frameIndex].t <= ಕಳೆದಿದೆ) { ಕಾನ್ಸ್ಟ್ ಫ್ರೇಮ್ = ಫ್ರೇಮ್ಗಳು[ಫ್ರೇಮ್ಇಂಡೆಕ್ಸ್];
// ರೆಕಾರ್ಡ್ ಮಾಡಲಾದ ಬಟನ್ ಸ್ಟೇಟ್ಗಳೊಂದಿಗೆ UI ಅನ್ನು ನವೀಕರಿಸಿ btnA.classList.toggle("ಸಕ್ರಿಯ", ಫ್ರೇಮ್.ಬಟನ್ಸ್[0].ಒತ್ತಲಾಗಿದೆ); btnB.classList.toggle("ಸಕ್ರಿಯ", ಫ್ರೇಮ್.ಬಟನ್ಸ್[1].ಒತ್ತಲಾಗಿದೆ); btnX.classList.toggle("ಸಕ್ರಿಯ", ಫ್ರೇಮ್.ಬಟನ್ಸ್[2].ಒತ್ತಲಾಗಿದೆ);
// ಸ್ಥಿತಿ ಪ್ರದರ್ಶನವನ್ನು ನವೀಕರಿಸಿ ಒತ್ತಿದರೆ ಅವಕಾಶ = []; frame.buttons.forEach((btn, i) => { (btn. ಒತ್ತಿದರೆ) ಒತ್ತಿದರೆ.push("ಬಟನ್" + i); }); ವೇಳೆ (pressed.length > 0) { status.textContent = "ಭೂತ:" + ಒತ್ತಿದರು.join(", "); }
ಫ್ರೇಮ್ ಇಂಡೆಕ್ಸ್ ++; }
// ಹೆಚ್ಚು ಫ್ರೇಮ್ಗಳಿದ್ದರೆ ಲೂಪ್ ಅನ್ನು ಮುಂದುವರಿಸಿ ವೇಳೆ (frameIndex < frames.length) { ವಿನಂತಿ ಅನಿಮೇಷನ್ ಫ್ರೇಮ್ (ಹಂತ); } ಬೇರೆ { console.log("ಮರುಪಂದ್ಯಮುಗಿದಿದೆ."); status.textContent = "ರೀಪ್ಲೇ ಪೂರ್ಣಗೊಂಡಿದೆ"; } }
// ಮರುಪಂದ್ಯವನ್ನು ಪ್ರಾರಂಭಿಸಿ ಹಂತ (); });
ಡೀಬಗ್ ಮಾಡುವುದನ್ನು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಕೈಯಲ್ಲಿ ಮಾಡಲು, ನಾನು ಪ್ರೇತ ಮರುಪಂದ್ಯವನ್ನು ಸೇರಿಸಿದ್ದೇನೆ. ಒಮ್ಮೆ ನೀವು ಸೆಷನ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಿದ ನಂತರ, ನೀವು ಮರುಪಂದ್ಯವನ್ನು ಹಿಟ್ ಮಾಡಬಹುದು ಮತ್ತು UI ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ವೀಕ್ಷಿಸಬಹುದು, ಬಹುತೇಕ ಫ್ಯಾಂಟಮ್ ಪ್ಲೇಯರ್ ಪ್ಯಾಡ್ ಅನ್ನು ಚಾಲನೆ ಮಾಡುತ್ತಿರುವಂತೆ. ಇದಕ್ಕಾಗಿ ಪ್ಯಾನೆಲ್ನಲ್ಲಿ ಹೊಸ ರಿಪ್ಲೇ ಘೋಸ್ಟ್ ಬಟನ್ ತೋರಿಸುತ್ತದೆ.
ರೆಕಾರ್ಡ್ ಅನ್ನು ಹಿಟ್ ಮಾಡಿ, ನಿಯಂತ್ರಕವನ್ನು ಸ್ವಲ್ಪ ಗೊಂದಲಗೊಳಿಸಿ, ನಿಲ್ಲಿಸಿ, ನಂತರ ಮರುಪ್ಲೇ ಮಾಡಿ. ನಿಮ್ಮ ಇನ್ಪುಟ್ಗಳನ್ನು ಅನುಸರಿಸುವ ಭೂತದಂತೆ ನೀವು ಮಾಡಿದ ಎಲ್ಲವನ್ನೂ UI ಪ್ರತಿಧ್ವನಿಸುತ್ತದೆ. ಈ ಹೆಚ್ಚುವರಿಗಳ ಬಗ್ಗೆ ಏಕೆ ತಲೆಕೆಡಿಸಿಕೊಳ್ಳಬೇಕು?
ಏನಾಯಿತು ಎಂಬುದನ್ನು ನಿಖರವಾಗಿ ತೋರಿಸಲು ಪರೀಕ್ಷಕರಿಗೆ ರೆಕಾರ್ಡಿಂಗ್/ರಫ್ತು ಸುಲಭವಾಗುತ್ತದೆ. ಸ್ನ್ಯಾಪ್ಶಾಟ್ಗಳು ಸಮಯಕ್ಕೆ ಒಂದು ಕ್ಷಣ ಫ್ರೀಜ್ ಆಗುತ್ತವೆ, ನೀವು ಬೆಸ ದೋಷಗಳನ್ನು ಬೆನ್ನಟ್ಟುತ್ತಿರುವಾಗ ತುಂಬಾ ಉಪಯುಕ್ತವಾಗಿದೆ. ಟ್ಯುಟೋರಿಯಲ್ಗಳು, ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಶೀಲನೆಗಳು ಅಥವಾ ನಿಯಂತ್ರಣ ಸೆಟಪ್ಗಳನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಹೋಲಿಸಲು ಘೋಸ್ಟ್ ರಿಪ್ಲೇ ಉತ್ತಮವಾಗಿದೆ.
ಈ ಹಂತದಲ್ಲಿ, ಇದು ಇನ್ನು ಮುಂದೆ ಕೇವಲ ಅಚ್ಚುಕಟ್ಟಾಗಿ ಡೆಮೊ ಅಲ್ಲ, ಆದರೆ ನೀವು ನಿಜವಾಗಿಯೂ ಕೆಲಸ ಮಾಡಲು ಏನಾದರೂ ಮಾಡಬಹುದು. ನೈಜ-ಪ್ರಪಂಚದ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಈಗ ನಾವು ಈ ಡೀಬಗರ್ ಅನ್ನು ಪಡೆದುಕೊಂಡಿದ್ದೇವೆ ಅದು ಬಹಳಷ್ಟು ಮಾಡಬಹುದು. ಇದು ಲೈವ್ ಇನ್ಪುಟ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ, ಲಾಗ್ಗಳನ್ನು ದಾಖಲಿಸುತ್ತದೆ, ಅವುಗಳನ್ನು ರಫ್ತು ಮಾಡುತ್ತದೆ ಮತ್ತು ವಿಷಯವನ್ನು ಮರುಪ್ಲೇ ಮಾಡುತ್ತದೆ. ಆದರೆ ನಿಜವಾದ ಪ್ರಶ್ನೆ: ಯಾರು ನಿಜವಾಗಿಯೂ ಕಾಳಜಿ ವಹಿಸುತ್ತಾರೆ? ಇದು ಯಾರಿಗೆ ಉಪಯುಕ್ತ? ಗೇಮ್ ಡೆವಲಪರ್ಗಳು ನಿಯಂತ್ರಕಗಳು ಕೆಲಸದ ಭಾಗವಾಗಿದೆ, ಆದರೆ ಅವುಗಳನ್ನು ಡೀಬಗ್ ಮಾಡುವುದೇ? ಸಾಮಾನ್ಯವಾಗಿ ನೋವು. ನೀವು ↓ → + ಪಂಚ್ನಂತಹ ಫೈಟಿಂಗ್ ಗೇಮ್ ಕಾಂಬೊವನ್ನು ಪರೀಕ್ಷಿಸುತ್ತಿರುವಿರಿ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಪ್ರಾರ್ಥನೆ ಮಾಡುವ ಬದಲು, ನೀವು ಅದನ್ನು ಎರಡು ಬಾರಿ ಒಂದೇ ರೀತಿಯಲ್ಲಿ ಒತ್ತಿರಿ, ನೀವು ಅದನ್ನು ಒಮ್ಮೆ ರೆಕಾರ್ಡ್ ಮಾಡಿ ಮತ್ತು ಅದನ್ನು ಮರುಪ್ಲೇ ಮಾಡಿ. ಮುಗಿದಿದೆ. ಅಥವಾ ನಿಮ್ಮ ಮಲ್ಟಿಪ್ಲೇಯರ್ ಕೋಡ್ ಅವರ ಗಣಕದಲ್ಲಿ ಅದೇ ರೀತಿ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ನೀವು ತಂಡದ ಸಹ ಆಟಗಾರರೊಂದಿಗೆ JSON ಲಾಗ್ಗಳನ್ನು ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳಿ. ಅದು ದೊಡ್ಡದು. ಪ್ರವೇಶಿಸುವಿಕೆ ಅಭ್ಯಾಸಕಾರರು ಇದು ನನ್ನ ಹೃದಯಕ್ಕೆ ಹತ್ತಿರವಾಗಿದೆ. ಪ್ರತಿಯೊಬ್ಬರೂ "ಸ್ಟ್ಯಾಂಡರ್ಡ್" ನಿಯಂತ್ರಕದೊಂದಿಗೆ ಆಡುವುದಿಲ್ಲ. ಅಡಾಪ್ಟಿವ್ ಕಂಟ್ರೋಲರ್ಗಳು ಕೆಲವೊಮ್ಮೆ ವಿಲಕ್ಷಣ ಸಂಕೇತಗಳನ್ನು ಹೊರಹಾಕುತ್ತವೆ. ಈ ಉಪಕರಣದೊಂದಿಗೆ, ಏನಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ನೀವು ನಿಖರವಾಗಿ ನೋಡಬಹುದು. ಶಿಕ್ಷಕರು, ಸಂಶೋಧಕರು, ಯಾರೇ ಆಗಲಿ. ಅವರು ಲಾಗ್ಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳಬಹುದು, ಅವುಗಳನ್ನು ಹೋಲಿಸಬಹುದು ಅಥವಾ ಇನ್ಪುಟ್ಗಳನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಮರುಪ್ಲೇ ಮಾಡಬಹುದು. ಇದ್ದಕ್ಕಿದ್ದಂತೆ, ಅದೃಶ್ಯ ವಿಷಯವು ಸ್ಪಷ್ಟವಾಗುತ್ತದೆ. ಗುಣಮಟ್ಟದ ಭರವಸೆ ಪರೀಕ್ಷೆ ಪರೀಕ್ಷಕರು ಸಾಮಾನ್ಯವಾಗಿ "ನಾನು ಇಲ್ಲಿ ಗುಂಡಿಗಳನ್ನು ಮ್ಯಾಶ್ ಮಾಡಿದ್ದೇನೆ ಮತ್ತು ಅದು ಮುರಿದುಹೋಯಿತು" ಎಂದು ಟಿಪ್ಪಣಿಗಳನ್ನು ಬರೆಯುತ್ತಾರೆ. ತುಂಬಾ ಸಹಾಯಕವಾಗಿಲ್ಲ. ಈಗ? ಅವರು ನಿಖರವಾದ ಪ್ರೆಸ್ಗಳನ್ನು ಸೆರೆಹಿಡಿಯಬಹುದು, ಲಾಗ್ ಅನ್ನು ರಫ್ತು ಮಾಡಬಹುದು ಮತ್ತು ಅದನ್ನು ಕಳುಹಿಸಬಹುದು. ಊಹೆ ಇಲ್ಲ. ಶಿಕ್ಷಣತಜ್ಞರು ನೀವು ಟ್ಯುಟೋರಿಯಲ್ಗಳು ಅಥವಾ YouTube ವೀಡಿಯೊಗಳನ್ನು ಮಾಡುತ್ತಿದ್ದರೆ, ಪ್ರೇತ ಮರುಪಂದ್ಯವು ಚಿನ್ನವಾಗಿದೆ. ನೀವು ಅಕ್ಷರಶಃ ಹೇಳಬಹುದು, "ಇಲ್ಲಿ ನಾನು ನಿಯಂತ್ರಕದೊಂದಿಗೆ ಮಾಡಿದ್ದೇನೆ" ಎಂದು UI ತೋರಿಸುತ್ತದೆ. ಸ್ಪಷ್ಟವಾದ ವಿವರಣೆಯನ್ನು ನೀಡುತ್ತದೆ. ಆಟಗಳನ್ನು ಮೀರಿ ಮತ್ತು ಹೌದು, ಇದು ಕೇವಲ ಆಟಗಳ ಬಗ್ಗೆ ಅಲ್ಲ. ಜನರು ರೋಬೋಟ್ಗಳು, ಕಲಾ ಯೋಜನೆಗಳು ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆ ಇಂಟರ್ಫೇಸ್ಗಳಿಗಾಗಿ ನಿಯಂತ್ರಕಗಳನ್ನು ಬಳಸಿದ್ದಾರೆ. ಪ್ರತಿ ಬಾರಿಯೂ ಇದೇ ಸಮಸ್ಯೆ: ಬ್ರೌಸರ್ ನಿಜವಾಗಿ ಏನನ್ನು ನೋಡುತ್ತಿದೆ? ಇದರೊಂದಿಗೆ, ನೀವು ಊಹಿಸಬೇಕಾಗಿಲ್ಲ. ತೀರ್ಮಾನ ನಿಯಂತ್ರಕ ಇನ್ಪುಟ್ ಅನ್ನು ಡೀಬಗ್ ಮಾಡುವುದು ಯಾವಾಗಲೂ ಕುರುಡಾಗಿ ಹಾರುತ್ತಿರುವಂತೆ ಭಾಸವಾಗುತ್ತದೆ. DOM ಅಥವಾ CSS ಗಿಂತ ಭಿನ್ನವಾಗಿ, ಗೇಮ್ಪ್ಯಾಡ್ಗಳಿಗಾಗಿ ಯಾವುದೇ ಅಂತರ್ನಿರ್ಮಿತ ಇನ್ಸ್ಪೆಕ್ಟರ್ ಇಲ್ಲ; ಇದು ಕನ್ಸೋಲ್ನಲ್ಲಿರುವ ಕಚ್ಚಾ ಸಂಖ್ಯೆಗಳು, ಶಬ್ದದಲ್ಲಿ ಸುಲಭವಾಗಿ ಕಳೆದುಹೋಗುತ್ತದೆ. HTML, CSS ಮತ್ತು JavaScript ನ ಕೆಲವು ನೂರು ಸಾಲುಗಳೊಂದಿಗೆ, ನಾವು ವಿಭಿನ್ನವಾದದ್ದನ್ನು ನಿರ್ಮಿಸಿದ್ದೇವೆ:
ಅದೃಶ್ಯ ಇನ್ಪುಟ್ಗಳನ್ನು ಗೋಚರಿಸುವಂತೆ ಮಾಡುವ ದೃಶ್ಯ ಡೀಬಗರ್. UI ಅನ್ನು ಕ್ಲೀನ್ ಮತ್ತು ಡೀಬಗ್ ಮಾಡಬಹುದಾದ ಲೇಯರ್ಡ್ CSS ಸಿಸ್ಟಮ್. ವರ್ಧನೆಗಳ ಒಂದು ಸೆಟ್ (ರೆಕಾರ್ಡಿಂಗ್, ರಫ್ತು, ಸ್ನ್ಯಾಪ್ಶಾಟ್ಗಳು, ಪ್ರೇತ ಮರುಪಂದ್ಯ) ಅದನ್ನು ಡೆಮೊದಿಂದ ಡೆವಲಪರ್ ಟೂಲ್ಗೆ ಏರಿಸುತ್ತದೆ.
CSS ಕ್ಯಾಸ್ಕೇಡ್ ಲೇಯರ್ಗಳಲ್ಲಿ ಸ್ವಲ್ಪ ಸೃಜನಶೀಲತೆಯೊಂದಿಗೆ ವೆಬ್ ಪ್ಲಾಟ್ಫಾರ್ಮ್ನ ಶಕ್ತಿಯನ್ನು ಬೆರೆಸುವ ಮೂಲಕ ನೀವು ಎಷ್ಟು ದೂರ ಹೋಗಬಹುದು ಎಂಬುದನ್ನು ಈ ಯೋಜನೆಯು ತೋರಿಸುತ್ತದೆ. ನಾನು ಸಂಪೂರ್ಣವಾಗಿ ವಿವರಿಸಿದ ಸಾಧನವು ತೆರೆದ ಮೂಲವಾಗಿದೆ. ನೀವು GitHub ರೆಪೊವನ್ನು ಕ್ಲೋನ್ ಮಾಡಬಹುದು ಮತ್ತು ಅದನ್ನು ನಿಮಗಾಗಿ ಪ್ರಯತ್ನಿಸಬಹುದು. ಆದರೆ ಮುಖ್ಯವಾಗಿ, ನೀವು ಅದನ್ನು ನಿಮ್ಮದೇ ಆದ ರೀತಿಯಲ್ಲಿ ಮಾಡಬಹುದು. ನಿಮ್ಮ ಸ್ವಂತ ಪದರಗಳನ್ನು ಸೇರಿಸಿ. ನಿಮ್ಮ ಸ್ವಂತ ಮರುಪಂದ್ಯ ತರ್ಕವನ್ನು ನಿರ್ಮಿಸಿ. ನಿಮ್ಮ ಆಟದ ಮೂಲಮಾದರಿಯೊಂದಿಗೆ ಅದನ್ನು ಸಂಯೋಜಿಸಿ. ಅಥವಾ ನಾನು ಊಹಿಸದ ರೀತಿಯಲ್ಲಿ ಅದನ್ನು ಬಳಸಿ. ಬೋಧನೆ, ಪ್ರವೇಶಿಸುವಿಕೆ ಅಥವಾ ಡೇಟಾ ವಿಶ್ಲೇಷಣೆಗಾಗಿ. ದಿನದ ಕೊನೆಯಲ್ಲಿ, ಇದು ಕೇವಲ ಡೀಬಗ್ ಮಾಡುವ ಗೇಮ್ಪ್ಯಾಡ್ಗಳ ಬಗ್ಗೆ ಅಲ್ಲ. ಇದು ಗುಪ್ತ ಇನ್ಪುಟ್ಗಳ ಮೇಲೆ ಬೆಳಕು ಚೆಲ್ಲುತ್ತದೆ ಮತ್ತು ವೆಬ್ ಇನ್ನೂ ಸಂಪೂರ್ಣವಾಗಿ ಅಳವಡಿಸಿಕೊಳ್ಳದ ಹಾರ್ಡ್ವೇರ್ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಡೆವಲಪರ್ಗಳಿಗೆ ವಿಶ್ವಾಸವನ್ನು ನೀಡುತ್ತದೆ. ಆದ್ದರಿಂದ, ನಿಮ್ಮ ನಿಯಂತ್ರಕವನ್ನು ಪ್ಲಗ್ ಇನ್ ಮಾಡಿ, ನಿಮ್ಮ ಸಂಪಾದಕವನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಪ್ರಯೋಗವನ್ನು ಪ್ರಾರಂಭಿಸಿ. ನಿಮ್ಮ ಬ್ರೌಸರ್ ಮತ್ತು ನಿಮ್ಮ CSS ನಿಜವಾಗಿಯೂ ಏನನ್ನು ಸಾಧಿಸಬಹುದು ಎಂಬುದರ ಕುರಿತು ನಿಮಗೆ ಆಶ್ಚರ್ಯವಾಗಬಹುದು.
