كيف تصنع لعبة ثعبان باستخدام HTML و CSS وجافا سكريبت

لعبة الثعبان هي تمرين برمجة كلاسيكي يمكنك استخدامه لتحسين مهاراتك في البرمجة وحل المشكلات. يمكنك إنشاء اللعبة في متصفح الويب باستخدام HTML و CSS وجافا سكريبت.

في اللعبة ، تتحكم في ثعبان يتحرك حول لوح. ينمو حجم الثعبان وأنت تجمع الطعام. ستنتهي اللعبة إذا اصطدمت بذيلك أو أي من الجدران.

كيفية إنشاء واجهة المستخدم للوحات القماش

استخدم HTML و CSS لإضافة اللوحة القماشية للثعبان للتحرك. هناك العديد من الآخرين مشاريع HTML و CSS يمكنك التدرب عليها ، إذا كنت بحاجة إلى مراجعة أي مفاهيم أساسية.

يمكنك الرجوع إلى هذا المشروع مستودع جيثب لكود المصدر الكامل.

1. قم بإنشاء ملف جديد يسمى "index.html".
2. افتح الملف باستخدام أي محرر نصوص مثل الكود المرئي أو أتوم. أضف بنية كود HTML الأساسية:

   لغة البرمجة>
   <لغة البرمجةلانج="en-US">
   <رأس>
   <عنوان>لعبة الثعبانعنوان>
   رأس>
   <جسم>
   جسم>
   لغة البرمجة>

instagram viewer
3. داخل علامة الجسم ، أضف لوحة قماشية لتمثيل لوحة اللعبة للثعبان.

   <h2>لعبة الثعبانh2>
   <شعبةبطاقة تعريف="لعبة">
   <اللوحة القماشيةبطاقة تعريف="ثعبان">اللوحة القماشية>
   شعبة>

4. في نفس المجلد مثل ملف HTML الخاص بك ، قم بإنشاء ملف جديد يسمى "styles.css".
5. في الداخل ، أضف بعض CSS لصفحة الويب العامة. يمكنك أيضًا تصميم موقع الويب الخاص بك باستخدام أخرى نصائح وحيل أساسية لـ CSS.

   #لعبة {
   عرض: 400 بكسل;
   ارتفاع: 400 بكسل;
   هامِش:0آلي;
   لون الخلفية:#إيييي;
   }
   h2 {
   محاذاة النص:مركز;
   خط العائلة: اريال;
   حجم الخط: 36 بكسل;
   } 
   

6. داخل ملف HTML الخاص بك ، أضف رابطًا إلى CSS في علامة الرأس:

   <وصلةrel="ورقة الأنماط"يكتب="text / css"href="styles.css">

7. لعرض اللوحة ، افتح ملف "index.html" في متصفح الويب.

كيفية رسم الأفعى

في المثال أدناه ، يمثل الخط الأسود الثعبان:

تشكل المربعات المتعددة أو "الشرائح" الثعبان. مع نمو الثعبان ، يزداد عدد المربعات أيضًا. في بداية اللعبة ، طول الثعبان قطعة واحدة.

1. داخل ملف HTML ، اربط بملف JavaScript جديد في الجزء السفلي من علامة النص الأساسي:

   <جسم>
    الكود الخاص بك هنا 
   <النصيsrc="script.js">النصي>
   جسم>

2. أنشئ script.js وابدأ بالحصول على عنصر DOM في اللوحة القماشية:

   فار قماش = وثيقة.getElementById ("ثعبان");

3. عيّن سياق عنصر HTML في لوحة الرسم. في هذه الحالة ، تريد أن تقدم اللعبة لوحة قماشية ثنائية الأبعاد. سيسمح لك ذلك برسم أشكال أو صور متعددة على عنصر HTML.

   فار Canvas2d = canvas.getContext ("2d");

4. عيّن متغيرات أخرى داخل اللعبة ، مثل ما إذا كانت اللعبة قد انتهت ، وارتفاع اللوحة وعرضها:

   فار انتهت اللعبة = خطأ شنيع;
   عرض القماش = 400;
   قماش.ارتفاع = 400;

5. قم بتعريف متغير يسمى "snakeSegments". سيحتوي هذا على عدد "المربعات" التي سيشغلها الثعبان. يمكنك أيضًا إنشاء متغير لتتبع طول الثعبان:

   فار snakeSegments = [] ،
   فار طول الثعبان = 1;
   

6. أعلن عن موضع X و Y الأولي للثعبان:

   فار ثعبان = 0;
   فار ثعبان ص = 0;

