Question

我刚接触画布，我正在尝试制作太空飞船类型的游戏。除了船转身之外，我还有其他一切想找的东西。我想在单击箭头键时旋转船的图像。

因此，如果单击左箭头键，它将转向左，而单击右箭头键将变成右，依此类推。我真的无法弄清楚，如果有人可以告诉我如何做到这一点，我将非常感激。


import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Link } from "react-router-dom";

function App() {
  const menuRef = useRef();

  const onDocumentClick = ({ target }) => {
    if (menuRef.current.contains(target)) {
      // event stops here if any action is taken
      // even an alert

      // comment this line to see the difference
      alert('This is not button\'s alert');
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", onDocumentClick);

    return () => {
      document.removeEventListener("mousedown", onDocumentClick);
    };
  }, []);

  return (
    <BrowserRouter>
      <div ref={menuRef} className="App">
        <Link to="/test">Not working</Link>
        <p>Button should show an alert saying 'clicked'</p>
        <button onClick={() => alert("clicked")}>Doesn't work</button>
      </div>

      <br/>
      <br/>
      <br/>

      <p>Outside of 'ref'</p>
      <Link to="/test">Works</Link>
      <p>........................</p>
      <button onClick={() => alert("clicked")}>Works</button>
    </BrowserRouter>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

在这方面，我认为您有两种选择。

您可以为要船面对的每个方向都有一个精灵，然后在绘制图像时，可以选择匹配的精灵。

if(left == true) {baseImage.src='xwing3left.png';}

您可以使用画布rotate() method。这会使事情变得更复杂，但实际上会旋转画布，并提供更多的实验机会。

它实际上在绘制之前将转换矩阵应用于画布，因此您可以执行以下操作：

context.rotate(45);
context.fillRect(x,y,width,height);

请小心，因为旋转总是围绕原点发生，因此您可能还需要使用transform（）使其按您期望的方式工作。

希望这会有所帮助！：）

如何使用箭头键旋转/变换图像

1 个答案: