تمرين - Blazor

5 دقائق

في هذا التمرين، نقوم بإنشاء مشروع Blazor ونبدأ في إنشاء تطبيق يتحول إلى لعبة "Connect Four" خلال الوحدة النمطية.

إنشاء مشروع Blazor جديد

أولا، دعونا ننشئ مشروعا جديدا للعبتنا باستخدام Visual Studio 2022.

أنشئ تطبيق Blazor جديدا في Visual Studio 2022 عن طريق اختيار > جديد>.
اختر "Blazor Web App" من قائمة القوالب وقم بتسمائه ConnectFour. حدد التالي.
اختر .NET 8 لإصدار إطار العمل. يجب تعيين نوع المصادقة إلى بلا، ويجب تعيين وضع العرض التفاعلي إلى الخادم، ويجب تعيين موقع التفاعل إلى لكل صفحة/مكون. اترك جميع الخيارات الأخرى كإعدادات افتراضية.

يجب أن ينشئ هذا الإجراء دليل ConnectFour يحتوي على تطبيقنا.
شغل التطبيق بالضغط على F5 في Visual Studio 2022.

يجب أن تشاهد الآن تطبيق Blazor قيد التشغيل في المستعرض الخاص بك:

تهانينا! لقد أنشأت أول تطبيق Blazor!

إنشاء مكون لوحة

بعد ذلك، دعونا ننشئ مكون لوحة اللعبة لاستخدامه من قبل اللاعبين في لعبتنا. يتم تعريف المكون باستخدام بناء جملة Razor، وهو مزيج من HTML وC#.

انقر بزر الماوس الأيمن فوق مجلد Components في مستكشف الحلول Visual Studio. اختر Add > Razor Component من قائمة السياق وقم بتسمية الملف Board.razor.

نستخدم هذا المكون للاحتفاظ بكل ما هو مطلوب لتخطيط لوحة اللعبة وإدارة التفاعلات معه. المحتويات الأولية لهذا المكون الجديد هي h3 علامة كتلة @code تشير إلى مكان كتابة التعليمات البرمجية C#‎:
```
<h3>Board</h3>

@code {

}
```
Home قم بإعداد الصفحة عن طريق فتح الملف Components/Pages/Home.razor ومسح كل شيء بعد السطر الثالث باستخدام علامة "PageTitle".
```
@page "/"

<PageTitle>Home</PageTitle>
```
أضف مكوننا Board إلى Home الصفحة عن طريق إضافة <Board /> علامة، والتي تطابق اسم ملف المكون الجديد.
```
@page "/"

<PageTitle>Index</PageTitle>
<Board />
```
لمشاهدة التغييرات، قم بتشغيل التطبيق باستخدام F5. إذا كان التطبيق قيد التشغيل بالفعل، فاضغط على الزر Hot Reload بجوار الزر Run/Continue لتطبيق التغييرات على التطبيق قيد التشغيل.

تلميح

حدد الخيار Hot Reload on File Save من قائمة Hot Reload لتطبيق التغييرات على التطبيق قيد التشغيل كلما قمت بتغيير ملف.

تهانينا! لقد أنشأت المكون الأول واستخدمته على صفحة Blazor.

إضافة محتوى ونمط إلى لوحة اللعبة

لنبدأ في تعريف لوحة لعبة مع الأعمدة السبعة والصفوف الستة. ثم أضف نمطا صغيرا لإضفاء الحيوية على لوحتنا.

في ملف Board.razor ، قم بإزالة HTML في الأعلى وأضف المحتوى التالي لتحديد لوحة بها 42 مكانا لقطع اللعبة.

يمكننا استخدام حلقة C#‎ for لإنشاء مواضع لوحة 42. يتم التقاط علامة الحاوية span وتكرارها بمحتوياتها 42 مرة لتمثيل لوحتنا.
```
<div>
   <div class="board">
      @for (var i = 0; i < 42; i++)
      {
         <span class="container">
            <span></span>
         </span>
      }
   </div>
</div>
```

عندما نحفظ مكون اللوحة، يتم تحديث تطبيقنا ويظهر كصفحة فارغة، وذلك بفضل وظيفة Hot Reload التي تعيد إنشاء التطبيق المحدث وتشغيله.

إشعار

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

تصميم المكون

دعونا نضيف بعض الأنماط إلى Board المكون عن طريق تحديد بعض الألوان لإطار اللوحة واللاعبين فوق العلامة الأولى div في ملف Board.razor :

<HeadContent>
    <style>
        :root {
            --board-bg: yellow;  /** the color of the board **/
            --player1: red;      /** Player 1's piece color **/
            --player2: blue;     /** Player 2's piece color **/
        }
    </style>
</HeadContent>

يتم التقاط متغيرات --board-bg--player1: red--player2: blue CSS هذه واستخدامها في بقية ورقة الأنماط لهذا المكون.

بعد ذلك، نضيف ورقة أنماط مكتملة للعبة Board إلى المكون.

