<!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>
