تعلم بناء لعبة إكس أو (Tic-Tac-Toe) باستخدام React Hooks: دليل شامل للمطورين

إذا كنت تتمتع بفهم جيد لأساسيات HTML و CSS و JavaScript و React، فربما تتساءل عن الخطوة التالية في رحلتك التعليمية. ما رأيك في استكشاف دليل Scrimba التعليمي المجاني والجديد كليًا حول كيفية بناء لعبة إكس أو (Tic-Tac-Toe) الكلاسيكية باستخدام React؟

انقر على الصورة أعلاه للانتقال إلى الدليل التعليمي. تعتمد اللعبة النموذجية على الدروس التعليمية الرسمية من React، ولكنها محدثة لتستخدم React Hooks – وهو الموضوع الأكثر رواجًا في عالم React حاليًا. يقدم لك هذا المقال نظرة عامة على الدليل التعليمي، ويتيح لك النقر للانتقال إلى مقاطع الفيديو التفاعلية واللعب بالتعليمات البرمجية في أي وقت.

إذا كنت تشعر أن مهاراتك في HTML أو CSS أو JavaScript أو React ليست ثابتة بعد، فلا تقلق! تقدم Scrimba مجموعة واسعة من الدروس التعليمية لمساعدتك على اللحاق بالركب. نوصي بالدورات التالية لتجهيزك لدليل لعبة إكس أو (Tic-Tac-Toe):

• دورة مكثفة في HTML & CSS مع Kevin Powell
• مقدمة إلى Javascript مع Dylan C. Israel
• تعلم React مجانًا مع Bob Ziroll

على غرار أسلوب Scrimba المعتاد، يحتوي دليل Build Tic-Tac-Toe with React Hooks على الكثير من التحديات التفاعلية على طول الطريق، مما سيساعدك على ترسيخ تعلمك وستشعر وكأنك ساحر في استخدام Hooks بنهاية الدورة. يقود الدورة Thomas Weibenfalk، وهو مطور ومصمم ومعلم برمجة شغوف من السويد. يحب Thomas تعليم الناس عن تطوير الواجهة الأمامية، وخاصة React، مما يجعله المعلم المثالي ليقودك خلال هذه التجربة التعليمية. بافتراض أنك مستعد لبناء لعبة إكس أو (Tic-Tac-Toe)، فلنبدأ!

مقدمة إلى عالم React Hooks وبناء لعبة إكس أو

في الجزء الأول من الدورة، يخبرنا Thomas عن خططه للدليل التعليمي ويشاركنا الوثائق الرسمية لـ React، والتي يمكننا الرجوع إليها للحصول على شرح أكثر تفصيلاً للميزات المستخدمة لبناء اللعبة. بالإضافة إلى شرحه لهيكلة الملفات التي طبقها للتطبيق، يقدم لنا Thomas أيضًا لمحة أولى عن المنتج النهائي. انقر على الصورة أعلاه لزيارة المقطع التعليمي.

هيكلة المكونات الأساسية للعبة

إعداد ملفات المكونات: Board.js، Game.js، Square.js

بعد ذلك، يشرح لنا Thomas كيفية إعداد ملفات Board.js و Game.js و Square.js اللازمة لإنشاء اللعبة. نرى أيضًا كيفية استيراد Game.js إلى ملف App.js.

 import React from "react" ; import Game from "./components/Game" ; const App = () => < Game /> ; export default App;

مكون المربع Square وتفكيك الخصائص (Destructuring Props)

في المقطع التالي، نقوم بإنشاء مكون المربع (Square) باستخدام JSX لإضافة زر:

 const Square = ( props ) => ( < button onClick = {props.onClick} > {props.value} </ button > );

لتحدينا الأول، يشجعنا Thomas على تفكيك الخصائص (props) في مكوننا. انقر للانتقال إلى المقطع لتجربة التحدي.

مكون اللوحة Board وبناء الدوال الأولية

