• 0
The-Wheel

طلب مساعدة في عمل لعبة سحب و إفلات drag and drop

سؤال

الســــلام عليكم إخواني في الفريق العربي للبرمجة

اعتزم عمل لعبة تعليمية لتعلم كيفية توصيل أجزاء الكمبيوتر والأجزاء الداخلية له ببعضها

و أود عمل ذلك عن طريق ميزة السحب و الإفلات في الجافا سكريبت

حيث اني وجدت هذا الكود الرائع و الذي عادة ما يستخدم في لعبة تلبيس الدمى وهو يعمل سحب وإفلات لكنه يترك الشيء المسحوب حيث تم وضعه

الكود هنا

في اللعبه التي اود تصميمها اريد من اللاعب أن يسحب مثلا السلك في اتجاه صندوق الحاسب وإذا كان مكانه صحيح يبقى السلك حيث وضعه اللاعب .. أما إذا كان مكانه خاطئ يعود السلك لمكانه السابق

ما لا اعرفه هو كيف يفهم الجافا سكريبت المكان السابق والمكان الصحيح و المكان الخاطئ للصورة التي سيتم سحبها؟ وكيف يفهم انها وضعت في المكان الصحيح؟

لذلك أود طلب مساعدتكم في هذه النقطة وما خاب من استشار :)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

4 إجابة على هذا السؤال .

  • 0

حقيقة الامر أن هنالك مكتبات كثيرة من المكتبات التي قد تساعدك في ماتريده لكن من وجهة نظري أفضل هذه المكتبات هو Jquery والتي تحتوي على (Plugins) خاص بالسحب والإفلات كماتريد

رابط المكتبة كاملا إذا اردت الإطلاع عليها

http://jqueryui.com

Drag & Drop

http://jqueryui.com/demos/droppable/

بالتوفيق ان شاء الله

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

يمكنك ذلك من خلال الخاصيتين الموجودتين بالcss

top

left

document.getelementbyid(id).style.top

document.getelementbyid(id).style.left

ومن ثم يتم وضع شروط عليها طبعا القيمة الناتجة ستكون بال px

ولذلك يتوجب عليك تحويل قيمتها الى لنمط الرقمي

parseInt

وبذلك سوف يهمل القيمة النصية اي px

باريي هذه من اجمل ميزات الجافا سكريبت

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جزاكم الله خير اخواني

المكتبة رائعه جدا أخي Xhack و مفيده

AsJsGle

الميزة هذه افادتني كثير جزاك الله كل خير واجهتني مشكلة بسيطة فقط وقمت بحلها كتبتها في الاسفل للاستفادة

قمت باستخدام الميزة هذه ووضعت عليها شروط كما قلت ... الشروط التي وضعتها كانت : اذا كانت مثلا x= 137 و y=115 أظهر رسالة مكتوب فيها صحيح.... و الحقيقه اشتغلت معي بشكل رائع

لكني اكتشفت مشكله أكبر وهي أن المستخدم لا يستطيع وضع الصورة بدقة في الاحداثيات نفسها وكل مره تظهر له رسالة خطأ حتى لو كان وضعها في المكان الصحيح و الاحداثيات مختلفة شيء بسيط

لذلك فكرت انه لو كان الفرض ان يضع المستخدم الصورة في مساحة معينة بدلا من أن يضعها على نقطة راح يكون هذا أسهل للمستخدم

فكان الشرط : إذا كانت 18<x و x<184 و y>17 و y<274 أظهر رسالة مكتوب فيها صحيح .... حيث هذه القيم هي أطراف المساحة التي اريد من المستخدم ان يسحب الصورة اليها

واشتغل معي الكود بشكل رائع ايضا

قمت بارفاق الملف للاستفادة من الكود و لا اعدم اقتراحاتكم :)

جزاكم الله كل خير

drag.html

تم تعديل بواسطه The-Wheel
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

إذا كنت تبرمج لعبة جرب HTML 5 Canvas مع Drag Drop API ;)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .