用React，Redux和SVG开发游戏--3

2024-01-15 08:04:40

本系列文章将会向您展示如何利用React和Redux控制一堆SVG元素来打造出一款游戏。其中的知识也能被运用到构建其他类型的动画当中，并不局限于游戏。该系列文章中所开发的最终代码可以在此GitHub代码仓库内找到：Ali…

设定场景

在该系列文章的第二部分中，我们已经创建了一个基本的React应用程序，并添加了一些SVG元素。在这一部分，我们将创建一个移动平台，并让它可以在屏幕上移动。

创建平台

首先，创建一个名为Platform.js的新文件。在该文件中，导入必要的库，包括React、ReactDOM、和styled-components。然后，创建一个名为Platform的组件，并将其导出。

import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const Platform = () => {
  const platformRef = useRef();

  useEffect(() => {
    const platform = platformRef.current;
    const movePlatform = (e) => {
      if (e.key === "ArrowLeft") {
        platform.style.left = `${parseInt(platform.style.left) - 10}px`;
      } else if (e.key === "ArrowRight") {
        platform.style.left = `${parseInt(platform.style.left) + 10}px`;
      }
    };
    document.addEventListener("keydown", movePlatform);
    return () => {
      document.removeEventListener("keydown", movePlatform);
    };
  }, []);

  return (
    <PlatformWrapper ref={platformRef}>
      <PlatformShape />
    </PlatformWrapper>
  );
};

const PlatformWrapper = styled.div`
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
`;

const PlatformShape = styled.svg`
  width: 100px;
  height: 20px;
  background-color: #000;
`;

export default Platform;

添加CSS动画

现在，让我们添加一些CSS动画和过渡来让平台移动起来。在项目中的style.css文件中，添加以下代码：

.platform {
  animation: move-platform 1s infinite alternate;
}

@keyframes move-platform {
  from {
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

这将使平台在屏幕上左右移动，并同时放大和缩小。

添加键盘控制

接下来，让我们添加键盘控制来控制平台的移动。在Platform.js文件中，在useEffect()钩子中添加以下代码：

const movePlatform = (e) => {
  if (e.key === "ArrowLeft") {
    platform.style.left = `${parseInt(platform.style.left) - 10}px`;
  } else if (e.key === "ArrowRight") {
    platform.style.left = `${parseInt(platform.style.left) + 10}px`;
  }
};