על ידי בניית פרויקטי המשחק המהנים האלה, אתה יכול להפוך את התכנות לפחות מייגע וגם לחדד את הכישורים שלך באותו הזמן.
העובדה ש-98.4% מכל אתרי האינטרנט משתמשים ב-JavaScript היא הסיבה שאתה צריך לדעת זאת כמפתח. בדיעבד, יצירת משחק עם JavaScript לא רק עוזרת לך ללמוד מהר. זה גם מאפשר לך לשלוט כיצד ליישם את המושגים הפשוטים שלו על מורכבים במצבים שונים בעבודה - בין אם אתה מתחיל או מרענן.
אם אתה לומד טוב יותר עם הדגמות חזותיות, מדריכי המשחק המבוססים על JavaScript ב-YouTube שווים את הזמן שלך.
1. משחק קלפים עם JavaScript
משחק קלפי JavaScript זה עם Gavin Lon מראה לך את הדרך בהיפוך כרטיסים עם למעלה מ-600 שורות של קוד JavaScript. בעוד שהמיקוד העיקרי הוא ללמד JavaScript, תלמד גם לשלב את כוח העיצוב של CSS עם מבנה ה-DOM של HTML כדי להשיג תגובה עם JavaScript.
המטרה הסופית של הפרויקט היא להפוך כמה קלפים, והשחקן מנחש את האס כשהקלפים סוף סוף מחליפים מקומות. כל קלף הוא תמונה של ארבעה תפקידי קלפים שונים. אז אמנם לא תעצבו את הקלפים בעצמכם, אבל תלמדו לתפעל את המיקומים שלהם בתגובה, להגדיל את סיבובי המשחק, להוסיף או להסיר ציונים כשהרמות משתנות, ולאחסן את תוצאות המשחק ב-
האחסון המקומי של הדפדפן- הכל באמצעות JavaScript.המדריך הוא צעד וקל לביצוע למרות ההרמה הכבדה שתבצע מאחורי הקלעים. זה מושלם למתחילים ולמתרעננים. למרות שמדובר בבניית משחק קלפים, הוא חושף אותך לרוב טכניקות החיווט של JavaScript במצבים אמיתיים. בנוסף, זה מפרק את יכולת החשיבה שלך.
2. משחק 2D Breakout עם JavaScript
אם אתה רוצה ללמוד לשלוט במרווחי פעולה ולהזיז רכיבי DOM באופן דינמי באמצעות JavaScript, אניה קובו מראה כמה כיף זה נעשה עם הדרכה זו למשחק פריצה באמצעות JavaScript. כמו יתרון, הסרטון גם מדגים כיצד לארח ולהציג את הפרויקט שלך בפני מעסיקים פוטנציאליים.
חשבו על כל אפשרות במשחק פריצה; פלטפורמה נעה עם כדור שפוגע בקירות באופן משיק כדי לשבור לבנים מעליה. וגם בזה תקודד את מערכת התגמולים. בסך הכל, כדאי לשקול את המדריך הזה למשחק פריצה אם ברצונך לבנות משהו מהיסוד מבלי להשתמש בסוכני צד שלישי או בתמונות מקור.
תוך כדי חיווט ההיגיון שלך בתוך פונקציות, הסרטון מלמד יותר על מושגי כיתה ואובייקט של JavaScript בשלבים פשוטים, כולל שיטות עבודה מומלצות להצהרה מותנית כמו מקרה המתג.
3. משחק נחש JavaScript
פתור את הנוסטלגיה של המשחק Snake II של Nokia 3310 שלך על ידי בניית משחק נחש JavaScript זה עם Kyle. סביר להניח ששיחקת את זה בעבר וסביר להניח שתשחק את זה עוד הרבה פעמים במהלך החיים מכיוון שתקודד אחד באמצעות וניל JavaScript.
בעודך מלמד אותך לחבר את ה-DOM באופן דינמי, סרטון זה מדגים כיצד אתה יכול לבנות ולהשתמש במודולים מותאמים אישית ב-JavaScript. אז זה פותח לך הזדמנות ללמוד על הפרדת חששות באמצעות עקרון אל תחזור על עצמך (DRY).
מאחורי הקלעים, תשלוט במושגי JavaScript מתקדמים יותר. משימות, כולל יצירת רשת שחקן, מיקום מזון, בניית גוף הנחש, הארכת הנחש, קידוד היגיון ניווט, יצירת ערכת פרס ועונשים ושליטה במהירות הנחש, יחשפו אותך לליבה JavaScript.
4. משחק טיק טק עם JavaScript
אולי משחק הטיק טק שלך מתחדד כשאתה בונה אחד עם JavaScript בסרטון אחר עם קייל. זה פשוט אבל בעל ערך פרויקט למתחילים JavaScript ללגום כפי שתפתור בעיות מורכבות.
הסרטון לא מסתיים ב-JavaScript בלבד. זה גם מדגים כיצד לאחוז בעיצוב ממשק המשתמש שלך באמצעות CSS. עם עקביות ומחויבות, תוכל ללמוד כמעט כל טכניקה הדרושה כדי להתחיל את מסע פיתוח האינטרנט שלך בסרטון זה.
תוך כדי מניפולציה של ה-DOM עם JavaScript, הסרטון עוטף את המשימות הכבדות סביב החלטות ניצחון והגרלה קידוד, החלטה על תור השחקנים ויישור אובייקטים. פונקציות, לולאות ותנאים של JavaScript הם חלק מהמושגים המתקדמים שתלמד בסרטון ההדרכה הזה של JavaScript Tic tac Toe.
5. משחק פאזל שקופיות עם JavaScript
פאזלים יכולים להיות משימות מחשבה. אבל לבנות אחד עם וניל JavaScript נשמע כמו דרך מהנה לחקור את היצירתיות שלך וללמוד מושגי JavaScript בסיסיים עד מורכבים.
אתה רוצה לקוד יחד במדריך זה - אם אתה רוצה לראות כיצד להשתמש במושגי JavaScript, כולל מתגים מותנים ומניפולציה דינמית של מיקום DOM באמצעות פונקציות מותאמות אישית ומובנות.
למרות שהמורה מציב את ה-JavaScript בתוך תגית סקריפט בקובץ ה-HTML, אתה יכול לסובב את הסקריפט שלך בקובץ JavaScript ייעודי ולקשר אותו ל-DOM במקרה שלך לבירור. בלי קשר, עדיף להתמקד בלוגיקה הליבה ובתהליך החשיבה כדי להשיג את המטרה שלך, כולל איך ליישם את מה שאתה לומד כאן על תרחישים אמיתיים יותר.
6. משחק מירוצי מכוניות עם JavaScript
בניית משחק מרוצי מכוניות באמצעות וניל JavaScript עשויה שלא לתת את הפלט הגרפי הטוב ביותר. אבל חיווט של משחק מירוץ מכוניות עובד תוך כדי הדרכה זו ילמד אותך למנף את הכוח המעניק פונקציונליות של JavaScript בכל יישום.
הדרכה זו כוללת הצבת שתי מכוניות (אדום וכחול) על מסלול מרוצים. המכונית הכחולה מופיעה באקראי מכל כיוון, והרכב האדום, המייצג את השחקן, מנסה להימנע מהתנגשות. המשחק מסתיים ברגע שיש מגע בין שתי המכוניות.
למרות שזהו תיאור פשוט של מה שתבנה בקובץ הזה, תלמד קצת לוגיקה מתקדמת של JavaScript עבור מניפולציה וסגנון DOM. תקבל גם תובנות לגבי מפעילי JavaScript תוך יצירת תגמולים ועונשים לשחקן.
בזמן הוספת פונקציונליות למסלול, כמה מושגים שתלמד כוללים אירועי JavaScript, תנאים, פונקציות אנונימיות, הנפשת JavaScript, בקרת מרווחים ועוד רבים נוספים.
7. משחק מריו עם JavaScript
הדרכה זו למשחק JavaScript מריו היא כל מה שאתה צריך כדי לטבול את הראש שלך לתוך הדק של JavaScript. בעוד שמשחק מריו עם JavaScript נשמע מורכב, כריס, המורה שלך, מראה שזה יותר מהאפשרי בסרטון YouTube הזה. אז אולי תרצה לתפוס את הכיף ולחקור את יכולת החשיבה הביקורתית שלך על ידי בנייה.
למרות שמתחילים עשויים למצוא את ההדרכה מעט מתקדמת, זהו חיפוש מבריק אחר מרעננים כדי לקחת את כישורי ה-JavaScript שלהם לשלב הבא.
מלבד למידה על מניפולציות של אלמנטים, תשתמש בכוחו של JavaScript טהור בבניית לוח קנבס מגיב עבור ממשק המשחק באמצעות תכנות מונחה עצמים (אופף). מכיוון שהנגן פעיל באופן פעיל, היישום של בקרת מקלדת JavaScript, טיפול באירועים, לולאות, אופרטורים, תנאים ופונקציות מובנות ומותאמות אישית, הם בין החוויות חוצות הפרויקטים שתוכלו לקבל לְהַשִׂיג.
8. בנו שולה מוקשים עם JavaScript
רוצה לחקור את כוחן של פונקציות רקורסיביות ו שיטות מערך בהכפלת רכיבי DOM עם JavaScript? אולי תרצה להתחיל עם הדרכה זו של שולה מוקשים של JavaScript מאת אניה קובוב ב-Traversy Media.
זה כרוך בתשומת לב רבה לפרטים. אבל זה מדריך ידידותי למתחילים ואחד הטובים ביותר לכרוך את ידיך סביב מערכת פריסת הרשת באמצעות JavaScript. המטרה הסופית היא ליצור תבנית רשת שבה שחקנים נמנעים מלדרוך על מוקש.
כמה שזה נשמע פשוט, אתה תכתוב הרבה היגיון תכנות הכולל את רוב טכניקות הליבה של JavaScript כדי לחבר את הפונקציונליות של המשחק מאחורי הקלעים.
9. הדרכה למשחק פוקימון JavaScript עם קנבס HTML
פוקימון הוא אחד מפרויקטי המשחק המורכבים ביותר שתוכלו לבנות באמצעות JavaScript. עם זאת, אם אתה מגיע לשעות קידוד קפדניות ארוכות עם JavaScript ואתה מוכן לצאת מחודש עם יותר ביטחון, כדאי לך להיכנס להדרכה זו.
בנוסף לסקריפטים והנפשה של DOM עם JavaScript, הסרטון מלמד אותך כיצד להעביר ולעבד נכסים, כולל אודיו ותמונות, באמצעות JavaScript. יש הרבה מה שהמדריך חושף על JavaScript שתמצא בעלי ערך בכל בעיות קידוד בחיים האמיתיים.
בנוסף לטכניקות מניפולציה הליבה של JavaScript, המדריך עושה שימוש רב במושגי OOPs; זה בעל ערך אם אתה מתכנן להתעמק מאוחר יותר ב-TypeScript. אחד הגורמים המפשטים של הדרכה זו הוא האופן שבו המורה מתאר את המשימות.
קל לסגת כאשר אתה מדמיין את המערכת המורכבת שתיצור כדי לגרום לזה לעבוד. אבל תחשוב על מה אתה עומד להרוויח בסופו של דבר.
למד את יישומי JavaScript לפתרון בעיות
משחקים משתמשים בכמה מההיגיון הרספונסיבי והאינטואיטיבי ביותר בתכנות. אז כדאי ללמוד JavaScript מהכנת אחד. בעוד שמדריכים אלה מבוססים על משחקים, הם חושפים אותך למושגי הליבה של JavaScript החלים על בעיות קידוד רבות אחרות, כולל פיתוח אתרים ויצירת אפליקציות לנייד. גם אם אתה מתכנן לפנות מאוחר יותר למסגרות, אתה תיישם את המושגים האלה בלי קשר.