الآن حان الوقت لإنشاء مكون اللوحة (Board) عن طريق استيراد مكون المربع (Square) وإضافة تسعة نسخ منه إلى اللوحة (لاحظ أننا سنعيد هيكلة هذا باستخدام حلقة تكرارية لتحسين التعليمات البرمجية لاحقًا):

<div> < Square value = "1" onClick = {() => onClick("dummy value")} /> < Square value = "2" onClick = {() => onClick("dummy value")} /> < Square value = "3" onClick = {() => onClick("dummy value")} /> < Square value = "4" onClick = {() => onClick("dummy value")} /> < Square value = "5" onClick = {() => onClick("dummy value")} /> < Square value = "6" onClick = {() => onClick("dummy value")} /> < Square value = "7" onClick = {() => onClick("dummy value")} /> < Square value = "8" onClick = {() => onClick("dummy value")} /> < Square value = "9" onClick = {() => onClick("dummy value")} /> </div>

يقوم Thomas أيضًا ببناء الدوال الأولية التي نحتاجها في Game.js، والتي سنكملها لاحقًا.

تصميم وتنسيق مربعات اللعبة (Square Styling)

انقر على الصورة للوصول إلى المقطع التعليمي. بعد ذلك، نقوم بتنسيق مربعاتنا باستخدام الخاصية الافتراضية style:

 const style = { background : "lightblue" , border : "2px solid darkblue" , fontSize : "30px" , fontWeight : "800" , cursor : "pointer" , outline : "none" , }; const Square = ( { value, onClick } ) => ( < button style = {style} onClick = {onClick} > {value} </ button > );

تنسيق لوحة اللعبة (Board Styling) باستخدام CSS Grid

انقر على الصورة للوصول إلى المقطع التعليمي. الآن بعد أن أصبحت مربعاتنا جاهزة، حان الوقت لتنسيق اللوحة. يبدأ Thomas مرة أخرى بإنشاء كائن style، هذه المرة باستخدام CSS Grid:

 const style = { border : "4px solid darkblue" , borderRadius : "10px" , width : "250px" , height : "250px" , margin : "0 auto" , display : "grid" , gridTemplate : "repeat(3, 1fr) / repeat(3, 1fr)" , };

تحدينا الآن هو تطبيق كائن style على اللوحة. توجه إلى المقطع التعليمي لتجربته. لا تنسَ، بينما قدم Thomas بعض خيارات التنسيق الرائعة، فإن Scrimba تفاعلية بالكامل، لذا أنت حر في تخصيص لعبتك بالطريقة التي تفضلها – أطلق العنان لخيالك!

