ଯେତେବେଳେ ଆପଣ ଏକ ନିୟନ୍ତ୍ରକକୁ ପ୍ଲଗ୍ କରନ୍ତି, ଆପଣ ବଟନ୍ଗୁଡ଼ିକୁ ମାଶ୍ କରନ୍ତି, ବାଡ଼ିଗୁଡିକ ଘୁଞ୍ଚାନ୍ତି, ଟ୍ରିଗରଗୁଡିକ ଟାଣନ୍ତି ... ଏବଂ ଏକ ବିକାଶକାରୀ ଭାବରେ, ଆପଣ ଏଥିରୁ କ none ଣସିଟି ଦେଖନ୍ତି ନାହିଁ | ବ୍ରାଉଜର୍ ଏହାକୁ ଉଠାଉଛି, ନିଶ୍ଚିତ, କିନ୍ତୁ ଯଦି ଆପଣ କନସୋଲରେ ନମ୍ବର ଲଗାଉ ନାହାଁନ୍ତି, ଏହା ଅଦୃଶ୍ୟ ଅଟେ | ଗେମପ୍ୟାଡ୍ API ସହିତ ତାହା ହେଉଛି ମୁଣ୍ଡବିନ୍ଧା | ଏହା ବର୍ଷ ବର୍ଷ ଧରି ହୋଇଆସୁଛି, ଏବଂ ଏହା ପ୍ରକୃତରେ ବହୁତ ଶକ୍ତିଶାଳୀ | ଆପଣ ବଟନ୍, ଷ୍ଟିକ୍, ଟ୍ରିଗର, କାର୍ଯ୍ୟଗୁଡିକ ପ read ିପାରିବେ | କିନ୍ତୁ ଅଧିକାଂଶ ଲୋକ ଏହାକୁ ସ୍ପର୍ଶ କରନ୍ତି ନାହିଁ | କାହିଁକି? କାରଣ ସେଠାରେ କ feedback ଣସି ମତାମତ ନାହିଁ | ବିକାଶକାରୀ ଉପକରଣଗୁଡ଼ିକରେ କ panel ଣସି ପ୍ୟାନେଲ୍ ନାହିଁ | କଣ୍ଟ୍ରୋଲର ଆପଣ ଯାହା ଭାବୁଛନ୍ତି ତାହା କରୁଛନ୍ତି କି ନାହିଁ ଜାଣିବାର କ clear ଣସି ସ୍ପଷ୍ଟ ଉପାୟ ନାହିଁ | ଏହା ଅନ୍ଧ ଉଡିବା ପରି ଅନୁଭବ କରେ | ଟିକିଏ ଟୁଲ୍ ନିର୍ମାଣ କରିବାକୁ ତାହା ମୋତେ ଯଥେଷ୍ଟ ତ୍ରୁଟି କଲା: ଗେମପ୍ୟାଡ୍ କ୍ୟାସକେଡ୍ ଡିବଗ୍ | କନସୋଲ୍ ଆଉଟପୁଟ୍ କୁ ଦେଖିବା ପରିବର୍ତ୍ତେ, ଆପଣ ନିୟନ୍ତ୍ରକଙ୍କ ଏକ ଲାଇଭ୍, ଇଣ୍ଟରାକ୍ଟିଭ୍ ଭ୍ୟୁ ପାଇବେ | କିଛି ଦବାନ୍ତୁ ଏବଂ ଏହା ପରଦାରେ ପ୍ରତିକ୍ରିୟା କରେ | ଏବଂ CSS କାସ୍କେଡ୍ ସ୍ତର ସହିତ, ଶ yles ଳୀଗୁଡିକ ସଂଗଠିତ ରହିଥାଏ, ତେଣୁ ଡିବଗ୍ କରିବା ଅଧିକ ପରିଷ୍କାର ଅଟେ | ଏହି ପୋଷ୍ଟରେ, ମୁଁ ଆପଣଙ୍କୁ ଦେଖାଇବି କାହିଁକି ନିୟନ୍ତ୍ରକମାନେ ତ୍ରୁଟି ନିବାରଣ କରନ୍ତି, CSS ଏହାକୁ ସଫା କରିବାରେ କିପରି ସାହାଯ୍ୟ କରେ, ଏବଂ ଆପଣ କିପରି ନିଜ ପ୍ରୋଜେକ୍ଟ ପାଇଁ ପୁନ us ବ୍ୟବହାରଯୋଗ୍ୟ ଭିଜୁଆଲ୍ ଡିବଗ୍ ନିର୍ମାଣ କରିପାରିବେ |
ଯଦିଓ ତୁମେ ସେଗୁଡିକୁ ଲଗ୍ କରିବାକୁ ସକ୍ଷମ, ତୁମେ ଶୀଘ୍ର ପ read ି ନଥିବା କନସୋଲ୍ ସ୍ପାମ୍ ସହିତ ଶେଷ ହେବ | ଉଦାହରଣ ସ୍ୱରୂପ: [0,0,1,0,0,0.5,0, ...] [0,0,0,0,1,0,0, ...] [0,0,1,0,0,0,0, ...]
କେଉଁ ବଟନ୍ ଦବାଗଲା ଆପଣ କହିପାରିବେ କି? ବୋଧହୁଏ, କିନ୍ତୁ କେବଳ ଆଖିକୁ ଟାଣିବା ଏବଂ କିଛି ଇନପୁଟ୍ ହରାଇବା ପରେ | ତେଣୁ, ନା, ଇନପୁଟ୍ ପ reading ିବାବେଳେ ତ୍ରୁଟି ନିବାରଣ ସହଜରେ ଆସେ ନାହିଁ | ସମସ୍ୟା :: ଗଠନର ଅଭାବ | ଯଦିଓ ତୁମେ ଶୀଘ୍ର ଭିଜୁଆଲାଇଜର୍ ଫୋପାଡିଦିଅ, ଶ yles ଳୀ ଶୀଘ୍ର ଅଶୁଭ ହୋଇପାରେ | ଡିଫଲ୍ଟ, ସକ୍ରିୟ, ଏବଂ ଡିବଗ୍ ଅବସ୍ଥାଗୁଡ଼ିକ ଓଭରଅପ୍ ହୋଇପାରେ, ଏବଂ ଏକ ସ୍ପଷ୍ଟ ସଂରଚନା ବିନା, ଆପଣଙ୍କର CSS ଭଙ୍ଗୁର ଏବଂ ବିସ୍ତାର କରିବା କଷ୍ଟକର ହୋଇଯାଏ | CSS କ୍ୟାସକେଡ୍ ସ୍ତରଗୁଡିକ ସାହାଯ୍ୟ କରିପାରିବ | ସେମାନେ ଶ yles ଳୀଗୁଡ଼ିକୁ “ସ୍ତର” ରେ ଗ୍ରୁପ୍ କରନ୍ତି ଯାହା ପ୍ରାଥମିକତା ଦ୍ ordered ାରା ଅର୍ଡର ହୋଇଛି, ତେଣୁ ଆପଣ ନିର୍ଦ୍ଦିଷ୍ଟତା ସହିତ ଲ fighting ିବା ବନ୍ଦ କରିଦିଅନ୍ତି, “ମୋର ଡିବଗ୍ ଶ style ଳୀ କାହିଁକି ଦେଖାଯାଉ ନାହିଁ?” ଏହା ପରିବର୍ତ୍ତେ, ଆପଣ ପୃଥକ ଚିନ୍ତାଧାରା ବଜାୟ ରଖନ୍ତି:
ଆଧାର: ନିୟନ୍ତ୍ରକଙ୍କ ମାନକ, ପ୍ରାରମ୍ଭିକ ରୂପ | ସକ୍ରିୟ: ଦବାଇଥିବା ବଟନ୍ ଏବଂ ଘୁଞ୍ଚାଯାଇଥିବା ବାଡି ପାଇଁ ହାଇଲାଇଟ୍ | ଡିବଗ୍: ବିକାଶକାରୀଙ୍କ ପାଇଁ ଓଭରଲେଜ୍ (ଯଥା, ସାଂଖ୍ୟିକ ପଠନ, ଗାଇଡ୍, ଇତ୍ୟାଦି) |
ଯଦି ଆମେ ଏହା ଅନୁଯାୟୀ CSS ରେ ସ୍ତରଗୁଡିକ ବ୍ୟାଖ୍ୟା କରିବାକୁ ଚାହୁଁ, ତେବେ ଆମର ଅଛି: / * ସର୍ବନିମ୍ନରୁ ସର୍ବୋଚ୍ଚ ପ୍ରାଥମିକତା * / @ ପ୍ଲେୟାର ବେସ୍, ସକ୍ରିୟ, ଡିବଗ୍;
@ ପ୍ଲେୟାର ଆଧାର { / * ... * / }
@ ପ୍ଲେୟାର ସକ୍ରିୟ { / * ... * / }
@ ପ୍ଲେୟାର୍ ଡିବଗ୍ { / * ... * / }
କାରଣ ପ୍ରତ୍ୟେକ ସ୍ତର ପୂର୍ବାନୁମାନ କରେ, ଆପଣ ସର୍ବଦା ଜାଣନ୍ତି କେଉଁ ନିୟମ ଜିତେ | ସେହି ପୂର୍ବାନୁମାନତା ତ୍ରୁଟି ନିବାରଣକୁ କେବଳ ସହଜ ନୁହେଁ, କିନ୍ତୁ ପ୍ରକୃତରେ ପରିଚାଳନାଯୋଗ୍ୟ କରିଥାଏ | ଆମେ ସମସ୍ୟା (ଅଦୃଶ୍ୟ, ଅଶୁଭ ଇନପୁଟ୍) ଏବଂ ଆଭିମୁଖ୍ୟ (କାସ୍କେଡ୍ ସ୍ତର ସହିତ ନିର୍ମିତ ଏକ ଭିଜୁଆଲ୍ ଡିବଗ୍) କୁ ଆବୃତ କରିଛୁ | ବର୍ତ୍ତମାନ ଆମେ ତ୍ରୁଟି ନିବାରଣ ପାଇଁ ପର୍ଯ୍ୟାୟ କ୍ରମେ ଚାଲିବା | ଡିବଗ୍ ଧାରଣା | ଲୁକ୍କାୟିତ ଇନପୁଟ୍ ଦୃଶ୍ୟମାନ କରିବାର ସହଜ ଉପାୟ ହେଉଛି ଏହାକୁ କେବଳ ପରଦାରେ ଟାଣିବା | ଏହି ତ୍ରୁଟି ନିବାରଣକାରୀ ତାହା କରନ୍ତି | ବଟନ୍, ଟ୍ରିଗର, ଏବଂ ଜୋଷ୍ଟିକ୍ ସମସ୍ତେ ଏକ ଭିଜୁଆଲ୍ ପାଆନ୍ତି |
A ଦବାନ୍ତୁ: ଏକ ବୃତ୍ତ ଆଲୋକିତ ହୁଏ | ବାଡିକୁ ନାଗ କରନ୍ତୁ: ବୃତ୍ତ ଚାରିପାଖେ ସ୍ଲାଇଡ୍ କରେ | ଅଧା ରାସ୍ତାରେ ଏକ ଟ୍ରିଗର ଟାଣ: ଏକ ଦଣ୍ଡ ଅଧା ରାସ୍ତାରେ ପୂର୍ଣ୍ଣ କରେ |
ବର୍ତ୍ତମାନ ଆପଣ 0s ଏବଂ 1s ରେ ଦେଖୁ ନାହାଁନ୍ତି, କିନ୍ତୁ ପ୍ରକୃତରେ ନିୟନ୍ତ୍ରକ ଲାଇଭ୍ ପ୍ରତିକ୍ରିୟା ଦେଖିବା | ଅବଶ୍ୟ, ଥରେ ଆପଣ ଡିଫଲ୍ଟ, ପ୍ରେସ୍, ଡିବଗ୍ ସୂଚନା ପରି ରାଜ୍ୟଗୁଡିକରେ ପିଲିଂ ଆରମ୍ଭ କରିବା, ବୋଧହୁଏ ଏକ ରେକର୍ଡିଂ ମୋଡ୍, CSS ବଡ଼ ଏବଂ ଜଟିଳ ହେବା ଆରମ୍ଭ କରେ | ସେହିଠାରେ କ୍ୟାସକେଡ୍ ସ୍ତରଗୁଡ଼ିକ ସହଜରେ ଆସେ | ଏଠାରେ ଏକ ଛଡ଼ାଯାଇଥିବା ଉଦାହରଣ: @ ପ୍ଲେୟାର ଆଧାର { .ବଟନ୍ { ପୃଷ୍ଠଭୂମି: # 222; ସୀମା-ପରିସର: 50%; ମୋଟେଇ: 40px; ଉଚ୍ଚତା: 40px; } }
@ ପ୍ଲେୟାର ସକ୍ରିୟ { .button.pressed { ପୃଷ୍ଠଭୂମି: # 0f0; / * ଉଜ୍ଜ୍ୱଳ ସବୁଜ * / } }
@ ପ୍ଲେୟାର୍ ଡିବଗ୍ { .ବଟନ୍ :: after ପରେ ବିଷୟବସ୍ତୁ: ଆକର୍ଷଣ (ତଥ୍ୟ-ମୂଲ୍ୟ); ଫଣ୍ଟ-ଆକାର: 12px; ରଙ୍ଗ: #fff; } }
ସ୍ତର କ୍ରମ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ: ଆଧାର → ସକ୍ରିୟ → ଡିବଗ୍ |
ଆଧାର ନିୟନ୍ତ୍ରକ ଆଙ୍କିଥାଏ | ପ୍ରେସ୍ ଷ୍ଟେଟସ୍ ସକ୍ରିୟ ନିୟନ୍ତ୍ରଣ କରେ | ଓଭରଲେଜ୍ ଉପରେ ତ୍ରୁଟି ନିବାରଣ |
ଏହାକୁ ଭାଙ୍ଗିବା ଅର୍ଥ ହେଉଛି ଆପଣ ଅଦ୍ଭୁତ ନିର୍ଦ୍ଦିଷ୍ଟ ଯୁଦ୍ଧ ସହିତ ଲ not ୁ ନାହାଁନ୍ତି | ପ୍ରତ୍ୟେକ ସ୍ତରର ସ୍ଥାନ ଅଛି, ଏବଂ ଆପଣ ସବୁବେଳେ ଜାଣନ୍ତି କ’ଣ ଜିତେ | ଏହାକୁ ନିର୍ମାଣ କରିବା ପ୍ରଥମେ ସ୍କ୍ରିନରେ କିଛି ପାଇବା | ଏହା ଭଲ ଦେଖାଯିବାର ଆବଶ୍ୟକତା ନାହିଁ - କେବଳ ବିଦ୍ୟମାନ ରହିବା ଆବଶ୍ୟକ ତେଣୁ ଆମର କିଛି କାମ କରିବାକୁ ଅଛି |
ଗେମପ୍ୟାଡ୍ କ୍ୟାସକେଡ୍ ଡିବଗ୍ |
|
<ବଟନ୍ id = "ଟୋଗଲ୍"> ତ୍ରୁଟି ନିବାରଣ |
|
<ସ୍କ୍ରିପ୍ଟ src = "script.js"> |
ତାହା ଶବ୍ଦର ଅର୍ଥ କେବଳ ବାକ୍ସଗୁଡ଼ିକ | ଏପର୍ଯ୍ୟନ୍ତ ରୋମାଞ୍ଚକର ନୁହେଁ, କିନ୍ତୁ ଏହା CSS ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ ପରେ ଧରିବାକୁ ହ୍ୟାଣ୍ଡେଲ ଦେଇଥାଏ | ଠିକ ଅଛି, ମୁଁ ଏଠାରେ କ୍ୟାସକେଡ୍ ସ୍ତର ବ୍ୟବହାର କରୁଛି କାରଣ ଆପଣ ଅଧିକ ରାଜ୍ୟ ଯୋଡିବା ପରେ ଏହା ଷ୍ଟଫ୍ ସଂଗଠିତ ରଖେ | ଏଠାରେ ଏକ ରୁଗ୍ ପାସ୍:
/ * =================================== CASCADE LAYERS ସେଟଅପ୍ | ଅର୍ଡର ବିଷୟଗୁଡିକ: ଆଧାର → ସକ୍ରିୟ → ଡିବଗ୍ | =================================== * /
/ * ସ୍ତର କ୍ରମକୁ ଉପରମୁଣ୍ଡରେ ବ୍ୟାଖ୍ୟା କରନ୍ତୁ * / @ ପ୍ଲେୟାର ବେସ୍, ସକ୍ରିୟ, ଡିବଗ୍;
/ * ସ୍ତର 1: ମୂଳ ଶ yles ଳୀ - ଡିଫଲ୍ଟ ଦୃଶ୍ୟ * / @ ପ୍ଲେୟାର ଆଧାର { .ବଟନ୍ { ପୃଷ୍ଠଭୂମି: # 333; ସୀମା-ପରିସର: 50%; ମୋଟେଇ: 70px; ଉଚ୍ଚତା: 70px; ପ୍ରଦର୍ଶନ: ଫ୍ଲେକ୍ସ; justify-content: କେନ୍ଦ୍ର; ଆଲାଇନ୍-ଆଇଟମ୍: କେନ୍ଦ୍ର; }
ବିରାମ { ମୋଟେଇ: 20px; ଉଚ୍ଚତା: 70px; ପୃଷ୍ଠଭୂମି: # 333; ପ୍ରଦର୍ଶନ: ଇନଲାଇନ-ବ୍ଲକ; } }
/ * ସ୍ତର 2: ସକ୍ରିୟ ଅବସ୍ଥା - ଦବାଇଥିବା ବଟନ୍ଗୁଡ଼ିକୁ ନିୟନ୍ତ୍ରଣ କରେ * / @ ପ୍ଲେୟାର ସକ୍ରିୟ { .button.active { ପୃଷ୍ଠଭୂମି: # 0f0; / * ଦବାଇଲେ ଉଜ୍ଜ୍ୱଳ ସବୁଜ * / ରୂପାନ୍ତର: ସ୍କେଲ (1.1); / * ବଟନ୍ ଟିକିଏ ବୃଦ୍ଧି କରେ * / }
.pause.active { ପୃଷ୍ଠଭୂମି: # 0f0; ରୂପାନ୍ତର: scaleY (1.1); / * ଦବାଇବାବେଳେ ଭୂଲମ୍ବ ଭାବରେ ବିସ୍ତାର ହୁଏ * / } }
/ * ସ୍ତର 3: ତ୍ରୁଟି ନିବାରଣ - ବିକାଶକାରୀ ସୂଚନା * / @ ପ୍ଲେୟାର୍ ଡିବଗ୍ { .ବଟନ୍ :: after ପରେ ବିଷୟବସ୍ତୁ: ଆକର୍ଷଣ (ତଥ୍ୟ-ମୂଲ୍ୟ); / * ସାଂଖ୍ୟିକ ମୂଲ୍ୟ ଦେଖାଏ * / ଫଣ୍ଟ-ଆକାର: 12px; ରଙ୍ଗ: #fff; } }
ଏହି ପଦ୍ଧତିର ସ beauty ନ୍ଦର୍ଯ୍ୟ ହେଉଛି ପ୍ରତ୍ୟେକ ସ୍ତରର ଏକ ସ୍ପଷ୍ଟ ଉଦ୍ଦେଶ୍ୟ ଅଛି | ମୂଳ ସ୍ତର କଦାପି ସକ୍ରିୟକୁ ନବଲିଖନ କରିପାରିବ ନାହିଁ, ଏବଂ ସକ୍ରିୟତା ନିର୍ଦ୍ଦିଷ୍ଟତାକୁ ଖାତିର ନକରି କଦାପି ତ୍ରୁଟି ନିବାରଣ କରିପାରିବ ନାହିଁ | ଏହା CSS ନିର୍ଦ୍ଦିଷ୍ଟତା ଯୁଦ୍ଧକୁ ଦୂର କରିଥାଏ ଯାହା ସାଧାରଣତ deb ତ୍ରୁଟି ନିବାରଣ ଉପକରଣଗୁଡ଼ିକୁ ଆଘାତ କରେ | ବର୍ତ୍ତମାନ ଦେଖାଯାଉଛି କିଛି କ୍ଲଷ୍ଟର ଅନ୍ଧାର ପୃଷ୍ଠଭୂମିରେ ବସିଛନ୍ତି | ସତ କହିବାକୁ ଗଲେ, ବହୁତ ଖରାପ ନୁହେଁ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ଯୋଡିବା | ଜାଭାସ୍କ୍ରିପ୍ଟ ସମୟ | ଏହିଠାରେ ନିୟନ୍ତ୍ରକ ପ୍ରକୃତରେ କିଛି କରନ୍ତି | ଆମେ ଏହି ପର୍ଯ୍ୟାୟ କ୍ରମେ ନିର୍ମାଣ କରିବୁ | ପଦାଙ୍କ 1: ରାଜ୍ୟ ପରିଚାଳନା ସେଟ୍ ଅପ୍ କରନ୍ତୁ | ପ୍ରଥମେ, ଡିବଗ୍ ର ସ୍ଥିତିକୁ ଟ୍ରାକ୍ କରିବା ପାଇଁ ଆମକୁ ଭେରିଏବଲ୍ ଦରକାର: // =================================== // ରାଜ୍ୟ ପରିଚାଳନା // ===================================
ଚାଲିବା = ମିଥ୍ୟା; // ଡିବଗ୍ ସକ୍ରିୟ ଅଛି କି ନାହିଁ ଟ୍ରାକ୍ କରନ୍ତୁ | rafId ଦିଅନ୍ତୁ; // ବାତିଲ୍ ପାଇଁ ଅନୁରୋଧ ଆନିମେସନ୍ ଫ୍ରେମ୍ ID ଗଚ୍ଛିତ କରେ |
ଏହି ଭେରିଏବଲ୍ସ ଆନିମେସନ୍ ଲୁପ୍ କୁ ନିୟନ୍ତ୍ରଣ କରେ ଯାହା କ୍ରମାଗତ ଭାବରେ ଗେମପ୍ୟାଡ୍ ଇନପୁଟ୍ ପ read େ | ପଦାଙ୍କ 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"); const status = document.getElementById ("ସ୍ଥିତି");
ବାରମ୍ବାର DOM କୁ ପଚାରିବା ଅପେକ୍ଷା ଏହି ରେଫରେନ୍ସଗୁଡ଼ିକୁ ଆଗରେ ରଖିବା ଅଧିକ ଦକ୍ଷ | ପଦାଙ୍କ 3: କୀବୋର୍ଡ୍ ଫଲବ୍ୟାକ୍ ଯୋଡନ୍ତୁ | ଭ physical ତିକ ନିୟନ୍ତ୍ରକ ବିନା ପରୀକ୍ଷା ପାଇଁ, ଆମେ ବଟନ୍ଗୁଡ଼ିକର କୀବୋର୍ଡ୍ କିଗୁଡ଼ିକୁ ମାନଚିତ୍ର କରିବୁ: // =================================== // କିବୋର୍ଡ ଫଲବ୍ୟାକ୍ (ନିୟନ୍ତ୍ରକ ବିନା ପରୀକ୍ଷା ପାଇଁ) // ===================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' କି ଉଭୟ ବିରାମ ଦଣ୍ଡକୁ ନିୟନ୍ତ୍ରଣ କରେ | };
ଏହା ଆମକୁ ଏକ କୀବୋର୍ଡରେ କୀ ଦବାଇ UI ପରୀକ୍ଷା କରିବାକୁ ଦିଏ | ପଦାଙ୍କ 4: ମୁଖ୍ୟ ଅଦ୍ୟତନ ଲୁପ୍ ସୃଷ୍ଟି କରନ୍ତୁ | ଯାଦୁ କେଉଁଠାରେ ହୁଏ | ଏହି ଫଙ୍କସନ୍ କ୍ରମାଗତ ଭାବରେ ଚାଲିଥାଏ ଏବଂ ଗେମପ୍ୟାଡ୍ ସ୍ଥିତି ପ read େ: // =================================== // MAIN GAMEPAD UPDATE LOOP | // ===================================
ଫଙ୍କସନ୍ ଅପଡେଟ୍ ଗେମପ୍ୟାଡ୍ () { // ସମସ୍ତ ସଂଯୁକ୍ତ ଗେମପ୍ୟାଡ୍ ପ୍ରାପ୍ତ କରନ୍ତୁ | const gamepads = navigator.getGamepads (); ଯଦି (! ଗେମପ୍ୟାଡ୍) ଫେରସ୍ତ;
// ପ୍ରଥମ ସଂଯୁକ୍ତ ଗେମପ୍ୟାଡ୍ ବ୍ୟବହାର କରନ୍ତୁ | const gp = ଗେମପ୍ୟାଡ୍ [0];
ଯଦି (gp) { // "ସକ୍ରିୟ" ଶ୍ରେଣୀ ଟୋଗଲ୍ କରି ଅପଡେଟ୍ ବଟନ୍ ଷ୍ଟେଟସ୍ | btnA.classList.toggle ("ସକ୍ରିୟ", gp.buttons [0] .pressed); btnB.classList.toggle ("ସକ୍ରିୟ", gp.buttons [1] .pressed); btnX.classList.toggle ("ସକ୍ରିୟ", gp.buttons [2] .pressed);
// ବିରାମ ବଟନ୍ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ (ଅଧିକାଂଶ ନିୟନ୍ତ୍ରକମାନଙ୍କ ଉପରେ ବଟନ୍ ଇଣ୍ଡେକ୍ସ 9) const pausePressed = gp.buttons [9] .pressed; pause1.classList.toggle ("ସକ୍ରିୟ", ବିରାମ ପ୍ରେସ୍); pause2.classList.toggle ("ସକ୍ରିୟ", ବିରାମ ପ୍ରେସ୍);
// ସ୍ଥିତି ପ୍ରଦର୍ଶନ ପାଇଁ ସମ୍ପ୍ରତି ଦବାଇଥିବା ବଟନ୍ଗୁଡ଼ିକର ଏକ ତାଲିକା ନିର୍ମାଣ କରନ୍ତୁ | ଦବାଇବାକୁ ଦିଅନ୍ତୁ = []; gp.buttons.forEach ((btn, i) => { ଯଦି (btn.pressed)pressed.push ("ବଟନ୍" + i); });
// ଯଦି କ but ଣସି ବଟନ୍ ଦବାଯାଏ ତେବେ ସ୍ଥିତି ପାଠ୍ୟକୁ ଅଦ୍ୟତନ କରନ୍ତୁ | if (pressed.length> 0) { status.textContent = "ଦବାଗଲା:" + ପ୍ରେସ୍। join (","); } }
// ଯଦି ଡିବଗ୍ ଚାଲୁଛି ତେବେ ଲୁପ୍ ଜାରି ରଖନ୍ତୁ | ଯଦି (ଚାଲୁଛି) { rafId = ଅନୁରୋଧ ଆନିମେସନ୍ ଫ୍ରେମ୍ (ଅପଡେଟ୍ ଗେମପ୍ୟାଡ୍); } }
ClassList.toggle () ପଦ୍ଧତି ବଟନ୍ ଦବାଗଲା କି ନାହିଁ ତାହା ଉପରେ ଆଧାର କରି ସକ୍ରିୟ ଶ୍ରେଣୀକୁ ଯୋଡିଥାଏ କିମ୍ବା ଅପସାରଣ କରିଥାଏ, ଯାହା ଆମର CSS ସ୍ତର ଶ yles ଳୀକୁ ଟ୍ରିଗର କରିଥାଏ | ପଦାଙ୍କ 5: କୀବୋର୍ଡ୍ ଇଭେଣ୍ଟଗୁଡିକ ପରିଚାଳନା କରନ୍ତୁ | ଏହି ଇଭେଣ୍ଟ ଶ୍ରୋତାମାନେ କୀବୋର୍ଡ୍ ଫଲବ୍ୟାକ୍ କାମ କରନ୍ତି: // =================================== // କିବୋର୍ଡ ଇଭେଣ୍ଟ ହ୍ୟାଣ୍ଡଲର୍ସ | // ===================================
document.addEventListener ("keydown", (e) => { if (keyMap [e.key]) { // ଏକକ କିମ୍ବା ଏକାଧିକ ଉପାଦାନଗୁଡିକ ପରିଚାଳନା କରନ୍ତୁ | if (Array.isArray (keyMap [e.key])) { keyMap [e.key] .forEach (el => el.classList.add ("ସକ୍ରିୟ")); } else { keyMap [e.key] .classList.add ("ସକ୍ରିୟ"); } status.textContent = "ଚାବି ଦବାଗଲା:" + e.key.toUpperCase (); } });
document.addEventListener ("keyup", (e) => { if (keyMap [e.key]) { // ଚାବି ମୁକ୍ତ ହେବାବେଳେ ସକ୍ରିୟ ସ୍ଥିତିକୁ ହଟାନ୍ତୁ | if (Array.isArray (keyMap [e.key])) { keyMap [e.key] .forEach (el => el.classList.remove ("ସକ୍ରିୟ")); } else { keyMap [e.key] .classList.remove ("ସକ୍ରିୟ"); } status.textContent = "ପ୍ରକାଶିତ ଚାବି:" + e.key.toUpperCase (); } });
ପଦାଙ୍କ 6: ଆରମ୍ଭ / ବନ୍ଦ ନିୟନ୍ତ୍ରଣ ଯୋଡନ୍ତୁ | ଶେଷରେ, ଡିବଗ୍ ଅନ୍ ଏବଂ ଅଫ୍ ଟୋଗଲ୍ କରିବାକୁ ଆମକୁ ଏକ ଉପାୟ ଦରକାର: // =================================== // ଟାବଲ୍ ଡେବ୍ୟୁର୍ ଅନ୍ / ଅଫ୍ | // ===================================
document.getElementById ("ଟୋଗଲ୍")। addEventListener ("କ୍ଲିକ୍", () => { ଚାଲୁ =! ଚାଲୁଛି; // ଚାଲୁଥିବା ଅବସ୍ଥାକୁ ଫ୍ଲିପ୍ କରନ୍ତୁ |
ଯଦି (ଚାଲୁଛି) { status.textContent = "ତ୍ରୁଟି ନିବାରଣ ଚାଲୁଛି ..."; updateGamepad (); // ଅପଡେଟ୍ ଲୁପ୍ ଆରମ୍ଭ କରନ୍ତୁ | } else { status.textContent = "ତ୍ରୁଟି ନିବାରଣ ନିଷ୍କ୍ରିୟ"; ବାତିଲ୍ ଆନିମେସନ୍ ଫ୍ରେମ୍ (rafId); // ଲୁପ୍ ବନ୍ଦ କରନ୍ତୁ | } });
ତେଣୁ ହଁ, ଏକ ବଟନ୍ ଦବାନ୍ତୁ ଏବଂ ଏହା ଚମକିବ | ବାଡିଟିକୁ ଠେଲିଦିଅ ଏବଂ ଏହା ଗତି କରେ | ତାହା ହେଉଛି ଆଉ ଗୋଟିଏ କଥା: କଞ୍ଚା ମୂଲ୍ୟ | ବେଳେବେଳେ ଆପଣ କେବଳ ନମ୍ବର ଦେଖିବାକୁ ଚାହାଁନ୍ତି, ଆଲୋକ ନୁହେଁ |
ଏହି ପର୍ଯ୍ୟାୟରେ, ଆପଣ ଦେଖିବା ଉଚିତ୍:
ଏକ ସରଳ ଅନ୍-ସ୍କ୍ରିନ୍ ନିୟନ୍ତ୍ରକ, ବଟନ୍ ଯାହା ତୁମେ ସେମାନଙ୍କ ସହିତ ଯୋଗାଯୋଗ କଲାବେଳେ ପ୍ରତିକ୍ରିୟା କରେ, ଏବଂ ପ୍ରେସ୍ ହୋଇଥିବା ବଟନ୍ ଇଣ୍ଡେକ୍ସଗୁଡିକ ଦର୍ଶାଇ ଏକ ବ al କଳ୍ପିକ ତ୍ରୁଟି ନିବାରଣ ପଠନ |
ଏହାକୁ କମ୍ ଅବଷ୍ଟ୍ରାକ୍ଟ କରିବାକୁ, ଅନ୍-ସ୍କ୍ରିନ୍ କଣ୍ଟ୍ରୋଲରର ପ୍ରକୃତ ସମୟରେ ପ୍ରତିକ୍ରିୟା କରୁଥିବା ଏଠାରେ ଏକ ଶୀଘ୍ର ଡେମୋ ଅଛି:
ବର୍ତ୍ତମାନ, ଷ୍ଟାର୍ଟ ରେକର୍ଡିଂ ଦବାଇବା ପର୍ଯ୍ୟନ୍ତ ସବୁକିଛି ଲଗ୍ କରେ ଯେପର୍ଯ୍ୟନ୍ତ ତୁମେ ରେକର୍ଡିଂ ବନ୍ଦ କର | 2। CSV / JSON କୁ ଡାଟା ରପ୍ତାନି | ଥରେ ଆମର ଏକ ଲଗ୍ ଥଲେ, ଆମେ ଏହାକୁ ସଞ୍ଚୟ କରିବାକୁ ଚାହିଁବୁ |
ପଦାଙ୍କ 1: ଡାଉନଲୋଡ୍ ହେଲପର୍ ସୃଷ୍ଟି କରନ୍ତୁ | ପ୍ରଥମେ, ଆମକୁ ଏକ ହେଲପର ଫଙ୍କସନ୍ ଦରକାର ଯାହା ବ୍ରାଉଜରରେ ଫାଇଲ୍ ଡାଉନଲୋଡ୍ ନିୟନ୍ତ୍ରଣ କରେ: // =================================== // ଫାଇଲ୍ ଡାଉନଲୋଡ୍ ହେଲପର୍ | // ===================================
ଫଙ୍କସନ୍ ଡାଉନଲୋଡ୍ ଫାଇଲ୍ (ଫାଇଲନାମ, ବିଷୟବସ୍ତୁ, ପ୍ରକାର = "ପାଠ୍ୟ / ସାଦା") { // ବିଷୟବସ୍ତୁରୁ ଏକ ବ୍ଲବ୍ ସୃଷ୍ଟି କରନ୍ତୁ | const blob = ନୂତନ ବ୍ଲବ୍ ([ବିଷୟବସ୍ତୁ], {ପ୍ରକାର}); const url = URL.createObjectURL (ବ୍ଲବ୍);
// ଏକ ଅସ୍ଥାୟୀ ଡାଉନଲୋଡ୍ ଲିଙ୍କ୍ ସୃଷ୍ଟି କରନ୍ତୁ ଏବଂ ଏହାକୁ କ୍ଲିକ୍ କରନ୍ତୁ | 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 ("କ୍ଲିକ୍", () => { // ରପ୍ତାନି କରିବାକୁ କିଛି ଅଛି କି ନାହିଁ ଯାଞ୍ଚ କରନ୍ତୁ | if (! frames.length) { console.warn ("ରପ୍ତାନି ପାଇଁ କ rec ଣସି ରେକର୍ଡିଂ ଉପଲବ୍ଧ ନାହିଁ |"); ଫେରସ୍ତ; }
// ମେଟାଡାଟା ଏବଂ ଫ୍ରେମ୍ ସହିତ ଏକ ପେଲୋଡ୍ ସୃଷ୍ଟି କରନ୍ତୁ | const payload = { ସୃଷ୍ଟି ହୋଇଛି: ନୂତନ ତାରିଖ ()। toISOString (), ଫ୍ରେମ୍ };
// ଫର୍ମାଟ୍ ହୋଇଥିବା JSON ଭାବରେ ଡାଉନଲୋଡ୍ କରନ୍ତୁ | ଡାଉନଲୋଡ୍ ଫାଇଲ୍ ( "gamepad-log.json", JSON.stringify (payload, null, 2), "ପ୍ରୟୋଗ / json" ); });
JSON ଫର୍ମାଟ୍ ସବୁକିଛି ଗଠନମୂଳକ ଏବଂ ସହଜରେ ପାର୍ସେବଲ୍ ରଖେ, ଏହାକୁ dev ଉପକରଣରେ ଲୋଡ୍ କରିବା କିମ୍ବା ସାଥୀମାନଙ୍କ ସହିତ ଅଂଶୀଦାର କରିବା ପାଇଁ ଆଦର୍ଶ କରିଥାଏ | ପଦାଙ୍କ 3: CSV ରପ୍ତାନି ପରିଚାଳନା କରନ୍ତୁ | CSV ରପ୍ତାନି ପାଇଁ, ଆମକୁ କ୍ରମିକ ତଥ୍ୟକୁ ଧାଡି ଏବଂ ସ୍ତମ୍ଭରେ ସମତଳ କରିବାକୁ ପଡିବ:
//=================================== // CSV ଭାବରେ ରପ୍ତାନି | // ===================================
document.getElementById ("export-csv")। addEventListener ("କ୍ଲିକ୍", () => { // ରପ୍ତାନି କରିବାକୁ କିଛି ଅଛି କି ନାହିଁ ଯାଞ୍ଚ କରନ୍ତୁ | if (! frames.length) { console.warn ("ରପ୍ତାନି ପାଇଁ କ rec ଣସି ରେକର୍ଡିଂ ଉପଲବ୍ଧ ନାହିଁ |"); ଫେରସ୍ତ; }
// CSV ହେଡର୍ ଧାଡି ନିର୍ମାଣ କରନ୍ତୁ (ଟାଇମଷ୍ଟ୍ୟାମ୍ପ ପାଇଁ ସ୍ତମ୍ଭ, ସମସ୍ତ ବଟନ୍, ସମସ୍ତ ଅକ୍ଷ) | const headerButtons = ଫ୍ରେମ୍ [0] .buttons.map ((_, i) => btn $ {i}); const headerAxes = ଫ୍ରେମ୍ [0] .axes.map ((_, i) => ଅକ୍ଷ $ {i}); const header = ["t", ... headerButtons, ... headerAxes] .join (",") + "\ n";
// CSV ଡାଟା ଧାଡି ନିର୍ମାଣ କରନ୍ତୁ | const ଧାଡି = frames.map (f => {| const btnVals = f.buttons.map (b => b.value); ଫେରସ୍ତ [f.t, ... btnVals, ... f.axes] .join (","); ଯୋଗଦାନ) ("\ n");
// CSV ଭାବରେ ଡାଉନଲୋଡ୍ କରନ୍ତୁ | ଡାଉନଲୋଡ୍ ଫାଇଲ୍ ("gamepad-log.csv", ହେଡର୍ + ଧାଡି, "ପାଠ୍ୟ / csv"); });
ଡାଟା ବିଶ୍ଳେଷଣ ପାଇଁ CSV ଉଜ୍ଜ୍ୱଳ କାରଣ ଏହା ସିଧାସଳଖ Excel କିମ୍ବା ଗୁଗୁଲ୍ ଶୀଟ୍ ରେ ଖୋଲିଥାଏ, ଯାହା ଆପଣଙ୍କୁ ଚାର୍ଟ, ଫିଲ୍ଟର୍ ଡାଟା, କିମ୍ବା ସ୍ପଟ୍ s ାଞ୍ଚା ସୃଷ୍ଟି କରିବାକୁ ଦେଇଥାଏ | ବର୍ତ୍ତମାନ ରପ୍ତାନି ବଟନ୍ ଗୁଡିକ ଅଛି, ଆପଣ ପ୍ୟାନେଲରେ ଦୁଇଟି ନୂତନ ବିକଳ୍ପ ଦେଖିବେ: ରପ୍ତାନି JSON ଏବଂ CSV ରପ୍ତାନି କରନ୍ତୁ | JSON ଭଲ ଯଦି ଆପଣ କ raw ୍ଚା ଲଗ୍ କୁ ଆପଣଙ୍କର dev ଉପକରଣରେ ପକାଇବାକୁ କିମ୍ବା structure ା around ୍ଚା ଚାରିପାଖରେ ପକାଇବାକୁ ଚାହାଁନ୍ତି | ଅନ୍ୟପକ୍ଷରେ, CSV ସିଧାସଳଖ Excel କିମ୍ବା ଗୁଗୁଲ୍ ଶୀଟ୍ ଗୁଡିକରେ ଖୋଲିବ ଯାହା ଦ୍ you ାରା ଆପଣ ଇନପୁଟ୍ ଚାର୍ଟ, ଫିଲ୍ଟର୍ କିମ୍ବା ତୁଳନା କରିପାରିବେ | ନିମ୍ନଲିଖିତ ଚିତ୍ରଟି ସେହି ଅତିରିକ୍ତ ନିୟନ୍ତ୍ରଣ ସହିତ ପ୍ୟାନେଲ୍ କିପରି ଦେଖାଯାଉଛି ତାହା ଦର୍ଶାଏ |
ସ୍ନାପସଟ୍ ସିଷ୍ଟମ୍ | ବେଳେବେଳେ ଆପଣଙ୍କୁ ସମ୍ପୂର୍ଣ୍ଣ ରେକର୍ଡିଂର ଆବଶ୍ୟକତା ନାହିଁ, କେବଳ ଇନପୁଟ୍ ଷ୍ଟେଟଗୁଡିକର ଏକ ଶୀଘ୍ର “ସ୍କ୍ରିନସଟ୍” | ସେହିଠାରେ ଏକ ଟେକ୍ ସ୍ନାପସଟ୍ ବଟନ୍ ସାହାଯ୍ୟ କରେ |
ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ:
// =================================== // ସ୍ନାପ୍ସଟ୍ ନିଅ | // ===================================
document.getElementById ("ସ୍ନାପସଟ୍")। addEventListener ("କ୍ଲିକ୍", () => { // ସମସ୍ତ ସଂଯୁକ୍ତ ଗେମପ୍ୟାଡ୍ ପ୍ରାପ୍ତ କରନ୍ତୁ | const ପ୍ୟାଡ୍ = navigator.getGamepads (); const activePads = [];
// ପ୍ରତ୍ୟେକ ସଂଯୁକ୍ତ ଗେମପ୍ୟାଡର ସ୍ଥିତିକୁ ଲୁପ୍ କରନ୍ତୁ ଏବଂ କ୍ୟାପଚର୍ କରନ୍ତୁ | ପାଇଁ (const gp of pad) { ଯଦି (! gp) ଜାରି ରହିବ; // ଖାଲି ସ୍ଲଟ୍ ଛାଡିଦିଅ |
activePads.push ({ id: gp.id, // ନିୟନ୍ତ୍ରକ ନାମ / ମଡେଲ୍ | timestamp: performance.now (), ବଟନ୍: gp.buttons.map (b => ({ ଦବାଗଲା: b.pressed, ମୂଲ୍ୟ: b.value })), କୁମ୍ଭ: [... gp.axes] }); }
// କ game ଣସି ଗେମପ୍ୟାଡ୍ ମିଳିଲା କି ନାହିଁ ଯାଞ୍ଚ କରନ୍ତୁ | if (! activePads.length) { console.warn ("ସ୍ନାପସଟ୍ ପାଇଁ କ game ଣସି ଗେମପ୍ୟାଡ୍ ସଂଯୁକ୍ତ ନୁହେଁ |"); ସତର୍କତା ("କ control ଣସି ନିୟନ୍ତ୍ରକ ଚିହ୍ନଟ ହେଲା ନାହିଁ!"); ଫେରସ୍ତ; }
// ଲଗ୍ କରନ୍ତୁ ଏବଂ ଉପଭୋକ୍ତାଙ୍କୁ ଜଣାନ୍ତୁ | console.log ("ସ୍ନାପସଟ୍:", ଆକ୍ଟିଭ୍ ପ୍ୟାଡ୍); ସତର୍କତା (ସ୍ନାପସଟ୍ ନିଆଯାଇଛି! $ {activePads.length} ନିୟନ୍ତ୍ରକ (ଗୁଡିକ) କ୍ୟାପଚର ହୋଇଛି); });
ସ୍ନାପସଟ୍ ଗୁଡିକ ତୁମର ନିୟନ୍ତ୍ରକଙ୍କ ସଠିକ୍ ସ୍ଥିତିକୁ ଏକ ସମୟରେ ଫ୍ରିଜ୍ କରେ | 4। ଭୂତ ଇନପୁଟ୍ ରିପ୍ଲେ | ବର୍ତ୍ତମାନ ମଜା ପାଇଁ: ଭୂତ ଇନପୁଟ୍ ରିପ୍ଲେ | ଏହା ଏକ ଲଗ୍ ନେଇଥାଏ ଏବଂ ଏହାକୁ ଭିଜୁଆଲ୍ ଭାବରେ ଖେଳେ ଯେପରି ଏକ ଫ୍ୟାଣ୍ଟମ୍ ପ୍ଲେୟାର୍ କଣ୍ଟ୍ରୋଲର୍ ବ୍ୟବହାର କରୁଥିଲା |
ରିପ୍ଲେ ପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟ: // =================================== // ଘୋଷ୍ଟ ପ୍ରତିକ୍ରିୟା | // ===================================
document.getElementById ("ରିପ୍ଲେ")। // ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରିପ୍ଲେ କରିବାକୁ ଆମର ଏକ ରେକର୍ଡିଂ ଅଛି | if (! frames.length) { ସତର୍କତା ("ପୁନ play ଚଲାଇବା ପାଇଁ କ rec ଣସି ରେକର୍ଡିଂ ନାହିଁ!"); ଫେରସ୍ତ; }
console.log ("ଭୂତ ରିପ୍ଲେ ଆରମ୍ଭ ...");
// ସିଙ୍କ୍ ପ୍ଲେକ୍ ପାଇଁ ଟାଇମିଂ ଟ୍ରାକ୍ କରନ୍ତୁ | startTime = performance.now () ଦିଅନ୍ତୁ; ଫ୍ରେମ୍ ଇଣ୍ଡେକ୍ସ = 0 ଦିଅନ୍ତୁ;
// ଆନିମେସନ୍ ଲୁପ୍ ରିପ୍ଲେ କରନ୍ତୁ | ଫଙ୍କସନ୍ ଷ୍ଟେପ୍ () { const now = performance.now (); const elapsed = ବର୍ତ୍ତମାନ - startTime;
// ସମସ୍ତ ଫ୍ରେମ୍ ପ୍ରକ୍ରିୟାକରଣ ଯାହା ବର୍ତ୍ତମାନ ସୁଦ୍ଧା ଘଟିଥଲା |
ଯେତେବେଳେ (frameIndex // ରେକର୍ଡ ହୋଇଥିବା ବଟନ୍ ଅବସ୍ଥା ସହିତ UI ଅପଡେଟ୍ କରନ୍ତୁ |
btnA.classList.toggle ("ସକ୍ରିୟ", frame.buttons [0] .pressed);
btnB.classList.toggle ("ସକ୍ରିୟ", frame.buttons [1] .pressed);
btnX.classList.toggle ("ସକ୍ରିୟ", frame.buttons [2] .pressed); // ସ୍ଥିତି ପ୍ରଦର୍ଶନକୁ ଅଦ୍ୟତନ କରନ୍ତୁ |
ଦବାଇବାକୁ ଦିଅନ୍ତୁ = [];
frame.buttons.forEach ((btn, i) => {
if (btn.pressed) press.push ("ବଟନ୍" + i);
});
if (pressed.length> 0) {
status.textContent = "ଭୂତ:" + pressed.join (",");
} frameIndex ++;
} // ଯଦି ଅଧିକ ଫ୍ରେମ୍ ଅଛି ତେବେ ଲୁପ୍ ଜାରି ରଖନ୍ତୁ |
if (frameIndex // ରିପ୍ଲେ ଆରମ୍ଭ କରନ୍ତୁ |
ପଦକ୍ଷେପ ();
}); ଟିକିଏ ଅଧିକ ହ୍ୟାଣ୍ଡ-ଅନ୍ ଡିବଗ୍ କରିବାକୁ, ମୁଁ ଏକ ଭୂତ ରିପ୍ଲେ ଯୋଡିଲି | ଥରେ ଆପଣ ଏକ ଅଧିବେଶନ ରେକର୍ଡ କରିସାରିବା ପରେ, ଆପଣ ରିପ୍ଲେ ହିଟ୍ କରିପାରିବେ ଏବଂ UI ଏହାକୁ ଦେଖିପାରିବେ, ପ୍ରାୟ ଏକ ଫ୍ୟାଣ୍ଟମ୍ ପ୍ଲେୟାର୍ ପ୍ୟାଡ୍ ଚଳାଉଥିବା ପରି | ଏଥିପାଇଁ ଏକ ନୂତନ ରିପ୍ଲେ ଭୂତ ବଟନ୍ ପ୍ୟାନେଲରେ ଦେଖାଯାଏ | ରେକର୍ଡକୁ ଦବାନ୍ତୁ, ନିୟନ୍ତ୍ରକ ସହିତ ଟିକେ ଗଣ୍ଡଗୋଳ କର, ବନ୍ଦ କର, ତାପରେ ପୁନ play ଚିତ୍ରଣ କର | UI କେବଳ ତୁମର ସମସ୍ତ କାର୍ଯ୍ୟକୁ ପ୍ରତିଧ୍ୱନିତ କରେ, ଯେପରି ତୁମର ଇନପୁଟ୍ ଅନୁସରଣ କରୁଥିବା ଭୂତ |
ଏହି ଅତିରିକ୍ତଗୁଡିକ ସହିତ କାହିଁକି ବ୍ୟସ୍ତ ହୁଅନ୍ତି? ରେକର୍ଡିଂ / ରପ୍ତାନି ପରୀକ୍ଷାର୍ଥୀମାନଙ୍କ ପାଇଁ ଯାହା ଘଟିଲା ତାହା ଦେଖାଇବା ସହଜ କରିଥାଏ |
ସ୍ନାପସଟ୍ ଗୁଡିକ ଏକ ମୁହୂର୍ତ୍ତରେ ଫ୍ରିଜ୍ ହୋଇଯାଏ, ଯେତେବେଳେ ଆପଣ ଅଦ୍ଭୁତ ବଗ୍ ପଛରେ ଗୋଡ଼ାଉଛନ୍ତି |
ଭୂତ ରିପ୍ଲେ ଟ୍ୟୁଟୋରିଆଲ୍, ଆକ୍ସେସିବିଲିଟି ଚେକ୍, କିମ୍ବା କେବଳ କଣ୍ଟ୍ରୋଲ୍ ସେଟଅପ୍ ତୁଳନା କରିବା ପାଇଁ ବହୁତ ଭଲ | ଏହି ସମୟରେ, ଏହା କେବଳ ଏକ ସୁନ୍ଦର ଡେମୋ ନୁହେଁ, ବରଂ ଆପଣ ପ୍ରକୃତରେ କିଛି କାମ କରିପାରିବେ |
ବାସ୍ତବ-ବିଶ୍ୱ ବ୍ୟବହାର ମାମଲା |
ବର୍ତ୍ତମାନ ଆମେ ଏହି ଡିବଗ୍ ପାଇଛୁ ଯାହା ବହୁତ କିଛି କରିପାରିବ | ଏହା ଲାଇଭ୍ ଇନପୁଟ୍ ଦେଖାଏ, ଲଗ୍ ରେକର୍ଡ କରେ, ସେଗୁଡିକ ରପ୍ତାନି କରେ, ଏବଂ ଷ୍ଟଫ୍ ରିପ୍ଲାଏ କରେ | କିନ୍ତୁ ପ୍ରକୃତ ପ୍ରଶ୍ନ ହେଉଛି: ପ୍ରକୃତରେ କିଏ ଧ୍ୟାନ ଦିଅନ୍ତି? ଏହା କାହା ପାଇଁ ଉପଯୋଗୀ?
ଖେଳ ବିକାଶକାରୀ
ନିୟନ୍ତ୍ରକମାନେ କାର୍ଯ୍ୟର ଏକ ଅଂଶ, କିନ୍ତୁ ସେଗୁଡ଼ିକର ତ୍ରୁଟି ନିବାରଣ? ସାଧାରଣତ a ଏକ ଯନ୍ତ୍ରଣା | କଳ୍ପନା କରନ୍ତୁ ଯେ ଆପଣ fighting → + ପଞ୍ଚ ପରି ଏକ ଯୁଦ୍ଧ ଖେଳ କମ୍ବୋ ପରୀକ୍ଷା କରୁଛନ୍ତି | ପ୍ରାର୍ଥନା କରିବା ପରିବର୍ତ୍ତେ, ତୁମେ ଏହାକୁ ଦୁଇଥର ସମାନ ଭାବରେ ଦବାଇଲ, ତୁମେ ଏହାକୁ ଥରେ ରେକର୍ଡ କର, ଏବଂ ପୁନ play ଚିତ୍ରଣ କର | ସମାପ୍ତ କିମ୍ବା ତୁମର ମଲ୍ଟିପ୍ଲେୟାର କୋଡ୍ ସେମାନଙ୍କ ମେସିନରେ ସମାନ ପ୍ରତିକ୍ରିୟା କରେ କି ନାହିଁ ଯାଞ୍ଚ କରିବାକୁ ତୁମେ ଜଣେ ସାଥୀ ସହିତ JSON ଲଗ୍ ଅଦଳବଦଳ କର | ତାହା ବହୁତ ବଡ |
ଅଭିଗମ୍ୟତା ଅଭ୍ୟାସକାରୀ |
ଏହା ମୋର ହୃଦୟର ନିକଟତର | ସମସ୍ତେ ଏକ “ମାନକ” ନିୟନ୍ତ୍ରକ ସହିତ ଖେଳନ୍ତି ନାହିଁ | ଆଡାପ୍ଟିଭ୍ ନିୟନ୍ତ୍ରକମାନେ ବେଳେବେଳେ ଅଦ୍ଭୁତ ସଙ୍କେତ ଫିଙ୍ଗନ୍ତି | ଏହି ଉପକରଣ ସହିତ, ତୁମେ କ’ଣ ଘଟୁଛି ଠିକ୍ ଦେଖିପାରିବ | ଶିକ୍ଷକ, ଅନୁସନ୍ଧାନକାରୀ, ଯିଏ | ସେମାନେ ଲଗ୍ ଧରିପାରିବେ, ତୁଳନା କରିପାରିବେ, କିମ୍ବା ପାର୍ଶ୍ୱରେ ଇନପୁଟ୍ ରିପ୍ଲେ କରିପାରିବେ | ହଠାତ୍, ଅଦୃଶ୍ୟ ଜିନିଷ ସ୍ପଷ୍ଟ ହୋଇଯାଏ |
ଗୁଣବତ୍ତା ନିଶ୍ଚିତତା ପରୀକ୍ଷା
ପରୀକ୍ଷାର୍ଥୀମାନେ ସାଧାରଣତ notes “ମୁଁ ଏଠାରେ ବଟନ୍ ମାସ୍ କରିଥିଲି ଏବଂ ଏହା ଭାଙ୍ଗିଗଲା | ବହୁତ ସାହାଯ୍ୟକାରୀ ନୁହେଁ | ବର୍ତ୍ତମାନ? ସେମାନେ ସଠିକ୍ ପ୍ରେସ୍ କ୍ୟାପଚର୍ କରିପାରିବେ, ଲଗ୍ ରପ୍ତାନି କରିପାରିବେ ଏବଂ ଏହାକୁ ପଠାଇ ପାରିବେ | କ No ଣସି ଅନୁମାନ ନାହିଁ |
ଶିକ୍ଷାବିତ୍
ଯଦି ଆପଣ ଟ୍ୟୁଟୋରିଆଲ୍ କିମ୍ବା ୟୁଟ୍ୟୁବ୍ ଭିଡ୍ ତିଆରି କରୁଛନ୍ତି, ଭୂତ ରିପ୍ଲେ ସୁନା ଅଟେ | UI ଏହା ଘଟୁଥିବାବେଳେ ଆପଣ ପ୍ରକୃତରେ କହିପାରିବେ, “ମୁଁ ନିୟନ୍ତ୍ରକ ସହିତ ଯାହା କରିଥିଲି,” ବ୍ୟାଖ୍ୟାଗୁଡିକ ଅଧିକ ସ୍ପଷ୍ଟ କରେ |
ଖେଳ ବାହାରେ |
ଏବଂ ହଁ, ଏହା କେବଳ ଖେଳ ବିଷୟରେ ନୁହେଁ | ଲୋକମାନେ ରୋବଟ୍, ଆର୍ଟ ପ୍ରୋଜେକ୍ଟ ଏବଂ ଆକ୍ସେସିବିଲିଟି ଇଣ୍ଟରଫେସ୍ ପାଇଁ ନିୟନ୍ତ୍ରକ ବ୍ୟବହାର କରିଛନ୍ତି | ପ୍ରତ୍ୟେକ ଥର ସମାନ ସମସ୍ୟା: ବ୍ରାଉଜର ପ୍ରକୃତରେ କ’ଣ ଦେଖୁଛି? ଏହା ସହିତ, ଆପଣଙ୍କୁ ଅନୁମାନ କରିବାକୁ ପଡିବ ନାହିଁ |
ସିଦ୍ଧାନ୍ତ
ଏକ ନିୟନ୍ତ୍ରକ ଇନପୁଟ୍ ଡିବଗ୍ କରିବା ସର୍ବଦା ଅନ୍ଧ ଉଡିବା ପରି ଅନୁଭବ କରେ | DOM କିମ୍ବା CSS ପରି, ଗେମପ୍ୟାଡ୍ ପାଇଁ କ built ଣସି ବିଲ୍ଟ-ଇନ୍ ଇନ୍ସପେକ୍ଟର ନାହିଁ | କୋନସୋଲରେ ଏହା କେବଳ କଞ୍ଚା ସଂଖ୍ୟା, ଶବ୍ଦରେ ସହଜରେ ହଜିଯାଇଛି |
HTML, CSS, ଏବଂ JavaScript ର କିଛି ଶହ ଧାଡି ସହିତ, ଆମେ କିଛି ଅଲଗା ନିର୍ମାଣ କଲୁ: ଏକ ଭିଜୁଆଲ୍ ଡିବଗ୍ ଯାହା ଅଦୃଶ୍ୟ ଇନପୁଟ୍ ଗୁଡିକ ଦୃଶ୍ୟମାନ କରେ |
ଏକ ସ୍ତରୀୟ CSS ସିଷ୍ଟମ୍ ଯାହା UI କୁ ସଫା ଏବଂ ତ୍ରୁଟିଯୁକ୍ତ ରଖେ |
ଉନ୍ନତିର ଏକ ସେଟ୍ (ରେକର୍ଡିଂ, ରପ୍ତାନି, ସ୍ନାପସଟ୍, ଭୂତ ରିପ୍ଲେ) ଯାହା ଏହାକୁ ଡେମୋରୁ ଡେଭଲପର୍ ଟୁଲ୍ କୁ ଉନ୍ନତ କରେ | ୱେବ୍ ପ୍ଲାଟଫର୍ମର ଶକ୍ତିକୁ CSS କାସ୍କେଡ୍ ସ୍ତରରେ ଟିକିଏ ସୃଜନଶୀଳତା ସହିତ ମିଶ୍ରଣ କରି ଆପଣ କେତେ ଦୂର ଯାଇପାରିବେ ଏହି ପ୍ରୋଜେକ୍ଟ ଦର୍ଶାଏ |
ଟୁଲ୍ ଯାହା ମୁଁ ସମ୍ପୂର୍ଣ୍ଣ ଭାବରେ ବ୍ୟାଖ୍ୟା କରିଥିଲି ତାହା ହେଉଛି ମୁକ୍ତ ଉତ୍ସ | ଆପଣ GitHub ରେପୋକୁ କ୍ଲୋନ କରିପାରିବେ ଏବଂ ଏହାକୁ ନିଜ ପାଇଁ ଚେଷ୍ଟା କରିପାରିବେ |
କିନ୍ତୁ ସବୁଠାରୁ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ କଥା ହେଉଛି, ଆପଣ ଏହାକୁ ନିଜର କରିପାରିବେ | ଆପଣଙ୍କର ନିଜ ସ୍ତରଗୁଡିକ ଯୋଡନ୍ତୁ | ନିଜର ରିପ୍ଲେ ଲଜିକ୍ ନିର୍ମାଣ କରନ୍ତୁ | ଏହାକୁ ଆପଣଙ୍କର ଖେଳ ପ୍ରୋଟୋଟାଇପ୍ ସହିତ ଏକୀକୃତ କରନ୍ତୁ | କିମ୍ବା ଏପରିକି ମୁଁ କଳ୍ପନା କରି ନଥିବା ଉପାୟରେ ଏହାକୁ ବ୍ୟବହାର କରନ୍ତୁ | ଶିକ୍ଷାଦାନ, ଅଭିଗମ୍ୟତା, କିମ୍ବା ତଥ୍ୟ ବିଶ୍ଳେଷଣ ପାଇଁ |
ଦିନର ଶେଷରେ, ଏହା କେବଳ ଗେମପ୍ୟାଡ୍ ଡିବଗ୍ କରିବା ବିଷୟରେ ନୁହେଁ | ଏହା ଲୁକ୍କାୟିତ ଇନପୁଟଗୁଡିକ ଉପରେ ଆଲୋକ ପ୍ରଦାନ କରିବା ଏବଂ ବିକାଶକାରୀଙ୍କୁ ହାର୍ଡୱେର୍ ସହିତ କାର୍ଯ୍ୟ କରିବାକୁ ଆତ୍ମବିଶ୍ୱାସ ପ୍ରଦାନ କରିବା ବିଷୟରେ ଯାହାକି ୱେବ୍ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ଗ୍ରହଣ କରେ ନାହିଁ |
ତେଣୁ, ଆପଣଙ୍କର ନିୟନ୍ତ୍ରକକୁ ପ୍ଲଗ୍ କରନ୍ତୁ, ଆପଣଙ୍କର ସମ୍ପାଦକ ଖୋଲନ୍ତୁ ଏବଂ ପରୀକ୍ଷା ଆରମ୍ଭ କରନ୍ତୁ | ତୁମର ବ୍ରାଉଜର୍ ଏବଂ ତୁମର CSS ପ୍ରକୃତରେ କ’ଣ କରିପାରିବ ସେଥିରେ ଆପଣ ଆଶ୍ଚର୍ଯ୍ୟ ହୋଇପାରନ୍ତି |