7. قم بإنشاء وظيفة جديدة. في الداخل ، أضف قطعة الثعبان البادئة إلى مجموعة SnakeSegments ، بإحداثيات البداية X و Y:

   وظيفةتحرك الأفعى() {
    snakeSegments.unshift ({ x: snakeX، ذ: ثعبان})؛
   }

8. قم بإنشاء وظيفة جديدة. في الداخل ، اضبط نمط التعبئة على الأسود. هذا هو اللون الذي ستستخدمه لرسم الثعبان:

   وظيفةرسم الأفعى() {
    canvas2d.fillStyle = "أسود"; 
   }

9. لكل جزء يشكل حجم الثعبان ، ارسم مربعًا بعرض وارتفاع 10 بكسل:

   ل (فار أنا = 0; أنا  Canvas2d.fillRect (snakeSegments [i] .x، snakeSegments [i] .y، 10, 10);
    }

10. قم بإنشاء حلقة لعبة تعمل كل 100 مللي ثانية. سيؤدي هذا إلى قيام اللعبة برسم الثعبان باستمرار في موضعه الجديد ، والذي سيكون مهمًا جدًا عندما يبدأ الثعبان في التحرك:

    وظيفةgameLoop() {
     moveSnake () ؛
     drawSnake () ،

11. افتح ملف "index.html" في متصفح الويب لترى الثعبان في أصغر حجم له في موضع البداية.

كيفية جعل الأفعى تتحرك

أضف بعض المنطق لتحريك الثعبان في اتجاهات مختلفة ، اعتمادًا على الزر الذي يضغط عليه المشغل على لوحة المفاتيح.

1. في الجزء العلوي من الملف ، حدد الاتجاه الأولي للثعبان:

   فار اتجاه X = 10;
   فار الاتجاه ص = 0;
   

2. أضف معالج حدث يتم تنشيطه عندما يضغط اللاعب على مفتاح:

   وثيقة.onkeydown = وظيفة(حدث) {
   };

3. داخل معالج الأحداث ، قم بتغيير الاتجاه الذي يتحرك فيه الثعبان ، بناءً على المفتاح المضغوط:

   يُحوّل (event.keyCode) {
   قضية37: // السهم الايسر
    اتجاه X = -10;
    الاتجاه ص = 0;
   استراحة;
   قضية38: // سهم للاعلى
    اتجاه X = 0;
    الاتجاه ص = -10;
   استراحة;
   قضية39: // السهم الأيمن
    اتجاه X = 10;
    الاتجاه ص = 0;
   استراحة;
   قضية40: // السهم لأسفل
    اتجاه X = 0;
    الاتجاه ص = 10;
   استراحة;
   }

4. في وظيفة moveSnake () ، استخدم الاتجاه لتحديث إحداثيات X و Y للثعبان. على سبيل المثال ، إذا احتاج الثعبان إلى التحرك يسارًا ، فسيكون الاتجاه X "-10". سيؤدي هذا إلى تحديث إحداثيات X لإزالة 10 بكسل لكل إطار من إطار اللعبة:

   وظيفةتحرك الأفعى() {
    snakeSegments.unshift ({ x: snakeX، ذ: ثعبان})؛
    ثعبان X + = directionX ؛
    ثعبان Y + = directionY ؛
   }

5. لا تقوم اللعبة حاليًا بإزالة الأجزاء السابقة أثناء تحرك الثعبان. هذا سيجعل الثعبان يبدو كالتالي:
6. لإصلاح ذلك ، امسح اللوحة القماشية قبل رسم الثعبان الجديد في كل إطار ، في بداية وظيفة drawSnake ():

   Canvas2d.clearRect (0, 0، قماش ، عرض ، قماش ، ارتفاع) ؛

7. ستحتاج أيضًا إلى إزالة العنصر الأخير من مجموعة snakeSegments ، داخل وظيفة moveSnake ():

   بينما (snakeSegments.length> snakeLength) {
    snakeSegments.pop () ؛
   }

8. افتح ملف "index.html" واضغط على المفاتيح اليسرى أو اليمنى أو لأعلى أو لأسفل لتحريك الثعبان.

كيفية إضافة الطعام على القماش

أضف النقاط إلى لعبة اللوح لتمثيل قطع الطعام للثعبان.

1. قم بتعريف متغير جديد في أعلى الملف لتخزين مجموعة من قطع الطعام:

   فار النقاط = [] ؛

2. قم بإنشاء وظيفة جديدة. في الداخل ، قم بإنشاء إحداثيات عشوائية X و Y للنقاط. يمكنك أيضًا التأكد من وجود 10 نقاط فقط على السبورة في أي وقت:

   وظيفةتفرخ() {
   لو(النقاط.الطول < 10) {
   فار dotX = رياضيات.أرضية(رياضيات. عشوائي () * canvas.width) ؛
   فار dotY = رياضيات.أرضية(رياضيات. عشوائي () * قماش.ارتفاع) ؛
    dots.push ({ x: dotX، ذ: dotY}) ؛
    }
   }

3. بعد إنشاء إحداثيات X و Y للطعام ، ارسمهم على القماش باستخدام اللون الأحمر:

   ل (فار أنا = 0; أنا  canvas2d.fillStyle = "أحمر";
    Canvas2d.fillRect (النقاط [i] .x ، النقاط [i] .y ، 10, 10);
   }

4. استدعاء وظيفة spawnDots () الجديدة داخل حلقة اللعبة:

   وظيفةgameLoop() {
    moveSnake () ؛
    drawSnake () ،
    تفرخ النقاط () ،
   لو(! gameEnded) {
    setTimeout (gameLoop ، 100);
    }
   }

5. افتح ملف "index.html" لعرض الطعام على لوحة اللعبة.

كيفية جعل الثعبان ينمو

يمكنك جعل الثعبان ينمو عن طريق زيادة طوله عندما يصطدم بنقطة طعام.

1. قم بإنشاء وظيفة جديدة. بداخلها ، قم بالمرور عبر كل عنصر في مصفوفة النقاط:

   وظيفةcheckCollision() {
   ل (فار أنا = 0; أنا 
    }
   }

2. إذا كان موضع الثعبان يطابق إحداثيات أي نقاط ، فقم بزيادة طول الثعبان ، واحذف النقطة:

   لو (ثعبان X 10 && 
    ثعبان X + 10 > النقاط [i] .x && 
    ثعبان Y 10 && 
    ثعبان Y + 10 > النقاط [i] .y) {
    ثعبان الطول ++ ؛
    dots.splice (أنا ، 1);
   }

3. اتصل بوظيفة checkCollision () الجديدة في حلقة اللعبة:

   وظيفةgameLoop() {
    moveSnake () ؛
    drawSnake () ،
    تفرخ النقاط () ،
    checkCollision () ؛
   لو(! gameEnded) {
    setTimeout (gameLoop ، 100);
    }
   }

4. افتح ملف "index.html" في متصفح الويب. حرك الثعبان باستخدام لوحة المفاتيح لتجميع قطع الطعام وتنمو الثعبان.

كيف تنهي اللعبة

لإنهاء اللعبة ، تحقق مما إذا كان الثعبان قد اصطدم بذيله أو أي من الجدران.

1. قم بإنشاء وظيفة جديدة لطباعة تنبيه "انتهت اللعبة".

   وظيفةانتهت اللعبة() {
    setTimeout (وظيفة() {
    يُحذًِر("انتهت اللعبة!");
    }, 500); 
    انتهت اللعبة = حقيقي
   }

2. داخل وظيفة checkCollision () ، تحقق مما إذا كان الثعبان قد اصطدم بأي من جدران اللوحة القماشية. إذا كان الأمر كذلك ، فاتصل بوظيفة gameOver ():

   لو (snakeX < -10 || 
    ثعبان -10 || 
    snakeX> canvas.width +10 ||
    ثعبان Y> قماش.ارتفاع +10) {
    انتهت اللعبة()؛
   }

3. للتحقق مما إذا كان رأس الثعبان قد اصطدم بأي من أجزاء الذيل ، قم باللف خلال كل قطعة من الثعبان:

   ل (فار أنا = 1; أنا 
   }

4. داخل الحلقة الأمامية ، تحقق مما إذا كان موقع رأس الثعبان يطابق أيًا من أجزاء الذيل. إذا كان الأمر كذلك ، فهذا يعني أن الرأس اصطدم بذيل ، لذا قم بإنهاء اللعبة:

   لو (snakeX snakeSegments [i] .x && snakeY snakeSegments [i] .y) {
    انتهت اللعبة()؛
   }

5. افتح ملف "index.html" في متصفح الويب. حاول أن تصطدم بجدار أو بذيلك لإنهاء اللعبة.

تعلم مفاهيم JavaScript من خلال الألعاب

يمكن أن يكون إنشاء الألعاب طريقة رائعة لجعل تجربة التعلم الخاصة بك أكثر متعة. استمر في صنع المزيد من الألعاب لمواصلة تحسين معرفتك بـ JavaScript.