لعبة Snake تفاعلية باستخدام React و TypeScript مع Canvas API

قمت بتطوير لعبة Snake الكلاسيكية بشكل تفاعلي باستخدام React و TypeScript، مع الاعتماد على HTML5 Canvas API للرسم الديناميكي داخل الشبكة.

تعتمد اللعبة على منطق حركة منظم وإدارة حالة متقدمة باستخدام React Hooks، مع نظام نقاط (Score) وأعلى نتيجة (High Score)، وإمكانية إيقاف واستكمال اللعب (Pause / Resume)، بالإضافة إلى إعادة تشغيل اللعبة عند انتهاء الجولة.

المميزات:

نظام نقاط مع حفظ أعلى نتيجة أثناء الجلسة

كشف الاصطدام بالجدران وبجسم الثعبان

منع الحركة العكسية غير المسموحة

توليد طعام عشوائي داخل الشبكة مع منع التداخل

تحكم عبر لوحة المفاتيح أو أزرار تحكم على الشاشة

واجهة حديثة بتصميم داكن باستخدام Tailwind CSS

كود منظم وقابل للتطوير

التقنيات المستخدمة:

React.js

TypeScript

HTML5 Canvas API

Tailwind CSS