پروژه – بازی های MMO – انجمن DEV

سلام به همه! نام من رناردو ویلیامز است و این وبلاگ درباره برنامه وب من MMO Games است.

برنامه بازی های MMO کاتالوگی از بازی های (MMO) است که در حال حاضر زنده و پر رونق هستند. صفحه بندی شده با استفاده از React JavaScript، React Bootstrap و CSS توسعه یافته است، پروژه MMO Games فهرستی متمرکز از عناوین جذاب را برای شما به ارمغان می آورد. چه یک بازیکن باتجربه یا یک تازه وارد کنجکاو باشید، می توانید از این برنامه برای کشف تجربه بعدی MMO خود استفاده کنید.

بازی‌های MMO با استفاده از جاوا اسکریپت React ساخته شده‌اند. این یک چارچوب و کتابخانه است که منبع باز است که توسط فیس بوک توسعه داده شده است. برای ساخت رابط های کاربری تعاملی و برنامه های کاربردی وب به سرعت و کارآمد با کد بسیار کمتری نسبت به جاوا اسکریپت وانیلی استفاده می شود.

برای ایجاد یک برنامه React جدید، می‌توانید یکی از روش‌های زیر را انتخاب کنید:

npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app

پشت صحنه برنامه وب من یک فایل db.json است که از JSON (JavaScript Object Notation) API یک رابط برنامه نویسی کاربردی است که برای تبادل سبک داده ها (فرمت مبادله داده مبتنی بر متن) بین دو برنامه کامپیوتری که روی یک دستگاه سخت افزاری کار می کنند طراحی شده است. یا بین کامپیوترهای مختلف در مناطق جغرافیایی مختلف.

در زمینه بازی های MMO، من از API برای بازیابی لیستی از بازی ها برای پر کردن برنامه استفاده کردم. یک نسخه اصلاح شده از API عمومی MMO Games برای ساخت سرور فاز 2 پروژه استفاده شد. API مورد استفاده برای صفحه.

fetch(`http://localhost:3001/games/`)
   .then(data => data.json())

مزایای React JavaScript

اجزاء

به شما اجازه می دهد UI را به قطعات مستقل و قابل استفاده مجدد تقسیم کنید و در مورد هر قطعه جداگانه فکر کنید. کامپوننت‌ها می‌توانند کارهای زیادی را انجام دهند، اما هدف نهایی آنها همیشه یکسان است: همه آنها باید حاوی یک قطعه کد باشند که توضیح دهد چه چیزی باید در DOM ارائه شود.
از نظر مفهومی، کامپوننت ها مانند توابع جاوا اسکریپت هستند. آن‌ها ورودی‌های دلخواه را می‌پذیرند (به نام «props») و عناصر React را برمی‌گردانند که توضیح می‌دهد چه چیزی باید روی صفحه نمایش داده شود.

قلاب

useState بیشتر اوقات در برنامه بازی های MMO استفاده می شود، در مورد وضعیت React صحبت کنید. وضعیت داده‌ای است که در مؤلفه شما پویا است: در طول زمان با تعامل کاربران با برنامه شما تغییر می‌کند. وضعیت یک کامپوننت، بر خلاف پایه های یک جزء، می تواند در طول عمر کامپوننت تغییر کند.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

اینجا، useState یک قلاب است. ما آن را در داخل یک تابع فراخوانی می کنیم تا مقداری حالت محلی به آن اضافه کنیم. React این حالت را بین رندرهای مجدد حفظ می کند. useState یک جفت را برمی گرداند: مقدار وضعیت فعلی و تابعی که به شما امکان می دهد آن را به روز کنید. می توانید این تابع را از یک رویداد کنترل کننده یا جای دیگری فراخوانی کنید.

را useEffect هوک به شما امکان می دهد عوارض جانبی را در اجزای عملکرد انجام دهید:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

با استفاده از این هوک، به React می‌گویید که کامپوننت شما باید بعد از رندر کاری انجام دهد. React تابعی را که پاس داده‌اید به خاطر می‌آورد (از آن به عنوان «اثر» خود یاد می‌کنیم)، و بعد از انجام به‌روزرسانی‌های DOM، آن را فراخوانی می‌کند. در این افکت، عنوان سند را تنظیم می‌کنیم، اما می‌توانیم واکشی داده‌ها را نیز انجام دهیم یا برخی API ضروری دیگر را فراخوانی کنیم.

مسیریابی سمت مشتری

برنامه بازی های MMO از “مسیریابی سمت مشتری” با استفاده از React Router استفاده می کند.

در وب‌سایت‌های سنتی، مرورگر یک سند را از سرور وب درخواست می‌کند، دارایی‌های CSS و JavaScript را دانلود و ارزیابی می‌کند و HTML ارسال شده از سرور را ارائه می‌کند. هنگامی که کاربر روی یک لینک کلیک می کند، فرآیند را دوباره برای یک صفحه جدید شروع می کند.

مسیریابی سمت سرویس گیرنده به برنامه شما اجازه می دهد تا URL را با کلیک روی پیوند بدون درخواست دیگری برای سند دیگری از سرور به روز کند. در عوض، برنامه شما می‌تواند فوراً برخی از رابط‌های کاربری جدید را ارائه کند و درخواست‌های داده را با واکشی برای به‌روزرسانی صفحه با اطلاعات جدید ارائه کند.

این امکان تجربه سریع‌تر کاربر را فراهم می‌کند زیرا مرورگر نیازی به درخواست یک سند کاملاً جدید یا ارزیابی مجدد دارایی‌های CSS و جاوا اسکریپت برای صفحه بعدی ندارد. همچنین تجربیات کاربر پویاتری را با چیزهایی مانند انیمیشن امکان پذیر می کند.

مسیریابی سمت کلاینت با ایجاد یک روتر و پیوند دادن/ارائه به صفحات دارای لینک و

:

import * as React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "https://dev.to/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

لینک رپو پروژه من اینجاست:

https://github.com/Renardo1985/Phase-2-Project.git

MMO Games پروژه Phase-2 Flatiron School من است. من همیشه قصد دارم با یادگیری بیشتر ویژگی ها و ارتقاها را اضافه کنم. من از بازخورد در مورد پروژه ها قدردانی می کنم. مشتاقانه منتظر رشد و انجام پروژه های بسیار بیشتر در آینده هستیم! ممنون و لذت ببرید!

وام
https://legacy.reactjs.org/docs/components-and-props.html
https://create-react-app.dev/docs/getting-started/
https://my.learn.co/courses/652/pages/react-components-basics?module_item_id=86197
https://my.learn.co/courses/652/pages/react-state?module_item_id=86213
https://legacy.reactjs.org/docs/hooks-effect.html
https://reactrouter.com/en/main/start/overview
https://www.pcgamesn.com/10-best-pc-mmos