السلام عليكم ورحمة الله تعالى وبركاته
بسم الله الرحمن الرحيم
اليوم بإذن الله سنتناول كيفية تصميم لعبة الأفعى باستعمال js وسأحاول تلخيص وشرح الأفكار الأساسية, كما سأحاول تجنب استعمال أي مكتبات لفهم أفضل وأعمق.
سنتعلم كيف نقوم برسم شكل بسيط باستخدام الحلقات وكيف تقوم بضبط إعدادات اللعبة, كما ستتعلم كيفية الحصول على إدخال للمسخدم من خلال الضغط على أزرار لوحة المفاتيح وكيفية تحريك الثعبان باستخدام الأكواد وبحسب إدخال المستخدم. سنتعلم أيضاً كيفية إنشاء متغير بقيمة عشوائية يختارها البرنامج في كل مرة يتم تشغيله. لننطلق على بركة الله...
أول خطوة يجب القيام بها عند مواجهة أي مشكلة هي تحليل المشكلة وفهمها جيدًا, فلعبة الأفعى ما هي إلا مشكلة مُعقدة إذا فهمتها جيدًا فلن تواجه أي مشكلة فيها, عند مواجهة مشاكل من هذا النوع يُفضل دائمًا تقسيم المشكلة إلى عدة مشاكل صغيرة يعرف هذا بال decomposition أو modularization , وهناك عدة أسباب تجعل هذا النهج مفيدًا:
بسم الله الرحمن الرحيم
اليوم بإذن الله سنتناول كيفية تصميم لعبة الأفعى باستعمال js وسأحاول تلخيص وشرح الأفكار الأساسية, كما سأحاول تجنب استعمال أي مكتبات لفهم أفضل وأعمق.
سنتعلم كيف نقوم برسم شكل بسيط باستخدام الحلقات وكيف تقوم بضبط إعدادات اللعبة, كما ستتعلم كيفية الحصول على إدخال للمسخدم من خلال الضغط على أزرار لوحة المفاتيح وكيفية تحريك الثعبان باستخدام الأكواد وبحسب إدخال المستخدم. سنتعلم أيضاً كيفية إنشاء متغير بقيمة عشوائية يختارها البرنامج في كل مرة يتم تشغيله. لننطلق على بركة الله...
أول خطوة يجب القيام بها عند مواجهة أي مشكلة هي تحليل المشكلة وفهمها جيدًا, فلعبة الأفعى ما هي إلا مشكلة مُعقدة إذا فهمتها جيدًا فلن تواجه أي مشكلة فيها, عند مواجهة مشاكل من هذا النوع يُفضل دائمًا تقسيم المشكلة إلى عدة مشاكل صغيرة يعرف هذا بال decomposition أو modularization , وهناك عدة أسباب تجعل هذا النهج مفيدًا:
- التبسيط: عند تقسيم المشكلة الكبيرة إلى مشاكل أصغر، يصبح كل جزء منها أكثر وضوحًا وأقل تعقيدًا.
- الصيانة: الأكواد الصغيرة والمجزأة تكون أسهل في الصيانة.
- التعاون: في الفرق البرمجية، تقسيم المشروع إلى أجزاء يمكن أن يسهل توزيع المهام بين أعضاء الفريق.
- الاختبار: الأكواد الصغيرة والمجزأة يمكن اختبارها بشكل أكثر دقة وفعالية، مما يضمن أن كل جزء يعمل بشكل صحيح قبل دمجه في المشروع الأكبر لتطبيق هذا النهج، يمكنك استخدام عدة استراتيجيات مثل OOP أو functional programming.
لنحاول تطبيق هذا النهج على هذه اللعبة:
إعداد البيئة :1. إنشاء لوحة لعبة.
2. تحديد حجم لوحة.
لإعداد البيئة سنحتاج استعمال html و css , في الأسفل ستجيدون كود التصميم وكل شخص له الحرية في التصميم الذي يريده.
كما ترون لدينا وسمين div الأول خاص بتعديل النقاط الذي سنتحدث عنه فيما بعد, أما الوسم ثاني (game-board1) خاص لإنشاء لوحة اللعبة.
الآن نقوم بتحديد الحجم باستعمال css
لتحديد حجم اللعبة نستعمل خاصية grid templte , والتي تستخدم لتعريف الأعمدة في شبكة (Grid) ,أما repeat تستخدم لتكرار القيم بدلًا من كتابتها يدوياً, لذا نحدد عدد كل من الأسطر والأعمدة, في هذا المثال قمنا بضبطها على 20 اما 20px فقط لتحديد حجم كل عنصر أو مربع فقط تخيلوها على أنها مصفوفة في نهاية سنتحصل على النتيجة التالية:
انتهينا من الخطوة الأولى, ننتقل للخطوة الثانية.
إنشاء الأفعى وتحريكها:1. إعداد الأفعى كبداية.
2. تحديث موقع الأفعى بناءً على إدخال المستخدم.
3. التأكد من أن الأفعى تتحرك باستمرار في الاتجاه المحدد.
الآن ننتقل للجافا سكريبت, علينا أولًا تحديد اللوحة الخاصة بنا والمسمات بـ "id="board باستعمال getelementbyID والتي تحدد عنصر ما في صفحة html
كود:
const board=document.getElementBId('borad');الآن كيف نصمم الأفعى؟
بما أن اللوحة الخاصة بنا عبارة عن مصفوفة ثنائية الأبعاد, إذًا يمكن اعتبار أن الأفعى عبارة عن جدول يحتوي على أحدثيات كل عنصر بها.
لنفترض أن الأفعى تُحدد بالحداثيات التالية :
بما أن اللوحة الخاصة بنا عبارة عن مصفوفة ثنائية الأبعاد, إذًا يمكن اعتبار أن الأفعى عبارة عن جدول يحتوي على أحدثيات كل عنصر بها.
لنفترض أن الأفعى تُحدد بالحداثيات التالية :
كود:
let snake=[{x:10,y:10}]; // احداثيات الافعى في المصفوفةالآن ما علينا سوى تصميم الأفعى, للقيام بهذا نحتاج أولًا لإنشاء عنصر جديد محتوى داخل board الخاص بنا, وهذا لتعديله فيما بعد بواسطة css (إعطائه لون,حجم ,صورة ... الخ) ثم بعد ذلك لتطبيق الأحداثيات السابقة على اللوحة الخاصة بنا.
كود:
let snake=[{x:10,y:10}];
snake_pos.forEach((x)=>{
const element=creat('div','snake'); //إنشاء عنصر div جديد باستخدام الدالة creat مع اسم الفئة snake.
pos(element,x);تعيين موقع العنصر داخل الشبكة باستخدام الدالة pos.
board.appendChild(element);
});// تكرر هذي العملية على طول الجدول snake
}
function creat(x,y){
var element=document.createElement(x)//;هذه الدالة تقوم بانشاء عنصر html محدد من طرف المستخدم
element.className=y;اما هذي تقوم بتمسية العنصر الذي قمت بانشاءه
return element;
}
function pos(element,pos){
element.style.gridColumn=pos.x;//هنا نقوم بتطبيق الاحداثيات التي التي صرحنا عنها في البداية على العنصر المنشئx:10
element.style.gridRow=pos.y;//y:10
}بما أن العنصر الجديد المُنشئ تم تسميته بـ snake , نستطيع الآن التعديل عليه بواسطة css:
CSS:
.snake{
border: black 1px dotted;
background-color:black;1. وضع الطعام في موقع عشوائي على اللوحة.
2. التأكد من عدم وضع الطعام في نفس موقع الأفعى.
لإنشاء الطعام تقريباً نكرر نفس الخطوات كإنشاء العنصر وتسميته ثم تطبيق الإحداثيات على اللوحة, الفرق الوحيد هو أن الإحداثيات في هذه الحالة تكون عشوائية, إذًا ببساطة نستعمل دالة Math.random
كود:
let food=setfood();
const gridsize=20;
function drawfood(){
const element=creat('div','food');
pos(element,food)
board.appendChild(element);
}
function setfood(){
const x=Math.floor(Math.random()*gridsize)+1;
const y=Math.floor(Math.random()*gridsize)+1;
return {x,y};
}ثم نقوم بالتعديل على food باستخدام css
النتيجة كالتالي:
في الجزء التالي سندرس كيفية تحريك الأفعى بناءًا على إدخال المستخدم, ونرى كيفية زيادة طولها ودراسة الإصطدامات والخ.
أتمنى أنكم استفدتم ولو بقليل
وبالتوفيق.
النتيجة كالتالي:
في الجزء التالي سندرس كيفية تحريك الأفعى بناءًا على إدخال المستخدم, ونرى كيفية زيادة طولها ودراسة الإصطدامات والخ.
أتمنى أنكم استفدتم ولو بقليل
وبالتوفيق.
التعديل الأخير بواسطة المشرف:
