كيف بُنيت هذه اللعبة

أي لعبة تُبنى مسطّحة، تتكوّن من ثلاثة أجزاء لا أكثر: الحالة (أين الثعبان، وين الأكل، شكد النقاط)، والحلقة (تحرّك اللعبة خطوة كل فترة زمنية)، والرسم (تحوّل الحالة إلى صورة على الشاشة). افهم هذي الثلاثة، وتفهم أي لعبة.

الملفات المستخدمة:

• index.html — البنية: اللوحة، الأزرار، لوحة الأرقام.
• styles.css — الشكل والألوان والحركات.
• game.js — عقل اللعبة: الحالة + الحلقة + الرسم.

الثعبان قائمة من خلايا (كل خلية لها x و y على شبكة ٢٠×٢٠). الأكل نقطة واحدة. والباقي أرقام صغيرة. حالة اللعبة نفسها كلمة واحدة: idle أو running أو paused أو over.

let snake;      // [{x, y}, {x, y}, ...]  الرأس أول عنصر
let dir;        // {x: 1, y: 0} يعني يتجه يمين
let queue;      // أوامر الحركة المنتظرة
let food;       // {x, y}
let score, best, speedKey;
let state;      // idle | running | paused | over
let acc = 0;    // الوقت المتراكم من آخر خطوة
let particles = [];

أهم فكرة: لا تعتمد على الشاشة لتخزين المعلومة. لو مُسحت الشاشة بالكامل، لازم تقدر تعيد رسم اللعبة كاملة من هذي المتغيّرات.

المتصفح يناديك ~60 مرة في الثانية عبر requestAnimationFrame. لكن اللعبة نفسها ما تتحرك ٦٠ مرة بالثانية — تتحرك كل tickMs (مثلًا ١٢٠ مللي ثانية للسرعة العادية). نفصل الاثنين: نرسم ٦٠ مرة، ونحدّث الحالة بخطوات ثابتة.

function loop(now) {
  const dt = Math.min(now - last, 100); // درع ضد قفزة الوقت
  last = now;
  update(dt);            // ١) منطق اللعبة
  draw(acc / tickMs);    // ٢) الرسم + نسبة التقدّم
  requestAnimationFrame(loop);
}

function update(dt) {
  if (state !== 'running') return;
  acc += dt;
  while (acc >= tickMs) { acc -= tickMs; step(); }
}

ليش نمرّر acc / tickMs للرسم؟ لأن هذي النسبة (بين ٠ و ١) تخلينا نرسم الثعبان بين الخلية السابقة والحالية — فتطلع الحركة ناعمة بدل ما تقفز مربع مربع.

الخطأ الشائع: تنفّذ أمر اللاعب فورًا داخل مستمع الكيبورد. النتيجة إن اللاعب يضغط بسرعة فيرجع الثعبان على نفسه ويموت بلا سبب مفهوم. الحل: طابور أوامر يُفرَّغ مرة واحدة عند كل خطوة.

const OPPOSITE = { up: 'down', down: 'up', left: 'right', right: 'left' };
let currentName = 'right';

function turn(name) {
  if (OPPOSITE[name] === currentName) return; // ممنوع الرجوع
  if (queue.length > 1) return;              // أمرين معلّقين كحد أقصى
  queue.push(name);
}

ونفس الدالة turn() تخدم كل المدخلات: الكيبورد والأسهم على الشاشة والسحب بالإصبع. لهذا تكون تجربة الجوال مطابقة للكمبيوتر.

canvas.addEventListener('pointerup', e => {
  const dx = e.clientX - start.x, dy = e.clientY - start.y;
  if (Math.abs(dx) > Math.abs(dy)) turn(dx > 0 ? 'right' : 'left');
  else                              turn(dy > 0 ? 'down'  : 'up');
});

كل خطوة تسأل ثلاثة أسئلة بالترتيب: وين راح يكون الرأس الجديد؟ هل خرج من الجدار؟ هل دخل على جسمه؟ وبعدها: هل أكل؟ لو أكل، ما نحذف الذيل فيطول الثعبان؛ لو ما أكل، نحذف الذيل فيتحرك.

