যেতিয়া আপুনি এটা নিয়ন্ত্ৰক প্লাগ ইন কৰে, আপুনি বুটামসমূহ মেছ কৰে, ষ্টিকসমূহ লৰচৰ কৰে, ট্ৰিগাৰসমূহ টানে... আৰু এজন ডেভেলপাৰ হিচাপে, আপুনি ইয়াৰ কোনোটোৱেই দেখা নাপায়। ব্ৰাউজাৰে ইয়াক তুলি লৈছে, নিশ্চিতভাৱে, কিন্তু আপুনি কনছ’লত নম্বৰ লগ নকৰালৈকে, ই অদৃশ্য৷ গেমপেড এপিআইৰ মূৰৰ বিষটোৱেই সেইটোৱেই৷ বছৰ বছৰ ধৰি চলি আহিছে, আৰু আচলতে ই যথেষ্ট শক্তিশালী৷ আপুনি বুটাম, ষ্টিক, ট্ৰিগাৰ, কামবোৰ পঢ়িব পাৰে। কিন্তু বেছিভাগ মানুহেই ইয়াক স্পৰ্শ নকৰে। কিয়? কাৰণ কোনো প্ৰতিক্ৰিয়া নাই৷ ডেভেলপাৰ সঁজুলিসমূহত কোনো পেনেল নাই। নিয়ন্ত্ৰকে আনকি আপুনি ভবাৰ দৰেই কৰি আছে নে নাই সেইটো জানিবলৈ কোনো স্পষ্ট উপায় নাই। অন্ধভাৱে উৰি যোৱাৰ দৰে অনুভৱ হয়। সেইটোৱে মোক যথেষ্ট বাগ কৰিলে যে মই এটা সৰু সঁজুলি নিৰ্মাণ কৰিলোঁ: গেমপেড কেছকেড ডিবাগাৰ। ক'ন্সোল আউটপুটলৈ চাই থকাৰ পৰিবৰ্তে, আপুনি নিয়ন্ত্ৰকৰ এটা লাইভ, পাৰস্পৰিক দৃশ্য পাব। কিবা এটা টিপিলে ই পৰ্দাত প্ৰতিক্ৰিয়া প্ৰকাশ কৰে। আৰু CSS Cascade Layers ৰ সৈতে, শৈলীসমূহ সংগঠিত হৈ থাকে, গতিকে ইয়াক ডিবাগ কৰাটো পৰিষ্কাৰ। এই পোষ্টটোত মই আপোনাক দেখুৱাম যে নিয়ন্ত্ৰকসমূহ ডিবাগ কৰাটো কিয় ইমান কষ্টকৰ, CSS এ ইয়াক পৰিষ্কাৰ কৰাত কেনেকৈ সহায় কৰে, আৰু আপুনি কেনেকৈ আপোনাৰ নিজৰ প্ৰকল্পৰ বাবে এটা পুনৰ ব্যৱহাৰযোগ্য দৃশ্যমান ডিবাগাৰ নিৰ্মাণ কৰিব পাৰে।
যদিও আপুনি সিহতক সকলো লগ কৰিব পাৰে, আপুনি দ্ৰুতভাৱে অপঠন কৰিব নোৱাৰা ক’ন্সোল স্পেমৰ সৈতে শেষ হ’ব৷ যেনে: [০,০,১,০,০,০.৫,০,...] [০,০,০,০,১,০,০,...] [০,০,১,০,০,০,০,...]
কি বুটাম টিপিলে কব পাৰিবনে? হয়তো, কিন্তু চকু দুটা টানি লোৱা আৰু কেইটামান ইনপুট হেৰুৱাৰ পিছতহে। গতিকে, নাই, ইনপুট পঢ়াৰ ক্ষেত্ৰত ডিবাগিং সহজে নাহে। সমস্যা ৩: গঠনৰ অভাৱ যদিও আপুনি এটা দ্ৰুত ভিজুৱেলাইজাৰ একেলগে পেলাই দিয়ে, শৈলীসমূহ দ্ৰুতভাৱে অগোছাল হ'ব পাৰে। অবিকল্পিত, সক্ৰিয়, আৰু ডিবাগ অৱস্থাসমূহ ওভাৰলেপ হব পাৰে, আৰু এটা স্পষ্ট গঠন অবিহনে, আপোনাৰ CSS ভংগুৰ আৰু সম্প্ৰসাৰণ কৰাটো কঠিন হয়। CSS Cascade স্তৰসমূহে সহায় কৰিব পাৰে। তেওঁলোকে শৈলীসমূহক “স্তৰ”ত গোট কৰে যিবোৰ অগ্ৰাধিকাৰৰ দ্বাৰা ক্ৰমবদ্ধ কৰা হয়, গতিকে আপুনি নিৰ্দিষ্টতাৰ বিৰুদ্ধে যুঁজ দিয়া বন্ধ কৰে আৰু অনুমান কৰা বন্ধ কৰে, “মোৰ ডিবাগ শৈলী কিয় দেখুওৱা হোৱা নাই?” ইয়াৰ পৰিৱৰ্তে, আপুনি পৃথক চিন্তা বজাই ৰাখে:
ভিত্তি: নিয়ন্ত্ৰকৰ মানক, প্ৰাৰম্ভিক ৰূপ। সক্ৰিয়: টিপি দিয়া বুটাম আৰু স্থানান্তৰিত ষ্টিকসমূহৰ বাবে হাইলাইট কৰে। ডিবাগ: বিকাশকসমূহৰ বাবে অভাৰলেসমূহ (যেনে, সংখ্যাগত পঢ়াসমূহ, গাইডসমূহ, ইত্যাদি)।
যদি আমি ইয়াৰ অনুসৰি CSS ত স্তৰসমূহ সংজ্ঞায়িত কৰোঁ, তেন্তে আমাৰ হাতত থাকিব: /* সৰ্বনিম্ন পৰা সৰ্বোচ্চ অগ্ৰাধিকাৰ */ @স্তৰৰ ভিত্তি, সক্ৰিয়, ডিবাগ;
@স্তৰৰ ভিত্তি { /* ... */ }
@স্তৰ সক্ৰিয় { /* ... */ }
@স্তৰ ডিবাগ { /* ... */ }
যিহেতু প্ৰতিটো স্তৰে ভৱিষ্যদ্বাণীযোগ্যভাৱে ষ্টেক কৰে, আপুনি সদায় জানে কোনবোৰ নিয়মে জয়ী হয়। সেই ভৱিষ্যদ্বাণীযোগ্যতাই ডিবাগিং কেৱল সহজ নহয়, কিন্তু প্ৰকৃততে পৰিচালনাযোগ্য কৰে। আমি সমস্যা (অদৃশ্য, অগোছাল ইনপুট) আৰু পদ্ধতি (Cascade Layers ৰ সৈতে নিৰ্মিত এটা দৃশ্যমান ডিবাগাৰ) সামৰি লৈছো। এতিয়া আমি ডিবাগাৰ নিৰ্মাণ কৰিবলৈ ষ্টেপ-বাই-ষ্টেপ প্ৰক্ৰিয়াটোৰ মাজেৰে যাম। ডিবাগাৰ ধাৰণা লুকাই থকা ইনপুটক দৃশ্যমান কৰাৰ আটাইতকৈ সহজ উপায় হ'ল ইয়াক পৰ্দাত অংকন কৰা। এই ডিবাগাৰে সেইটোৱেই কৰে। বুটাম, ট্ৰিগাৰ, আৰু জয়ষ্টিক সকলোৱে এটা ভিজুৱেল পায়।
ক টিপক: এটা বৃত্ত জ্বলি উঠিব। লাঠিডাল ঠেলি দিয়ক: বৃত্তটো ইফালে সিফালে ছিটিকি যায়। এটা ট্ৰিগাৰ আধা বাট টানিব: এটা বাৰ আধাতে ভৰি পৰে।
এতিয়া আপুনি 0 আৰু 1 ৰ ফালে চাই থকা নাই, কিন্তু আচলতে নিয়ন্ত্ৰকৰ প্ৰতিক্ৰিয়া লাইভ চাই আছে। অৱশ্যেই, এবাৰ আপুনি অবিকল্পিত, টিপোৱা, ডিবাগ তথ্য, হয়তো আনকি এটা ৰেকৰ্ডিং ধৰণৰ দৰে অৱস্থাসমূহত পাইলিং আৰম্ভ কৰিলে, CSS ডাঙৰ আৰু অধিক জটিল হ'বলৈ আৰম্ভ কৰে। সেইখিনিতে কেছকেড লেয়াৰবোৰ কামত আহে৷ ইয়াত এটা ষ্ট্ৰিপড-ডাউন উদাহৰণ দিয়া হৈছে: @স্তৰৰ ভিত্তি { .বুটাম { পটভূমি: #২২২; সীমা-ব্যাসাৰ্ধ: ৫০%; প্ৰস্থ: ৪০px; উচ্চতা: ৪০px; } }
@স্তৰ সক্ৰিয় { .বুটাম.টিপিলে { পটভূমি: #0f0; /* উজ্জ্বল সেউজীয়া */ } }
@স্তৰ ডিবাগ { .বুটাম::পিছত { বিষয়বস্তু: attr(তথ্য-মান); ফন্ট-আকাৰ: 12px; ৰং: #fff; } }
স্তৰৰ ক্ৰম গুৰুত্বপূৰ্ণ: ভিত্তি → সক্ৰিয় → ডিবাগ।
ভিত্তিই নিয়ন্ত্ৰকক আঁকে। সক্ৰিয় হেণ্ডেলসমূহ টিপোৱা অৱস্থাসমূহ। ডিবাগ অভাৰলেসমূহত নিক্ষেপ কৰে।
এইদৰে ইয়াক ভাঙি পেলোৱাৰ অৰ্থ হ’ল আপুনি অদ্ভুত নিৰ্দিষ্টতা যুদ্ধ যুঁজি থকা নাই৷ প্ৰতিটো স্তৰৰ নিজৰ নিজৰ স্থান থাকে, আৰু আপুনি সদায় জানে কি জয়ী হয়। বিল্ডিং ইট আউট প্ৰথমে পৰ্দাত কিবা এটা লওঁ আহক। ইয়াক ভাল দেখাব নালাগে — মাত্ৰ অস্তিত্ব থাকিব লাগিব যাতে আমাৰ কাম কৰিবলগীয়া কিবা এটা থাকে৷
গেমপেড কেছকেড ডিবাগাৰ
সেইটো আক্ষৰিক অৰ্থত কেৱল বাকচহে৷ এতিয়াও ৰোমাঞ্চকৰ নহয়, কিন্তু ই আমাক CSS আৰু JavaScript ৰ সৈতে পিছত গ্ৰেব কৰিবলৈ হেণ্ডেল দিয়ে। ঠিক আছে, মই ইয়াত কেছকেড স্তৰ ব্যৱহাৰ কৰিছো কাৰণ ই আপুনি এবাৰ অধিক অৱস্থা যোগ কৰিলে বস্তুসমূহ সংগঠিত কৰি ৰাখে। ইয়াত এটা ৰুক্ষ পাছ আছে:
/* ========================================================================================== CASCADE LAYERS ৰ ছেটআপ ক্ৰমৰ বিষয়: ভিত্তি → সক্ৰিয় → ডিবাগ ===================================== */
/* স্তৰৰ ক্ৰম আপফ্ৰন্ট সংজ্ঞায়িত কৰক */ @স্তৰৰ ভিত্তি, সক্ৰিয়, ডিবাগ;
/* স্তৰ ১: ভিত্তি শৈলীসমূহ - অবিকল্পিত ৰূপ */ @স্তৰৰ ভিত্তি { .বুটাম { পটভূমি: #৩৩৩; সীমা-ব্যাসাৰ্ধ: ৫০%; প্ৰস্থ: ৭০px; উচ্চতা: ৭০px; প্ৰদৰ্শন: flex; justify-content: কেন্দ্ৰ; প্ৰান্তিককৰণ-বস্তু: কেন্দ্ৰ; }
.বিৰতি { প্ৰস্থ: ২০px; উচ্চতা: ৭০px; পটভূমি: #৩৩৩; প্ৰদৰ্শন: ইনলাইন-ব্লক; } }
/* স্তৰ ২: সক্ৰিয় অৱস্থাসমূহ - টিপি লোৱা বুটামসমূহ নিয়ন্ত্ৰণ কৰে */ @স্তৰ সক্ৰিয় { .বুটাম.সক্ৰিয় { পটভূমি: #0f0; /* টিপিলে উজ্জ্বল সেউজীয়া */ ৰূপান্তৰ: স্কেল(১.১); /* বুটামটো অলপ ডাঙৰ কৰে */ }
.বিৰতি.সক্ৰিয় { পটভূমি: #0f0; ৰূপান্তৰ: স্কেলY(১.১); /* টিপিলে উলম্বভাৱে টানি লয় */ } }
/* স্তৰ 3: ডিবাগ অভাৰলেসমূহ - ডেভেলপাৰ তথ্য */ @স্তৰ ডিবাগ { .বুটাম::পিছত { বিষয়বস্তু: attr(তথ্য-মান); /* সংখ্যাগত মান দেখুৱায় */ ফন্ট-আকাৰ: 12px; ৰং: #fff; } }
এই পদ্ধতিৰ সৌন্দৰ্য্য হ’ল প্ৰতিটো স্তৰৰ এটা স্পষ্ট উদ্দেশ্য থাকে। ভিত্তি স্তৰে কেতিয়াও সক্ৰিয় অভাৰৰাইড কৰিব নোৱাৰে, আৰু সক্ৰিয় কেতিয়াও ডিবাগ অভাৰৰাইড কৰিব নোৱাৰে, নিৰ্দিষ্টতা নিৰ্বিশেষে । ই CSS নিৰ্দিষ্টতা যুদ্ধসমূহ আঁতৰায় যি সাধাৰণতে ডিবাগিং সঁজুলিসমূহক জুৰুলা কৰে। এতিয়া দেখা গৈছে যে কিছুমান থুপ আন্ধাৰ পটভূমিত বহি আছে। সঁচা কথা ক’বলৈ গ’লে বেছি বেয়া নহয়।
জাভাস্ক্রিপ্ট যোগ কৰা জাভাস্ক্রিপ্টৰ সময়। এইখিনিতে নিয়ন্ত্ৰকে প্ৰকৃততে কিবা এটা কৰে। আমি এইটো খোজৰ পিছত খোজ নিৰ্মাণ কৰিম৷ স্তৰ ১: ৰাজ্য ব্যৱস্থাপনা সংস্থাপন কৰক প্ৰথমে, ডিবাগাৰৰ অৱস্থা অনুসৰণ কৰিবলৈ আমাক ভেৰিয়েবলৰ প্ৰয়োজন: // =========================================================================================== // ৰাজ্যিক ব্যৱস্থাপনা // ===========================================================================================
চলি থকা = মিছা হওক; // ডিবাগাৰ সক্ৰিয় নে নহয় অনুসৰণ কৰে rafId কৰিবলৈ দিয়ক; // বাতিলৰ বাবে requestAnimationFrame ID সংৰক্ষণ কৰে
এই চলকসমূহে গেমপেড ইনপুট অবিৰতভাৱে পঢ়া এনিমেচন লুপ নিয়ন্ত্ৰণ কৰে। স্তৰ ২: DOM প্ৰসংগসমূহ ধৰি লওক ইয়াৰ পিছত, আমি আপডেট কৰিবলগীয়া সকলো HTML উপাদানৰ উল্লেখ পাম: // =========================================================================================== // DOM উপাদানৰ উল্লেখ // ===========================================================================================
const btnA = দস্তাবেজ.getElementById("btn-a"); const btnB = নথিপত্ৰ.getElementById("btn-b"); const btnX = নথিপত্ৰ.getElementById("btn-x"); const pause1 = দস্তাবেজ.getElementById("বিৰতি1"); const pause2 = দস্তাবেজ.getElementById("বিৰতি2"); const অৱস্থা = document.getElementById("অৱস্থা");
এই প্ৰসংগসমূহ আগত সংৰক্ষণ কৰাটো DOM বাৰে বাৰে প্ৰশ্ন কৰাতকৈ অধিক কাৰ্যক্ষম। স্তৰ ৩: কিবৰ্ড ফ'লবেক যোগ কৰক এটা ভৌতিক নিয়ন্ত্ৰক অবিহনে পৰীক্ষাৰ বাবে, আমি কিবৰ্ড কি'সমূহক বুটামসমূহলে মেপ কৰিম: // =========================================================================================== // KEYBOARD FALLBACK (এটা নিয়ন্ত্ৰক অবিহনে পৰীক্ষাৰ বাবে) // ===========================================================================================
const keyMap = { "ক": btnA, "খ": btnB, "x": btnX, "p": [pause1, pause2] // 'p' কি'ই দুয়োটা বিৰতি বাৰ নিয়ন্ত্ৰণ কৰে };
ইয়াৰ দ্বাৰা আমি এটা কিবৰ্ডত কি' টিপি UI পৰীক্ষা কৰিব পাৰো। স্তৰ ৪: মূল আপডেট লুপ সৃষ্টি কৰক ইয়াতেই যাদু ঘটে৷ এই ফাংচনটো অবিৰতভাৱে চলি থাকে আৰু গেমপেড অৱস্থা পঢ়ে: // =========================================================================================== // মূল GAMEPAD আপডেট লুপ // ===========================================================================================
ফাংচন আপডেটগেমপেড() { // সকলো সংযুক্ত গেমপেড পাওক const গেমপেড = নেভিগেটৰ.getGamepads(); যদি (!গেমপেড) ঘূৰি আহে;
// প্ৰথম সংযুক্ত গেমপেড ব্যৱহাৰ কৰক const gp = গেমপেড [0];
যদি (gp) { // "সক্ৰিয়" শ্ৰেণী টগল কৰি বুটামৰ অৱস্থা আপডেইট কৰক btnA.classList.toggle("সক্ৰিয়", gp.বুটাম [0]. টিপি দিয়া হৈছে); btnB.classList.toggle("সক্ৰিয়", gp.বুটাম [1]. টিপি দিয়া হৈছে); btnX.classList.toggle("সক্ৰিয়", gp.বুটাম [2]. টিপি দিয়া হৈছে);
// বিৰতি বুটাম নিয়ন্ত্ৰণ কৰক (বেছিভাগ নিয়ন্ত্ৰকত বুটাম সূচী 9) const pausePressed = gp.বুটামসমূহ[9].টিপি দিয়া হৈছে; pause1.classList.toggle("সক্ৰিয়", pausePressed); pause2.classList.toggle("সক্ৰিয়", pausePressed);
// অৱস্থা প্ৰদৰ্শনৰ বাবে বৰ্তমানে টিপি দিয়া বুটামসমূহৰ এটা তালিকা নিৰ্মাণ কৰক টিপি দিয়া হওক = []; gp.buttons.forEach((btn, মই) => { যদি (btn.pressed)presed.push("বুটাম " + i); });
// কোনো বুটাম টিপিলে অৱস্থা লিখনী আপডেইট কৰক যদি (টিপোৱা হয়।দৈৰ্ঘ্য > 0) { status.textContent = "টিপোৱা হৈছে: " + টিপি দিয়া হৈছে.join(", "); } }
// লুপ অব্যাহত ৰাখক যদি ডিবাগাৰ চলি আছে যদি (চলোৱা) { rafId = অনুৰোধএনিমেচনফ্ৰেম (গেমপেড আপডেট); } }
classList.toggle() পদ্ধতিয়ে বুটাম টিপোৱা হৈছে নে নাই তাৰ ওপৰত ভিত্তি কৰি সক্ৰিয় ক্লাছ যোগ বা আঁতৰায়, যি আমাৰ CSS স্তৰ শৈলীসমূহ ট্ৰিগাৰ কৰে। ৫ম স্তৰ: কিবৰ্ডৰ ইভেণ্টসমূহ নিয়ন্ত্ৰণ কৰক এই ইভেন্ট শ্ৰোতাসকলে কিবৰ্ড ফ'লবেকক কাম কৰে: // =========================================================================================== // KEYBOARD ইভেন্ট হেণ্ডলাৰ // ===========================================================================================
document.addEventListener("কীডাউন", (ই) => { যদি (কীমেপ[e.key]) { // একক বা একাধিক উপাদান নিয়ন্ত্ৰণ কৰক যদি (Array.isArray(কীমেপ [ই.কী])) { keyMap[e.key].forEach(el => el.classList.add("সক্ৰিয়")); } else { keyMap[e.key].classList.add("সক্ৰিয়"); } status.textContent = "কি টিপি দিয়া হৈছে: " + e.key.toUpperCase(); } });
document.addEventListener("কীআপ", (ই) => { যদি (কীমেপ[e.key]) { // সক্ৰিয় অৱস্থা আঁতৰাওক যেতিয়া কি' মুকলি কৰা হয় যদি (Array.isArray(কীমেপ [ই.কী])) { keyMap[e.key].forEach(el => el.classList.remove("সক্ৰিয়")); } else { keyMap[e.key].classList.remove("সক্ৰিয়"); } status.textContent = "কি মুকলি কৰা হৈছে: " + e.key.toUpperCase(); } });
স্তৰ ৬: আৰম্ভ/বন্ধ নিয়ন্ত্ৰণ যোগ কৰক শেষত, আমাক ডিবাগাৰ অন আৰু অফ কৰাৰ এটা উপায়ৰ প্ৰয়োজন: // =========================================================================================== // TOGGLE DEBUGGER অন/অফ কৰক // ===========================================================================================
document.getElementById("টগল").addEventListener("ক্লিক", () => { চলি থকা = !চলোৱা; // চলি থকা অৱস্থাটো ফ্লিপ কৰক
যদি (চলোৱা) { status.textContent = "ডিবাগাৰ চলি আছে..."; আপডেটগেমপেড(); // আপডেইট লুপ আৰম্ভ কৰক } else { status.textContent = "ডিবাগাৰ নিষ্ক্ৰিয়"; এনিমেচনফ্ৰেম বাতিল কৰক(rafId); // লুপ বন্ধ কৰক } });
গতিকে হ’ব, এটা বুটাম টিপিলেই জিলিকি উঠিব। লাঠিডাল ঠেলি দিলে ই লৰচৰ কৰে। সেইটোৱেই হ’ল৷ আৰু এটা কথা: কেঁচা মূল্যবোধ। কেতিয়াবা কেৱল নম্বৰ চাব বিচাৰে, লাইট নহয়।
এই পৰ্যায়ত আপুনি চাব লাগে:
এটা সহজ অন-স্ক্ৰীণ নিয়ন্ত্ৰক, আপুনি তেওঁলোকৰ সৈতে যোগাযোগ কৰাৰ লগে লগে প্ৰতিক্ৰিয়া কৰা বুটামসমূহ, আৰু... এটা বৈকল্পিক ডিবাগ ৰিডআউট টিপোৱা বুটাম সূচকাংকসমূহ দেখুৱাই।
এইটো কম বিমূৰ্ত কৰিবলৈ, ইয়াত অন-স্ক্ৰীণ নিয়ন্ত্ৰকে বাস্তৱ সময়ত প্ৰতিক্ৰিয়া প্ৰকাশ কৰাৰ এটা দ্ৰুত ডেমো দিয়া হৈছে:
এতিয়া, ৰেকৰ্ডিং আৰম্ভ টিপিলে সকলো লগ হয় যেতিয়ালৈকে আপুনি ৰেকৰ্ডিং বন্ধ কৰক টিপক। 2. CSV/JSON লৈ তথ্য ৰপ্তানি কৰা আমাৰ এটা লগ হ’লে আমি ইয়াক সংৰক্ষণ কৰিব বিচাৰিম৷
স্তৰ ১: ডাউনলোড হেল্পাৰ তৈয়াৰ কৰক প্ৰথমে আমাক এটা হেল্পাৰ ফাংচনৰ প্ৰয়োজন যিয়ে ব্ৰাউজাৰত ফাইল ডাউনলোড নিয়ন্ত্ৰণ কৰে: // =========================================================================================== // ফাইল ডাউনলোড HELPER // ===========================================================================================
function downloadFile(ফাইলৰ নাম, বিষয়বস্তু, ধৰণ = "টেক্সট/প্লেইন") { // বিষয়বস্তুৰ পৰা এটা ব্লব সৃষ্টি কৰক const blob = নতুন Blob([সামগ্ৰী], { ধৰণ }); const url = URL.বস্তুURL সৃষ্টি কৰক (ব্লব);
// এটা অস্থায়ী ডাউনলোড লিংক তৈয়াৰ কৰক আৰু তাত ক্লিক কৰক const a = দস্তাবেজ.উপাদান সৃষ্টি কৰক("এটা"); a.href = url; a.download = ফাইলৰ নাম; a.click();
// ডাউনলোডৰ পিছত বস্তুৰ URL পৰিষ্কাৰ কৰক setTimeout(() => URL.revokeObjectURL(url), ১০০); }
এই ফাংচনে আপোনাৰ তথ্যৰ পৰা এটা Blob (বাইনাৰী ডাঙৰ বস্তু) সৃষ্টি কৰি, ইয়াৰ বাবে এটা অস্থায়ী URL সৃষ্টি কৰি, আৰু প্ৰগ্ৰেমেটিকভাৱে এটা ডাউনলোড লিংক ক্লিক কৰি কাম কৰে। চাফাইটোৱে নিশ্চিত কৰে যে আমি মেম’ৰী লিক নহয়৷ স্তৰ ২: JSON ৰপ্তানি নিয়ন্ত্ৰণ কৰক সম্পূৰ্ণ তথ্য গঠন সংৰক্ষণৰ বাবে JSON নিখুঁত:
// =========================================================================================== // JSON হিচাপে ৰপ্তানি কৰক // ===========================================================================================
document.getElementById("ৰপ্তানি-json").addEventListener("ক্লিক", () => { // ৰপ্তানি কৰিবলৈ কিবা আছে নেকি পৰীক্ষা কৰক যদি (!ফ্ৰেম.দৈৰ্ঘ্য) { console.warn("ৰপ্তানি কৰিবলে কোনো ৰেকৰ্ডিং উপলব্ধ নহয়।"); return; }
// মেটাডাটা আৰু ফ্ৰেমৰ সৈতে এটা পেলোড সৃষ্টি কৰক const পেলোড = { createdAt: নতুন তাৰিখ().toISOString(), ফ্ৰেম };
// ফৰ্মেট কৰা JSON হিচাপে ডাউনলোড কৰক ডাউনলোডফাইল( "গেমপেড-log.json", JSON.stringify (পেলোড, শূন্য, ২), "এপ্লিকেচন/json" ); });
JSON বিন্যাসে সকলো গঠনমূলক আৰু সহজে বিশ্লেষণযোগ্য ৰাখে, ইয়াক dev সঁজুলিসমূহত পুনৰ লোড কৰাৰ বাবে বা দলৰ সতীৰ্থসমূহৰ সৈতে অংশীদাৰী কৰাৰ বাবে আদৰ্শ কৰি তোলে। স্তৰ ৩: CSV ৰপ্তানি নিয়ন্ত্ৰণ কৰক CSV ৰপ্তানিৰ বাবে, আমি হাইৰাৰ্কিকেল ডাটাক শাৰী আৰু স্তম্ভত সমতল কৰিব লাগিব:
//=============================================================================== // CSV হিচাপে ৰপ্তানি কৰক // ===========================================================================================
document.getElementById("ৰপ্তানি-csv").addEventListener("ক্লিক", () => { // ৰপ্তানি কৰিবলৈ কিবা আছে নেকি পৰীক্ষা কৰক যদি (!ফ্ৰেম.দৈৰ্ঘ্য) { console.warn("ৰপ্তানি কৰিবলে কোনো ৰেকৰ্ডিং উপলব্ধ নহয়।"); return; }
// CSV হেডাৰ শাৰী নিৰ্মাণ কৰক (টাইমষ্টেম্পৰ বাবে স্তম্ভ, সকলো বুটাম, সকলো অক্ষ) const হেডাৰবুটাম = ফ্ৰেম [0]. বুটাম.মেপ ((_, মই) => btn $ {i}); const headerAxes = ফ্ৰেম [0]. অক্ষ.মেপ ((_, মই) => অক্ষ $ {i}); const হেডাৰ = ["t", ...হেডাৰবুটাম, ...হেডাৰএক্স]. যোগদান(",") + "\n";
// CSV ডাটা শাৰী নিৰ্মাণ কৰক const rows = ফ্ৰেম.মেপ(f => { const btnVals = f.বুটাম.মেপ(b => b.মান); return [f.t, ...btnVals, ...f.axes]. যোগদান কৰক (","); }).join("\n");
// CSV হিচাপে ডাউনলোড কৰক downloadFile("গেমপেড-log.csv", হেডাৰ + শাৰী, "টেক্সট/csv"); });
CSV তথ্য বিশ্লেষণৰ বাবে উজ্জ্বল কাৰণ ই Excel বা Google Sheets ত পোনপটীয়াকৈ খোলে, আপোনাক চাৰ্ট সৃষ্টি কৰিবলৈ, তথ্য ফিল্টাৰ কৰিবলৈ, বা দৃশ্যমানভাৱে প্যাটাৰ্ণ স্পট কৰিবলৈ দিয়ে। এতিয়া যেতিয়া ৰপ্তানি বুটামসমূহ আছে, আপুনি পেনেলত দুটা নতুন বিকল্প দেখিব: JSON ৰপ্তানি কৰক আৰু CSV ৰপ্তানি কৰক। JSON ভাল যদি আপুনি কেঁচা লগক আপোনাৰ dev সঁজুলিসমূহলৈ ঘূৰাই দিব বিচাৰে বা গঠনৰ চাৰিওফালে পোক কৰিব বিচাৰে। আনহাতে, CSV পোনপটীয়াকৈ Excel বা Google Sheets লৈ খোল খায় যাতে আপুনি ইনপুটসমূহ চাৰ্ট, ফিল্টাৰ বা তুলনা কৰিব পাৰে। তলৰ চিত্ৰখনে সেই অতিৰিক্ত নিয়ন্ত্ৰণসমূহৰ সৈতে পেনেলটো কেনেকুৱা দেখা যায় দেখুৱাইছে।
3. স্নেপশ্বট ব্যৱস্থাপ্ৰণালী কেতিয়াবা আপুনি সম্পূৰ্ণ ৰেকৰ্ডিঙৰ প্ৰয়োজন নহয়, মাত্ৰ ইনপুট অৱস্থাৰ এটা দ্ৰুত “স্ক্ৰীণশ্বট”ৰ প্ৰয়োজন হয়। তাতেই এটা Take Snapshot বুটামে সহায় কৰে৷
আৰু জাভাস্ক্রিপ্ট:
// =========================================================================================== // স্নেপশ্বট লওক // ===========================================================================================
document.getElementById("স্নেপশ্বট").addEventListener("ক্লিক", () => { // সকলো সংযুক্ত গেমপেড পাওক const পেড = নেভিগেটৰ.getGamepads(); const সক্ৰিয়পেডসমূহ = [];
// প্ৰতিটো সংযুক্ত গেমপেডৰ অৱস্থা লুপ কৰক আৰু ধৰি লওক for (পেডসমূহৰ const gp) { যদি (!gp) চলি থাকে; // খালী স্লট এৰি দিয়ক
সক্ৰিয়Pads.push({ id: gp.id, // নিয়ন্ত্ৰকৰ নাম/মডেল টাইমষ্টেম্প: performance.now(), বুটামসমূহ: gp.buttons.map(b => ({ টিপি দিয়া: b.pressed, মান: খ.মূল্য })), অক্ষ: [...gp.axes] }); }
// কোনো গেমপেড পোৱা গৈছে নেকি পৰীক্ষা কৰক যদি (!সক্ৰিয়পেড.দৈৰ্ঘ্য) { console.warn("স্নেপশ্বটৰ বাবে কোনো গেমপেড সংযুক্ত নহয়।"); alert("কোনো নিয়ন্ত্ৰক ধৰা পৰা নাই!"); return; }
// লগ আৰু ব্যৱহাৰকাৰীক অৱগত কৰক console.log("স্নেপশ্বট:", সক্ৰিয়পেড); alert(স্নেপশ্বট লোৱা হৈছে! ধৰা পৰিছে ${activePads.length} নিয়ন্ত্ৰক(সমূহ).); });
স্নেপশ্বটসমূহে সময়ৰ এটা মুহূৰ্তত আপোনাৰ নিয়ন্ত্ৰকৰ সঠিক অৱস্থা ফ্ৰীজ কৰে। 4. ভূত ইনপুট পুনৰাবৃত্তি এতিয়া মজাৰটোৰ বাবে: ভূত ইনপুট পুনৰাবৃত্তি। ই এটা লগ লয় আৰু ইয়াক দৃশ্যমানভাৱে প্লে বেক কৰে যেন এটা ফেণ্টম প্লেয়াৰে নিয়ন্ত্ৰক ব্যৱহাৰ কৰি আছে।
পুনৰাবৃত্তিৰ বাবে জাভাস্ক্রিপ্ট: // =========================================================================================== // GHOST REPLAY // ===========================================================================================
document.getElementById("পুনৰ খেলা").addEventListener("ক্লিক", () => { // আমাৰ পুনৰ প্লে কৰিবলৈ এটা ৰেকৰ্ডিং থকাটো নিশ্চিত কৰক যদি (!ফ্ৰেম.দৈৰ্ঘ্য) { alert("পুনৰ চলাবলৈ কোনো ৰেকৰ্ডিং নাই!"); return; }
console.log("ভূত পুনৰাবৃত্তি আৰম্ভ কৰা হৈছে...");
// সিঙ্ক কৰা প্লেবেকৰ বাবে সময় অনুসৰণ কৰক let startTime = পৰিৱেশন.এতিয়া(); ফ্ৰেমIndex = 0 হওক;
// এনিমেচন লুপ পুনৰায় খেলক ফাংচন ষ্টেপ() { const এতিয়া = পৰিৱেশন.এতিয়া (); const elapsed = এতিয়া - আৰম্ভণিৰ সময়;
// এতিয়ালৈকে হ'বলগীয়া সকলো ফ্ৰেম প্ৰক্ৰিয়া কৰক while (ফ্ৰেম সূচকাংক < ফ্ৰেম.দৈৰ্ঘ্য && ফ্ৰেম[ফ্ৰেম সূচকাংক].t <= অতিক্ৰম হৈছে) { const ফ্ৰেম = ফ্ৰেমসমূহ[ফ্ৰেম সূচকাংক];
// ৰেকৰ্ড কৰা বুটাম অৱস্থাৰ সৈতে UI আপডেইট কৰক btnA.classList.toggle("সক্ৰিয়", ফ্ৰেম.বুটাম [0]. টিপি দিয়া হৈছে); btnB.classList.toggle("সক্ৰিয়", ফ্ৰেম.বুটাম [1]. টিপি দিয়া হৈছে); btnX.classList.toggle("সক্ৰিয়", ফ্ৰেম.বুটাম [2]. টিপি দিয়া হৈছে);
// অৱস্থা প্ৰদৰ্শন আপডেইট কৰক টিপি দিয়া হওক = []; ফ্ৰেম.বুটাম.forEach((btn, i) => { যদি (btn.pressed) presed.push("বুটাম " + i); }); যদি (টিপোৱা হয়।দৈৰ্ঘ্য > 0) { status.textContent = "ভূত: " + টিপিছে.যোগদান কৰক(", "); }
frameIndex++; }
// অধিক ফ্ৰেম থাকিলে লুপ অব্যাহত ৰাখক যদি (ফ্ৰেম সূচকাংক < ফ্ৰেম.দৈৰ্ঘ্য) { অনুৰোধএনিমেচনফ্ৰেম(পদক্ষেপ); } else { console.log("পুনৰ খেলা।"শেষ হ'ল।"); status.textContent = "পুনৰ খেলা সম্পূৰ্ণ"; } }
// পুনৰাবৃত্তি আৰম্ভ কৰক ষ্টেপ(); });
ডিবাগিং অলপ বেছি হেণ্ডছ-অন কৰিবলৈ, মই এটা ভূত পুনৰাবৃত্তি যোগ কৰিলোঁ। আপুনি এবাৰ এটা অধিবেশন ৰেকৰ্ড কৰিলে, আপুনি ৰিপ্লে হিট কৰিব পাৰে আৰু UI-এ ইয়াক অভিনয় কৰা চাব পাৰে, প্ৰায় এটা ফেণ্টম প্লেয়াৰে পেড চলোৱাৰ দৰে৷ ইয়াৰ বাবে পেনেলত এটা নতুন পুনৰায় খেলক ভূত বুটাম দেখা যায়।
ৰেকৰ্ড টিপক, নিয়ন্ত্ৰকৰ সৈতে অলপ খেলা-ধূলা কৰক, বন্ধ কৰক, তাৰ পিছত পুনৰায় খেলক। UI এ আপুনি কৰা সকলো কামৰ প্ৰতিধ্বনি দিয়ে, যেনে এটা ভূতে আপোনাৰ ইনপুটসমূহ অনুসৰণ কৰে। এই এক্সট্ৰাবোৰ লৈ আমনি কিয়?
ৰেকৰ্ডিং/ৰপ্তানি কৰিলে পৰীক্ষকসকলে কি হৈছিল সেইটো সঠিকভাৱে দেখুৱাবলৈ সহজ হয়। স্নেপশ্বটসমূহ সময়ৰ এটা মুহূৰ্ত ফ্ৰীজ হয়, যেতিয়া আপুনি অদ্ভুত বাগসমূহ খেদি ফুৰে তেতিয়া অতি উপযোগী৷ ভূত পুনৰাবৃত্তি টিউটোৰিয়েল, অভিগম্যতা পৰীক্ষা, বা কেৱল নিয়ন্ত্ৰণ ছেটআপসমূহ কাষে কাষে তুলনা কৰাৰ বাবে মহান।
এইখিনিতে, ই আৰু কেৱল এটা পৰিপাটি ডেমো নহয়, কিন্তু আপুনি প্ৰকৃততে কামত লগাব পৰা কিবা এটা৷ বাস্তৱ জগতৰ ব্যৱহাৰৰ ক্ষেত্ৰ এতিয়া আমি এই ডিবাগাৰটো পাইছো যিয়ে বহুত কৰিব পাৰে। ই লাইভ ইনপুট দেখুৱায়, লগসমূহ ৰেকৰ্ড কৰে, সিহতক ৰপ্তানি কৰে, আৰু আনকি বস্তুসমূহ পুনৰায় খেলে। কিন্তু আচল প্ৰশ্নটো হ’ল: আচলতে কোনে গুৰুত্ব দিয়ে? এইটো কাৰ বাবে উপযোগী? গেম ডেভেলপাৰ নিয়ন্ত্ৰকসমূহ কামৰ অংশ, কিন্তু সিহতক ডিবাগ কৰা? সাধাৰণতে এটা বিষ। কল্পনা কৰক যে আপুনি এটা যুঁজৰ খেলৰ কম্বো পৰীক্ষা কৰি আছে, যেনে ↓ → + পাঞ্চ৷ প্ৰাৰ্থনা কৰাৰ পৰিৱৰ্তে আপুনি একেদৰেই দুবাৰ টিপিলে, এবাৰ ৰেকৰ্ড কৰি পুনৰ প্লে কৰিলে। হৈ গ’ল। অথবা আপুনি JSON লগসমূহ এটা সতীৰ্থৰ সৈতে শ্বেপ কৰে আপোনাৰ মাল্টিপ্লেয়াৰ ক'ডে তেওঁলোকৰ মেচিনত একে প্ৰতিক্ৰিয়া কৰে নেকি পৰীক্ষা কৰিবলে। সেইটো বিশাল৷ অভিগম্যতা অনুশীলনকাৰীসকল এইটো মোৰ হৃদয়ৰ ওচৰত৷ সকলোৱে “মানক” নিয়ন্ত্ৰকৰ সৈতে খেলা নাই। এডাপ্টিভ কন্ট্ৰ’লাৰে কেতিয়াবা অদ্ভুত সংকেত পেলাই দিয়ে। এই সঁজুলিটোৰ সহায়ত আপুনি কি হৈ আছে সেইটো সঠিকভাৱে চাব পাৰিব। শিক্ষক, গৱেষক, যিয়েই নহওক। সিহঁতে লগসমূহ ধৰিব পাৰে, সিহতক তুলনা কৰিব পাৰে, বা ইনপুটসমূহ কাষে কাষে পুনৰায় খেলিব পাৰে। হঠাতে অদৃশ্য বস্তুবোৰ স্পষ্ট হৈ পৰে। গুণগত নিশ্চয়তা পৰীক্ষণ পৰীক্ষকসকলে সাধাৰণতে “মই ইয়াত বুটামবোৰ মেচ কৰিলোঁ আৰু ই ভাঙি গ’ল” আদি টোকা লিখে। বৰ সহায়ক নহয়। এতিয়া? তেওঁলোকে সঠিক প্ৰেছসমূহ ধৰি ৰাখিব পাৰে, লগটো ৰপ্তানি কৰিব পাৰে আৰু ইয়াক পঠিয়াব পাৰে। কোনো অনুমান নাই। শিক্ষাবিদসকল যদি আপুনি টিউটৰিয়েল বা ইউটিউব ভিড বনাইছে, তেন্তে ভূতৰ পুনৰাবৃত্তি সোণ৷ আপুনি আক্ষৰিক অৰ্থত ক’ব পাৰে, “এইটো মই নিয়ন্ত্ৰকৰ সৈতে যি কৰিলোঁ,” আনহাতে ইউআইয়ে ইয়াক ঘটি থকা দেখুৱাইছে। ব্যাখ্যাবোৰ বহুত স্পষ্ট কৰি তোলে। গেমছৰ বাহিৰত আৰু হ’ব, এইটো কেৱল খেলৰ কথা নহয়৷ মানুহে ৰবট, কলা প্ৰকল্প, আৰু অভিগম্যতা আন্তঃপৃষ্ঠৰ বাবে নিয়ন্ত্ৰক ব্যৱহাৰ কৰিছে। প্ৰতিবাৰেই একেটা সমস্যা: ব্ৰাউজাৰে প্ৰকৃততে কি দেখিছে? ইয়াৰ লগে লগে অনুমান কৰিব নালাগে৷ উপসংহাৰ এটা নিয়ন্ত্ৰক ইনপুট ডিবাগ কৰাটো সদায় অন্ধ উৰি যোৱাৰ দৰে অনুভৱ হৈছে। DOM বা CSS ৰ দৰে নহয়, গেমপেডসমূহৰ বাবে কোনো বিল্ট-ইন পৰিদৰ্শক নাই; ই কেৱল কনছ’লত কেঁচা সংখ্যা, শব্দত সহজে হেৰাই যায়৷ HTML, CSS, আৰু JavaScriptৰ কেইশ শাৰীৰ সহায়ত আমি বেলেগ কিবা এটা নিৰ্মাণ কৰিলোঁ:
এটা দৃশ্যমান ডিবাগাৰ যি অদৃশ্য ইনপুটসমূহ দৃশ্যমান কৰে। এটা স্তৰযুক্ত CSS ব্যৱস্থাপ্ৰণালী যি UI পৰিষ্কাৰ আৰু ডিবাগযোগ্য ৰাখে । উন্নয়নসমূহৰ এটা গোট (ৰেকৰ্ডিং, ৰপ্তানি, স্নেপশ্বট, ভূত পুনৰাবৃত্তি) যি ইয়াক ডেমোৰ পৰা ডেভেলপাৰ সঁজুলিলৈ উন্নীত কৰে।
এই প্ৰকল্পই দেখুৱাইছে যে আপুনি CSS Cascade Layers ত অলপ সৃষ্টিশীলতাৰ সৈতে ৱেব প্লেটফৰ্মৰ শক্তি মিহলাই কিমান দূৰলৈ যাব পাৰে। মই মাত্ৰ সম্পূৰ্ণৰূপে বুজাই দিয়া সঁজুলিটো মুক্ত উৎস। আপুনি GitHub repo ক্ল'ন কৰিব পাৰে আৰু নিজে চেষ্টা কৰিব পাৰে । কিন্তু তাতোকৈ ডাঙৰ কথাটো হ’ল আপুনি ইয়াক নিজৰ কৰি ল’ব পাৰে। নিজৰ স্তৰ যোগ কৰক। আপোনাৰ নিজৰ ৰিপ্লে লজিক গঢ়ি তোলক। আপোনাৰ খেলৰ প্ৰ'ট'টাইপৰ সৈতে ইয়াক একত্ৰিত কৰক। বা আনকি মই কল্পনা নকৰা ধৰণেও ব্যৱহাৰ কৰক৷ পাঠদান, অভিগম্যতা, বা তথ্য বিশ্লেষণৰ বাবে। দিনৰ শেষত, এইটো কেৱল গেমপেড ডিবাগিং কৰাৰ কথা নহয়৷ ই লুকাই থকা ইনপুটসমূহৰ ওপৰত পোহৰ পেলোৱাৰ বিষয়ে, আৰু ডেভেলপাৰসকলক হাৰ্ডৱেৰৰ সৈতে কাম কৰাৰ আত্মবিশ্বাস দিয়া যিটো ৱেবে এতিয়াও সম্পূৰ্ণৰূপে আকোৱালি লোৱা নাই৷ গতিকে, আপোনাৰ নিয়ন্ত্ৰক প্লাগ ইন কৰক, আপোনাৰ সম্পাদক খোলক, আৰু পৰীক্ষা আৰম্ভ কৰক। আপোনাৰ ব্ৰাউজাৰ আৰু আপোনাৰ CSS এ সঁচাকৈয়ে কি সম্পন্ন কৰিব পাৰে তাক লৈ আপুনি আচৰিত হ'ব পাৰে।
