מדריך איך לבנות משחקים או כלים שימושיים בקובץ HTML

  • הוסף לסימניות
  • #1
העיקרון הוא פשוט אנחנו מבקשים מה-AI לכתוב לנו קוד בשפה שנקראת HTML. זו השפה של דפדפני האינטרנט, וכל מה שצריך כדי להריץ אותה זה דפדפן (כמו כרום) וקובץ טקסט פשוט.
אז את האמת כל דבר שתרצו כמעט אבל הנה כמה רעיונות
משחק 2048 עם משפטים מתחלפים וכו"
יומן משימות אישי
מלמד שפה אישי
מחליף מילים פשוט
עורך תמונה וכו" וכו"

1. איך לבקש את הקוד מה-AI (פרומפטינג נכון)​

כדי לקבל תוצאה טובה בClaude, Gemini או ChatGPT, כדאי לעקוב אחרי המבנה הזה:
  • הגדרת המטרה "תבנה לי אפליקציית תרגום אנגלית בקובץ HTML אחד".
  • הגדרת פיצ'רים אני רוצה שיהיה כפתור השמעה, מקום להזין מילים ושמירה אוטומטית וכו".
  • הנחיה טכנית מומלץ לכתוב רכז את כל הקוד (HTML, CSS, JS) בקובץ אחד בלבד". זה יחסוך התעסקות עם הדבקה של כמה קודים.
  • בקשה לעיצוב: לבקש את הסגנון שאתם רוצים

2. איך לעבוד עם הכלים השונים​

א. עבודה ב-Claude (קלוד)​

קלוד נחשב כיום לטוב ביותר בכתיבת קוד למשתמשים ביתיים בזכות פיצ'ר ה-Artifacts והורדה של קובץ HTML מוכן!
  1. כתבו לו הנחייה (לפעמים הוא ישאל אתכם כמה שאלות)
  2. בתשובה ייפתח חלון לבן בצד ימין שם תראו את ה"אפליקציה" רצה בשידור חי.
  3. יש לו פשוט כפתור הורדה
  4. כדי לקחת את הקוד: לחץ על כפתור "Code" בתחתית החלון ואז על "Copy".
אז רציתי ליצור משחק זיכרון פשוט ביקשתי ממנו עם פירוט מה אני רוצה והנה התוצאה
צילום מסך 2026-03-19 030540.png
למטה
אחר כך ביקשתי ממנו להוסיף זיכרון ואפשרות לשמור את התוצאות שיא והקובץ מצורף