انقر بزر الماوس الأيمن في مستكشف الحلول في مجلد Components وأنشئ ملف CSS جديدا يسمى Board.razor.css.

انسخ المحتوى التالي في ملف Board.razor.css الجديد:

div{position:relative}nav{top:4em;width:30em;display:inline-flex;flex-direction:row;margin-left:10px}nav span{width:4em;text-align:center;cursor:pointer;font-size:1em}div.board{margin-top:1em;flex-wrap:wrap;width:30em;height:24em;overflow:hidden;display:inline-flex;flex-direction:row;flex-wrap:wrap;z-index:-5;row-gap:0;pointer-events:none;border-left:10px solid var(--board-bg)}span.container{width:4em;height:4em;margin:0;padding:4px;overflow:hidden;background-color:transparent;position:relative;z-index:-2;pointer-events:none}.container span{width:3.5em;height:3.5em;border-radius:50%;box-shadow:0 0 0 3em var(--board-bg);left:0;position:absolute;display:block;z-index:5;pointer-events:none}.player1,.player2{width:3.5em;height:3.5em;border-radius:50%;left:0;top:0;position:absolute;display:block;z-index:-8}.player1{background-color:var(--player1);animation-timing-function:cubic-bezier(.5,.05,1,.5);animation-iteration-count:1;animation-fill-mode:forwards;box-shadow:0 0 0 4px var(--player1)}.player2{background-color:var(--player2);animation-timing-function:cubic-bezier(.5,.05,1,.5);animation-iteration-count:1;animation-fill-mode:forwards;box-shadow:0 0 0 4px var(--player2)}.col0{left:calc(0em + 9px)}.col1{left:calc(4em + 9px)}.col2{left:calc(8em + 9px)}.col3{left:calc(12em + 9px)}.col4{left:calc(16em + 9px)}.col5{left:calc(20em + 9px)}.col6{left:calc(24em + 9px)}.drop1{animation-duration:1s;animation-name:drop1}.drop2{animation-duration:1.5s;animation-name:drop2}.drop3{animation-duration:1.6s;animation-name:drop3}.drop4{animation-duration:1.7s;animation-name:drop4}.drop5{animation-duration:1.8s;animation-name:drop5}.drop6{animation-duration:1.9s;animation-name:drop6}@keyframes drop1{100%,75%,90%,97%{transform:translateY(1.27em)}80%{transform:translateY(.4em)}95%{transform:translateY(.8em)}99%{transform:translateY(1em)}}@keyframes drop2{100%,75%,90%,97%{transform:translateY(5.27em)}80%{transform:translateY(3.8em)}95%{transform:translateY(4.6em)}99%{transform:translateY(4.9em)}}@keyframes drop3{100%,75%,90%,97%{transform:translateY(9.27em)}80%{transform:translateY(7.2em)}95%{transform:translateY(8.3em)}99%{transform:translateY(8.8em)}}@keyframes drop4{100%,75%,90%,97%{transform:translateY(13.27em)}80%{transform:translateY(10.6em)}95%{transform:translateY(12em)}99%{transform:translateY(12.7em)}}@keyframes drop5{100%,75%,90%,97%{transform:translateY(17.27em)}80%{transform:translateY(14em)}95%{transform:translateY(15.7em)}99%{transform:translateY(16.5em)}}@keyframes drop6{100%,75%,90%,97%{transform:translateY(21.27em)}80%{transform:translateY(17.4em)}95%{transform:translateY(19.4em)}99%{transform:translateY(20.4em)}}

فيما يلي مجموعة مختارة من بعض CSS المستخدمة لتنسيق اللوحة و"الثقوب المثقبة" لكل من المساحات. يتوفر المزيد من المحتوى في ملف CSS لقطع اللعبة والرسوم المتحركة الخاصة بها على الشاشة.

div.board {
    margin-top: 1em;
    flex-wrap: wrap;
    width: 30em;
    height: 24em;
    overflow: hidden;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: -5;
    row-gap: 0;
    pointer-events: none;
    border-left: 10px solid var(--board-bg);
}

span.container {
    width: 4em;
    height: 4em;
    margin: 0;
    padding: 4px;
    overflow: hidden;
    background-color: transparent;
    position: relative;
    z-index: -2;
    pointer-events: none;
}

.container span {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    box-shadow: 0 0 0 3em var(--board-bg);
    left: 0px;
    position: absolute;
    display: block;
    z-index: 5;
    pointer-events: none;
}

يجب تحديث المستعرض نيابة عنك (إن لم يكن، يمكنك تحديث المتصفح يدويا باستخدام F5)، ويجب أن يتم استقبالك بلوحة Connect Four صفراء مناسبة:

لقطة شاشة للوحة توصيل صفراء بأربعة لوحات.

تهانينا، لديك الآن بداية اللعبة. في الوحدات اللاحقة، نضيف منطق اللعبة إليه.

الملاحظات

هل كانت هذه الصفحة مفيدة؟