2

Script #9 تحريك شعار حسوب IO باستخدام الأسهم

السلام عليكم

هدف السكربت

التعامل مع حدث keydown الذي يُقدح عندما نضغط أحد أزرار لوحة المفاتيح، وسيكون هذا السكربت مقدّمة لسكربتات أخرى بإذن الله تختص بالتّعامل مع الأحداث الّتي تضيف تفاعليّة كبيرة للصفحة.

أجزاء السكربت

1-الجزء الرئيسي هو التابع addEventListener

الذي يقوم بربط تابع ما مع حدث معيّن، ويأخذ وسيطين (ووسيط ثالث اختياري)، الأول هو سلسلة نصية تحدد اسم الحدث مثل click أو keydown أو mouseover

وهذه قائمة بجميع الأحداث المتاحة:

 

أما الوسيط الثاني فهو اسم التابع الذي سيتم استدعاؤه عند وقوع الحدث المعيّن.

الجزء التالي يوضّح استخدام هذا التابع

document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
    alert('Left was pressed');
}else if(event.keyCode == 39) {
    alert('Right was pressed');
}else if(event.keyCode == 38) {
    alert('Up was pressed');
}else if(event.keyCode == 40) {
    alert('Down was pressed');
}
});

2-بالنسبة للحصول على شعار حسوب، كالعادة var logo=document.querySelector(".logo") 3- لتحريك الشعار سنقوم بإعطاء الموضع position القيمة fixed (ثابت بالنسبة للمتصفح) ثمّ سنقوم بتحديد الموضع عن طريق left و top logo.style.position="fixed" وسنضع قيمة بدائية للموضع logo.style.left=0 و logo.style.top=0 4-توابع مساعدة للزيادة والإنقاص

إن الموضع يكون من الشكل "ZZpx" حيث ZZ هو عدد وتتبعه اللاحقة px اختصارًا لـpixel ولنتمكّن من التعامل مع هذا العدد في البداية نستخدم التابع parseInt ، وتكون التوابع المساعدة كما يلي:

function dec(x){
x=(parseInt(x)-10)+"px;
}
function inc(x){
x=(parseInt(x)+10)+"px;
}

نصّ السكربت

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

var logo=document.querySelector(".logo")
logo.style.position="fixed"
logo.style.left=0
logo.style.top=0
 function dec(x){
    return (parseInt(x)-10)+"px";
 }
 function inc(x){
    return (parseInt(x)+10)+"px";
 }
 document.addEventListener('keydown', function(event) {
    if(event.keyCode == 37) { logo.style.left=dec(logo.style.left) }
else if(event.keyCode == 39) { logo.style.left=inc(logo.style.left) }
else if(event.keyCode == 38) { logo.style.top=dec(logo.style.top) }
else if(event.keyCode == 40) { logo.style.top=inc(logo.style.top) } 
 });

لن تكون الحركة سلسة، ولكن اهدف الحالي هو استخدام الأحداث في السكربت

المراجع

والله وليّ التوفيق

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

0
Mostafa_36a2 أضف ردا

قمت بعمل بعض التعديلات على السكربت، لتصبح الحركة سلسلة ومستمرّة

نصّ السكربت

 var keys=[0,0,0,0]
 var logo=document.querySelector(".logo")
 logo.style.position="fixed"
 logo.style.left=0
 logo.style.top=0
 function dec(x){
    return (parseInt(x)-10)+"px";
 }
 function inc(x){
    return (parseInt(x)+10)+"px";
 }
 document.addEventListener('keydown', function(event) {
    if(event.keyCode == 37) { keys[0]=1 }
    if(event.keyCode == 39) { keys[1]=1 }
    if(event.keyCode == 38) { keys[2]=1 }
    if(event.keyCode == 40) { keys[3]=1 } 
 });
 document.addEventListener('keyup', function(event) {
    if(event.keyCode == 37) { keys[0]=0 }
    if(event.keyCode == 39) { keys[1]=0 }
    if(event.keyCode == 38) { keys[2]=0 }
    if(event.keyCode == 40) { keys[3]=0 } 
 });
  function x(){
    if(keys[0]) { logo.style.left=dec(logo.style.left) }
    if(keys[1]) { logo.style.left=inc(logo.style.left) }
    if(keys[2]) { logo.style.top=dec(logo.style.top) }
    if(keys[3]) { logo.style.top=inc(logo.style.top) } 
 };
 var interval=setInterval(x,20)

مبدأ العمل

عند ضغط احد الأزرار يتم تعيين حالة الزر إلى 1 (يعني أن الزر مضغوط) هنا نستخدم الحدث keydown

عند التوقف عن الضغط يتم جعل الحالة 0 هنا نستخدم الحدث keyup

نقوم عن طريق تابع setInterval بالتحقق المستمر من حالة الأزرار والتحريك على أساس حالة الزر

الفكرة قرأتها منذ سنتين تقريبًا أثناء تعلّم OpenGL من سلسلة دروس عربية (أو كتاب الكتروني) للأسف لا أذكر الموضع الذي قرأتها فيه.

والله وليّ التوفيق