我可以添加什么代码来使这个图像在按下左键或右键时旋转？

Question

我希望我的 "GamePiece" 在我按下键盘上的左键或右键时在其中心点旋转。我是一名学习者，正在学校学习 javascript。我看过类似的文章，但发现它们确实令人困惑。我可能不会在接下来的 18 小时内回复，因为我是在晚上写这篇文章。

JavaScript:

var myGamePiece;
var myBackground;


function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "GamePiece.png", 10, 500, "image");
    myBackground = new component(656, 270, "PLACE IMAGE HERE", 0, 0, "image");
    var button = document.getElementById("Play");
    button.style.display = "none";  
}

var myGameArea = {
    canvas : document.getElementById("myCanvas"),
    start : function() {
        this.canvas.width = 1300;
        this.canvas.height = 600;
        this.canvas.style.position = "absolute";
        this.canvas.style.top = "267px";
        this.canvas.style.left = "303px";
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type === "keydown");
        });
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type === "keydown");            
        });
    }, 
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
};

function component(width, height, color, x, y, type) {
    this.type = type;
    if (type === "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        context = myGameArea.context;
        if (type === "image") {
            context.drawImage(this.image, 
                this.x, 
                this.y,
                this.width, this.height);
        } else {
            context.fillStyle = color;
            context.fillRect(this.x, this.y, this.width, this.height);
        }
    };
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    };
}


function updateGameArea() {
    myGameArea.clear();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;    
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
    myGamePiece.newPos();    
    myGamePiece.update();
    myBackground.newPos();
    myBackground.update();
}

我想要一个圆形图像（"GamePiece"）在按下按键时从中心旋转。

抱歉我没说清楚 我想让球像在地上滚动一样旋转。这是一个二维平台。 Like This one我希望只要按住按钮球就会滚动

Answer 1

如果您将 canvas 想象成一张可以四处移动但您的笔是静止不动的纸，则可以更容易地想象旋转图像的工作原理。您将整个 canvas 移动到您想要旋转的点（图像的坐标），将 canvas 旋转您想要旋转的量，将笔向后和向上拉图像大小的一半（因此中心位于您旋转的点上），然后正常绘制图像。现在，当您将 canvas/paper 重置到其原始位置时，图像仍会按照您想要的位置和旋转方向绘制在 canvas 上。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var square1 = {
  x: 50,
  y: 50,
  w: 50,
  h: 25,
  rotation: -25
};
var square2 = {
  x: 150,
  y: 50,
  w: 50,
  h: 50,
  rotation: 45
};

drawSquare(square1);
drawSquare(square2);

function drawSquare(square) {
  ctx.save(); //saves the original state of the canvas
  ctx.translate(square.x, square.y); //moves the canvas to the object's point of origin
  ctx.rotate(square.rotation * Math.PI / 180); //rotates the canvas the desired amount
  ctx.fillRect(-(square.w / 2), -(square.h / 2), square.w, square.h); //draws the object
  ctx.restore(); //restores the canvas to its original position
}

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

至于按键旋转，它的工作方式与您的移动相同。为每个旋转对象存储一个值，然后根据所需的旋转速度递增该值。

Answer 2

您真的只需要使用 addEventListener 来监听 document 上的 keydown 事件。如果 keydown 事件触发，您的事件处理程序应检查按下的键是否为右箭头按钮 - 您可以通过访问 e.keyCode 并检查它是否等于 39 来实现此目的 -如果是，请设置图像 style.transform 属性使其旋转。

e 是传递给事件处理程序的参数（浏览器负责为您传递 e）——它包含有关您正在侦听的事件的大量元数据。

下面是我上面描述的示例：

const imgEl = document.querySelector('#imgEl');
let offset = 0;

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 39) {
    offset += 90;
    if (offset === 360) {
      offset = 0;
    }
    rotate(imgEl, offset);
  } else if (e.keyCode === 37) {
    offset -= 90;
    if (offset === -360) {
      offset = 0;
    }
    rotate(imgEl, offset);
  }
});

function rotate(el, degrees) {
  // Code for Safari
  el.style.WebkitTransform = `rotate(${degrees}deg)`;
  // Code for IE9
  el.style.msTransform = `rotate(${degrees}deg)`;
  // Standard syntax
  el.style.transform = `rotate(${degrees}deg)`;
}

<img id="imgEl" src="https://static-s.aa-cdn.net/img/ios/1037581527/890273ca9f97b338cd84ab01f7549bc2?v=1">

我可以添加什么代码来使这个图像在按下左键或右键时旋转？

What code can I add to this to make this image rotate when left or right keys pressed?

javascript

html5-canvas

image-rotation