function step() {
  const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };

  if (head.x < 0 || head.y < 0 || head.x >= COLS || head.y >= ROWS) return die();

  const body = snake.slice(0, -1); // الذيل يتحرك، فلا يُحسب
  if (body.some(s => s.x === head.x && s.y === head.y)) return die();

  snake.unshift(head);
  if (head.x === food.x && head.y === food.y) { eat(); } else { snake.pop(); }
}

الرسم دائمًا بنفس الترتيب: امسح، ارسم الشبكة، ارسم الأكل، ارسم الثعبان، ارسم الجزيئات. والوحدة الأساسية هي cell = حجم اللوحة ÷ عدد الخلايا، فلا يهم مقاس الشاشة.

function draw(t) {
  const size = canvas.clientWidth, cell = size / COLS;
  ctx.clearRect(0, 0, size, size);
  drawGrid(size, cell);
  drawFood(cell);
  drawSnake(cell, t);   // t = نسبة التقدّم للحركة الناعمة
  drawParticles();
}

التوهّج (glow) سطرين فقط، ويغيّر إحساس اللعبة كلّه:

ctx.shadowColor = '#22c55e';
ctx.shadowBlur = 18;
// ثم ارسم الدائرة... ولا تنسَ إرجاعه لصفر بعده

ولأن الشاشات عالية الدقة تحتاج ضبطًا، نكبير المخزن الداخلي للـ canvas حسب devicePixelRatio وإلا تطلع الحواف مغبّشة:

function fit() {
  const dpr = window.devicePixelRatio || 1;
  const size = canvas.clientWidth;
  canvas.width = size * dpr; canvas.height = size * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // نرسم بوحدات CSS
}

ما نحمّل أي mp3. نبني صوت "أركيد" من موجة مربّعة بسيطة عبر Web Audio API، وكل نغمة دالة من سطرين. الصوت يُبنى وقت التشغيل، فحجم اللعبة يبقى صفر بايت من الملفات.

let ac;
function beep(freq, dur, type = 'square') {
  if (muted) return;
  ac ??= new (window.AudioContext || window.webkitAudioContext)();
  const o = ac.createOscillator(), g = ac.createGain();
  o.type = type; o.frequency.value = freq;
  g.gain.setValueAtTime(.05, ac.currentTime);
  g.gain.exponentialRampToValueAtTime(.0001, ac.currentTime + dur);
  o.connect(g).connect(ac.destination);
  o.start(); o.stop(ac.currentTime + dur);
}

سطران يعطيان اللعبة ذاكرة: نخزّن أفضل نتيجة في localStorage فتبقى بعد إغلاق المتصفح. ونتعامل مع try/catch لأن الوضع الخاص (incognito) قد يرفض التخزين.

const KEY = 'sanaa-snake-best';

function readBest() {
  try { return Number(localStorage.getItem(KEY)) || 0; } catch { return 0; }
}
function saveBest(n) {
  try { localStorage.setItem(KEY, String(n)); } catch {}
}

أفضل طريقة تتعلّم: غيّر شيئًا واحدًا وأعد التشغيل. جرّب هذي التحديات بالترتيب من الأسهل:

• سهل: غيّر COLS وROWS إلى 12 — ستلعب على شبكة أصغر وأصعب.
• سهل: اجعل الجدران تنقلك للجهة الثانية بدل الموت: head.x = (head.x + COLS) % COLS.
• متوسط: أضف عقبات ثابتة كما في لعبة الثعبان الكلاسيكية (مصفوفة walls وتحقّق منها في step()).
• متوسط: «أكل ذهبي» يظهر كل ٣٠ ثانية ويساوي ٥٠ نقطة وينتهي وقته.
• متقدم: أضف خادمًا صغيرًا (Node + Express) واحفظ النتائج في قاعدة بيانات لتظهر قائمة أفضل ١٠ نتائج لكل اللاعبين.

نزّل الملفات الثلاثة من هذه الصفحة، ضعها في مجلد واحد، وافتح index.html بالمتصفح. لا تحتاج Node ولا أي تثبيت — اللعبة كلها HTML وCSS وJavaScript عادي.