ב. עבודה ב-Gemini (ג'מיני) ובChatGPT​

  1. בקשו את הקוד. הוא יכתוב אותו בתוך בלוקים.
  2. מעל כל בלוק קוד יש כפתור קטן של העתקה.
  3. לפתוח קובץ חדש של פנקס רשימות (מסמך טקסט) במחשב ולהדביק שם את הקוד
  4. לסגור את הקובץ בסיומת HTML ולבחור ב"שמור כסוג" כל הקבצים (שימו לב בברירת מחדל הוא שומר על txt).
  5. למי שיש VS Code אז זה כמובן הכי פשוט וקל.
צילום מסך 2026-03-19 101037.png

3. איך להריץ ולערוך​

כדי להפעיל פשוט ללכת לקובץ ששמרתם וללחוץ עליו פעמיים. הוא ייפתח בדפדפן ויעבוד כמו אתר אינטרנט אמיתי.

איך עורכים?

רוצים לשנות משהו? או שרוצים להרחיב את מאגר המילים שלו או איזה מאגר שעשיתם?
הדרך הקשה.
  1. לחצו קליק ימני על הקובץ ששמרתם בחר ב-"פתח באמצעות" (Open with) -> "פנקס רשימות".
  2. שנו את מה שאתה רוצים (או להדביק קוד חדש (או מאגר נתונים/מילים) שקיבלתם מה-AI).
  3. לחצו Ctrl + S (שמירה) ורענן את הדף בדפדפן כדי לראות את השינוי.
הדרך הקלה.
  1. הורידו את VS Code או לייתר דיוק את Visual Studio Code (חפשו בגוגל).
  2. תפתחו את הקוד באמצעות VS Code הוא יופיע לכם צבעוני והמבנה יהיה ברור יותר.
  3. שנו כרצונכם (בדרך כלל השמירה אוטומטית).
הסבר למי שרוצה לשנות או לערוך
בקובץ HTML יש מבנה קבוע לפי הסדר הזה בראש הקובץ תגית <html> שעוטפת את הכל תגית <style> שבה נמצאים הגדרות העיצוב תגית <body> שבה נמצא מה שאנחנו רואים (הסדר של הכל) ו<script> שאחראי לפונקציות (קוד JavaScript) אז אם אתם רוצים לשנות את העיצוב תצטרכו בדרך כלל לשנות במה שנמצא בתגית ה<style> (סטייל) אם זה שינוי במיקום או בטקסט אז בתגית ה<body> וכן הלאה
הוספת שאלות או מאגר נתונים נמצא בתגית <script> בדרך כלל בזה הAI מתקשה לייצר כמות טובה או חומר איכותי כשהוא גם יוצר קוד אז כדאי לבקש בסיס ולהרחיב על ידי בקשה נוספת של מאגר.
קוד:
<!DOCTYPE html>
<html>
  <head>
    <style> /* CSS - איך זה נראה? */ </style>
  </head>
 
  <body>
    <div id="game">
       <h1>המשחק שלי</h1>
       <button>לחץ כאן</button>
    </div>

    <script>
      /* JavaScript - מה זה עושה? */
      // כשלוחצים על הכפתור, תעשה משהו...
    </script>
  </body>
</html>

בתקווה שהיה מספיק ברור, אשמח לתגובות😉.
 

קבצים מצורפים

  • משחק זיכרון משופר.html
    KB 28.1 · צפיות: 34
  • הוסף לסימניות
  • #2
המדריך המקוצר ליצירת אפליקציות רשת עם בינה מלאכותית:
  • הבקשה: הנחו את ה-AI לכתוב את כל הקוד (HTML, CSS, JS) לתוך קובץ אחד בלבד.
  • באיזה AI לבחור? Claude מומלץ ביותר בזכות תצוגה מקדימה והורדה ישירה. ב-Gemini וב-ChatGPT תצטרכו להעתיק את הקוד ל"פנקס רשימות" ולשמור בסיומת .html.
  • הרצה: פשוט ללחוץ על הקובץ ששמרתם פעמיים כדי לפתוח אותו בדפדפן.
  • עריכה: דרך פנקס רשימות או VS Code.
    • <style> לעיצוב.
    • <body> לטקסט ולמיקומים.
    • <script> לפונקציות ונתונים (טיפ: בקשו מה-AI מאגרי נתונים בנפרד כדי לא להעמיס עליו).
סורי.
הייתי חייב.
קצר.

קלאוד הכי טוב בקידוד.
פרקטית -
אפשר בכל בוט AI לבקש קוד מלא ולהריץ מקומית.
בלי לערוך כלום.

רק להעתיק הכול לקובץ.
כנ"ל לשינוי או עדכון.

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



יש גם שלל מודלים ליצירה עצמאית.
בייס 44, לאבבל, ריפליט.

יש גם קורסור, תוכנה להתקנה.
עם כל האייג'נטים בשוק.
בחינם/בתשלום/מפתח - תלוי במודל.
 
  • הוסף לסימניות
  • #3
@הלובי יש לך רעיון למשחקים,
אני בקטע להפוך כל משחק מוכן כמו הקובץ הזה למשחק דרך הטלפון,
כמה נטפרי יסכימו לזה וכמה זה טוב
 
  • הוסף לסימניות
  • #4
קלאוד הכי טוב בקידוד.
פרקטית -
אפשר בכל בוט AI לבקש קוד מלא ולהריץ מקומית.
בלי לערוך כלום.

רק להעתיק הכול לקובץ.
כנ"ל לשינוי או עדכון.



יש גם שלל מודלים ליצירה עצמאית.
בייס 44, לאבבל, ריפליט.

יש גם קורסור, תוכנה להתקנה.
עם כל האייג'נטים בשוק.
בחינם/בתשלום/מפתח - תלוי במודל.
לא אמרתי שחייבים לערוך אבל כשרוצים משהו מורכב (לדוגמה עם בסיס נתונים של הרבה שאלות) אז גמיני וגיפיטי מסתבכים בזה ולכן ההמלצה שלי לערוך את זה לבד אצרף בהמשך דוגמא למשהו שנתתי לקלוד לשפר ואת התוצאה הגרועה
לגבי היצירה עצמאית אני אישית ממש לא אהבתי אותם (קורסור לא עבד לי בנטפרי אז לא ניסיתי) בכל אופן אלה לא פלטפורמות ליצירת כלים אופליין או קלילים שמתאימים לכל אחד לעומת זאת HTML זה גם למי שלא מבין כלום
 
  • הוסף לסימניות
  • #5
העיקרון הוא פשוט אנחנו מבקשים מה-AI לכתוב לנו קוד בשפה שנקראת HTML. זו השפה של דפדפני האינטרנט, וכל מה שצריך כדי להריץ אותה זה דפדפן (כמו כרום) וקובץ טקסט פשוט.
אז את האמת כל דבר שתרצו כמעט אבל הנה כמה רעיונות
משחק 2048 עם משפטים מתחלפים וכו"
יומן משימות אישי
מלמד שפה אישי
מחליף מילים פשוט
עורך תמונה וכו" וכו"

1. איך לבקש את הקוד מה-AI (פרומפטינג נכון)​

כדי לקבל תוצאה טובה בClaude, Gemini או ChatGPT, כדאי לעקוב אחרי המבנה הזה:
  • הגדרת המטרה "תבנה לי אפליקציית תרגום אנגלית בקובץ HTML אחד".
  • הגדרת פיצ'רים אני רוצה שיהיה כפתור השמעה, מקום להזין מילים ושמירה אוטומטית וכו".
  • הנחיה טכנית מומלץ לכתוב רכז את כל הקוד (HTML, CSS, JS) בקובץ אחד בלבד". זה יחסוך התעסקות עם הדבקה של כמה קודים.
  • בקשה לעיצוב: לבקש את הסגנון שאתם רוצים

2. איך לעבוד עם הכלים השונים​

א. עבודה ב-Claude (קלוד)​

קלוד נחשב כיום לטוב ביותר בכתיבת קוד למשתמשים ביתיים בזכות פיצ'ר ה-Artifacts והורדה של קובץ HTML מוכן!
  1. כתבו לו הנחייה (לפעמים הוא ישאל אתכם כמה שאלות)
  2. בתשובה ייפתח חלון לבן בצד ימין שם תראו את ה"אפליקציה" רצה בשידור חי.
  3. יש לו פשוט כפתור הורדה
  4. כדי לקחת את הקוד: לחץ על כפתור "Code" בתחתית החלון ואז על "Copy".
אז רציתי ליצור משחק זיכרון פשוט ביקשתי ממנו עם פירוט מה אני רוצה והנה התוצאה צפה בקובץ המצורף 2207865למטה
אחר כך ביקשתי ממנו להוסיף זיכרון ואפשרות לשמור את התוצאות שיא והקובץ מצורף

ב. עבודה ב-Gemini (ג'מיני) ובChatGPT​

  1. בקשו את הקוד. הוא יכתוב אותו בתוך בלוקים.
  2. מעל כל בלוק קוד יש כפתור קטן של העתקה.
  3. לפתוח קובץ חדש של פנקס רשימות (מסמך טקסט) במחשב ולהדביק שם את הקוד
  4. לסגור את הקובץ בסיומת HTML ולבחור ב"שמור כסוג" כל הקבצים (שימו לב בברירת מחדל הוא שומר על txt).
  5. למי שיש VS Code אז זה כמובן הכי פשוט וקל.

3. איך להריץ ולערוך​

כדי להפעיל פשוט ללכת לקובץ ששמרתם וללחוץ עליו פעמיים. הוא ייפתח בדפדפן ויעבוד כמו אתר אינטרנט אמיתי.

איך עורכים?

רוצים לשנות משהו? או שרוצים להרחיב את מאגר המילים שלו או איזה מאגר שעשיתם?
הדרך הקשה.
  1. לחצו קליק ימני על הקובץ ששמרתם בחר ב-"פתח באמצעות" (Open with) -> "פנקס רשימות".
  2. שנו את מה שאתה רוצים (או להדביק קוד חדש (או מאגר נתונים/מילים) שקיבלתם מה-AI).
  3. לחצו Ctrl + S (שמירה) ורענן את הדף בדפדפן כדי לראות את השינוי.
הדרך הקלה.
  1. הורידו את VS Code או לייתר דיוק את Visual Studio Code (חפשו בגוגל).
  2. תפתחו את הקוד באמצעות VS Code הוא יופיע לכם צבעוני והמבנה יהיה ברור יותר.
  3. שנו כרצונכם (בדרך כלל השמירה אוטומטית).
הסבר למי שרוצה לשנות או לערוך
בקובץ HTML יש מבנה קבוע לפי הסדר הזה בראש הקובץ תגית <html> שעוטפת את הכל תגית <style> שבה נמצאים הגדרות העיצוב תגית <body> שבה נמצא מה שאנחנו רואים (הסדר של הכל) ו<script> שאחראי לפונקציות (קוד JavaScript) אז אם אתם רוצים לשנות את העיצוב תצטרכו בדרך כלל לשנות במה שנמצא בתגית ה<style> (סטייל) אם זה שינוי במיקום או בטקסט אז בתגית ה<body> וכן הלאה
הוספת שאלות או מאגר נתונים נמצא בתגית <script> בדרך כלל בזה הAI מתקשה לייצר כמות טובה או חומר איכותי כשהוא גם יוצר קוד אז כדאי לבקש בסיס ולהרחיב על ידי בקשה נוספת של מאגר.
קוד:
<!DOCTYPE html>
<html>
  <head>
    <style> /* CSS - איך זה נראה? */ </style>
  </head>
 
  <body>
    <div id="game">
       <h1>המשחק שלי</h1>
       <button>לחץ כאן</button>
    </div>

    <script>
      /* JavaScript - מה זה עושה? */
      // כשלוחצים על הכפתור, תעשה משהו...
    </script>
  </body>
</html>

בתקווה שהיה מספיק ברור, אשמח לתגובות😉.
אוקי.
הנה המשוב שלי.
א' שייך כיום גם בgpt אפשרות להריץ בhtml באתר עצמו.
פשוט בתוך הבלוק יש סמל של הרצה.
ב' לא כתבת כלום בנוגע לפרומפט.
אני מתכוון, מה הוספת בזה?
כאילו. כלום לא כתוב.
אין פה שום עיצה פרומפטית.
פשוט במקום כל המדריך הארוך יכולת לבקש מהבינה שתכתוב כך - תכתוב לי תגובה קצרה של איך ליצור קובץ html של משחקים ואפליקציות שימושיות.
הוא יכתוב לך תוך דקה.
האמת? - התאכזבתי.
 

פרוגבוט

תוכן שיווקי
פרסומת

הצטרפות לניוזלטר

איזה כיף שהצטרפתם לניוזלטר שלנו!

מעכשיו, תהיו הראשונים לקבל את כל העדכונים, החדשות, ההפתעות בלעדיות, והתכנים הכי חמים שלנו בפרוג!

לוח מודעות

הפרק היומי

הפרק היומי! כל ערב פרק תהילים חדש. הצטרפו אלינו לקריאת תהילים משותפת!


תהילים פרק כה

אלְדָוִד אֵלֶיךָ יי נַפְשִׁי אֶשָּׂא:באֱלֹהַי בְּךָ בָטַחְתִּי אַל אֵבוֹשָׁה אַל יַעַלְצוּ אֹיְבַי לִי:גגַּם כָּל קוֶֹיךָ לֹא יֵבֹשׁוּ יֵבֹשׁוּ הַבּוֹגְדִים רֵיקָם:דדְּרָכֶיךָ יי הוֹדִיעֵנִי אֹרְחוֹתֶיךָ לַמְּדֵנִי:ההַדְרִיכֵנִי בַאֲמִתֶּךָ וְלַמְּדֵנִי כִּי אַתָּה אֱלֹהֵי יִשְׁעִי אוֹתְךָ קִוִּיתִי כָּל הַיּוֹם:וזְכֹר רַחֲמֶיךָ יי וַחֲסָדֶיךָ כִּי מֵעוֹלָם הֵמָּה:זחַטֹּאות נְעוּרַי וּפְשָׁעַי אַל תִּזְכֹּר כְּחַסְדְּךָ זְכָר לִי אַתָּה לְמַעַן טוּבְךָ יי:חטוֹב וְיָשָׁר יי עַל כֵּן יוֹרֶה חַטָּאִים בַּדָּרֶךְ:טיַדְרֵךְ עֲנָוִים בַּמִּשְׁפָּט וִילַמֵּד עֲנָוִים דַּרְכּוֹ:יכָּל אָרְחוֹת יי חֶסֶד וֶאֱמֶת לְנֹצְרֵי בְרִיתוֹ וְעֵדֹתָיו:יאלְמַעַן שִׁמְךָ יי וְסָלַחְתָּ לַעֲוֹנִי כִּי רַב הוּא:יבמִי זֶה הָאִישׁ יְרֵא יי יוֹרֶנּוּ בְּדֶרֶךְ יִבְחָר:יגנַפְשׁוֹ בְּטוֹב תָּלִין וְזַרְעוֹ יִירַשׁ אָרֶץ:ידסוֹד יי לִירֵאָיו וּבְרִיתוֹ לְהוֹדִיעָם:טועֵינַי תָּמִיד אֶל יי כִּי הוּא יוֹצִיא מֵרֶשֶׁת רַגְלָי:טזפְּנֵה אֵלַי וְחָנֵּנִי כִּי יָחִיד וְעָנִי אָנִי:יזצָרוֹת לְבָבִי הִרְחִיבוּ מִמְּצוּקוֹתַי הוֹצִיאֵנִי:יחרְאֵה עָנְיִי וַעֲמָלִי וְשָׂא לְכָל חַטֹּאותָי:יטרְאֵה אוֹיְבַי כִּי רָבּוּ וְשִׂנְאַת חָמָס שְׂנֵאוּנִי:כשָׁמְרָה נַפְשִׁי וְהַצִּילֵנִי אַל אֵבוֹשׁ כִּי חָסִיתִי בָךְ:כאתֹּם וָיֹשֶׁר יִצְּרוּנִי כִּי קִוִּיתִיךָ:כבפְּדֵה אֱלֹהִים אֶת יִשְׂרָאֵל מִכֹּל צָרוֹתָיו:
נקרא  2  פעמים
למעלה