<!DOCTYPE html>
<html>
<head>
    <title>لعبة Pong باستخدام Canvas</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; background: #000; }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // ضبط حجم Canvas ليملأ الشاشة
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        // متغيرات اللعبة
        const paddleHeight = 100;
        const paddleWidth = 15;
        const ballSize = 10;
        
        let playerY = (canvas.height - paddleHeight) / 2;
        let computerY = (canvas.height - paddleHeight) / 2;
        let ballX = canvas.width / 2;
        let ballY = canvas.height / 2;
        let ballSpeedX = 5;
        let ballSpeedY = 5;
        
        let playerScore = 0;
        let computerScore = 0;
        
        // التحكم بالمضرب
        canvas.addEventListener('mousemove', (e) => {
            playerY = e.clientY - paddleHeight / 2;
            if (playerY < 0) playerY = 0;
            if (playerY > canvas.height - paddleHeight) playerY = canvas.height - paddleHeight;
        });
        
        // حلقة اللعبة
        function gameLoop() {
            // مسح الشاشة
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // رسم المضارب
            ctx.fillStyle = 'white';
            ctx.fillRect(10, playerY, paddleWidth, paddleHeight); // لاعب
            ctx.fillRect(canvas.width - paddleWidth - 10, computerY, paddleWidth, paddleHeight); // حاسوب
            
            // رسم الكرة
            ctx.fillRect(ballX - ballSize/2, ballY - ballSize/2, ballSize, ballSize);
            
            // حركة الكرة
            ballX += ballSpeedX;
            ballY += ballSpeedY;
            
            // اصطدام الكرة بالحواف العلوية والسفلية
            if (ballY < ballSize/2 || ballY > canvas.height - ballSize/2) {
                ballSpeedY = -ballSpeedY;
            }
            
            // اصطدام الكرة بمضرب اللاعب
            if (ballX - ballSize/2 < 10 + paddleWidth && 
                ballY > playerY && ballY < playerY + paddleHeight) {
                ballSpeedX = -ballSpeedX * 1.1; // زيادة السرعة قليلاً
            }
            
            // اصطدام الكرة بمضرب الحاسوب (بشكل بسيط)
            if (ballX + ballSize/2 > canvas.width - 10 - paddleWidth && 
                ballY > computerY && ballY < computerY + paddleHeight) {
                ballSpeedX = -ballSpeedX;
            }
            
            // تحريك مضرب الحاسوب (ذكاء اصطناعي بسيط)
            computerY += (ballY - (computerY + paddleHeight/2)) * 0.1;
            
            // تسجيل النقاط
            if (ballX < 0) {
                computerScore++;
                resetBall();
            }
            if (ballX > canvas.width) {
                playerScore++;
                resetBall();
            }
            
            // عرض النتيجة
            ctx.font = '30px Arial';
            ctx.fillText(playerScore, 100, 50);
            ctx.fillText(computerScore, canvas.width - 100, 50);
            
            requestAnimationFrame(gameLoop);
        }
        
        function resetBall() {
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballSpeedX = -ballSpeedX;
            ballSpeedY = 5 * (Math.random() - 0.5);
        }
        
        gameLoop(); // بدء اللعبة
    </script>
</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.