<!DOCTYPE html> 
	<html lang="ar"> 
	<head> 
	  <meta charset="UTF-8"> 
	  <title>طائرة العقبات ✈️</title> 
	  <style> 
	    body { 
	      margin: 0; 
	      background: #87CEEB; 
	      text-align: center; 
	      font-family: Arial, sans-serif; 
	    } 
	    canvas { 
	      background: #87CEEB; 
	      display: block; 
	      margin: auto; 
	      border: 3px solid #000; 
	    } 
	    h1 { 
	      margin: 10px; 
	    } 
	  </style> 
	</head> 
	<body> 
	  <h1>✈️ لعبة الطائرة وتخطي الحواجز</h1> 
	  <p>اضغط المسافة للقفز!</p> 
	  <canvas id="gameCanvas" width="400" height="500"></canvas>
 
	  <script> 
	    const canvas = document.getElementById('gameCanvas'); 
	    const ctx = canvas.getContext('2d');
 
	    // اللاعب (الطائرة) 
	    let plane = { 
	      x: 80, 
	      y: 200, 
	      width: 30, 
	      height: 30, 
	      velocity: 0, 
	      gravity: 0.6, 
	      lift: -10 
	    };
 
	    let score = 0; 
	    let gameOver = false;
 
	    // الحواجز 
	    let pipes = []; 
	    const pipeWidth = 50; 
	    const gap = 120; 
	    let pipeSpeed = 2;
 
	    // أول حاجز 
	    pipes.push({ 
	      x: canvas.width, 
	      top: Math.random() * 200 + 20 
	    });
 
	    // التحكم 
	    document.addEventListener('keydown', function (e) { 
	      if (e.code === 'Space' && !gameOver) { 
	        plane.velocity = plane.lift; 
	      } else if (gameOver && e.code === 'Space') { 
	        location.reload(); // إعادة اللعبة 
	      } 
	    });
 
	    function drawPlane() { 
	      ctx.fillStyle = 'red'; 
	      ctx.fillRect(plane.x, plane.y, plane.width, plane.height); 
	    }
 
	    function drawPipes() { 
	      ctx.fillStyle = 'green'; 
	      pipes.forEach(pipe => { 
	        // الجزء العلوي 
	        ctx.fillRect(pipe.x, 0, pipeWidth, pipe.top); 
	        // الجزء السفلي 
	        ctx.fillRect(pipe.x, pipe.top + gap, pipeWidth, canvas.height); 
	      }); 
	    }
 
	    function update() { 
	      if (gameOver) return;
 
	      // حركة الطائرة 
	      plane.velocity += plane.gravity; 
	      plane.y += plane.velocity;
 
	      // تحديث الحواجز 
	      pipes.forEach(pipe => { 
	        pipe.x -= pipeSpeed; 
	      });
 
	      // إضافة حواجز جديدة 
	      if (pipes[pipes.length - 1].x < canvas.width - 150) { 
	        pipes.push({ 
	          x: canvas.width, 
	          top: Math.random() * 200 + 20 
	        }); 
	      }
 
	      // إزالة الحواجز القديمة 
	      if (pipes[0].x + pipeWidth < 0) { 
	        pipes.shift(); 
	        score++; 
	      }
 
	      // تصادم 
	      pipes.forEach(pipe => { 
	        if ( 
	          plane.x < pipe.x + pipeWidth && 
	          plane.x + plane.width > pipe.x && 
	          (plane.y < pipe.top || plane.y + plane.height > pipe.top + gap) 
	        ) { 
	          gameOver = true; 
	        } 
	      });
 
	      // اصطدام بالأرض أو السقف 
	      if (plane.y + plane.height > canvas.height || plane.y < 0) { 
	        gameOver = true; 
	      } 
	    }
 
	    function drawScore() { 
	      ctx.fillStyle = 'black'; 
	      ctx.font = '20px Arial'; 
	      ctx.fillText('النقاط: ' + score, 10, 30); 
	    }
 
	    function drawGameOver() { 
	      ctx.fillStyle = 'black'; 
	      ctx.font = '30px Arial'; 
	      ctx.fillText('انتهت اللعبة!', 100, canvas.height / 2 - 10); 
	      ctx.font = '18px Arial'; 
	      ctx.fillText('اضغط المسافة لإعادة اللعب', 90, canvas.height / 2 + 20); 
	    }
 
	    function loop() { 
	      ctx.clearRect(0, 0, canvas.width, canvas.height);
 
	      drawPlane(); 
	      drawPipes(); 
	      drawScore(); 
	      update();
 
	      if (gameOver) { 
	        drawGameOver(); 
	      } else { 
	        requestAnimationFrame(loop); 
	      } 
	    }
 
	    loop(); 
	  </script> 
	</body> 
	</html>
 
	 
 
	<!DOCTYPE html> 
	<html lang="ar"> 
	<head> 
	  <meta charset="UTF-8"> 
	  <title>طائرة العقبات ✈️</title> 
	  <style> 
	    body { 
	      margin: 0; 
	      background: #87CEEB; 
	      text-align: center; 
	      font-family: Arial, sans-serif; 
	    } 
	    canvas { 
	      background: #87CEEB; 
	      display: block; 
	      margin: auto; 
	      border: 3px solid #000; 
	    } 
	    h1 { 
	      margin: 10px; 
	    } 
	  </style> 
	</head> 
	<body> 
	  <h1>✈️ لعبة الطائرة وتخطي الحواجز</h1> 
	  <p>اضغط المسافة للقفز!</p> 
	  <canvas id="gameCanvas" width="400" height="500"></canvas>
 
	  <script> 
	    const canvas = document.getElementById('gameCanvas'); 
	    const ctx = canvas.getContext('2d');
 
	    // اللاعب (الطائرة) 
	    let plane = { 
	      x: 80, 
	      y: 200, 
	      width: 30, 
	      height: 30, 
	      velocity: 0, 
	      gravity: 0.6, 
	      lift: -10 
	    };
 
	    let score = 0; 
	    let gameOver = false;
 
	    // الحواجز 
	    let pipes = []; 
	    const pipeWidth = 50; 
	    const gap = 120; 
	    let pipeSpeed = 2;
 
	    // أول حاجز 
	    pipes.push({ 
	      x: canvas.width, 
	      top: Math.random() * 200 + 20 
	    });
 
	    // التحكم 
	    document.addEventListener('keydown', function (e) { 
	      if (e.code === 'Space' && !gameOver) { 
	        plane.velocity = plane.lift; 
	      } else if (gameOver && e.code === 'Space') { 
	        location.reload(); // إعادة اللعبة 
	      } 
	    });
 
	    function drawPlane() { 
	      ctx.fillStyle = 'red'; 
	      ctx.fillRect(plane.x, plane.y, plane.width, plane.height); 
	    }
 
	    function drawPipes() { 
	      ctx.fillStyle = 'green'; 
	      pipes.forEach(pipe => { 
	        // الجزء العلوي 
	        ctx.fillRect(pipe.x, 0, pipeWidth, pipe.top); 
	        // الجزء السفلي 
	        ctx.fillRect(pipe.x, pipe.top + gap, pipeWidth, canvas.height); 
	      }); 
	    }
 
	    function update() { 
	      if (gameOver) return;
 
	      // حركة الطائرة 
	      plane.velocity += plane.gravity; 
	      plane.y += plane.velocity;
 
	      // تحديث الحواجز 
	      pipes.forEach(pipe => { 
	        pipe.x -= pipeSpeed; 
	      });
 
	      // إضافة حواجز جديدة 
	      if (pipes[pipes.length - 1].x < canvas.width - 150) { 
	        pipes.push({ 
	          x: canvas.width, 
	          top: Math.random() * 200 + 20 
	        }); 
	      }
 
	      // إزالة الحواجز القديمة 
	      if (pipes[0].x + pipeWidth < 0) { 
	        pipes.shift(); 
	        score++; 
	      }
 
	      // تصادم 
	      pipes.forEach(pipe => { 
	        if ( 
	          plane.x < pipe.x + pipeWidth && 
	          plane.x + plane.width > pipe.x && 
	          (plane.y < pipe.top || plane.y + plane.height > pipe.top + gap) 
	        ) { 
	          gameOver = true; 
	        } 
	      });
 
	      // اصطدام بالأرض أو السقف 
	      if (plane.y + plane.height > canvas.height || plane.y < 0) { 
	        gameOver = true; 
	      } 
	    }
 
	    function drawScore() { 
	      ctx.fillStyle = 'black'; 
	      ctx.font = '20px Arial'; 
	      ctx.fillText('النقاط: ' + score, 10, 30); 
	    }
 
	    function drawGameOver() { 
	      ctx.fillStyle = 'black'; 
	      ctx.font = '30px Arial'; 
	      ctx.fillText('انتهت اللعبة!', 100, canvas.height / 2 - 10); 
	      ctx.font = '18px Arial'; 
	      ctx.fillText('اضغط المسافة لإعادة اللعب', 90, canvas.height / 2 + 20); 
	    }
 
	    function loop() { 
	      ctx.clearRect(0, 0, canvas.width, canvas.height);
 
	      drawPlane(); 
	      drawPipes(); 
	      drawScore(); 
	      update();
 
	      if (gameOver) { 
	        drawGameOver(); 
	      } else { 
	        requestAnimationFrame(loop); 
	      } 
	    }
 
	    loop(); 
	  </script> 
	</body> 
	</html>