Browsed by
קטגוריה: Web

Konami Code

Konami Code

"קוד קונמי" (Konami Code) הוא ככל הנראה ה"צ'יט" (cheat) המפורסם ביותר בעולם משחקי המחשב.

מדובר על צירוף המקשים: למעלה-למעלה-למטה-למטה-שמאל-ימין-שמאל-ימין-האות B-האות A.

כלומר (משמאל לימין):

BA

קוד קונאמי הומצא עבור משחקי ניטנדו, אלו הכפתורים שיש ב- controller. אבל גם כיום הקוד עדיין שימושי.

אתרים רבים משתמשים ברצף הפעולות של קוד קונאמי כ- Easter Egg – הפעלה שלו תגרום למשהו לא צפוי באתר (נסו את Buzzfeed או את Digg. ויש דוגמאות נוספות)

קוד

זה הכל טוב ויפה, אבל איך עושים את זה?

אז ככה.

const pressed = [];
const secretCode = 'ArrowUpArrowUpArrowDownArrowDownArrowLeftArrowRightArrowLeftArrowRightBA';
const KonamiCodeLength = 10;

ניצור מערך בו נשמור את עשרת המקשים האחרונים שהוקשו, ובכל פעם נבדוק האם הרצף נכון:

window.addEventListener('keyup', function(e) {
  console.log(e.key);
  pressed.push(e.key);
  pressed.splice(-KonamiCodeLength - 1, pressed.length - KonamiCodeLength);
  if (pressed.join('').includes(secretCode)) {
    console.log('Hooray');
    cornify_add();
  }
});

כאשר הרצף הוא אכן ״קוד קונאמי״, נפעיל את ה- Easter Egg. למשל להוסיף חדי קרן לעמוד. בשביל זה צריך גם את הסקריפט:

<script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>

עד כאן הכל פשוט, זה סקריפט שמופיע באינטרנט בהמון וריאציות. אבל… אני רוצה להוסיף גם תמיכה במובייל. אני אוותר על המקשים B ו- A – נזהה רצף של 8 swipes בכיוונים שונים.

השיטה תהיה זהה לזו של זיהוי רצף מקשים, רק צריך להוסיף דרך לזהות כל פעם swipe. נאזין ל- touchstart ול- touchend: בתחילת התנועה נשמור את הקואורדינטות, ובסיום נראה איפה הקוארדינטות ביחס להתחלה. בצורה כזו נדע באיזה כיוון מדובר.

const gestures = [];
const gesturesCode = "uuddlrlr";
var lastX, lastY;
window.addEventListener('touchstart', function(e) {
  lastX = e.pageX;lastY = e.pageY;
}, false);
window.addEventListener('touchend', function(e) {
  if (e.pageY - 100 &gt; lastY) {
    console.log("down");
    gestures.push("d");
  }
  if (e.pageY + 100 &lt; lastY) { console.log("up"); gestures.push("u"); } if (e.pageX - 100 &gt; lastX) {
    console.log("right");
    gestures.push("r");
  }
  if (e.pageX + 100 &lt; lastX) {
    console.log("left");
    gestures.push("l");
  }
  gestures.splice(-gesturesCode.length - 1, gestures.length - gesturesCode.length);
  console.log(gestures);
  if (gestures.join('').includes(gesturesCode)) {
    console.log('Hooray');
    cornify_add();
  }
}, false);

 

מה הצבע של צ׳אק נוריס

מה הצבע של צ׳אק נוריס

(הרקע לפוסט הוא השאלה הזו ב- StackOverflow)

כדי להגדיר צבע רקע לאלמנט html לא באמצעות css (דבר שכבר לא אמורים לעשות) – משתמשים ב- attribute בשם "bgcolor".

לדוגמא, הקוד הזה:

<table>
	<tr>
		<td bgcolor="#ff0000">Red TD</td>
	</tr>
</table>

יראה כך:

Red TD

הגדרנו את הצבע האדום בהקסדצימל "ff0000" – שלושה בייטים שמציינים ערכי RGB, כל ערך בטווח 0 – 255, כלומר בין ׳00׳ ל- ׳ff׳.

אבל מה יקרה כאשר במקום ערך הקסדצימלי או שם הצבע…נשים טקסט?

הנה כמה דוגמאות לערכי bgColor:

<table>
	<tr>
		<td bgcolor="chucknorris">chuck norris</td>
		<td bgcolor="mrt">Mr T</td>
		<td bgcolor="ninjaturtle">ninjaturtle</td>
	</tr>
	<tr>
		<td bgcolor="cheese">cheese</td>
		<td bgcolor="crap">crap</td>
		<td bgcolor="fish">fish</td>
	</tr>
	<tr>
		<td bgcolor="cloudy">cloudy</td>
		<td bgcolor="superman">superman</td>
		<td bgcolor="grass">grass</td>
	</tr>
</table>

וככה זה נראה:

chuck norris Mr T ninjaturtle
cheese crap fish
cloudy superman grass

(אם אתם רוצים לבדוק לאיזה צבע אתם הופכים, נסו את ה- JsBin הזה)

אז למה זה קורה?

הדפדפן מקבל מילה בתור bgColor, לדוגמא "ChuckNorris". הוא בודק האם זה אחד מהצבעים ששמורים אצלו (כמו "red"  או "blue"). זה לא. הלאה.

עכשיו הוא מניח שיש כאן ערך הקסדצימלי. כלומר רק 0-9 או A-F מעניינים אותו. כל תו אחר יוחלף מיידית ב- '0'. מה שאומר שאם נכתוב מילה שכולה אותיות אחרי F, הצבע תמיד יהיה שחור (כמו #000).

ניקח את "chucknorris". זה יוחלף להקסדצימלי – "c00c0000000". מכיוון שזה רק 11 תווים, יתווסף padding של 0 אחד מימין, כי אנחנו צריכים מספר תווים שמתלק בשלוש – c00c00000000. זה מתפצל לשלושת ערכי RGB:

c00c 0000 0000

 צריך רק שני תווים עבור כל צבע, לכן רק שני התווים השמאליים ישארו. כלומר:

c0 00 00

לסיכום, הצבע "chucknorris" הוא – 192 צבע אדום, ו- 0 ירוק וכחול.