أمثلة وتطبيقات

مثال: نسخة مبسطة من ملف JavaScript للعبة (الكود المولَّد عندك سيختلف، لكن الأفكار نفسها):

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

// الكرة
let x = 240, y = 280;
let dx = 2, dy = -2;
const ballRadius = 8;

// المضرب (اللاعب)
const paddleWidth = 80, paddleHeight = 10;
let paddleX = 200;

// القوالب: مصفوفة ثنائية الأبعاد
const rows = 3, cols = 6;
const brickWidth = 70, brickHeight = 20, gap = 8;
const bricks = [];
for (let r = 0; r < rows; r++) {
  bricks[r] = [];
  for (let c = 0; c < cols; c++) {
    bricks[r][c] = { alive: true };
  }
}

let score = 0;
let lives = 3;

document.addEventListener("mousemove", (e) => {
  paddleX = e.offsetX - paddleWidth / 2;
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // رسم القوالب واكتشاف اصطدام الكرة بها
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      const b = bricks[r][c];
      if (!b.alive) continue;
      const bx = c * (brickWidth + gap) + 10;
      const by = r * (brickHeight + gap) + 30;
      ctx.fillStyle = "orange";
      ctx.fillRect(bx, by, brickWidth, brickHeight);
      if (x > bx && x < bx + brickWidth && y > by && y < by + brickHeight) {
        dy = -dy;
        b.alive = false;
        score = score + 1;
      }
    }
  }

  // رسم الكرة والمضرب
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.fillStyle = "black";
  ctx.fillRect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillText("Score: " + score + "  Lives: " + lives, 10, 15);

  // الارتداد عن الجدران
  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) dx = -dx;
  if (y + dy < ballRadius) dy = -dy;

  // الوصول إلى الأسفل: مضرب أم ضياع محاولة؟
  if (y + dy > canvas.height - ballRadius - paddleHeight) {
    if (x > paddleX && x < paddleX + paddleWidth) {
      dy = -dy;
    } else {
      lives = lives - 1;
      if (lives === 0) {
        alert("انتهت اللعبة! نتيجتك: " + score);
        document.location.reload();
        return;
      }
      x = 240; y = 280; dx = 2; dy = -2;
    }
  }

  x = x + dx;
  y = y + dy;
  requestAnimationFrame(draw);
}

draw();

ويحتاج ملف HTML إلى لوحة رسم وربط الملف: <canvas id="game" width="480" height="320"></canvas> ثم <script src="game.js"></script>.

قراءة الكود:

• if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) dx = -dx; معناها: إذا كانت الخطوة القادمة ستتجاوز الجدار الأيمن أو الأيسر فاعكس الاتجاه الأفقي. والرمز || يعني “أو”.
• عند سقوط الكرة إلى أسفل: إذا كانت فوق المضرب ترتد، وإلا تنقص المحاولات lives، وعند انتهائها تنتهي اللعبة.

تطوير: تغيير زاوية الارتداد حسب مكان الاصطدام بالمضرب — نستبدل dy = -dy; داخل شرط المضرب بما يلي:

dy = -dy;
const hitPoint = x - (paddleX + paddleWidth / 2);
dx = hitPoint * 0.1;

إذا اصطدمت الكرة بمنتصف المضرب تكون hitPoint قريبة من الصفر فترتد الكرة رأسيًّا تقريبًا، وكلما اصطدمت قرب طرف المضرب زاد ميلها يمينًا أو يسارًا.

تطوير: زيادة السرعة — نضاعف قيم الحركة الابتدائية، مثل dx = 3 وdy = -3 بدل 2.

اكتب ما فهمته بعد التعديل:

• الصعوبات: مثل “لم أعرف أي قيمة أغيرها لتكبير الكرة”، أو “صعب أن أجد مكان رسم الكرة في الكود الطويل”.
• الاستراتيجيات (نقاط الإبداع): مثل “خمنت المعنى من أسماء المتغيرات وبحثت عن الأجزاء المرتبطة بها”، أو “غيرت القيم قليلًا وجربت الحركة بعد كل تعديل”.