الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

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

بدأه The-Wheel في 15 مايو 2010 · 4 رد · 1,245 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

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

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

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

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

الكود هنا

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

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

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

#2

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

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

http://jqueryui.com

Drag & Drop

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

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

#3

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

top

left

document.getelementbyid(id).style.top

document.getelementbyid(id).style.left

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

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

parseInt

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

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

In bad state

#4

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

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

AsJsGle

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

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

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

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

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

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

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

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

drag.html

تم تعديل هذه المشاركة بواسطة The-Wheel في 16 مايو 2010 في 13:32

#5

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

لا تراجع و لا إستسلام

مواضيع مشابهة