كيفية إنشاء لعبة كرة قدم

تعد لغة JavaScript إحدى اللغات الأكثر استخدامًا في تطوير الألعاب وخاصةً الألعاب على الويب. في هذا الدرس، سوف نتعلم كيفية إنشاء لعبة كرة قدم بسيطة باستخدام لغة JavaScript.
لإنشاء هذه اللعبة، سوف نستخدم مكتبة الرسومات Canvas التي تأتي مدمجة في لغة JavaScript وتسمح لنا برسم الشكل والرسومات على صفحة الويب. سوف نحتاج أيضًا إلى بعض المعلومات حول مبادئ الفيزياء والحسابية.

يجب أن يكون لدينا ملعب كرة القدم.

يجب أن يكون لدينا لاعبين يتحركون على الملعب ويستطيعون التحكم بهم.

يجب أن يكون لدينا كرة تتحرك على الملعب وتتفاعل مع اللاعبين والحواجز الأخرى على الملعب.

إنشاء ملعب كرة القدم:
سنبدأ بإنشاء الملعب باستخدام عنصر canvas في HTML. سيكون عرض الملعب 800 بكسل وارتفاعه 600 بكسل.

HTML


<canvas id="myCanvas" width="800" height="600"></canvas>

الآن نحتاج إلى استدعاء العنصر canvas في JavaScript وإنشاء كائن context الذي يسمح لنا برسم الأشياء على العنصر canvas.

JavaScript


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

سنستخدم دالة fillRect() لرسم المستطيل الأخضر الذي يمثل الملعب.

JavaScript


ctx.fillStyle = ("#080");
ctx.fillRect(0, 0, canvas.width, canvas.height);

إنشاء اللاعبين:
سنقوم بإنشاء لاعبين اثنين باستخدام دالة drawImage() لعرض الصورة الخاصة باللاعب على الشاشة.

JavaScript


var player1 = new Image();
player1.src = "player1.png";

var player2 = new Image();
player2.src = "player2.png";

الآن، سنقوم بتحديد موقع بدء اللاعبين على الملعب باستخدام قيمة x و y.

JavaScript


var player1X = 100;
var player1Y = 300;

var player2X = 600;
var player2Y = 300;

بعد ذلك، سنستخدم دالة drawImage() لعرض اللاعبين على الملعب.

JavaScript


ctx.drawImage(player1, player1X, player1Y);
ctx.drawImage(player2, player2X, player2Y);

لجعل اللاعبين يتحركون، سنستخدم دالة addEventListener() لتحريك اللاعبين عند الضغط على الأزرار المناسبة.

JavaScript


document.addEventListener("keydown", movePlayer);

function movePlayer(e) {
    if (e.keyCode == 65) { //  اللاعب 1 يتحرك إلى اليسار عند الضغط على حرف A
        player1X -= 10;
    } else if (e.keyCode == 68) { //  اللاعب 1 يتحرك إلى اليمين عند الضغط على حرف D
        player1X += 10;
    } else if (e.keyCode == 37) { //  اللاعب 2 يتحرك إلى اليسار عند الضغط على السهم الأيسر
        player2X -= 10;
    } else if (e.keyCode == 39) { //  اللاعب 2 يتحرك إلى اليمين عند الضغط على السهم الأيمن
        player2X += 10;
    }
}

إنشاء الكرة:
سنستخدم دالة drawImage() لعرض الكرة على الملعب.

JavaScript


var ball = new Image();
ball.src = "ball.png";

var ballX = 400;
var ballY = 300;

ctx.drawImage(ball, ballX, ballY);

لجعل الكرة تتحرك، سنقوم بإضافة دالة animate() التي ستقوم بتحديث موقع الكرة بشكل مستمر.

JavaScript


function animate() {
    // موقع الكرة يتغير بشكل عشوائي في البداية
    ballX += Math.floor(Math.random() * 5) - 2;
    ballY += Math.floor(Math.random() * 5) - 2;
    
    // رسم الملعب واللاعبين والكرة
    ctx.fillStyle = "#080";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(player1, player1X, player1Y);
    ctx.drawImage(player2,player2X, player2Y);
    ctx.drawImage(ball, ballX, ballY);
    
    // إعادة تشغيل الدالة بشكل مستمر
    requestAnimationFrame(animate);
}
    
    animate();

تحديد حركة الكرة:
نحتاج إلى تحديد حركة الكرة عند اصطدامها باللاعبين أو بجدران الملعب. يمكننا تحقيق ذلك باستخدام الشروط المناسبة في دالة animate().

JavaScript


function animate() {
    // اختبار اصطدام الكرة بالاعب 1
    if (ballX >= player1X && ballX <= player1X + player1.width && ballY >= player1Y && ballY <= player1Y + player1.height) {
        ballX += 5;
        ballY += 5;
    }

    // اختبار اصطدام الكرة بلاعب 2
    if (ballX >= player2X && ballX <= player2X + player2.width && ballY >= player2Y && ballY <= player2Y + player2.height) {
        ballX -= 5;
        ballY -= 5;
    }
    // اختبار اصطدام الكرة بجدار الملعب الأيسر
    if (ballX <= 0) {
        ballX = 0;
    }

    // اختبار اصطدام الكرة بجدار الملعب الأيمن
    if (ballX >= canvas.width - ball.width) {
        ballX = canvas.width - ball.width;
    }
    // اختبار اصطدام الكرة بجدار الملعب العلوي
    if (ballY <= 0) {
        ballY = 0;
    }
    // اختبار اصطدام الكرة بجدار الملعب السفلي
    if (ballY >= canvas.height - ball.height) {
        ballY = canvas.height - ball.height;
    }

    // تحديث موقع الكرة
    ballX += Math.floor(Math.random() * 5) - 2;
    ballY += Math.floor(Math.random() * 5) - 2;

    // رسم الملعب واللاعبين والكرة
    ctx.fillStyle = "#080";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(player1, player1X, player1Y);
    ctx.drawImage(player2, player2X, player2Y);
    ctx.drawImage(ball, ballX, ballY);

    // إعادة تشغيل الدالة بشكل مستمر
    requestAnimationFrame(animate);
}
    
animate();

بهذا الشكل، يمكنك إنشاء لعبة كرة القدم الأساسية باستخدام JavaScript و HTML5 Canvas. يمكنك إضافة المزيد من الميزات والخصائص لتحسين تجربة اللاعبين، مثل إضافة الأهداف والتصادمات بين اللاعبين والكرة وتطوير الرسومات والتحكم في الصوت والأصوات والكثير من الخيارات الأخرى.

وهكذا إنتهينا إذا أعجبكم الدرس أتمنى تدعومنا بمشاركته وشكرا لكم و وفقكم الله.