在本系列中，您将学习如何使React和Redux控件成为一组SVG元素来创建游戏。通过本系列获得的知识还将允许您创建由React和Redux编排的其他类型的动画，而不仅仅是游戏。您可以在下面的GitHub存储库中找到本文开发的最终代码：外星人回家-第2部分反应游戏：外星人，回家！你将在这个系列中开发的游戏叫做外星人，回家！这个游戏的想法很简单，你将有一门大炮，家庭人工智能，并将不得不杀死试图入侵地球的飞行物体。要杀死这些飞行物体，你必须指向并点击SVG画布，让你的大炮发射。如果你很好奇，你可以在这里找到最后的游戏。但是不要玩太多，你还有工作要做！"我正在创建一个包含React、Redux和SVG元素的游戏。"在推特上留言之前，在第1部分在本系列的第一部分中，您已经使用createreact app引导react应用程序，并且已经安装并配置了Redux来管理游戏状态。之后，您将学习如何在创建天空、地面、炮台和炮筒等游戏元素的同时，将SVG与React组件一起使用。最后，您通过使用事件侦听器和JavaScript间隔来触发更新炮筒角度的重复操作，为您的加农炮添加了瞄准功能。这些操作为理解如何使用React、Redux和SVG创建游戏（和其他动画）铺平了道路。注意：如果出于任何原因，您没有在本系列文章的第一部分中创建代码，那么您可以简单地从这个GitHub存储库中克隆它。克隆后，您将能够按照下面各节中的说明进行操作。创建更多SVG React组件下面的小节将向您展示如何创建其余的游戏元素。虽然它们看起来很长，但它们非常简单和相似。你甚至可以在几分钟内按照指示操作。在本节之后，您将找到本系列这一部分中最有趣的主题。这些主题的标题是使飞行物体随机出现和使用CSS动画来移动飞行物体。创建炮弹反应组件您将创建的下一个元素是炮弹。请注意，目前，您将保持此元素无生命。但别担心！很快（在创造了所有其他元素之后），你将使你的大炮发射多个炮弹并杀死一些外星人。要创建此组件，请添加一个名为炮弹.jsx在./src/components目录中使用以下代码：从"React"导入React；从"prop types"导入PropTypes；const炮弹=（道具）=>{常量ballStyle={填充："#777"，笔划："#444"，淘客返利，strokeWidth:'2px'，};返回();};炮弹.propTypes= {职位：PropTypes.shape({十：需要PropTypes.number.is,是的：需要PropTypes.number.is}).是必需的，};导出默认炮弹；如您所见，要使炮弹出现在画布中，必须向其传递包含x和y属性的对象。如果你对道具类型没有太多的经验，这可能是你第一次使用PropTypes.shape. 幸运的是，这个特性是不言而喻的。创建此组件后，您可能希望在画布上看到它。为此，只需在Canvas组件的svg元素中添加以下标记（您还需要从'./CannonBall'；）添加import CannonBall：请记住，如果您在占据相同位置的元素之前添加它，您将看不到它。所以，为了安全起见，只需将它添加为最后一个元素（就在之后）。然后，您可以在web浏览器中打开游戏以查看新组件。如果你不记得怎么做，你只需要在项目根目录下运行npmstart，然后打开：3000在您的首选浏览器中。另外，在继续之前，不要忘记将这些代码提交到您的存储库中。创建当前分数反应组件您必须创建的另一个React组件是CurrentScore。顾名思义，您将使用此组件向用户显示他们当前的分数。也就是说，每当他们杀死一个飞行物体时，你的游戏会将这个组件的值增加一个并显示给他们。在创建这个组件之前，您可能需要添加一些整洁的字体来使用它。实际上，你可能需要在整个游戏中配置和使用字体，这样它看起来就不会像一个单调的游戏。您可以从任何地方浏览并选择一种字体，但是如果您不想为此花费时间，只需在/src的顶部添加以下行即可/索引.css文件：@导入url（'https://fonts.googleapis.com/css？家庭=工作+一'）；/*其他规则。。。*/这将使你的游戏从谷歌加载Joti One字体。之后，您可以创建当前分数.jsx包含以下组件的目录/src/code：从"React"导入React；从"prop types"导入PropTypes；当前属性=（当前分数=）{常数scoreStyle={fontFamily:'"Joti One"，草书'，字体大小：80，填充物："#d6d33e"，};返回({道具得分});};CurrentScore.propTypes公司= {分数：需要PropTypes.number.is,};导出默认CurrentScore；注意：如果您还没有配置Joti One（或配置了其他字体），则必须相应地更改此代码。除此之外，您将创建的其他组件也将使用此字体，因此请记住，您可能还必须更新这些组件。如您所见，CurrentScore组件需要一个属性：score。由于您的游戏当前不计算分数，淘客链接，要立即查看此组件，您必须添加一个硬编码值。因此，在Canvas组件中，添加作为svg元素中的最后一个元素。另外，添加import语句来获取此组件（从'./CurrentScore'；）导入CurrentScore）。如果现在尝试查看新组件，则无法查看。这是因为您的组件正在使用一个名为shadow的过滤器。虽然这个影子过滤器是不必要的，它会使你的游戏看起来更好。除此之外，向SVG元素添加阴影也很容易。为此，只需在svg的顶部添加以下元素：最后，画布组件将如下所示：从"React"导入React；从"prop types"导入PropTypes；从'./Sky'导入天空；从'./Ground'导入地面；从'./CannonBase'导入炮台；从"./CannonPipe"导入CannonPipe；从'./CannonBall'导入炮弹；从'./CurrentScore'导入CurrentScore；const Canvas=（道具）=>{常量视图框=[窗口.内宽度/-2100-窗户内高, 窗口.内宽度, 窗户内高];返回();};画布.propTypes= {角度：需要PropTypes.number.is,轨迹鼠标：属性类型,};导出默认画布；你的游戏会是这样的：不错啊？！创建飞行物体反应组件现在创建React组件来表示飞行对象怎么样？飞行物体不是圆，也不是矩形。它们通常有两部分（顶部和底部），这些部分通常是圆形的。这就是为什么要使用两个React组件来创建飞行对象：FlyingObjectBase和FlyingObjectTop。其中一个组件将使用Bezier三次曲线来定义其形状。另一个是椭圆。可以从创建第一个FlyingObjectBase开始，该文件名为FlyingObjectBase.jsx在./src/components目录中。以下是定义此组件的代码：从"React"导入React；从"prop types"导入PropTypes；const FlyingObjectBase=（道具）=>{常量样式={填充："#979797"，冲程："#5c5c5c"，};返回();};FlyingObjectBase.propTypes= {职位：PropTypes.shape({十：需要PropTypes.number.is,是的：需要PropTypes.number.is}).是必需的，};导出默认的FlyingObjectBase；之后，可以定义飞行物体的顶部。为此，软件企业优惠，创建一个名为FlyingObjectTop.jsx在./src/components目录中添加以下代码：从"React"导入React；从"prop types"导入PropTypes；从"../utils/formulas"导入{pathFromBezierCurve}；const FlyingObjectTop=（道具）=>{常量样式={填充：'#b6b6b6'，行程："#7d7d7d"，};常数baseWith=40；常数半基=20；常数高度=25；常数cubicBezierCurve={初始轴：{十：道具位置.x-半基，淘客app制作，是的：道具位置是的，},初始控制点：{x： 10个，y： -高度，},结束控制点：{x： 30岁，y： -高度，},结束轴：{x： 基本上，y： 0，},};返回();};FlyingObjectTop.propTypes= {职位：PropTypes.sh类