هذا هو برنامج تعليمي حول إنشاء تطبيق تفاعلي لحل
مشكلة تقدم الحصان في
المعالجة و
p5.jsالجزء الأول
إنشاء حصان - مستطيل مستطيل (). يرمز الحصان من قبل دائرة رمادية.
rect(bx, by, boxSize, boxSize); fill(50);
دع الحصان يرسم على كل الخلايا التي يمر من خلالها ، هكذا هو الحال
هنا .
بعد ذلك ، دع الحصان ينجذب إلى وسط القفص عند إطلاق زر
mouseRealised () .
أضف متغيرات
storX و
storY التي ستقوم بتخزين إحداثيات الخلية التي يقع عليها المؤشر. إذا تم الضغط على الزر الأيسر وكان المؤشر أعلى الحصان ،
فاحفظ إحداثيات وزارة الدفاع الحالية الخلية في المتغيرات
storX و
storY :
void mouseClick() { if (mouseX >= x && mouseX <= x+100 && mouseY >= y && mouseY <= y+100) { if (overBox && mousePressed && (mouseButton == LEFT)) { storX=x;
عند تحرير الزر ، يتم تحميل إحداثيات storX و storY في إحداثيات knightX و knightY knights.
knightX=storX; knightY=storY;
إذا كان هناك متغير
منطقي قياسي
mousePressed لحالة الزر المضغوط ، فلا يوجد مثل هذا المتغير لحالة الزر المضغوط - قم بإنشائه بنفسك:
boolean bool_mouseReleased;
الآن ، إذا لم يتم الضغط على زر الماوس (أي
bool_mouseReleased = صواب ) ، قم بالطلاء على الخلية باستخدام الإحداثيات storX و storY
if((bool_mouseReleased ) && (x==storX && y==storY )){ modColor=200; }
تحقق
هناالجزء الثاني
إضافة زر إلغاء.
مثال يوضح كيفية تشغيل الأزرار
هنا .
أولاً ، قم بإنشاء قوائم
IntList لإحداثيات الخلية التي مر بها الحصان ؛ ارسم الزر نفسه في الزاوية اليسرى السفلى:
تهيئة القوائم
listOfCoordinatesX = new IntList(); listOfCoordinatesY = new IntList(); listOfCoordinatesX.append(0); listOfCoordinatesY.append(0);
في نهاية الخطوة التالية (عند تحرير زر الماوس) نضيف إحداثيات الخلية إلى القائمة / المجموعة:
if(overKnight){ knightX=storX; knightY=storY; listOfCoordinatesX.append(int(knightX)); listOfCoordinatesY.append(int(knightY)); }
قم بإنشاء دالة منطقية
overButton () ، والتي تعود بشكل صحيح إذا كان مؤشر الماوس أعلى الزر و
buttonUpdate () ، والذي يقوم بتحديث المتغير
boolButton void buttonUpdate() { if ( overButton(buttonX, buttonY, buttonSize, buttonSize) ) { boolButton = true; } else { boolButton = false; } } boolean overButton(int x, int y, int width, int height) { if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) { return true; } else { return false; } }
يتم عرض المتغير والقوائم في وحدة التحكم في حلقة البرنامج الرئيسي:
println(boolButton); println(listOfCoordinatesX); println(listOfCoordinatesY);
تحقق
هناالجزء الثالث
أضف وظيفة القفز إلى الخلية السابقة عند النقر فوق زر إلغاء الأمر.
في وظيفة
mousePressed () ،
نتحقق مما إذا كان زر الإلغاء قد تم الضغط عليه. إذا تم الضغط على الزر ، فاحذف العناصر الأخيرة من قوائم الإحداثيات (قمم الرصات) ، إذا كان هناك أكثر من عنصر في القائمة:
if(boolButton && listOfCoordinatesX.size()>1) { listOfCoordinatesX.pop(); listOfCoordinatesY.pop(); }
عند النقر فوق زر "إلغاء" في طريقة
mouseClick () لفئة
الوحدة النمطية ، فإننا
نحفظ عناصر قوائم الإحداثيات (قمم الرصات) في متغيرات
storX و
storY :
if(boolButton && mousePressed) { storX= listOfCoordinatesX.get(listOfCoordinatesX.size()-1); storY= listOfCoordinatesY.get(listOfCoordinatesY.size()-1); }
عندما تحرر زر الإلغاء ، نعود إلى الإحداثي السابق ونعود إلى الخلية باللون الأصلي (الأسود):
if(boolButton && bool_mouseReleased){ if(x==storX && y==storY ) { modColor=0; } }
في وظيفة
mouseReleased () ،
نضع حصاننا في الخلية المقابلة من الحقل.
if(boolButton) { knightX=storX; knightY=storY; }
الآن يعمل البرنامج في معالجة اللغة بشكل صحيح ، ولا تعمل وظيفة التراجع في البرنامج على p5.js بشكل صحيح.
تحقق من البرنامج على p5.js
هنااستبدل قوائم InList في البرنامج الرئيسي بمصفوفات int []. يمكنك إضافة عنصر ديناميكي إلى المصفوفة ، وكذلك إلى القائمة ، باستخدام وظيفة
append () listOfCoordinatesX = append(listOfCoordinatesX,0);
لا يمكنك استرداد عنصر به pop () من صفيف. للقيام بذلك ، هناك دالة لتقليل طول الصفيف بواسطة
تقصير واحد
() . لتحديد طول الصفيف ، بدلاً من
size () ، استخدم
الطوليمكن إضافة هذا البرنامج كبرنامج نصي js إلى صفحة html. لتشغيل البرنامج النصي ، يجب عليك استخدام processing.js
عرض هذه الصفحة
هنا .
وهنا هو نفسه ، ولكن مع صورة الحصان.
وهنا يستطيع الحصان السير بحرف
G. أما بقية الحركات فهي محظورة.
رابط إلى جيثب بنصوص البرامج المقدمة في المقال.