בפעילות הזאת נסביר איך להכניס קוד קונאמי לקוד בג׳וואה סקריפט.
אנחנו נגדיר תבנית (שהיא בעצם הצ׳יט) וכאשר מקלידים אותה תופיעה התראה עם הודעה בחלון
מבנה של אתר שאפשר להתחיל ממנו ולהוסיף לו
https://codepen.io/douek/pen/BappLyj?editors=0010
בתחתית המסך יש אפשרות לשכפל למשתמש שלך
תופיע התראה כאשר מקישים למעלה למעלה למטה למטה שמאל ימין שמאל ימין a b
הקוד צריך להכתב בsection של הjavascript בקודפן.
בקוד פן המצורף קיבלתן קוד שמגדיר משתנים, הגדרה של פונקציה ועוד קריאה לפונקציה. אנחנו תכף נראה מה צריך להכנס בכל חלק
שימו לב להערות בעברית והעזרו בהן להבין מה הקוד שלנו עושה ואיפה לשים אותו
// הגדרה של משתנים
// התבנית של הקוד שאנחנו רוצות
const pattern = [];
// משתנה שיעזור לנו לעקוב אחרי התקדמות בהקלדת הקוד
let current;
// הפונקציה שתרוץ ברגע שמקש ילחץ
const keyHandler = function (event) {
// בדיקה האם המקש שנלחץ הוא המקש הבא בתבנית
if () {
// טיפול במקש נכון
} else {
// טיפול עם המקש שנלחץ הוא המקש הלא נכון
}
// בדיקה האם כל התבנית הסתיימה
if () {
// הצגת הודעה ואיפוס
}
};
// הקשבה לאירוע לחיצת כפתור והגדרת הפונקציה שתרוץ ברגע שזה יקרה
document.addEventListener(); המשתנה הראשון הוא בעצם התבנית וזה המקשים שיקושו שיגרמו להתראה
כאן בדוגמה זה קונאמי הקלאסי אבל אתן יכולות לתת איזו תבנית של אותיות שאתן רוצות - באנגלית
const pattern = ["ArrowUp", "ArrowUp","ArrowDown","ArrowDown","ArrowLeft","ArrowRight","ArrowLeft","ArrowRight","b", "a"]; המשתנה השני הוא מספר מעקב שעוזר לנו לעקוב באיזה שלב בתבנית אנחנו נמצאות (בתו הראשון, בתו השני וכו׳)
let current = 0; הפונקציה מקבלת פרמטר בשם event
הפרמטר בעצם מכיל פרטים על האירוע שקרה - במקרה הזה לחיצת כפתור ובעזרתו נדע איזה כפתור נלחץ
// הפונקציה שתרוץ ברגע שמקש ילחץ
const keyHandler = function (event) {
}; אנחנו נבדוק האם המקש שנלחץ הוא שווה למקש בתבנית
// הפונקציה שתרוץ ברגע שמקש ילחץ
const keyHandler = function (event) {
// בדיקה האם המקש שנלחץ הוא המקש הבא בתבנית
if (event.key === pattern[current]) {
}
}; ובמידה והוא נכון נקדם את המספר מעקב שלנו בפלוס אחד כדי שבמקש הבא נבדוק אותו מול המקש הבא בתבנית
// הפונקציה שתרוץ ברגע שמקש ילחץ
const keyHandler = function (event) {
// בדיקה האם המקש שנלחץ הוא המקש הבא בתבנית
if (event.key === pattern[current]) {
// טיפול במקש נכון
current++;
}
}; במידה והמקש הוא לא נכון נחזיר את המעקב ל0
// הפונקציה שתרוץ ברגע שמקש ילחץ
const keyHandler = function (event) {
// בדיקה האם המקש שנלחץ הוא המקש הבא בתבנית
if (event.key === pattern[current]) {
// טיפול במקש נכון
current++;
} else {
// טיפול עם המקש שנלחץ הוא המקש הלא נכון
current = 0;
}
}; הצלחה היא כאשר מספר התווים הנכונים שהוקלדו שווים ערך לגודל התבנית
// הפונקציה שתרוץ ברגע שמקש ילחץ
const keyHandler = function (event) {
// בדיקה האם המקש שנלחץ הוא המקש הבא בתבנית
if (event.key === pattern[current]) {
// טיפול במקש נכון
current++;
} else {
// טיפול עם המקש שנלחץ הוא המקש הלא נכון
current = 0;
}
// בדיקה האם כל התבנית הסתיימה
if (pattern.length === current) {
}
}; במידה והצלחנו נציג התראה למשתמש
window זה החלון של הדפדפן ושאפשר להפעיל פעולות עליו
אפשר לשים איזה טקסט שאנחנו רוצות בהתראה שקופצת
ונאפס את המעקב כדי לאפשר התחלה מחדש של התבנית
// הפונקציה שתרוץ ברגע שמקש ילחץ
const keyHandler = function (event) {
// בדיקה האם המקש שנלחץ הוא המקש הבא בתבנית
if (event.key === pattern[current]) {
// טיפול במקש נכון
current++;
} else {
// טיפול עם המקש שנלחץ הוא המקש הלא נכון
current = 0;
}
// בדיקה האם כל התבנית הסתיימה
if (pattern.length === current) {
// הצגת הודעה ואיפוס
current = 0;
window.alert("You found it!");
}
}; והדבר האחרון שנשאר לעשות הוא לרשום את הפונקציה לאירוע של לחיצת מקש
אירועים(Events) אלו פעולות או התרחשויות אשר קורות במערכת שאנחנו מתכנתים בה, והמערכת אומרת לנו בדרך מסויימת על ההתרחשות שלהם, כך שאנחנו יכולים להגיב להתרחשות של האירוע המסויים בדרך מסויימת שנרצה. לדוגמא אם משתמש לחץ על כפתור באתר, אולי נרצה בתגובה לטפל באירוע הלחיצה הזה על ידי הצגת הודעה כלשהי.
document.addEventListener("keydown", keyHandler, false);- חסרה נקודה פסיק או סוגריים איפשהו
- אם הסמן הוא על הקוד אז זה לא יעבוד - צריך ללחוץ על החלק הירוק ואז לנסות את התבנית
- המקלדת כרגע על עברית ולכן אותיות שתבנית לא נספרות (צריך לשנות את המקלדת לאנגלית)
מקור (אנגלית) עבר התאמות בשביל הפעילות
דוגמה של הקוד רץ