فهم دالة تحديد الفائز calculateWinner()

 export function calculateWinner ( squares ) { const lines = [ [ 0 , 1 , 2 ], [ 3 , 4 , 5 ], [ 6 , 7 , 8 ], [ 0 , 3 , 6 ], [ 1 , 4 , 7 ], [ 2 , 5 , 8 ], [ 0 , 4 , 8 ], [ 2 , 4 , 6 ], ]; for ( let i = 0 ; i < lines.length; i++) { const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null ; }

بعد ذلك، يشرح Thomas دالة calculateWinner() بالغة الأهمية، والمأخوذة من الدليل التعليمي الأصلي من reactjs.org. توجه إلى المقطع التعليمي لاستكشاف الدالة ومعرفة كيفية عملها بالتفصيل.

إدارة حالات اللعبة والبيانات الأولية

إنشاء حالات useState للوحة واللاعب التالي

في المقطع التالي، نبدأ في إنشاء منطق اللعبة. نبدأ بإضافة hook يسمى useState في Game.js وإنشاء حالات لتعيين لوحة فارغة وتحديد اللاعب التالي. أخيرًا، نضيف const winner، الذي يخبرنا ما إذا كانت الحركة الأخيرة حركة فائزة:

 const [board, setBoard] = useState( Array ( 9 ).fill( null )); const [xIsNext, setXisNext] = useState( true ); const winner = calculateWinner(board);

عرض المربعات ديناميكياً في مكون Board

في ملف Board.js، نقوم بحذف المربعات التي تم عرضها يدويًا واستبدالها بمربعات معروضة ديناميكيًا باستخدام دالة map، كما وعدنا سابقًا. انقر للانتقال لرؤية هذا بالتفصيل:

 const Board = ( { squares, onClick } ) => ( < div style = {style} > {squares.map((square, i) => ( < Square key = {i} value = {square} onClick = {() => onClick(i)} /> ))} </ div > );

تطوير دالة معالجة النقرات handleClick()

بعد ذلك، نقوم بإنشاء دالة handleClick()، التي تنفذ العمليات الحسابية عندما نقوم بحركة:

 const handleClick = ( i ) => { const boardCopy = [...board]; // If user click an occupied square or if game is won, return if (winner || boardCopy[i]) return ; // Put an X or an O in the clicked square boardCopy[i] = xIsNext ? "X" : "O" ; setBoard(boardCopy); setXisNext(!xIsNext); };

عرض الحركات النهائية وواجهة اللعب

انقر أعلاه للانتقال إلى الدليل التعليمي. في هذا المقطع، نقوم بإنشاء JSX الذي يجعل اللعبة قابلة للعب:

<> < Board squares = {board} onClick = {handleClick} /> < div style = {styles} > < p > {winner ? "Winner: " + winner : "Next Player: " + (xIsNext ? "X" : "O")} </ p > </ div > </>

لدينا الآن كل المعرفة اللازمة لإنشاء لعبة إكس أو (Tic-Tac-Toe) تعمل بكامل طاقتها باستخدام React Hooks!

ميزة إضافية: تنفيذ خاصية السفر عبر الزمن (Time Travel)

انقر على الصورة للانتقال إلى الدليل التعليمي الإضافي. في هذا المقطع الإضافي، ننتقل بلعبتنا إلى المستوى التالي من خلال تنفيذ خاصية السفر عبر الزمن لمراجعة الحركات التي تمت طوال اللعبة. انقر للانتقال للحصول على المزيد من الميزات الرائعة في هذا الدليل التعليمي الإضافي.

وهكذا نكون قد انتهينا – لعبة إكس أو (Tic-Tac-Toe) تعمل بكامل طاقتها باستخدام React Hooks! آمل أن يكون هذا الدليل التعليمي مفيدًا لك. لا تنسَ أنه يمكنك الرجوع إليه في أي وقت لتحديث ذاكرتك بالمواضيع التي تمت تغطيتها أو اللعب بالتعليمات البرمجية في مقاطع الفيديو التفاعلية. بعد ذلك، لماذا لا تستكشف بعضًا من العديد من الدروس التعليمية الأخرى المتاحة على Scrimba؟ مع مجموعة واسعة من المواضيع، هناك شيء يناسب الجميع. تعلم سعيد 🙂

الخلاصة التقنية

يُعد بناء لعبة إكس أو (Tic-Tac-Toe) باستخدام React Hooks طريقة ممتازة لتعزيز فهمك لمفاهيم React الحديثة. يبرز هذا الدليل التعليمي قوة Hooks في إدارة الحالة وتبسيط منطق المكونات الوظيفية، مما يجعل التعليمات البرمجية أكثر قابلية للقراءة والصيانة. من خلال التركيز على مكونات قابلة لإعادة الاستخدام مثل Square و Board، وتطبيق useState و handleClick بفعالية، يمكن للمطورين بناء تطبيقات ويب تفاعلية ومعقدة بكفاءة. إضافة ميزة مثل “السفر عبر الزمن” لا تزيد فقط من تعقيد المشروع بشكل مفيد، بل تعرض أيضًا إمكانيات React في التعامل مع سيناريوهات إدارة الحالة المتقدمة. إنها تجربة تعليمية قيمة لكل مطور React يطمح إلى إتقان أحدث الممارسات.