在本系列中，您将学习如何使React和Redux控件成为一组SVG元素来创建游戏。通过本系列获得的知识还将允许您创建由React和Redux编排的其他类型的动画，而不仅仅是游戏。您可以在下面的GitHub存储库中找到本文开发的最终代码：外星人回家-第3部分反应游戏：外星人，回家！你将在这个系列中开发的游戏叫做外星人，回家！这个游戏的想法很简单，大数据网站，你将有一门大炮，并将不得不杀死试图入侵地球的飞行物体。要杀死这些飞行物体，你必须指向并点击SVG画布，让你的大炮发射。如果你很好奇，你可以在这里找到最后的游戏。但是不要玩太多，你还有工作要做！"我正在创建一个包含React、Redux和SVG元素的游戏。"在推特上留言之前，在第1部分和第2部分在本系列的第一部分中，您已经使用createreact app引导react应用程序，并且已经安装并配置了Redux来管理游戏状态。之后，您将学习如何在创建天空、地面、炮台和炮筒等游戏元素的同时，将SVG与React组件一起使用。最后，您通过使用事件侦听器和JavaScript间隔来触发更新炮筒角度的重复操作，为您的加农炮添加了瞄准功能。这些操作为理解如何使用React、Redux和SVG创建游戏（和其他动画）铺平了道路。在第二部分中，您已经创建了游戏中需要的其他元素（例如心脏、飞行对象和炮弹），使您的玩家能够开始游戏，并使用CSS动画使飞行物体飞行（这就是他们做得对吗？）。虽然这些都是很棒的功能，企业云服务器，但他们还没有成为一个完整的游戏。你仍然需要让你的大炮发射炮弹，并实现一个算法来检测这些炮弹和飞行物体之间的碰撞。除此之外，当你的玩家杀死一些外星人时，你必须增加CurrentScore组件。杀死外星人并看到目前的分数增加是很酷的，但你可能可以使这个游戏更有吸引力。这就是为什么你要在游戏中添加排行榜功能。这将使你的玩家花更多的时间去尝试进入排行榜的顶端。有了这些功能，你可以说你有一个完整的游戏。所以，在不浪费更多时间的情况下，是时候关注他们了。注意：如果（无论出于什么原因）您没有在本系列的前两部分中创建代码，您可以简单地从这个GitHub存储库中克隆它。克隆后，您将能够按照下面各节中的说明进行操作。在React游戏中实现排行榜功能要使你的游戏看起来像真正的游戏，你要做的第一件事就是实现排行榜功能。此功能将使玩家能够登录，因此您的游戏可以跟踪他们的最高分数和显示他们的排名。集成React和Auth0要使Auth0管理玩家的身份，您必须拥有Auth0帐户。如果你还没有，你可以在这里注册一个免费的Auth0帐户。创建帐户后，您只需创建一个Auth0应用程序来代表您的游戏。为此，请转到Auth0仪表板上的"应用程序"页面，然后单击"创建应用程序"按钮。仪表板将显示一个窗体，您必须在其中通知应用程序的名称及其类型。你可以输入外星人，回家！作为名称并选择单页Web应用程序类型（您的游戏毕竟是基于React的SPA）。然后，您可以单击"创建"。当您单击此按钮时，仪表板将重定向到新应用程序的"快速入门"选项卡。在本文中，您将了解如何集成React和Auth0，因此不需要使用此选项卡。相反，您将需要使用"设置"选项卡，因此请直接使用它。在这个选项卡中，您需要做三件事。第一个是添加：将值设置为"允许回调URL"字段。正如仪表板所解释的，在播放器进行身份验证之后，Auth0将只回调该字段中的一个url。所以，如果你要在网上发布你的游戏，一定要在网上加上它的公共网址（例如。).在这个字段上输入完所有的url后，点击Save按钮或按ctrl+s（如果您使用的是MacBook，则需要按command+s）。您需要做的最后两件事是从Domain和clientid字段复制值。但是，在使用这些值之前，物联网竞赛，您需要编写一些代码。首先，您需要在游戏的根目录中发出以下命令才能安装auth0 web包：npm一auth0网站@1.7.0正如您将看到的，这个包促进了Auth0和spa之间的集成。下一步是在游戏中添加登录按钮，这样玩家就可以通过Auth0进行身份验证。为此，请创建一个名为登录名.jsx在./src/components目录中使用以下代码：从"React"导入React；从"prop types"导入PropTypes；const Login=（道具）=>{常量按钮={x： -300，//半宽y： -600，//减表示向上（大于0）宽度：600，高度：300，风格：{fill:'透明'，cursor:'指针'，},单击：道具认证,};常量文本={textAnchor:'中间'，//居中x： 0，//相对于x轴居中y： -440，//440以上风格：{fontFamily:'"Joti One"，草书'，字体大小：45，填充："#e3e3e3"，cursor:'指针'，},单击：道具认证,};返回(登录参与！);};登录名.propTypes= {身份验证：属性类型,};导出默认登录名；您刚刚创建的组件在单击时将执行的操作是不可知的。您将在将此操作添加到画布组件时定义该操作。所以，打开画布.jsx归档并更新如下：// ... 其他进口对账单从'./Login'导入登录名；从"auth0 web"导入{signIn}；const Canvas=（道具）=>{// ... 常量定义返回(// ... 其他要素{ ! props.gameState.started&&// ... 开始名称和标题组件}// ... flyingObjects.map);};// ... propTypes定义和导出语句如您所见，在这个新版本中，您导入了auth0web包的登录组件和signIn函数。然后，将新组件添加到代码块中，该代码块仅在玩家尚未开始游戏时显示。另外，您已经指出，图数据库有哪些，当单击login按钮时，必须触发signIn函数。完成这些更改后，最后一件事就是使用auth0应用程序属性配置auth0web。为此，请打开应用程序js归档并更新如下：// ... 其他进口对账单从'Auth0 web'导入*为Auth0；Auth0.配置({domain:'您的'u AUTH0'域'，clientID:'您的\u AUTH0_CLIENT_ID'，重定向URI:：3000/'，responseType:'令牌id_token'，scope:'openid配置文件管理：点',});类应用程序扩展组件{// ... 构造函数定义组件didmount（）{const self=这个；Auth0.handleAuthCallback（）；Auth0.subscribe（（auth）=>{控制台.log（授权）；});// ... setInterval和onresize}// ... 轨迹鼠标和渲染功能}// ... propTypes定义和导出语句注意：您必须用从AUTH0应用程序的DOMAIN和CLIENT ID字段复制的值来替换您的AUTH0域和客户端ID。除此之外，在将游戏发布到web上时，还必须替换redirectUri值。这个文件中的增强非常简单。此列表对它们进行了总结：配置：您使用此函数配置auth0应用程序属性的auth0 web包。handleAuthCallback：您在componentDidMount生命周期钩子中触发了此函数，教育大数据，以评估玩家在验证后是否从Auth0返回。这个函数只是尝试从URL获取令牌，如果成功，则获取播放器配置文件并将所有内容保存在localstorage中。subscribe：您使用此函数记录播放器是否经过身份验证（true表示已验证，否则为false）。就这样，你的游戏已经在使用Auth0作为其身份管理服务。如果你现在运行你的应用程序（npmstart）并在你的浏览器中找到它(：3000），您将看到登录按钮。单击它将重定向到Auth0登录页，您可以在那里登录。完成登录过程后，Auth0将再次将您重定向到游戏，在那里handleAuthCallback函数将获取您的令牌。然后，就像你告诉你的应用程序一样控制台.log对身份验证状态的任何更改，您都可以在浏览器控制台中看到它记录为true。"使用AuthLess 0即可确保游戏安全。"在推特上留言创建排行榜反应组件现在您已经将Auth0配置为您的身份管理系统，您将需要创建将显示当前玩家的排行榜和最高分数的组件。为此，您将创建两个组件：排行榜和排名。您需要将这个特性分成两个部分，因为正如您将看到的，以一种好的方式显示玩家的数据（如最大分数、姓名、位置和图片）并不是那么简单。这也不难，但是你必须输入大量的代码。因此，将所有内容添加到一个组件中会使其看起来像块