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) } 
 });

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

المراجع

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