اذهب إلى المحتوى

ريان قرايري

الأعضاء
  • المساهمات

    1
  • تاريخ الانضمام

  • تاريخ آخر زيارة

إنجازات ريان قرايري

عضو مبتدئ

عضو مبتدئ (1/3)

0

السمعة بالموقع

  1. <!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>
×
×
  • أضف...