መቆጣጠሪያውን ሲሰኩ ቁልፎችን ይፈጫሉ፣ ዱላዎቹን ያንቀሳቅሳሉ፣ ቀስቅሴዎቹን ይጎትቱታል… እና እንደ ገንቢ ምንም አያዩም። አሳሹ እያነሳው ነው, እርግጠኛ ነው, ነገር ግን በኮንሶል ውስጥ ቁጥሮች ካልገቡ በስተቀር, የማይታይ ነው. በጌምፓድ ኤፒአይ ያለው ራስ ምታት ነው። ለዓመታት ያህል ነው, እና በእውነቱ በጣም ኃይለኛ ነው. አዝራሮችን, እንጨቶችን, ቀስቅሴዎችን, ስራዎቹን ማንበብ ይችላሉ. ግን አብዛኛው ሰው አይነካውም. ለምን፧ ምክንያቱም ምንም አስተያየት የለም. በገንቢ መሳሪያዎች ውስጥ ምንም ፓነል የለም። ተቆጣጣሪው የሚያስቡትን እየሰራ መሆኑን ለማወቅ ምንም ግልጽ መንገድ የለም። ዓይነ ስውር የሚበር ይመስላል። ያ ትንሽ መሣሪያ እንድገነባ አስቸግሮኛል፡ Gamepad Cascade Debugger። በኮንሶል ውፅዓት ላይ ከማፍጠጥ ይልቅ የመቆጣጠሪያው ቀጥታ እና መስተጋብራዊ እይታ ያገኛሉ። የሆነ ነገር ይጫኑ እና በማያ ገጹ ላይ ምላሽ ይሰጣል. እና በሲኤስኤስ ካስኬድ ንብርብሮች፣ ስልቶቹ እንደተደራጁ ይቆያሉ፣ ስለዚህ ለማረም የበለጠ ንጹህ ነው። በዚህ ልኡክ ጽሁፍ ላይ የማረሚያ ተቆጣጣሪዎች ለምን እንደ ህመም, 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 ካስኬድ ንብርብሮች ሊረዱ ይችላሉ። ስልቶችን በቅድመ ሁኔታ ወደ "ንብርብሮች" ይቦድናሉ፣ ስለዚህ ለየልዩነት መታገል ያቆማሉ እና "ለምንድነው የኔ የማረም ስልቴ አይታይም?" በምትኩ፣ የተለያዩ ስጋቶችን ትጠብቃለህ፡-
መሠረት: የመቆጣጠሪያው ደረጃ, የመጀመሪያ ገጽታ. ንቁ: ለተጫኑ አዝራሮች እና ለተንቀሳቀሱ በትሮች ዋና ዋና ዜናዎች። ማረም፡ ተደራቢዎች ለገንቢዎች (ለምሳሌ፡ የቁጥር ንባቦች፣ መመሪያዎች፣ እና የመሳሰሉት)።
በሲኤስኤስ ውስጥ ንብርብሮችን በዚህ መሰረት ብንገልፅ፣ ይኖረናል፡- /* ዝቅተኛ ወደ ከፍተኛ ቅድሚያ */ @layer base፣ ገባሪ፣ ማረም;
@layer base { /*...*/ }
@ንብርብር ንቁ { /*...*/ }
@ ንብርብር ማረም { /*...*/ }
እያንዳንዱ ሽፋን በትክክል ስለሚከማች, የትኞቹ ህጎች እንደሚያሸንፉ ሁልጊዜ ያውቃሉ. ያ መተንበይ ማረም ቀላል ብቻ ሳይሆን በትክክልም ሊታከም የሚችል ያደርገዋል። ችግሩን (የማይታይ, የተዘበራረቀ ግቤት) እና አቀራረቡን (በካስኬድ ንብርብሮች የተገነባ ምስላዊ አራሚ) ሸፍነናል. አሁን አራሚውን ለመገንባት የደረጃ-በ-ደረጃ ሂደቱን እንሄዳለን. የአራሚው ጽንሰ-ሐሳብ የተደበቀ ግቤት እንዲታይ ለማድረግ ቀላሉ መንገድ በስክሪኑ ላይ ብቻ መሳል ነው። ይህ አራሚ የሚያደርገው ያ ነው። አዝራሮች፣ ቀስቅሴዎች እና ጆይስቲክስ ሁሉም ምስላዊ ያገኛሉ።
A ን ይጫኑ፡ ክብ ያበራል። ዱላውን ይንቀጠቀጡ፡ ክበቡ ዙሪያውን ይንሸራተታል። ቀስቅሴን በግማሽ ይጎትቱ፡ አንድ ባር በግማሽ መንገድ ይሞላል።
አሁን 0s እና 1s ላይ እያፈጠህ አይደለም፣ ነገር ግን በትክክል ተቆጣጣሪው በቀጥታ ምላሽ ሲሰጥ እየተመለከትክ ነው። እርግጥ ነው፣ አንዴ እንደ ነባሪ፣ ተጭኖ፣ መረጃን ማረም፣ ምናልባትም የመቅጃ ሁነታን የመሳሰሉ ግዛቶች ላይ መቆለል ከጀመርክ CSS ትልቅ እና ውስብስብ እየሆነ መምጣት ይጀምራል። ለካስኬድ ንብርብሮች ምቹ የሆኑት እዚያ ነው። አንድ የተራቆተ ምሳሌ ይኸውና፡ @layer base { አዝራር { ዳራ፡ # 222; ድንበር-ራዲየስ: 50%; ስፋት: 40 ፒክስል; ቁመት: 40 ፒክስል; } }
@ንብርብር ንቁ { .አዝራር.ተጭኗል { ዳራ፡ # 0f0; /* ብሩህ አረንጓዴ } }
@ ንብርብር ማረም { አዝራር:: በኋላ { ይዘት: attr (ዳታ-እሴት); የቅርጸ-ቁምፊ መጠን: 12 ፒክስል; ቀለም፡ #fff; } }
የንብርብር ቅደም ተከተል አስፈላጊ ነው፡ ቤዝ → ገባሪ → ማረም።
ቤዝ መቆጣጠሪያውን ይስላል. ንቁ መያዣዎች ተጭነው ግዛቶች. ማረም በተደራቢዎች ላይ ይጥላል.
እንደዚህ ማፍረስ ማለት እንግዳ የሆኑ ልዩ ጦርነቶችን እየተዋጉ አይደለም ማለት ነው። እያንዳንዱ ሽፋን ቦታ አለው, እና ምን እንደሚያሸንፍ ሁልጊዜ ያውቃሉ. እሱን መገንባት መጀመሪያ በስክሪኑ ላይ የሆነ ነገር እናገኝ። ጥሩ መስሎ መታየት አያስፈልገውም - መኖር ብቻ ነው ስለዚህ የምንሰራው ነገር ይኖረናል።
የጨዋታ ሰሌዳ ካስኬድ አራሚ
ያ በትክክል ሳጥኖች ብቻ ናቸው። እስካሁን አስደሳች አይደለም፣ ነገር ግን በኋላ በCSS እና JavaScript ለመያዝ እጀታዎችን ይሰጠናል። እሺ፣ ተጨማሪ ግዛቶችን አንዴ ካከሉ በኋላ ነገሮችን እንዲደራጁ ስለሚያደርግ እዚህ ላይ የካስኬድ ንብርብሮችን እየተጠቀምኩ ነው። አንድ ሻካራ ማለፊያ ይኸውልህ፡
/* ===================================== ካስኬድ ንብርብሮች ማዋቀር የትዕዛዝ ጉዳዮች፡ ቤዝ → ገባሪ → ማረም =============================== */
/* የንብርብር ቅደም ተከተልን ከፊት ይግለጹ */ @layer base፣ ገባሪ፣ ማረም;
/* ንብርብር 1: የመሠረት ቅጦች - ነባሪ ገጽታ */ @layer base { አዝራር { ዳራ፡ # 333; ድንበር-ራዲየስ: 50%; ስፋት: 70 ፒክስል; ቁመት: 70 ፒክስል; ማሳያ፡ ተጣጣፊ; ይጸድቅ-ይዘት፡ ማእከል; አሰላለፍ-ንጥሎች: መሃል; }
ለአፍታ አቁም { ስፋት: 20 ፒክስል; ቁመት: 70 ፒክስል; ዳራ፡ # 333; ማሳያ: የመስመር ውስጥ-ብሎክ; } }
/* ንብርብር 2: ንቁ ግዛቶች - የተጫኑ አዝራሮችን ይይዛል */ @ንብርብር ንቁ { .አዝራር. ገቢር { ዳራ፡ # 0f0; /* ሲጫኑ ብሩህ አረንጓዴ */ መለወጥ: ልኬት (1.1); /* አዝራሩን በትንሹ ያሰፋዋል */ }
.አቁም. ገቢር { ዳራ፡ # 0f0; መለወጥ: ሚዛንY (1.1); /* ሲጫኑ በአቀባዊ ይዘረጋል */ } }
/* ንብርብር 3፡ ተደራቢዎችን ማረም - የገንቢ መረጃ */ @ ንብርብር ማረም { አዝራር:: በኋላ { ይዘት: attr (ዳታ-እሴት); /* የቁጥር እሴቱን ያሳያል */ የቅርጸ-ቁምፊ መጠን: 12 ፒክስል; ቀለም፡ #fff; } }
የዚህ አቀራረብ ውበት እያንዳንዱ ሽፋን ግልጽ ዓላማ አለው. የመሠረት ንብርብር ገባሪውን ፈጽሞ ሊሽረው አይችልም፣ እና ገባሪው ምንም ዓይነት ልዩነት ቢኖረውም ማረም ፈጽሞ ሊሽረው አይችልም። ይህ ብዙውን ጊዜ የማረም መሳሪያዎችን የሚያበላሹትን የሲኤስኤስ ልዩ ጦርነቶች ያስወግዳል። አሁን አንዳንድ ዘለላዎች በጨለማ ዳራ ላይ የተቀመጡ ይመስላል። እንደ እውነቱ ከሆነ, በጣም መጥፎ አይደለም.
ጃቫስክሪፕት በማከል ላይ ጃቫስክሪፕት ጊዜ። ተቆጣጣሪው በትክክል አንድ ነገር የሚያደርግበት ቦታ ይህ ነው። ይህንን ደረጃ በደረጃ እንገነባለን. ደረጃ 1 የስቴት አስተዳደርን ያዋቅሩ በመጀመሪያ፣ የአራሚውን ሁኔታ ለመከታተል ተለዋዋጮች ያስፈልጉናል፡ // =================================== // የስቴት አስተዳደር // ===================================
ይሩጥ = ውሸት; // አራሚው ንቁ መሆኑን ይከታተላል rafId ይሁን; // የመሰረዝ ጥያቄውን AnimationFrame መታወቂያ ያከማቻል
እነዚህ ተለዋዋጮች የጨዋታ ሰሌዳ ግቤትን ያለማቋረጥ የሚያነብ የአኒሜሽን loopን ይቆጣጠራሉ። ደረጃ 2፡ የDOM ማጣቀሻዎችን ይያዙ በመቀጠል፣ የምናዘምናቸውን ሁሉንም የኤችቲኤምኤል አካላት ማጣቀሻዎችን እናገኛለን፡- // =================================== // የዶም ኤለመንቶች ማጣቀሻዎች // ===================================
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 ሁኔታ = document.getElementById ("ሁኔታ");
እነዚህን ማጣቀሻዎች ፊት ለፊት ማከማቸት DOMን ደጋግሞ ከመጠየቅ የበለጠ ቀልጣፋ ነው። ደረጃ 3፡ የቁልፍ ሰሌዳ መመለሻን ያክሉ ያለ አካላዊ መቆጣጠሪያ ለሙከራ፣ የቁልፍ ሰሌዳ ቁልፎችን ወደ አዝራሮች ካርታ እናደርጋለን፡- // =================================== // የቁልፍ ሰሌዳ መውደቅ (ያለ መቆጣጠሪያ ለመሞከር) // ===================================
const ቁልፍ ካርታ = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' ቁልፍ ሁለቱንም ባለበት ማቆምን ይቆጣጠራል };
ይህ በቁልፍ ሰሌዳ ላይ ቁልፎችን በመጫን UI ን እንድንፈትሽ ያስችለናል። ደረጃ 4፡ ዋናውን የዝማኔ ዑደት ይፍጠሩ አስማት የሚከሰትበት ቦታ እዚህ አለ. ይህ ተግባር ያለማቋረጥ ይሰራል እና የጨዋታ ሰሌዳ ሁኔታን ያነባል፡- // =================================== // ዋና የጨዋታ ሰሌዳ ማሻሻያ ዑደት // ===================================
የተግባር ማሻሻያGamepad() { // ሁሉንም የተገናኙ የጨዋታ ሰሌዳዎችን ያግኙ const gamepads = navigator.getGamepads (); ከሆነ (! gamepads) ከተመለሰ;
// የመጀመሪያውን የተገናኘ የጨዋታ ሰሌዳ ይጠቀሙ const gp = gamepads [0];
ከሆነ (ጂፒ) { // "ገባሪ" ክፍልን በመቀያየር የአዝራር አዝራሮች ይገልፃል። btnA.classList.toggle("ገባሪ"፣ gp.buttons[0].ተጭኗል); btnB.classList.toggle ("ገባሪ", gp. አዝራሮች[1] ተጭኗል); btnX.classList.toggle ("ገባሪ", gp. አዝራሮች[2] ተጭኗል);
// ባለበት ማቆም ቁልፍን ይያዙ (በአብዛኛዎቹ ተቆጣጣሪዎች ላይ ያለው የመረጃ ጠቋሚ 9) const pausePressed = gp.buttons[9].ተጭኗል; pause1.classList.toggle ("ገባሪ", ባለበት ተጭኗል); pause2.classList.toggle("ገባሪ"፣ ለአፍታ ተጭኗል);
// ለሁኔታ ማሳያ በአሁኑ ጊዜ የተጫኑ አዝራሮች ዝርዝር ይገንቡ ተጫን = []; gp.buttons.forEach ((btn, i) => { ከሆነ (ቢቲኤን ተጭኖ)pressed.push ("አዝራር" + i); });
// ማናቸውንም አዝራሮች ከተጫኑ የሁኔታ ጽሑፍን ያዘምኑ ከሆነ (ተጭኗል.ርዝመት > 0) { status.textContent = "ተጭኗል:" + pressed.join(", "); } }
// አራሚ እየሄደ ከሆነ ምልክቱን ይቀጥሉ ከሆነ (የሚሮጥ) { rafId = ጥያቄ አኒሜሽን ፍሬም (የጨዋታ ደብተር አዘምን); } }
የ classList.toggle() ዘዴ አዝራሩ ተጭኖ እንደሆነ ላይ በመመስረት ንቁውን ክፍል ይጨምራል ወይም ያስወግዳል፣ይህም የእኛን የCSS ንብርብር ስልቶች ያስነሳል። ደረጃ 5፡ የቁልፍ ሰሌዳ ዝግጅቶችን ይያዙ እነዚህ የክስተት አድማጮች የቁልፍ ሰሌዳውን ወደ ኋላ እንዲመለሱ ያደርጉታል፡- // =================================== // የቁልፍ ሰሌዳ ክስተት ተቆጣጣሪዎች // ===================================
document.addEventListener("ቁልፍ አውርድ", (ሠ) => { ከሆነ (ቁልፍ ካርታ[e.key]) { // ነጠላ ወይም ብዙ አካላትን ይያዙ ከሆነ (Array.isArray (ቁልፍ ካርታ[e.key])) { keyMap[e.key].ለእያንዳንዱ (el=> el.classList.add("ገባሪ")); } ሌላ { keyMap[e.key].classList.add ("ገባሪ"); } status.textContent = "ቁልፍ ተጭኗል፡" + e.key.toUpperCase(); } });
document.addEventListener ("ቁልፍ", (ሠ) => { ከሆነ (ቁልፍ ካርታ[e.key]) { // ቁልፉ ሲወጣ ገባሪ ሁኔታን ያስወግዱ ከሆነ (Array.isArray (ቁልፍ ካርታ[e.key])) { keyMap[e.key].ለእያንዳንዱ (el=> el.classList.remove("ገባሪ")); } ሌላ { keyMap[e.key].classList.remove("ገባሪ"); } status.textContent = "ቁልፍ ተለቋል፡" + e.key.toUpperCase(); } });
ደረጃ 6፡ ጀምር/አቁም መቆጣጠሪያን ጨምር በመጨረሻም፣ አራሚውን ለማብራት እና ለማጥፋት መንገድ እንፈልጋለን። // =================================== // አራሚውን ቀይር/አጥፋ // ===================================
document.getElementById("መቀያየር").addEventListener("ጠቅ አድርግ"፣ () => { ሩጫ = !መሮጥ; // የአሂድ ሁኔታን ገልብጥ
ከሆነ (የሚሮጥ) { status.textContent = "አራሚ እየሄደ..."; ዝማኔGamepad (); // የዝማኔ ምልክቱን ይጀምሩ } ሌላ { status.textContent = "አራሚ እንቅስቃሴ-አልባ"; ሰርዝAnimationFrame(rafId); // ምልክቱን አቁም } });
ስለዚህ አዎ፣ አንድ ቁልፍ ተጫን እና ያበራል። ዱላውን ይግፉት እና ይንቀሳቀሳሉ. ያ ነው. አንድ ተጨማሪ ነገር: ጥሬ እሴቶች. አንዳንድ ጊዜ መብራቶችን ሳይሆን ቁጥሮችን ማየት ይፈልጋሉ።
በዚህ ደረጃ, የሚከተሉትን ማየት አለብዎት:
ቀላል የማያ ገጽ መቆጣጠሪያ ፣ ከእነሱ ጋር ሲገናኙ ምላሽ የሚሰጡ አዝራሮች፣ እና የተጫኑ የአዝራር ኢንዴክሶችን የሚያሳይ አማራጭ የስህተት ንባብ።
ይህን ያነሰ ረቂቅ ለማድረግ፣ በስክሪኑ ላይ ተቆጣጣሪው በቅጽበት ምላሽ የሚሰጥ ፈጣን ማሳያ ይኸውና፡
አሁን፣ ጀምር ቀረጻን በመጫን ቀረጻ አቁም እስኪመታ ድረስ ሁሉንም ነገር ይመዘግባል። 2. ውሂብ ወደ CSV/JSON በመላክ ላይ ምዝግብ ማስታወሻ ከያዝን በኋላ ማስቀመጥ እንፈልጋለን።
ደረጃ 1 የማውረድ አጋዥን ይፍጠሩ በመጀመሪያ፣ በአሳሹ ውስጥ የፋይል ማውረዶችን የሚቆጣጠር የረዳት ተግባር እንፈልጋለን። // =================================== // የማውረድ አጋዥ // ===================================
ተግባር ማውረድ ፋይል (የፋይል ስም ፣ ይዘት ፣ ዓይነት = "ጽሑፍ / ግልጽ") { // ከይዘቱ ነጠብጣብ ይፍጠሩ const blob = አዲስ Blob ([ይዘት]፣ {አይነት}); const url = URL.createObjectURL(blob);
// ጊዜያዊ የማውረድ አገናኝ ይፍጠሩ እና ጠቅ ያድርጉት const a = document.createElement ("a"); a.href = url; a.download = የፋይል ስም; a.click();
// ከወረዱ በኋላ የነገሩን URL አጽዳ setTimeout(() => URL.revokeObjectURL(url)፣ 100); }
ይህ ተግባር Blob (ሁለትዮሽ ትልቅ ነገር) ከውሂብዎ በመፍጠር ጊዜያዊ ዩአርኤል በማመንጨት እና በፕሮግራም የማውረጃ አገናኝን ጠቅ በማድረግ ይሰራል። ማጽዳቱ ማህደረ ትውስታን እንደማናፈስ ያረጋግጣል. ደረጃ 2፡ JSON ወደ ውጭ መላክን ተቆጣጠር JSON የተሟላውን የውሂብ መዋቅር ለመጠበቅ ፍጹም ነው፡-
// =================================== // እንደ JSON ይላኩ። // ===================================
document.getElementById("export-json").addEventListener("ጠቅ አድርግ"፣() => { // ወደ ውጭ የሚላከው ነገር ካለ ያረጋግጡ ከሆነ (! ፍሬሞች. ርዝመት) { console.warn ("ወደ ውጭ ለመላክ ምንም ቅጂ የለም"); መመለስ; }
// በሜታዳታ እና ክፈፎች የክፍያ ጭነት ይፍጠሩ የኮንስትራክሽን ጭነት = { የተፈጠረው፡ አዲስ ቀን() .toISOString() ክፈፎች };
// JSON እንደተቀረፀ ያውርዱ አውርድ ፋይል( "gamepad-log.json", JSON.stringify(ጭነት፣ ባዶ፣ 2)፣ "መተግበሪያ/json" ); });
የJSON ቅርጸት ሁሉንም ነገር የተዋቀረ እና በቀላሉ የሚተነተን ያቆያል፣ ይህም ወደ ዴቭ መሳሪያዎች መልሶ ለመጫን ወይም ከቡድን አጋሮች ጋር ለመጋራት ምቹ ያደርገዋል። ደረጃ 3፡ CSV ወደ ውጪ መላክን ተቆጣጠር ለCSV ወደ ውጭ መላክ፣ ተዋረዳዊ ውሂቡን ወደ ረድፎች እና አምዶች መደርደር አለብን፡
//=============================== // እንደ ሲኤስቪ ወደ ውጭ ላክ // ===================================
document.getElementById("export-csv").addEventListener("ጠቅ አድርግ"፣() => { // ወደ ውጭ የሚላከው ነገር ካለ ያረጋግጡ ከሆነ (! ፍሬሞች. ርዝመት) { console.warn ("ወደ ውጭ ለመላክ ምንም ቅጂ የለም"); መመለስ; }
// የCSV ራስጌ ረድፍ ይገንቡ (አምዶች ለጊዜ ማህተም፣ ሁሉም አዝራሮች፣ ሁሉም መጥረቢያዎች) const header አዝራሮች = ፍሬሞች[0]።buttons.map((_, i) => btn${i}); const headerAxes = ፍሬሞች[0].axes.map((_, i) => ዘንግ${i}); const header = ["t", ...headerbuttons, ...headerAxes].መቀላቀል(",") + "\n";
// የCSV ውሂብ ረድፎችን ይገንቡ const ረድፎች = frames.map(f => { const btnVals = f.buttons.map(b => b.value); መመለስ [f.t, ...btnVals, ...f.axes].መቀላቀል(","); }) ይቀላቀሉ ("\n");
// እንደ CSV አውርድ አውርድ ፋይል ("gamepad-log.csv", አርዕስት + ረድፎች, "ጽሑፍ / csv"); });
CSV ለውሂብ ትንተና ጎበዝ ነው ምክንያቱም በቀጥታ በ Excel ወይም Google Sheets ውስጥ ይከፈታል፣ ይህም ገበታዎችን እንዲፈጥሩ፣ ውሂብ እንዲያጣሩ ወይም በእይታ እንዲታዩ ያስችልዎታል። አሁን ወደ ውጭ የሚላኩ አዝራሮች እንደገቡ፣ በፓነሉ ላይ ሁለት አዳዲስ አማራጮችን ታያለህ፡ JSON ወደ ውጪ ላክ እና CSV ወደ ውጪ ላክ። ጥሬ ምዝግብ ማስታወሻውን ወደ የዴቭ መሳሪያዎችዎ መልሰው ለመጣል ወይም መዋቅሩን ለመንጠቅ ከፈለጉ JSON ጥሩ ነው። በሌላ በኩል CSV በቀጥታ ወደ ኤክሴል ወይም ጎግል ሉሆች ይከፈታል ስለዚህ ግብዓቶችን ቻርት ማድረግ፣ ማጣራት ወይም ማወዳደር ይችላሉ። የሚከተለው ምስል ፓነሉ ከእነዚያ ተጨማሪ መቆጣጠሪያዎች ጋር ምን እንደሚመስል ያሳያል።
3. ቅጽበታዊ ገጽ እይታ ስርዓት አንዳንድ ጊዜ ሙሉ ቀረጻ አያስፈልግዎትም፣ የግቤት ግዛቶች ፈጣን “ቅጽበታዊ ገጽ እይታ” ብቻ። ቅጽበታዊ ገጽ እይታ ቁልፍ የሚያግዝበት ቦታ ነው።
እና ጃቫ ስክሪፕት፡-
// =================================== // ቅጽበታዊ ገጽ እይታን ያንሱ // ===================================
document.getElementById("snapshot")።addEventListener("ጠቅ አድርግ"፣() => { // ሁሉንም የተገናኙ የጨዋታ ሰሌዳዎችን ያግኙ const pads = navigator.getGamepads (); const activePads = [];
// ይመልከቱ እና የእያንዳንዱን የተገናኘ የጨዋታ ሰሌዳ ሁኔታ ይያዙ ለ (const gp of pads) { (!gp) ከቀጠለ; // ባዶ ቦታዎችን ዝለል
አክቲቭ ፓድ.ፑሽ ({ መታወቂያ: gp.id, // የመቆጣጠሪያ ስም/ሞዴል የጊዜ ማህተም፡ performance.now()፣ አዝራሮች፡ gp.buttons.map(b => ({ ተጭኖ፡ b. ተጭኖ፣ ዋጋ፡ b.እሴት })) መጥረቢያ: [...gp.axes] }); }
// ማንኛውም የጨዋታ ሰሌዳዎች መገኘታቸውን ያረጋግጡ ከሆነ (!activePads.ርዝመት) { console.warn ("ምንም የጨዋታ ሰሌዳዎች ለቅጽበታዊ ገጽ እይታ አልተገናኙም."); ማንቂያ ("ተቆጣጣሪ አልተገኘም!"); መመለስ; }
// ይመዝገቡ እና ተጠቃሚውን ያሳውቁ console.log ("Snapshot:", activePads); ማንቂያ (ቅጽበተ-ፎቶ ተነስቷል! ${activePads.length} መቆጣጠሪያ(ዎች) ተይዟል); });
ቅጽበተ-ፎቶዎች የመቆጣጠሪያዎን ትክክለኛ ሁኔታ በአንድ ጊዜ ያቀዘቅዙታል። 4. የመንፈስ ግቤት ድጋሚ አጫውት። አሁን ለአዝናኙ፡ ghost ግብዓት ድጋሚ አጫውት። ይህ ሎግ ወስዶ የፋንተም ማጫወቻ መቆጣጠሪያውን እንደሚጠቀም በምስል መልሶ ያጫውታል።
ጃቫ ስክሪፕት ለመድገም፦ // =================================== // GHOST ድጋሚ አጫውት። // ===================================
document.getElementById("እንደገና አጫውት")።addEventListener("ጠቅ አድርግ"፣() => { // ለመድገም ቀረጻ እንዳለን ያረጋግጡ ከሆነ (! ፍሬሞች. ርዝመት) { ማንቂያ ("ለመድገም ምንም ቀረጻ የለም!"); መመለስ; }
console.log ("የ ghost ድጋሚ ማጫወት ጀምር...");
// ለተመሳሰለ መልሶ ማጫወት ጊዜን ይከታተሉ እንጀምር startTime = አፈጻጸም.አሁን (); ፍሬም ኢንዴክስ = 0 ይሁን;
// የአኒሜሽን loopን እንደገና አጫውት። የተግባር ደረጃ() { const now = performance.now (); const ያለፈበት = አሁን - startTime;
// አሁን መከሰት የነበረባቸውን ሁሉንም ክፈፎች ያስኬዱ ሳለ (ፍሬም ኢንዴክስ < ፍሬሞች. ርዝመት እና ፍሬሞች[frameIndex]። t <= አልፏል) { const ፍሬም = ፍሬሞች[frameIndex];
// በተቀዳው የአዝራር ሁኔታ UI ያዘምኑ btnA.classList.toggle ("ገባሪ", ፍሬም.አዝራሮች [0] ተጭኗል); btnB.classList.toggle ("ገባሪ", ፍሬም.አዝራሮች [1] ተጭኗል); btnX.classList.toggle ("ገባሪ", ፍሬም.አዝራሮች [2] ተጭኗል);
// የዝማኔ ሁኔታ ማሳያ ተጫን = []; frame.buttons.forEach((btn, i) => { (btn.pressed) ተጭኖ ከሆነ.push ("አዝራር" + i); }); ከሆነ (ተጭኗል.ርዝመት > 0) { status.textContent = "Ghost:" + pressed.join(", "); }
ፍሬም ኢንዴክስ ++; }
// ተጨማሪ ክፈፎች ካሉ ምልክቱን ይቀጥሉ ከሆነ (frameIndex < frames.length) { ጥያቄ አኒሜሽን ፍሬም (ደረጃ); } ሌላ { console.log ("እንደገና አጫውት።ተጠናቅቋል."); status.textContent = "እንደገና ማጫወት ተጠናቋል"; } }
// እንደገና ማጫወት ይጀምሩ ደረጃ (); });
ማረምን ትንሽ ተጨማሪ እጅ ላይ ለማድረግ፣ የ ghost ድጋሚ አጫውት ጨምሬያለሁ። አንድ ክፍለ ጊዜ ከቀረጹ በኋላ፣ ድጋሚ አጫውትን በመምታት ዩአይ ሲሰራ መመልከት ትችላለህ፣ ልክ እንደ ፋንተም ተጫዋች ንጣፉን እያሄደ ነው። ለዚህ አዲስ አጫውት Ghost አዝራር በፓነሉ ውስጥ ይታያል።
ሪከርድን ይምቱ፣ ከተቆጣጣሪው ጋር ትንሽ ያበላሹ፣ ያቁሙ እና ከዚያ እንደገና ያጫውቱ። UI ልክ የእርስዎን ግብዓቶች እንደሚከተል መንፈስ ያለ እርስዎ ያደረጉትን ሁሉ ያስተጋባል። በእነዚህ ተጨማሪ ነገሮች ለምን ትጨነቃለህ?
መቅዳት/መላክ ለሞካሪዎች በትክክል የሆነውን ነገር እንዲያሳዩ ቀላል ያደርገዋል። ቅጽበታዊ ገጽ እይታዎች በጊዜ ውስጥ ይቀዘቅዛሉ፣ ያልተለመዱ ስህተቶችን ሲያሳድዱ በጣም ጠቃሚ። Ghost ድጋሚ ማጫወት ለመማሪያዎች፣ የተደራሽነት ፍተሻዎች ወይም የቁጥጥር ውቅሮችን ጎን ለጎን ለማነፃፀር ጥሩ ነው።
በዚህ ነጥብ ላይ፣ ከአሁን በኋላ ንፁህ ማሳያ ብቻ አይደለም፣ ነገር ግን እርስዎ በትክክል ወደ ስራ ሊገቡበት የሚችሉት ነገር ነው። የእውነተኛ ዓለም አጠቃቀም ጉዳዮች አሁን ብዙ ሊሠራ የሚችል ይህ አራሚ አግኝተናል። የቀጥታ ግብአትን ያሳያል፣ ምዝግብ ማስታወሻዎችን ይመዘግባል፣ ወደ ውጭ ይልካቸዋል፣ እና ነገሮችንም ይደግማል። ትክክለኛው ጥያቄ ግን ማን ነው የሚመለከተው? ይህ ለማን ይጠቅማል? የጨዋታ ገንቢዎች ተቆጣጣሪዎች የስራው አካል ናቸው፣ ግን እነሱን ማረም? ብዙውን ጊዜ ህመም. እንደ ↓ →+ ቡጢ ያለ የውጊያ ጨዋታ ጥምረት እየሞከርክ እንደሆነ አስብ። ከመጸለይ ይልቅ, በተመሳሳይ መንገድ ሁለት ጊዜ ተጭነው, አንድ ጊዜ ይቅዱት እና እንደገና ያጫውቱት. ተከናውኗል። ወይም የአንተ ባለብዙ ተጫዋች ኮድ በማሽኑ ላይ ተመሳሳይ ምላሽ መሰጠቱን ለማረጋገጥ የJSON ምዝግብ ማስታወሻዎችን ከቡድን ጓደኛህ ጋር ትለዋወጣለህ። ያ ትልቅ ነው። የተደራሽነት ባለሙያዎች ይህ ወደ ልቤ ቅርብ ነው። ሁሉም ሰው በ "መደበኛ" መቆጣጠሪያ አይጫወትም. አስማሚ ተቆጣጣሪዎች አንዳንድ ጊዜ ያልተለመዱ ምልክቶችን ይጥላሉ። በዚህ መሣሪያ አማካኝነት ምን እየተፈጠረ እንዳለ በትክክል ማየት ይችላሉ. አስተማሪዎች ፣ ተመራማሪዎች ፣ ማንም። ምዝግብ ማስታወሻዎችን መያዝ፣ ማወዳደር ወይም ግብዓቶችን ጎን ለጎን ማጫወት ይችላሉ። በድንገት, የማይታዩ ነገሮች ግልጽ ይሆናሉ. የጥራት ማረጋገጫ ሙከራ ሞካሪዎች ብዙውን ጊዜ እንደ “እዚህ እዚህ ቁልፎችን ፈጭቻለሁ እና ተሰበረ” ያሉ ማስታወሻዎችን ይጽፋሉ። በጣም አጋዥ አይደለም. አሁን? ትክክለኛውን ማተሚያዎች ይይዛሉ, ምዝግብ ማስታወሻውን ወደ ውጭ መላክ እና መላክ ይችላሉ. መገመት የለም። አስተማሪዎች አጋዥ ስልጠናዎችን ወይም የዩቲዩብ ቪዲዮዎችን እየሰሩ ከሆነ፣ ghost replay ወርቅ ነው። በጥሬው “ከተቆጣጣሪው ጋር ያደረግኩት ነገር ይኸውና” ማለት ይችላሉ፣ ዩአይ ግን መከሰቱን ያሳያል። ማብራሪያዎችን ይበልጥ ግልጽ ያደርገዋል። ከጨዋታዎች ባሻገር እና አዎ, ይህ ስለ ጨዋታዎች ብቻ አይደለም. ሰዎች ለሮቦቶች፣ ለሥነ ጥበብ ፕሮጀክቶች እና ለተደራሽነት መገናኛዎች መቆጣጠሪያዎችን ተጠቅመዋል። በእያንዳንዱ ጊዜ ተመሳሳይ ችግር: አሳሹ በእውነቱ ምን እያየ ነው? ከዚህ ጋር, መገመት የለብዎትም. ማጠቃለያ የመቆጣጠሪያ ግቤትን ማረም ሁልጊዜ እንደ ዓይነ ስውር ሆኖ ይሰማዋል። ከDOM ወይም CSS በተለየ ለጨዋታ ሰሌዳዎች አብሮ የተሰራ መርማሪ የለም፤ በኮንሶል ውስጥ ጥሬ ቁጥሮች ብቻ ነው, በቀላሉ በድምፅ ውስጥ ይጠፋል. በጥቂት መቶ መስመሮች HTML፣ CSS እና JavaScript፣ የተለየ ነገር ገንብተናል፡-
የማይታዩ ግብዓቶችን እንዲታዩ የሚያደርግ ምስላዊ አራሚ። UI ንፁህ እና ሊታረም የሚችል የሚይዝ የተነባበረ CSS ስርዓት። ከማሳያ ወደ ገንቢ መሣሪያ ከፍ የሚያደርጉት የማሻሻያ ስብስብ (መቅዳት፣ ወደ ውጭ መላክ፣ ቅጽበተ-ፎቶዎች፣ ghost ደግመህ)።
ይህ ፕሮጀክት የዌብ ፕላትፎርምን ሃይል ከትንሽ ፈጠራ ጋር በCSS Cascade Layers በማቀላቀል ምን ያህል መሄድ እንደሚችሉ ያሳያል። ሙሉ ለሙሉ ያብራራሁት መሳሪያ ክፍት ምንጭ ነው። የ GitHub repoን መዝጋት እና ለራስዎ መሞከር ይችላሉ። ግን ከሁሉም በላይ, እርስዎ የእራስዎ ማድረግ ይችላሉ. የራስዎን ንብርብሮች ያክሉ። የራስዎን የመልሶ ማጫወት አመክንዮ ይገንቡ። ከእርስዎ የጨዋታ ፕሮቶታይፕ ጋር ያዋህዱት። ወይም ደግሞ ባላሰብኩት መንገድ ተጠቀምበት። ለማስተማር፣ ተደራሽነት ወይም የውሂብ ትንተና። በቀኑ መጨረሻ, ይህ የጨዋታ ሰሌዳዎችን ማረም ብቻ አይደለም. እሱ በተደበቁ ግብዓቶች ላይ ብርሃን ማብራት እና ለገንቢዎች ድሩ አሁንም ሙሉ በሙሉ የማይቀበለው ሃርድዌር እንዲሰሩ በራስ መተማመንን መስጠት ነው። ስለዚህ መቆጣጠሪያዎን ይሰኩ፣ አርታዒዎን ይክፈቱ እና ሙከራ ያድርጉ። የእርስዎ አሳሽ እና የእርስዎ CSS በእውነት ምን ማከናወን እንደሚችሉ ሲመለከቱ ትገረሙ ይሆናል።
